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     // Tag reset {{{
 129     table
 130         padding: 0
 131         font-size: 13px
 132         border-collapse: collapse
 133     thead
 134         font-weight: bold
 135         background-color: #f0f0f0
 136         th
 137             border-right: 1px dotted #afafb6
 138             &:last-child
 139                 border-right: none
 140     th, td
 141         padding: 0
 142         line-height: 18px
 143         text-align: left
 144     th
 145         font-weight: bold
 146         vertical-align: middle
 147
 148     td
 149         vertical-align: top
 150
 151     .zebra tbody tr:nth-child(odd) td
 152         background-color: #f0f0fa
 153         @include vertical-gradient(#f0f0fa, #eeeef6)
 154
 155     .zebra tbody tr:hover td
 156         @include vertical-gradient(#eee, #dedede)
 157
 158     .numeric
 159         text-align: right
 160         width: 82px
 161         input
 162             text-align: right
 163     ul, li
 164         margin: 0
 165         padding: 0
 166
 167     li
 168         list-style-type: none
 169     // }}}
 170
 171
 172     // }}}
 173     // Generic classes {{{
 174     .oe_left
 175         float: left
 176     .oe_right
 177         float: right
 178     .oe_clear
 179         clear: both
 180     // }}}
 181     // Fullscreen mode {{{
 182     .oe_content_full_screen
 183         .oe_application
 184             top: 0
 185             left: 0
 186         .topbar, .leftbar
 187             display: none
 188     // }}}
 189     // Webclient {{{
 190     .oe_webclient
 191         width: 100%
 192         height: 100%
 193     // }}}
 194     // Topbar {{{
 195     .oe_topbar
 196         width: 100%
 197         height: 31px
 198         border-top: solid 1px #d3d3d3
 199         border-bottom: solid 1px black
 200         @include vertical-gradient(#646060, #262626)
 201
 202         .oe_systray
 203             float: right
 204         .oe_systray > div
 205             float: left
 206             padding: 0 4px 0 4px
 207
 208         .oe_topbar_item
 209             li
 210                 float: left
 211                 a
 212                     display: block
 213                     padding: 5px 10px 7px
 214                     line-height: 20px
 215                     height: 20px
 216                     color: #eee
 217                     vertical-align: top
 218                     text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 219                     &:hover
 220                         background: #303030
 221                         color: white
 222                         @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 223             .oe_active
 224                 background: #303030
 225                 font-weight: bold
 226                 color: white
 227                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 228
 229         .oe_topbar_avatar
 230             width: 24px
 231             height: 24px
 232             margin: -2px 2px 0 0
 233             @include radius(4px)
 234         .oe_topbar_avatar
 235             vertical-align: top
 236         .oe_dropdown_toggle:after
 237             width: 0
 238             height: 0
 239             display: inline-block
 240             content: "&darr"
 241             text-indent: -99999px
 242             vertical-align: top
 243             margin-top: 8px
 244             margin-left: 4px
 245             border-left: 4px solid transparent
 246             border-right: 4px solid transparent
 247             border-top: 4px solid white
 248             @include opacity(0.5)
 249     // }}}
 250     // TopBarUserMenu {{{
 251     .oe_user_menu
 252         float: right
 253         padding: 0
 254         margin: 0
 255         li
 256             list-style-type: none
 257             float: left
 258         .oe_dropdown
 259             position: relative
 260         .oe_dropdown_options
 261             float: left
 262             background: #333
 263             background: rgba(37,37,37,0.9)
 264             display: none
 265             position: absolute
 266             top: 32px
 267             right: -1px
 268             border: 0
 269             z-index: 900
 270             margin-left: 0
 271             margin-right: 0
 272             padding: 6px 0
 273             zoom: 1
 274             border-color: #999
 275             border-color: rgba(0, 0, 0, 0.2)
 276             border-style: solid
 277             border-width: 0 1px 1px
 278             @include radius(0 0 6px 6px)
 279             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 280             @include background-clip()
 281             li
 282                 float: none
 283                 display: block
 284                 background-color: none
 285                 a
 286                     display: block
 287                     padding: 4px 15px
 288                     clear: both
 289                     font-weight: normal
 290                     line-height: 18px
 291                     color: #eee
 292                     &:hover
 293                         @include vertical-gradient(#292929, #191919)
 294                         @include box-shadow(none)
 295     // }}}
 296     // Leftbar {{{
 297     .oe_leftbar
 298         width: 220px
 299         background: #f0eeee
 300         border-right: 1px solid #afafb6
 301         text-shadow: 0 1px 1px white
 302     a.oe_logo
 303         width: 220px
 304         display: block
 305         text-align: center
 306         height: 70px
 307         line-height: 70px
 308         img
 309             height: 40px
 310             width: 157px
 311             margin: 14px 0
 312     .oe_footer
 313         position: fixed
 314         bottom: 0
 315         padding: 4px 0
 316         background: #f0eeee
 317         width: 220px
 318         text-align: center
 319         a
 320             font-weight: 800
 321             font-family: serif
 322             font-size: 16px
 323             color: black
 324             span
 325                 color: #c81010
 326                 font-style: italic
 327     // }}}
 328     // Menu {{{
 329     .oe_menu
 330         float: left
 331         padding: 0
 332         margin: 0
 333         li
 334             float: left
 335         a
 336             display: block
 337             padding: 5px 10px 7px
 338             line-height: 20px
 339             height: 20px
 340             color: #eee
 341             vertical-align: top
 342             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 343             &:hover
 344                 background: #303030
 345                 color: white
 346                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 347         .oe_active
 348             background: #303030
 349             font-weight: bold
 350             color: white
 351             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 352     .oe_menu_more_container
 353         position: relative
 354         .oe_menu_more
 355             position: absolute
 356             padding: 0
 357             background-color: #646060
 358             z-index: 1
 359             border: 1px solid black
 360             border-bottom-left-radius: 5px
 361             border-bottom-right-radius: 5px
 362             li
 363                 float: none
 364                 a
 365                     white-space: nowrap
 366     .oe_secondary_menu_section
 367         font-weight: bold
 368         margin-left: 8px
 369         color: $colour4
 370     .oe_secondary_submenu
 371         padding: 2px 0 8px 0
 372         margin: 0
 373         width: 100%
 374         display: inline-block
 375         li
 376             position: relative
 377             padding: 1px 0 1px 16px
 378             a
 379                 display: block
 380                 color: #4c4c4c
 381                 padding: 2px 4px 2px 0
 382             .oe_menu_label
 383                 position: absolute
 384                 top: 1px
 385                 right: 1px
 386                 font-size: 10px
 387                 background: $colour4
 388                 color: white
 389                 padding: 2px 4px
 390                 margin: 1px 6px 0 0
 391                 border: 1px solid lightGray
 392                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 393                 @include radius(4px)
 394                 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 395         .oe_active
 396             background: $colour4
 397             border-top: 1px solid lightGray
 398             border-bottom: 1px solid lightGray
 399             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 400             @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 401             a
 402                 color: white
 403             .oe_menu_label
 404                 background: #eee
 405                 color: $colour4
 406                 text-shadow: 0 1px 1px white
 407                 @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
 408         .oe_menu_toggler:before
 409             width: 0
 410             height: 0
 411             display: inline-block
 412             content: "&darr"
 413             text-indent: -99999px
 414             vertical-align: top
 415             margin-left: -8px
 416             margin-top: 4px
 417             margin-right: 4px
 418             border-top: 4px solid transparent
 419             border-bottom: 4px solid transparent
 420             border-left: 4px solid #4c4c4c
 421             @include opacity(0.5)
 422         .oe_menu_opened:before
 423             margin-top: 6px
 424             margin-left: -12px
 425             margin-right: 4px
 426             border-left: 4px solid transparent
 427             border-right: 4px solid transparent
 428             border-top: 4px solid #4c4c4c
 429     // }}}
 430     // Main {{{
 431     .oe_main
 432         width: 100%
 433         height: 100%
 434         border-spacing: 0px
 435     // }}}
 436     // Application to rename into action {{{
 437     .oe_application
 438         width: 100%
 439         a
 440             color: $colour4
 441             &:hover
 442                 text-decoration: underline
 443     // }}}
 444     // FormView Layout {{{
 445     .oe_form
 446         label
 447             font-weight: bold
 448     .oe_form_topbar
 449         border-bottom: 1px solid #cacaca
 450         @include vertical-gradient(#fcfcfc, #dedede)
 451         padding: 0 8px
 452         line-height: 30px
 453         button
 454             font-size: 12px
 455             height: 24px
 456             line-height: 24px
 457             vertical-align: top
 458             padding: 0 10px
 459             margin: 3px 0
 460             span.i
 461                 line-height: 20px
 462                 height: 24px
 463         ul
 464             height: 30px
 465             padding: 0
 466             margin: 0
 467             text-shadow: 0 1px 1px white
 468             border-left: 1px solid #cacaca
 469             border-right: 1px solid #cacaca
 470             li
 471                 padding: 0
 472                 margin: 0
 473                 float: left
 474                 vertical-align: top
 475                 border-right: 1px solid #cacaca
 476                 height: 30px
 477                 padding: 0 12px
 478                 &:first-child
 479                     border-left: 1px solid #cacaca
 480                 a
 481                     color: #4c4c4c
 482                     &:hover
 483                         color: black
 484         .oe_form_steps
 485             img
 486                 margin: 0 8px
 487                 vertical-align: top
 488             li
 489                 border-right: none
 490                 padding: 0
 491                 &:first-child
 492                     margin-left: 12px
 493                     border-left: none
 494                 &:last-child
 495                     margin-right: 12px
 496         .oe_form_steps_active
 497             font-weight: bold
 498             color: #b33630
 499     .oe_form_sheetbg
 500         background: url(/web/static/src/img/form_sheetbg.png)
 501         padding: 8px
 502         border-bottom: 1px solid #ddd
 503     .oe_form_sheet_width
 504         min-width: 650px
 505         max-width: 880px
 506         margin: 0 auto
 507     .oe_form_sheet
 508         padding-top: 8px
 509         background: white
 510         min-height: 420px
 511         border: 1px solid #afafb6
 512         @include box-shadow(0 0 10px rgba(0,0,0,0.3))
 513         //.avatar
 514         //    max-height: 52px
 515         //.contacts
 516         //    li
 517         //        float: left
 518         //        width: 33%
 519         //        margin-bottom: 4px
 520         //    .avatar
 521         //        height: 40px
 522         //        width: 40px
 523         //        border: 1px solid
 524         //        border-color: #e5e5e5 #dbdbdb #d2d2d2
 525         //    .data
 526         //        padding: 2px
 527         //        line-height: 18px
 528     .oe_form_header
 529         padding: 4px 16px
 530     .oe_form_group_cell
 531         line-height: 18px
 532         .oe_form_button
 533             width: 100%
 534             white-space: nowrap
 535     .oe_layout_debugging
 536         .oe_form_group
 537             border: 2px dashed red
 538         .oe_form_group_cell
 539             border: 1px solid blue
 540             padding-bottom: 1em
 541         .oe_layout_debug_cell
 542             color: white
 543             background: #696
 544             font-size: 80%
 545             text-align: center
 546         .oe_layout_debug_cell
 547             display: block
 548     .oe_layout_debug_cell
 549         display: none
 550
 551     .oe_form_notebook
 552         margin: 8px 0
 553         padding: 0 8px
 554         list-style: none
 555         zoom: 1
 556     .oe_form_notebook:before, .oe_form_notebook:after
 557         display: table
 558         content: ""
 559         zoom: 1
 560     .oe_form_notebook:after
 561         clear: both
 562     .oe_form_notebook > li
 563         float: left
 564     .oe_form_notebook > li > a
 565         display: block
 566         color: #4c4c4c
 567     .oe_form_notebook
 568         border-color: #ddd
 569         border-style: solid
 570         border-width: 0 0 1px
 571     .oe_form_notebook > li
 572         position: relative
 573         margin-bottom: -1px
 574     .oe_form_notebook > li > a
 575         padding: 0 12px
 576         margin-right: 2px
 577         line-height: 30px
 578         border: 1px solid transparent
 579         @include radius(4px 4px 0 0)
 580     .oe_form_notebook > li > a:hover
 581         text-decoration: none
 582         background-color: #eee
 583         border-color: #eee #eee #ddd
 584     .oe_form_notebook > li.ui-state-active > a, .oe_form_notebook > li.ui-state-active > a:hover
 585         background-color: #ffffff
 586         border: 1px solid #ddd
 587         border-bottom-color: transparent
 588         cursor: default
 589
 590     // }}}
 591     // Kanban view {{{
 592     .oe_kanban_group_title
 593         margin: 1px 1px 4px
 594         font-size: 15px
 595         font-weight: bold
 596         text-shadow: 0 1px 0 white
 597     .oe_kanban_column, .oe_kanban_group_header
 598         width: 240px
 599         vertical-align: top
 600         padding: 6px 7px 6px 6px
 601         background: #f0eeee
 602         border-left: 1px solid #f0f8f8
 603         border-right: 1px solid #b9b9b9
 604     .oe_kanban_record
 605         position: relative
 606         display: block
 607         min-height: 50px
 608         background: white
 609         border: 1px solid #d8d8d8
 610         border-bottom-color: #b9b9b9
 611         padding: 6px
 612         margin: 6px 0
 613         display: block
 614         @include radius(4px)
 615         &:last-child
 616             margin-bottom: 0
 617         &:hover
 618             @include box-shadow(0 0 3px rgba(0,0,0,0.6))
 619         .oe_kanban_title
 620             font-weight: bold
 621             margin: 2px 4px
 622     .oe_kanban_gravatar
 623         width: 20px
 624         height: 20px
 625         @include radius(3px)
 626         @include box-shadow(0 1px 2px rgba(0,0,0,0.2))
 627     // }}}
 628
 629     // Application to rename into action {{{
 630     .oe_application
 631         a
 632             color: $colour4
 633             &:hover
 634                 text-decoration: underline
 635     // }}}
 636
 637 // Transitional overrides for old styles {{{
 638 .openerp
 639     .oe_form_field_many2one
 640         td:first-child
 641             position: relative
 642         span.oe-m2o-drop-down-button
 643             position: absolute
 644             top: 3px
 645             right: 2px
 646 // }}}
 647
 648 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 649 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
 650