addons/web/static/src/css/base.sass

   1 // Variables {{{
   2 $colour4: #8a89ba
   3 //$colour4: #d14836
   4 // }}}
   5
   6 // Mixins {{{
   7 @mixin vertical-gradient($startColor: #555, $endColor: #333)
   8     background-color: $startColor
   9     background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
  10     background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
  11     background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
  12     background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
  13     background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
  14     background-image:         linear-gradient(to bottom, $startColor, $endColor)
  15
  16
  17 @mixin radial-gradient($gradient)
  18     background-position: center center
  19     background-image: -webkit-radial-gradient(circle, $gradient)
  20     background-image: -moz-radial-gradient($gradient)
  21     background-image: -ms-radial-gradient($gradient)
  22     background-image: radial-gradient($gradient)
  23
  24 @mixin radius($radius: 5px)
  25     -moz-border-radius: $radius
  26     -webkit-border-radius: $radius
  27     border-radius: $radius
  28
  29 @mixin box-shadow($bsval: 0px 1px 4px #777)
  30     -moz-box-shadow: $bsval
  31     -webkit-box-shadow: $bsval
  32     -box-shadow: $bsval
  33
  34 @mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
  35     -webkit-transition: $transval
  36     -moz-transition: $transval
  37     -ms-transition: $transval
  38     -o-transition: $transval
  39     transition: $transval
  40
  41 @mixin opacity($opacity: .5)
  42     filter: alpha(opacity=$opacity * 100)
  43     opacity: $opacity
  44
  45 @mixin background-clip($clip: padding-box)
  46     -webkit-background-clip: $clip
  47     -moz-background-clip: $clip
  48     background-clip: $clip
  49 // }}}
  50
  51 .openerp2
  52     // Common styles {{{
  53     padding: 0
  54     margin: 0
  55     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
  56     color: #4c4c4c
  57     font-size: 13px
  58     background: white
  59     position: relative
  60
  61     a
  62         text-decoration: none
  63     // }}}
  64
  65     // WebClient {{{
  66     .oe_webclient
  67         .oe_application
  68             position: absolute
  69             top: 33px
  70             bottom: 0
  71             left: 222px
  72             right: 0
  73             a
  74                 color: $colour4
  75                 &:hover
  76                     text-decoration: underline
  77     // }}}
  78
  79     // Fullscreen mode {{{
  80     .oe_content_full_screen
  81         .oe_application
  82             top: 0
  83             left: 0
  84         .topbar, .leftbar
  85             display: none
  86     // }}}
  87
  88     // Topbar {{{
  89     .oe_topbar
  90         width: 100%
  91         height: 31px
  92         border-top: solid 1px #d3d3d3
  93         border-bottom: solid 1px black
  94         @include vertical-gradient(#646060, #262626)
  95
  96         .oe_systray
  97             float: right
  98         .oe_systray > div
  99             float: left
 100             padding: 0 4px 0 4px
 101
 102         .oe_topbar_item
 103             li
 104                 float: left
 105                 a
 106                     display: block
 107                     padding: 5px 10px 7px
 108                     line-height: 20px
 109                     height: 20px
 110                     color: #eee
 111                     vertical-align: top
 112                     text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 113                     &:hover
 114                         background: #303030
 115                         color: white
 116                         @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 117             .oe_active
 118                 background: #303030
 119                 font-weight: bold
 120                 color: white
 121                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 122
 123         .oe_topbar_avatar
 124             width: 24px
 125             height: 24px
 126             margin: -2px 2px 0 0
 127             @include radius(4px)
 128         .oe_topbar_avatar
 129             vertical-align: top
 130     // }}}
 131
 132     // Leftbar {{{
 133     .oe_leftbarbg
 134         position: fixed
 135         width: 220px
 136         top: 0
 137         left: 0
 138         height: 100%
 139         background: #f0eeee
 140         border-right: 1px solid #afafb6
 141         z-index: -1
 142     .oe_leftbar
 143         float: left
 144         width: 221px
 145         text-shadow: 0 1px 1px white
 146     a.oe_logo
 147         display: block
 148         text-align: center
 149         height: 70px
 150         line-height: 70px
 151         img
 152             height: 40px
 153             width: 157px
 154             margin: 14px 0
 155     .oe_footer
 156         position: fixed
 157         bottom: 0
 158         padding: 4px 0
 159         background: #f0eeee
 160         width: 220px
 161         text-align: center
 162         a
 163             font-weight: 800
 164             font-family: serif
 165             font-size: 16px
 166             color: black
 167             span
 168                 color: #c81010
 169                 font-style: italic
 170     // }}}
 171
 172     // Menu {{{
 173     .oe_menu
 174         float: left
 175         padding: 0
 176         margin: 0
 177         li
 178             list-style-type: none
 179             float: left
 180         a
 181             display: block
 182             padding: 5px 10px 7px
 183             line-height: 20px
 184             height: 20px
 185             color: #eee
 186             vertical-align: top
 187             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 188             &:hover
 189                 background: #303030
 190                 color: white
 191                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 192         .oe_active
 193             background: #303030
 194             font-weight: bold
 195             color: white
 196             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 197     .oe_secondary_menu_section
 198         font-weight: bold
 199         margin-left: 8px
 200         color: $colour4
 201     .oe_secondary_submenu
 202         padding: 2px 0 8px 0
 203         margin: 0
 204         width: 100%
 205         display: inline-block
 206         li
 207             position: relative
 208             padding: 1px 0 1px 16px
 209             list-style-type: none
 210             a
 211                 display: block
 212                 color: #4c4c4c
 213                 padding: 2px 4px 2px 0
 214             .oe_menu_label
 215                 position: absolute
 216                 top: 1px
 217                 right: 1px
 218                 font-size: 10px
 219                 background: $colour4
 220                 color: white
 221                 padding: 2px 4px
 222                 margin: 1px 6px 0 0
 223                 border: 1px solid lightGray
 224                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 225                 @include radius(4px)
 226                 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 227         .oe_active
 228             background: $colour4
 229             border-top: 1px solid lightGray
 230             border-bottom: 1px solid lightGray
 231             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 232             @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 233             a
 234                 color: white
 235             .oe_menu_label
 236                 background: #eee
 237                 color: $colour4
 238                 text-shadow: 0 1px 1px white
 239                 @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
 240         .oe_menu_toggler:before
 241             width: 0
 242             height: 0
 243             display: inline-block
 244             content: "&darr"
 245             text-indent: -99999px
 246             vertical-align: top
 247             margin-left: -8px
 248             margin-top: 4px
 249             margin-right: 4px
 250             border-top: 4px solid transparent
 251             border-bottom: 4px solid transparent
 252             border-left: 4px solid #4c4c4c
 253             @include opacity(0.5)
 254         .oe_menu_opened:before
 255             margin-top: 6px
 256             margin-left: -12px
 257             margin-right: 4px
 258             border-left: 4px solid transparent
 259             border-right: 4px solid transparent
 260             border-top: 4px solid #4c4c4c
 261     // }}}
 262
 263     // UserMenu {{{
 264     .oe_user_menu
 265         float: right
 266         padding: 0
 267         margin: 0
 268         li
 269             list-style-type: none
 270             float: left
 271         .oe_dropdown
 272             position: relative
 273
 274         .oe_dropdown_toggle:after
 275             width: 0
 276             height: 0
 277             display: inline-block
 278             content: "&darr"
 279             text-indent: -99999px
 280             vertical-align: top
 281             margin-top: 8px
 282             margin-left: 4px
 283             border-left: 4px solid transparent
 284             border-right: 4px solid transparent
 285             border-top: 4px solid white
 286             @include opacity(0.5)
 287
 288         .oe_dropdown_options
 289             float: left
 290             background: #333
 291             background: rgba(37,37,37,0.9)
 292             display: none
 293             position: absolute
 294             top: 32px
 295             right: -1px
 296             border: 0
 297             z-index: 900
 298             margin-left: 0
 299             margin-right: 0
 300             padding: 6px 0
 301             zoom: 1
 302             border-color: #999
 303             border-color: rgba(0, 0, 0, 0.2)
 304             border-style: solid
 305             border-width: 0 1px 1px
 306             @include radius(0 0 6px 6px)
 307             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 308             @include background-clip()
 309             li
 310                 float: none
 311                 display: block
 312                 background-color: none
 313                 a
 314                     display: block
 315                     padding: 4px 15px
 316                     clear: both
 317                     font-weight: normal
 318                     line-height: 18px
 319                     color: #eee
 320                     &:hover
 321                         @include vertical-gradient(#292929, #191919)
 322                         @include box-shadow(none)
 323     // }}}
 324
 325     // FormView Widgets {{{
 326     .oe_form_label_help[for], .oe_form_label[for]
 327         white-space: nowrap
 328     .oe_form_group_cell
 329         .oe_form_button
 330             width: 100%
 331             white-space: nowrap
 332     .oe_layout_debugging
 333         .oe_form_group
 334             border: 1px solid red
 335         .oe_form_group_cell
 336             border: 1px solid blue
 337             padding-bottom: 1em
 338         .oe_layout_debug_cell
 339             position: absolute
 340             color: white
 341             bottom: 0
 342             left: 0
 343             background: green
 344         .oe_layout_debug_cell
 345             display: block
 346     .oe_layout_debug_cell
 347         display: none
 348     // }}}
 349
 350 // Transitional overrides for old styles {{{
 351 .openerp
 352     .oe_form_field_many2one
 353         td:first
 354             position: relative
 355         span.oe-m2o-drop-down-button
 356             position: absolute
 357             top: 3px
 358             right: 2px
 359 // }}}
 360
 361 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 362 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: