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

   1
   2 // Variables {{{
   3 $colour4: #8a89ba
   4 //$colour4: #d14836
   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     // Global style {{{
  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     // buttons
  65     a.button:link, a.button:visited, button, input[type='submit']
  66         display: inline-block
  67         border: 1px solid #ababab
  68         color: #404040
  69         margin: 0
  70         padding: 4px 12px
  71         font-size: 13px
  72         text-align: center
  73         @include vertical-gradient(#efefef, #d8d8d8)
  74         @include radius(3px)
  75         @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
  76         text-shadow: 0 1px 1px rgba(255, 255, 255, .5)
  77         -webkit-font-smoothing: antialiased
  78         outline: none
  79
  80     a.button:hover, button:hover, input[type='submit']:hover
  81         @include vertical-gradient(#f6f6f6, #e3e3e3)
  82         cursor: pointer
  83
  84     a.button:focus, button:focus, input[type='submit']:focus
  85         border: 1px solid #80bfff
  86         @include vertical-gradient(#f6f6f6, #e3e3e3)
  87         @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))
  88
  89     a.button:active, a.button.active, button:active, button.active, input[type='submit']:active, input[type='submit'].active
  90         background: #e3e3e3
  91         background: -moz-linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f
  92         background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f6f6f6)) #1b468f
  93         background: linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f
  94         @include box-shadow(none)
  95
  96     a.button.disabled, button:disabled, input[type='submit']:disabled
  97         background: #efefef !important
  98         border: 1px solid #d1d1d1 !important
  99         @include box-shadow(none !important)
 100         color: #aaa !important
 101         cursor: default
 102         text-shadow: 0 1px 1px #fff !important
 103
 104     button.primary
 105         color: white
 106         @include vertical-gradient(#dc5f59, #b33630)
 107         @include box-shadow(none)
 108
 109     button.primary:hover
 110         @include vertical-gradient(lighten(#dc5f59, 3%), lighten(#b33630, 3%))
 111         @include box-shadow(0 0 1px rgba(0,0,0,0.2))
 112
 113     button.primary:active
 114         @include vertical-gradient(#b33630, #dc5f59)
 115         @include box-shadow(none)
 116
 117     button.following
 118         color: white
 119         width: 90px
 120         @include vertical-gradient($colour4, darken($colour4, 3%))
 121
 122     button.unfollow
 123         display: none
 124         color: white
 125         width: 90px
 126         @include vertical-gradient(#dc5f59, #b33630)
 127
 128
 129
 130     // }}}
 131     // Generic classes {{{
 132     .oe_left
 133         float: left
 134     .oe_right
 135         float: right
 136     .oe_clear
 137         clear: both
 138     // }}}
 139     // Fullscreen mode {{{
 140     .oe_content_full_screen
 141         .oe_application
 142             top: 0
 143             left: 0
 144         .topbar, .leftbar
 145             display: none
 146     // }}}
 147     // Webclient {{{
 148     .oe_webclient
 149         width: 100%
 150         height: 100%
 151     // }}}
 152     // Topbar {{{
 153     .oe_topbar
 154         width: 100%
 155         height: 31px
 156         border-top: solid 1px #d3d3d3
 157         border-bottom: solid 1px black
 158         @include vertical-gradient(#646060, #262626)
 159
 160         .oe_systray
 161             float: right
 162         .oe_systray > div
 163             float: left
 164             padding: 0 4px 0 4px
 165
 166         .oe_topbar_item
 167             li
 168                 float: left
 169                 a
 170                     display: block
 171                     padding: 5px 10px 7px
 172                     line-height: 20px
 173                     height: 20px
 174                     color: #eee
 175                     vertical-align: top
 176                     text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 177                     &:hover
 178                         background: #303030
 179                         color: white
 180                         @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 181             .oe_active
 182                 background: #303030
 183                 font-weight: bold
 184                 color: white
 185                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 186
 187         .oe_topbar_avatar
 188             width: 24px
 189             height: 24px
 190             margin: -2px 2px 0 0
 191             @include radius(4px)
 192         .oe_topbar_avatar
 193             vertical-align: top
 194     // }}}
 195     // TopBarUserMenu {{{
 196     .oe_user_menu
 197         float: right
 198         padding: 0
 199         margin: 0
 200         li
 201             list-style-type: none
 202             float: left
 203         .oe_dropdown
 204             position: relative
 205
 206         .oe_dropdown_toggle:after
 207             width: 0
 208             height: 0
 209             display: inline-block
 210             content: "&darr"
 211             text-indent: -99999px
 212             vertical-align: top
 213             margin-top: 8px
 214             margin-left: 4px
 215             border-left: 4px solid transparent
 216             border-right: 4px solid transparent
 217             border-top: 4px solid white
 218             @include opacity(0.5)
 219
 220         .oe_dropdown_options
 221             float: left
 222             background: #333
 223             background: rgba(37,37,37,0.9)
 224             display: none
 225             position: absolute
 226             top: 32px
 227             right: -1px
 228             border: 0
 229             z-index: 900
 230             margin-left: 0
 231             margin-right: 0
 232             padding: 6px 0
 233             zoom: 1
 234             border-color: #999
 235             border-color: rgba(0, 0, 0, 0.2)
 236             border-style: solid
 237             border-width: 0 1px 1px
 238             @include radius(0 0 6px 6px)
 239             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 240             @include background-clip()
 241             li
 242                 float: none
 243                 display: block
 244                 background-color: none
 245                 a
 246                     display: block
 247                     padding: 4px 15px
 248                     clear: both
 249                     font-weight: normal
 250                     line-height: 18px
 251                     color: #eee
 252                     &:hover
 253                         @include vertical-gradient(#292929, #191919)
 254                         @include box-shadow(none)
 255     // }}}
 256     // Leftbar {{{
 257     .oe_leftbar
 258         width: 221px
 259         background: #f0eeee
 260         border-right: 1px solid #afafb6
 261         text-shadow: 0 1px 1px white
 262     a.oe_logo
 263         display: block
 264         text-align: center
 265         height: 70px
 266         line-height: 70px
 267         img
 268             height: 40px
 269             width: 157px
 270             margin: 14px 0
 271     .oe_footer
 272         position: fixed
 273         bottom: 0
 274         padding: 4px 0
 275         background: #f0eeee
 276         width: 220px
 277         text-align: center
 278         a
 279             font-weight: 800
 280             font-family: serif
 281             font-size: 16px
 282             color: black
 283             span
 284                 color: #c81010
 285                 font-style: italic
 286     // }}}
 287     // Menu {{{
 288     .oe_menu
 289         float: left
 290         padding: 0
 291         margin: 0
 292         li
 293             list-style-type: none
 294             float: left
 295         a
 296             display: block
 297             padding: 5px 10px 7px
 298             line-height: 20px
 299             height: 20px
 300             color: #eee
 301             vertical-align: top
 302             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 303             &:hover
 304                 background: #303030
 305                 color: white
 306                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 307         .oe_active
 308             background: #303030
 309             font-weight: bold
 310             color: white
 311             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 312     .oe_menu_more_container
 313         position: relative
 314         .oe_menu_more
 315             position: absolute
 316             padding: 0
 317             background-color: #646060
 318             z-index: 1
 319             border: 1px solid black
 320             border-bottom-left-radius: 5px
 321             border-bottom-right-radius: 5px
 322             li
 323                 float: none
 324                 a
 325                     white-space: nowrap
 326     .oe_secondary_menu_section
 327         font-weight: bold
 328         margin-left: 8px
 329         color: $colour4
 330     .oe_secondary_submenu
 331         padding: 2px 0 8px 0
 332         margin: 0
 333         width: 100%
 334         display: inline-block
 335         li
 336             position: relative
 337             padding: 1px 0 1px 16px
 338             list-style-type: none
 339             a
 340                 display: block
 341                 color: #4c4c4c
 342                 padding: 2px 4px 2px 0
 343             .oe_menu_label
 344                 position: absolute
 345                 top: 1px
 346                 right: 1px
 347                 font-size: 10px
 348                 background: $colour4
 349                 color: white
 350                 padding: 2px 4px
 351                 margin: 1px 6px 0 0
 352                 border: 1px solid lightGray
 353                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 354                 @include radius(4px)
 355                 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 356         .oe_active
 357             background: $colour4
 358             border-top: 1px solid lightGray
 359             border-bottom: 1px solid lightGray
 360             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 361             @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 362             a
 363                 color: white
 364             .oe_menu_label
 365                 background: #eee
 366                 color: $colour4
 367                 text-shadow: 0 1px 1px white
 368                 @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
 369         .oe_menu_toggler:before
 370             width: 0
 371             height: 0
 372             display: inline-block
 373             content: "&darr"
 374             text-indent: -99999px
 375             vertical-align: top
 376             margin-left: -8px
 377             margin-top: 4px
 378             margin-right: 4px
 379             border-top: 4px solid transparent
 380             border-bottom: 4px solid transparent
 381             border-left: 4px solid #4c4c4c
 382             @include opacity(0.5)
 383         .oe_menu_opened:before
 384             margin-top: 6px
 385             margin-left: -12px
 386             margin-right: 4px
 387             border-left: 4px solid transparent
 388             border-right: 4px solid transparent
 389             border-top: 4px solid #4c4c4c
 390     // }}}
 391     // Main {{{
 392     .oe_main
 393         width: 100%
 394         height: 100%
 395         border-spacing: 0px
 396     // }}}
 397     // Application to rename into action {{{
 398     .oe_application
 399         a
 400             color: $colour4
 401             &:hover
 402                 text-decoration: underline
 403     // }}}
 404     // FormView Layout {{{
 405     .oe_form_form
 406         border: 1px solid black
 407         margin: 5%
 408         padding: 10px
 409     .oe_form_topbar
 410         border-bottom: 1px solid #cacaca
 411         @include vertical-gradient(#fcfcfc, #dedede)
 412         padding: 0 8px
 413         line-height: 30px
 414         button
 415             font-size: 12px
 416             height: 24px
 417             line-height: 24px
 418             vertical-align: top
 419             padding: 0 10px
 420             margin: 3px 0
 421             span.i
 422                 line-height: 20px
 423                 height: 24px
 424         ul
 425             height: 30px
 426             padding: 0
 427             margin: 0
 428             text-shadow: 0 1px 1px white
 429             border-left: 1px solid #cacaca
 430             border-right: 1px solid #cacaca
 431             li
 432                 padding: 0
 433                 margin: 0
 434                 list-style-type: none
 435                 float: left
 436                 vertical-align: top
 437                 border-right: 1px solid #cacaca
 438                 height: 30px
 439                 padding: 0 12px
 440                 &:first-child
 441                     border-left: 1px solid #cacaca
 442                 a
 443                     color: #4c4c4c
 444                     &:hover
 445                         color: black
 446         .oe_form_steps
 447             img
 448                 margin: 0 8px
 449                 vertical-align: top
 450             li
 451                 border-right: none
 452                 padding: 0
 453                 &:first-child
 454                     margin-left: 12px
 455                     border-left: none
 456                 &:last-child
 457                     margin-right: 12px
 458         .oe_form_steps_active
 459             font-weight: bold
 460             color: #b33630
 461
 462     .oe_form_group_cell
 463         .oe_form_button
 464             width: 100%
 465             white-space: nowrap
 466     .oe_layout_debugging
 467         .oe_form_group
 468             border: 2px dashed red
 469         .oe_form_group_cell
 470             border: 1px solid blue
 471             padding-bottom: 1em
 472         .oe_layout_debug_cell
 473             color: white
 474             background: #696
 475             font-size: 80%
 476             text-align: center
 477         .oe_layout_debug_cell
 478             display: block
 479     .oe_layout_debug_cell
 480         display: none
 481
 482
 483
 484     // }}}
 485     // FormView Widgets {{{
 486     .oe_form_label_help[for], .oe_form_label[for]
 487         white-space: nowrap
 488     // }}}
 489
 490 // Transitional overrides for old styles {{{
 491 .openerp
 492     .oe_form_field_many2one
 493         td:first-child
 494             position: relative
 495         span.oe-m2o-drop-down-button
 496             position: absolute
 497             top: 3px
 498             right: 2px
 499 // }}}
 500
 501 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 502 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: