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         .oe_dropdown_toggle:after
 195             width: 0
 196             height: 0
 197             display: inline-block
 198             content: "&darr"
 199             text-indent: -99999px
 200             vertical-align: top
 201             margin-top: 8px
 202             margin-left: 4px
 203             border-left: 4px solid transparent
 204             border-right: 4px solid transparent
 205             border-top: 4px solid white
 206             @include opacity(0.5)
 207     // }}}
 208     // TopBarUserMenu {{{
 209     .oe_user_menu
 210         float: right
 211         padding: 0
 212         margin: 0
 213         li
 214             list-style-type: none
 215             float: left
 216         .oe_dropdown
 217             position: relative
 218         .oe_dropdown_options
 219             float: left
 220             background: #333
 221             background: rgba(37,37,37,0.9)
 222             display: none
 223             position: absolute
 224             top: 32px
 225             right: -1px
 226             border: 0
 227             z-index: 900
 228             margin-left: 0
 229             margin-right: 0
 230             padding: 6px 0
 231             zoom: 1
 232             border-color: #999
 233             border-color: rgba(0, 0, 0, 0.2)
 234             border-style: solid
 235             border-width: 0 1px 1px
 236             @include radius(0 0 6px 6px)
 237             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 238             @include background-clip()
 239             li
 240                 float: none
 241                 display: block
 242                 background-color: none
 243                 a
 244                     display: block
 245                     padding: 4px 15px
 246                     clear: both
 247                     font-weight: normal
 248                     line-height: 18px
 249                     color: #eee
 250                     &:hover
 251                         @include vertical-gradient(#292929, #191919)
 252                         @include box-shadow(none)
 253     // }}}
 254     // Leftbar {{{
 255     .oe_leftbar
 256         width: 220px
 257         background: #f0eeee
 258         border-right: 1px solid #afafb6
 259         text-shadow: 0 1px 1px white
 260     a.oe_logo
 261         width: 220px
 262         display: block
 263         text-align: center
 264         height: 70px
 265         line-height: 70px
 266         img
 267             height: 40px
 268             width: 157px
 269             margin: 14px 0
 270     .oe_footer
 271         position: fixed
 272         bottom: 0
 273         padding: 4px 0
 274         background: #f0eeee
 275         width: 220px
 276         text-align: center
 277         a
 278             font-weight: 800
 279             font-family: serif
 280             font-size: 16px
 281             color: black
 282             span
 283                 color: #c81010
 284                 font-style: italic
 285     // }}}
 286     // Menu {{{
 287     .oe_menu
 288         float: left
 289         padding: 0
 290         margin: 0
 291         li
 292             list-style-type: none
 293             float: left
 294         a
 295             display: block
 296             padding: 5px 10px 7px
 297             line-height: 20px
 298             height: 20px
 299             color: #eee
 300             vertical-align: top
 301             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 302             &:hover
 303                 background: #303030
 304                 color: white
 305                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 306         .oe_active
 307             background: #303030
 308             font-weight: bold
 309             color: white
 310             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 311     .oe_menu_more_container
 312         position: relative
 313         .oe_menu_more
 314             position: absolute
 315             padding: 0
 316             background-color: #646060
 317             z-index: 1
 318             border: 1px solid black
 319             border-bottom-left-radius: 5px
 320             border-bottom-right-radius: 5px
 321             li
 322                 float: none
 323                 a
 324                     white-space: nowrap
 325     .oe_secondary_menu_section
 326         font-weight: bold
 327         margin-left: 8px
 328         color: $colour4
 329     .oe_secondary_submenu
 330         padding: 2px 0 8px 0
 331         margin: 0
 332         width: 100%
 333         display: inline-block
 334         li
 335             position: relative
 336             padding: 1px 0 1px 16px
 337             list-style-type: none
 338             a
 339                 display: block
 340                 color: #4c4c4c
 341                 padding: 2px 4px 2px 0
 342             .oe_menu_label
 343                 position: absolute
 344                 top: 1px
 345                 right: 1px
 346                 font-size: 10px
 347                 background: $colour4
 348                 color: white
 349                 padding: 2px 4px
 350                 margin: 1px 6px 0 0
 351                 border: 1px solid lightGray
 352                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 353                 @include radius(4px)
 354                 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 355         .oe_active
 356             background: $colour4
 357             border-top: 1px solid lightGray
 358             border-bottom: 1px solid lightGray
 359             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 360             @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 361             a
 362                 color: white
 363             .oe_menu_label
 364                 background: #eee
 365                 color: $colour4
 366                 text-shadow: 0 1px 1px white
 367                 @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
 368         .oe_menu_toggler:before
 369             width: 0
 370             height: 0
 371             display: inline-block
 372             content: "&darr"
 373             text-indent: -99999px
 374             vertical-align: top
 375             margin-left: -8px
 376             margin-top: 4px
 377             margin-right: 4px
 378             border-top: 4px solid transparent
 379             border-bottom: 4px solid transparent
 380             border-left: 4px solid #4c4c4c
 381             @include opacity(0.5)
 382         .oe_menu_opened:before
 383             margin-top: 6px
 384             margin-left: -12px
 385             margin-right: 4px
 386             border-left: 4px solid transparent
 387             border-right: 4px solid transparent
 388             border-top: 4px solid #4c4c4c
 389     // }}}
 390     // Main {{{
 391     .oe_main
 392         width: 100%
 393         height: 100%
 394         border-spacing: 0px
 395     // }}}
 396     // Application to rename into action {{{
 397     .oe_application
 398         width: 100%
 399         a
 400             color: $colour4
 401             &:hover
 402                 text-decoration: underline
 403     // }}}
 404     // FormView Layout {{{
 405     .oe_form
 406         label
 407             font-weight: bold
 408     .oe_form_topbar
 409         border-bottom: 1px solid #cacaca
 410         @include vertical-gradient(#fcfcfc, #dedede)
 411         padding: 0 8px
 412         line-height: 30px
 413         button
 414             font-size: 12px
 415             height: 24px
 416             line-height: 24px
 417             vertical-align: top
 418             padding: 0 10px
 419             margin: 3px 0
 420             span.i
 421                 line-height: 20px
 422                 height: 24px
 423         ul
 424             height: 30px
 425             padding: 0
 426             margin: 0
 427             text-shadow: 0 1px 1px white
 428             border-left: 1px solid #cacaca
 429             border-right: 1px solid #cacaca
 430             li
 431                 padding: 0
 432                 margin: 0
 433                 list-style-type: none
 434                 float: left
 435                 vertical-align: top
 436                 border-right: 1px solid #cacaca
 437                 height: 30px
 438                 padding: 0 12px
 439                 &:first-child
 440                     border-left: 1px solid #cacaca
 441                 a
 442                     color: #4c4c4c
 443                     &:hover
 444                         color: black
 445         .oe_form_steps
 446             img
 447                 margin: 0 8px
 448                 vertical-align: top
 449             li
 450                 border-right: none
 451                 padding: 0
 452                 &:first-child
 453                     margin-left: 12px
 454                     border-left: none
 455                 &:last-child
 456                     margin-right: 12px
 457         .oe_form_steps_active
 458             font-weight: bold
 459             color: #b33630
 460     .oe_form_sheetbg
 461         background: url(/web/static/src/img/form_sheetbg.png)
 462         padding: 8px
 463         border-bottom: 1px solid #ddd
 464     .oe_form_sheet_width
 465         min-width: 650px
 466         max-width: 880px
 467         margin: 0 auto
 468     .oe_form_sheet
 469         padding-top: 8px
 470         background: white
 471         min-height: 420px
 472         border: 1px solid #afafb6
 473         @include box-shadow(0 0 10px rgba(0,0,0,0.3))
 474         //.avatar
 475         //    max-height: 52px
 476         //.contacts
 477         //    li
 478         //        float: left
 479         //        width: 33%
 480         //        margin-bottom: 4px
 481         //    .avatar
 482         //        height: 40px
 483         //        width: 40px
 484         //        border: 1px solid
 485         //        border-color: #e5e5e5 #dbdbdb #d2d2d2
 486         //    .data
 487         //        padding: 2px
 488         //        line-height: 18px
 489     .oe_form_header
 490         padding: 4px 16px
 491     .oe_form_group_cell
 492         line-height: 18px
 493         .oe_form_button
 494             width: 100%
 495             white-space: nowrap
 496     .oe_layout_debugging
 497         .oe_form_group
 498             border: 2px dashed red
 499         .oe_form_group_cell
 500             border: 1px solid blue
 501             padding-bottom: 1em
 502         .oe_layout_debug_cell
 503             color: white
 504             background: #696
 505             font-size: 80%
 506             text-align: center
 507         .oe_layout_debug_cell
 508             display: block
 509     .oe_layout_debug_cell
 510         display: none
 511
 512     .oe_form_notebook
 513         margin: 8px 0
 514         padding: 0 8px
 515         list-style: none
 516         zoom: 1
 517     .oe_form_notebook:before, .oe_form_notebook:after
 518         display: table
 519         content: ""
 520         zoom: 1
 521     .oe_form_notebook:after
 522         clear: both
 523     .oe_form_notebook > li
 524         float: left
 525     .oe_form_notebook > li > a
 526         display: block
 527         color: #4c4c4c
 528     .oe_form_notebook
 529         border-color: #ddd
 530         border-style: solid
 531         border-width: 0 0 1px
 532     .oe_form_notebook > li
 533         position: relative
 534         margin-bottom: -1px
 535     .oe_form_notebook > li > a
 536         padding: 0 12px
 537         margin-right: 2px
 538         line-height: 30px
 539         border: 1px solid transparent
 540         @include radius(4px 4px 0 0)
 541     .oe_form_notebook > li > a:hover
 542         text-decoration: none
 543         background-color: #eee
 544         border-color: #eee #eee #ddd
 545     .oe_form_notebook > li.ui-state-active > a, .oe_form_notebook > li.ui-state-active > a:hover
 546         background-color: #ffffff
 547         border: 1px solid #ddd
 548         border-bottom-color: transparent
 549         cursor: default
 550
 551     // }}}
 552     // FormView Widgets {{{
 553     .oe_form_label_help[for], .oe_form_label[for]
 554         white-space: nowrap
 555     // }}}
 556
 557 // Transitional overrides for old styles {{{
 558 .openerp
 559     .oe_form_field_many2one
 560         td:first-child
 561             position: relative
 562         span.oe-m2o-drop-down-button
 563             position: absolute
 564             top: 3px
 565             right: 2px
 566 // }}}
 567
 568 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 569 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
 570