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

   1 @charset "utf-8"
   2
   3 // Variables {{{
   4 $section-title-color: #8786b7
   5 $facets-border: #afafb6
   6 $facets-border-selected: #a6a6fe
   7 $colour4: #8a89ba
   8 // }}}
   9 // Mixins {{{
  10 @font-face
  11     font-family: 'mnmliconsRegular'
  12     src: url('/web/static/src/font/mnmliconsv21-webfont.eot') format('eot')
  13     src: url('/web/static/src/font/mnmliconsv21-webfont.woff') format('woff')
  14     src: url('/web/static/src/font/mnmliconsv21-webfont.ttf') format('truetype')
  15     src: url('/web/static/src/font/mnmliconsv21-webfont.svg') format('svg') active
  16     font-weight: normal
  17     font-style: normal
  18
  19 @mixin vertical-gradient($startColor: #555, $endColor: #333)
  20     background-color: $startColor
  21     background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
  22     background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
  23     background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
  24     background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
  25     background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
  26     background-image:         linear-gradient(to bottom, $startColor, $endColor)
  27
  28
  29 @mixin radial-gradient($gradient)
  30     background-position: center center
  31     background-image: -webkit-radial-gradient(circle, $gradient)
  32     background-image: -moz-radial-gradient($gradient)
  33     background-image: -ms-radial-gradient($gradient)
  34     background-image: radial-gradient($gradient)
  35
  36 @mixin radius($radius: 5px)
  37     -moz-border-radius: $radius
  38     -webkit-border-radius: $radius
  39     border-radius: $radius
  40
  41 @mixin box-shadow($bsval: 0px 1px 4px #777)
  42     -moz-box-shadow: $bsval
  43     -webkit-box-shadow: $bsval
  44     -box-shadow: $bsval
  45
  46 @mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
  47     -webkit-transition: $transval
  48     -moz-transition: $transval
  49     -ms-transition: $transval
  50     -o-transition: $transval
  51     transition: $transval
  52
  53 @mixin opacity($opacity: .5)
  54     filter: alpha(opacity=$opacity * 100)
  55     opacity: $opacity
  56
  57 @mixin background-clip($clip: padding-box)
  58     -webkit-background-clip: $clip
  59     -moz-background-clip: $clip
  60     background-clip: $clip
  61
  62 @mixin unscrew-box
  63     -moz-box-sizing: border-box
  64     -webkit-box-sizing: border-box
  65     box-sizing: border-box
  66
  67 // }}}
  68
  69 .openerp2
  70     // {{{ Group
  71     // }}}
  72     // Global style {{{
  73     padding: 0
  74     margin: 0
  75     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
  76     color: #4c4c4c
  77     font-size: 13px
  78     background: white
  79     position: relative
  80     height: 100%
  81
  82     a
  83         text-decoration: none
  84     // }}}
  85     // Tag reset {{{
  86     table
  87         padding: 0
  88         font-size: 13px
  89         border-collapse: collapse
  90     thead
  91         font-weight: bold
  92         background-color: #f0f0f0
  93         th
  94             border-right: 1px dotted #afafb6
  95             &:last-child
  96                 border-right: none
  97     th, td
  98         padding: 0
  99         line-height: 18px
 100         text-align: left
 101     th
 102         font-weight: bold
 103         vertical-align: middle
 104     td
 105         vertical-align: top
 106     .zebra tbody tr:nth-child(odd) td
 107         background-color: #f0f0fa
 108         @include vertical-gradient(#f0f0fa, #eeeef6)
 109     .zebra tbody tr:hover td
 110         @include vertical-gradient(#eee, #dedede)
 111     .numeric
 112         text-align: right
 113         width: 82px
 114         input
 115             text-align: right
 116     ul, li, ol
 117         margin: 0
 118         padding: 0
 119     li
 120         list-style-type: none
 121     // }}}
 122     // Generic classes {{{
 123     .oe_i
 124         font-family: "mnmliconsRegular" !important
 125         font-size: 21px
 126         font-weight: 300 !important
 127     .oe_left
 128         float: left
 129     .oe_right
 130         float: right
 131     .oe_clear
 132         clear: both
 133     .oe_wait
 134         cursor: wait
 135     // }}}
 136     // Button style {{{
 137     a.button:link, a.button:visited, button, input[type='submit']
 138         display: inline-block
 139         border: 1px solid #ababab
 140         color: #404040
 141         margin: 0
 142         padding: 4px 12px
 143         font-size: 13px
 144         text-align: center
 145         @include vertical-gradient(#efefef, #d8d8d8)
 146         @include radius(3px)
 147         @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
 148         text-shadow: 0 1px 1px rgba(255, 255, 255, .5)
 149         -webkit-font-smoothing: antialiased
 150         outline: none
 151
 152     a.button:hover, button:hover, input[type='submit']:hover
 153         @include vertical-gradient(#f6f6f6, #e3e3e3)
 154         cursor: pointer
 155
 156     a.button:focus, button:focus, input[type='submit']:focus
 157         border: 1px solid #80bfff
 158         @include vertical-gradient(#f6f6f6, #e3e3e3)
 159         @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))
 160
 161     a.button:active, a.button.active, button:active, button.active, input[type='submit']:active, input[type='submit'].active
 162         background: #e3e3e3
 163         background: -moz-linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f
 164         background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f6f6f6)) #1b468f
 165         background: linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f
 166         @include box-shadow(none)
 167
 168     a.button.disabled, button:disabled, input[type='submit']:disabled
 169         background: #efefef !important
 170         border: 1px solid #d1d1d1 !important
 171         @include box-shadow(none !important)
 172         color: #aaa !important
 173         cursor: default
 174         text-shadow: 0 1px 1px #fff !important
 175
 176     button.primary
 177         color: white
 178         @include vertical-gradient(#dc5f59, #b33630)
 179         @include box-shadow(none)
 180
 181     button.primary:hover
 182         @include vertical-gradient(lighten(#dc5f59, 3%), lighten(#b33630, 3%))
 183         @include box-shadow(0 0 1px rgba(0,0,0,0.2))
 184
 185     button.primary:active
 186         @include vertical-gradient(#b33630, #dc5f59)
 187         @include box-shadow(none)
 188
 189     button.following
 190         color: white
 191         width: 90px
 192         @include vertical-gradient($colour4, darken($colour4, 3%))
 193
 194     button.unfollow
 195         display: none
 196         color: white
 197         width: 90px
 198         @include vertical-gradient(#dc5f59, #b33630)
 199
 200     // }}}
 201     // {{{ Loading
 202     .oe_loading
 203         display: none
 204         z-index: 100
 205         position: fixed
 206         top: 0
 207         right: 50%
 208         padding: 4px 12px
 209         background: #A61300
 210         color: white
 211         text-align: center
 212         border: 1px solid #900
 213         border-top: none
 214         -moz-border-radius-bottomright: 8px
 215         -moz-border-radius-bottomleft: 8px
 216         border-bottom-right-radius: 8px
 217         border-bottom-left-radius: 8px
 218     // }}}
 219     // {{{ Notification
 220     .oe_notification
 221         z-index: 1050
 222     // }}}
 223     // Login {{{
 224     .oe_login
 225         background: url("/web/static/src/img/pattern.png") repeat
 226         text-align: center
 227         font-size: 14px
 228         height: 100%
 229         li
 230             list-style-type: none
 231             padding-bottom: 4px
 232         button
 233             float: right
 234             display: inline-block
 235             cursor: pointer
 236             padding: 6px 16px
 237             border: 1px solid #222
 238             color: white
 239             margin: 0
 240             @include vertical-gradient(#b92020, #600606)
 241             @include radius(4px)
 242             @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
 243         input, select
 244             width: 252px
 245             font-family: "Lucida Grande", Helvetica, Verdana, Arial
 246             border: 1px solid #999999
 247             background: whitesmoke
 248             @include box-shadow(inset 0 1px 4px rgba(0, 0, 0, 0.3))
 249             @include radius(3px)
 250         input
 251             margin-bottom: 9px
 252             padding: 5px 6px
 253         select
 254             padding: 1px
 255         .oe_login_dbpane
 256             position: fixed
 257             top: 0
 258             right: 8px
 259             padding: 5px 10px
 260             color: #eee
 261             border: solid 1px #333
 262             background: #1e1e1e
 263             background: rgba(30,30,30,0.94)
 264             @include radius(0 0 8px 8px)
 265             input
 266                 padding: 2px 4px
 267                 margin: 4px 0
 268         .oe_login_bottom
 269             position: absolute
 270             top: 50%
 271             left: 0
 272             right: 0
 273             bottom: 0
 274             text-shadow: 0 1px 1px #999999
 275             @include vertical-gradient(#b41616, #600606)
 276         .oe_login_pane
 277             position: absolute
 278             top: 50%
 279             left: 50%
 280             margin: -160px -166px
 281             border: solid 1px #333333
 282             background: #1e1e1e
 283             background: rgba(30,30,30,0.94)
 284             padding: 22px 32px
 285             color: #eee
 286             text-align: left
 287             @include radius(8px)
 288             @include box-shadow(0 0 18px rgba(0, 0, 0, 0.9))
 289             h2
 290                 margin-top: 0
 291                 font-size: 18px
 292         .oe_login_logo
 293             position: absolute
 294             top: -70px
 295             left: 0
 296             width: 100%
 297             margin: 0 auto
 298             text-align: center
 299         .oe_login_footer
 300             position: absolute
 301             bottom: -40px
 302             left: 0
 303             width: 100%
 304             text-align: center
 305             a
 306                 color: #eee
 307                 margin: 0 8px
 308                 &:hover
 309                     text-decoration: underline
 310             span
 311                 font-weight: bold
 312                 font-size: 16px
 313         .oe_login_error_message
 314             display: none
 315             background-color: #b41616
 316             color: #eee
 317             padding: 14px 18px
 318             margin-top: 15px
 319             text-align: center
 320             @include radius(4px)
 321             @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.8))
 322         .oe_login_invalid
 323             .oe_login_error_message
 324                 display: inline-block
 325     // }}}
 326     // {{{ DatabaseManager
 327     .oe_database_manager
 328         background: #fff
 329         color: #000
 330         text-align: left
 331         .oe_database_manager_menu
 332             color: #000
 333     // }}}
 334     // WebClient {{{
 335     .oe_webclient
 336         width: 100%
 337         height: 100%
 338         border-spacing: 0px
 339     // }}}
 340     // WebClient.fullscreen {{{
 341     .oe_content_full_screen
 342         .oe_application
 343             top: 0
 344             left: 0
 345         .oe_topbar, .oe_leftbar
 346             display: none
 347     // }}}
 348     // WebClient.topbar {{{
 349     .oe_topbar
 350         width: 100%
 351         height: 31px
 352         border-top: solid 1px #d3d3d3
 353         border-bottom: solid 1px black
 354         @include vertical-gradient(#646060, #262626)
 355
 356         .oe_systray
 357             float: right
 358         .oe_systray > div
 359             float: left
 360             padding: 0 4px 0 4px
 361
 362         .oe_topbar_item
 363             li
 364                 float: left
 365                 a
 366                     display: block
 367                     padding: 5px 10px 7px
 368                     line-height: 20px
 369                     height: 20px
 370                     color: #eee
 371                     vertical-align: top
 372                     text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 373                     &:hover
 374                         background: #303030
 375                         color: white
 376                         @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 377             .oe_active
 378                 background: #303030
 379                 font-weight: bold
 380                 color: white
 381                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 382
 383         .oe_topbar_avatar
 384             width: 24px
 385             height: 24px
 386             margin: -2px 2px 0 0
 387             @include radius(4px)
 388         .oe_topbar_avatar
 389             vertical-align: top
 390         .oe_dropdown_toggle:after
 391             width: 0
 392             height: 0
 393             display: inline-block
 394             content: "&darr"
 395             text-indent: -99999px
 396             vertical-align: top
 397             margin-top: 8px
 398             margin-left: 4px
 399             border-left: 4px solid transparent
 400             border-right: 4px solid transparent
 401             border-top: 4px solid white
 402             @include opacity(0.5)
 403     // }}}
 404     // Webclient.leftbar {{{
 405     .oe_leftbar
 406         width: 220px
 407         background: #f0eeee
 408         border-right: 1px solid #afafb6
 409         text-shadow: 0 1px 1px white
 410     a.oe_logo
 411         width: 220px
 412         display: block
 413         text-align: center
 414         height: 70px
 415         line-height: 70px
 416         img
 417             height: 40px
 418             width: 157px
 419             margin: 14px 0
 420     .oe_footer
 421         position: fixed
 422         bottom: 0
 423         padding: 4px 0
 424         background: #f0eeee
 425         width: 220px
 426         text-align: center
 427         a
 428             font-weight: 800
 429             font-family: serif
 430             font-size: 16px
 431             color: black
 432             span
 433                 color: #c81010
 434                 font-style: italic
 435     // }}}
 436     // UserMenu {{{
 437     .oe_user_menu
 438         float: right
 439         padding: 0
 440         margin: 0
 441         li
 442             list-style-type: none
 443             float: left
 444         .oe_dropdown
 445             position: relative
 446         .oe_dropdown_options
 447             float: left
 448             background: #333
 449             background: rgba(37,37,37,0.9)
 450             display: none
 451             position: absolute
 452             top: 32px
 453             right: -1px
 454             border: 0
 455             z-index: 900
 456             margin-left: 0
 457             margin-right: 0
 458             padding: 6px 0
 459             zoom: 1
 460             border-color: #999
 461             border-color: rgba(0, 0, 0, 0.2)
 462             border-style: solid
 463             border-width: 0 1px 1px
 464             @include radius(0 0 6px 6px)
 465             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 466             @include background-clip()
 467             li
 468                 float: none
 469                 display: block
 470                 background-color: none
 471                 a
 472                     display: block
 473                     padding: 4px 15px
 474                     clear: both
 475                     font-weight: normal
 476                     line-height: 18px
 477                     color: #eee
 478                     &:hover
 479                         @include vertical-gradient(#292929, #191919)
 480                         @include box-shadow(none)
 481     // }}}
 482     // Menu {{{
 483     .oe_menu
 484         float: left
 485         padding: 0
 486         margin: 0
 487         li
 488             float: left
 489         a
 490             display: block
 491             padding: 5px 10px 7px
 492             line-height: 20px
 493             height: 20px
 494             color: #eee
 495             vertical-align: top
 496             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 497             &:hover
 498                 background: #303030
 499                 color: white
 500                 @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 501         .oe_active
 502             background: #303030
 503             font-weight: bold
 504             color: white
 505             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
 506     .oe_menu_more_container
 507         position: relative
 508         .oe_menu_more
 509             position: absolute
 510             padding: 0
 511             background-color: #646060
 512             z-index: 1
 513             border: 1px solid black
 514             border-bottom-left-radius: 5px
 515             border-bottom-right-radius: 5px
 516             li
 517                 float: none
 518                 a
 519                     white-space: nowrap
 520     .oe_secondary_menu_section
 521         font-weight: bold
 522         margin-left: 8px
 523         color: $colour4
 524     .oe_secondary_submenu
 525         padding: 2px 0 8px 0
 526         margin: 0
 527         width: 100%
 528         display: inline-block
 529         li
 530             position: relative
 531             padding: 1px 0 1px 16px
 532             a
 533                 display: block
 534                 color: #4c4c4c
 535                 padding: 2px 4px 2px 0
 536             .oe_menu_label
 537                 position: absolute
 538                 top: 1px
 539                 right: 1px
 540                 font-size: 10px
 541                 background: $colour4
 542                 color: white
 543                 padding: 2px 4px
 544                 margin: 1px 6px 0 0
 545                 border: 1px solid lightGray
 546                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 547                 @include radius(4px)
 548                 @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 549         .oe_menu_counter
 550             float: right
 551             background: #8a89ba
 552             color: #eee
 553             font-size: 12px
 554             border: 1px solid lightgray
 555             padding: 0px 4px 0px 4px
 556             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 557             margin: 0px
 558             @include radius(4px)
 559         .oe_active
 560             background: $colour4
 561             border-top: 1px solid lightGray
 562             border-bottom: 1px solid lightGray
 563             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
 564             @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
 565             a
 566                 color: white
 567             .oe_menu_label
 568                 background: #eee
 569                 color: $colour4
 570                 text-shadow: 0 1px 1px white
 571                 @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
 572             .oe_menu_counter
 573                 background: #eee
 574                 color: #8a89ba
 575         .oe_menu_toggler:before
 576             width: 0
 577             height: 0
 578             display: inline-block
 579             content: "&darr"
 580             text-indent: -99999px
 581             vertical-align: top
 582             margin-left: -8px
 583             margin-top: 4px
 584             margin-right: 4px
 585             border-top: 4px solid transparent
 586             border-bottom: 4px solid transparent
 587             border-left: 4px solid #4c4c4c
 588             @include opacity(0.5)
 589         .oe_menu_opened:before
 590             margin-top: 6px
 591             margin-left: -12px
 592             margin-right: 4px
 593             border-left: 4px solid transparent
 594             border-right: 4px solid transparent
 595             border-top: 4px solid #4c4c4c
 596     // }}}
 597     // ActionManager {{{
 598     .oe_application
 599         width: 100%
 600         a
 601             color: $colour4
 602             &:hover
 603                 text-decoration: underline
 604     // }}}
 605     // Content Header MIT {{{
 606     .oe-view-manager-header
 607         border-top: 1px solid #cacaca
 608         border-bottom: 1px solid #cacaca
 609         @include vertical-gradient(#fcfcfc, #dedede)
 610         @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
 611         h2
 612             float: left
 613             font-size: 18px
 614             margin: 1px 0
 615             a
 616                 color: $colour4
 617         .buttons
 618             padding-right: 8px
 619             li
 620                 float: left
 621                 margin-right: 12px
 622         .filter
 623             vertical-align: top
 624             li
 625                 height: 24px
 626                 line-height: 24px
 627                 padding: 0 8px
 628         .header-row
 629             height: 26px
 630             line-height: 26px
 631             margin: 8px
 632             clear: both
 633             text-shadow: 0 1px 1px white
 634             .dropdown-toggle:after
 635                 margin-top: 7px
 636                 margin-left: 6px
 637                 border-top-color: #404040
 638         .oe_vm_switch
 639             li
 640                 padding-left: 1px
 641                 text-align: center
 642                 width: 24px
 643                 height: 24px
 644                 line-height: 24px
 645         .pagination
 646             li
 647                 height: 24px
 648                 line-height: 24px
 649                 padding: 0 8px
 650         .button-group
 651             display: inline-block
 652             border: 1px solid #ababab
 653             @include radius(5px)
 654             li
 655                 float: left
 656                 border-right: 1px solid #ababab
 657                 &:last-child
 658                     border: none
 659             a
 660                 color: #4c4c4c
 661                 &:hover
 662                     text-decoration: none
 663             .active
 664                 background: #999
 665                 @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
 666                 a
 667                     color: #fff
 668                     text-shadow: 0 1px 2px rgba(0,0,0,0.4)
 669     // }}}
 670     // ViewManager.header {{{
 671     .oe_view_manager_header
 672         border-top: 1px solid #cacaca
 673         border-bottom: 1px solid #cacaca
 674         @include vertical-gradient(#fcfcfc, #dedede)
 675         @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
 676         .oe_view_manager_row
 677             height: 26px
 678             line-height: 26px
 679             margin: 8px
 680             clear: both
 681             text-shadow: 0 1px 1px white
 682             h2
 683                 float: left
 684                 font-size: 18px
 685                 margin: 1px 0
 686                 a
 687                     color: $colour4
 688             .dropdown-toggle:after
 689                 margin-top: 7px
 690                 margin-left: 6px
 691                 border-top-color: #404040
 692         .oe_filter
 693             vertical-align: top
 694             li
 695                 height: 24px
 696                 line-height: 24px
 697                 padding: 0 8px
 698         .oe_button_group
 699             display: inline-block
 700             border: 1px solid #ababab
 701             @include radius(5px)
 702             li
 703                 float: left
 704                 border-right: 1px solid #ababab
 705                 &:last-child
 706                     border: none
 707             a
 708                 color: #4c4c4c
 709                 &:hover
 710                     text-decoration: none
 711             .active
 712                 background: #999
 713                 @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
 714                 a
 715                     color: #fff
 716                     text-shadow: 0 1px 2px rgba(0,0,0,0.4)
 717         .pagination
 718             li
 719                 height: 24px
 720                 line-height: 24px
 721                 padding: 0 8px
 722         .oe_view_manager_buttons
 723             padding-right: 8px
 724             float: left
 725             margin-right: 12px
 726         .oe_view_manager_sidebar
 727             display: inline-block
 728         .oe_view_manager_pager
 729             float: right
 730     // }}}
 731     // ViewManager.switches {{{
 732     .oe_view_manager_switch
 733         float: right
 734         margin: 2px 0 0 0
 735
 736         .oe_vm_switch_form,
 737         .oe_vm_switch_page,
 738         .oe_vm_switch_tree,
 739         .oe_vm_switch_list,
 740         .oe_vm_switch_graph,
 741         .oe_vm_switch_gantt,
 742         .oe_vm_switch_calendar,
 743         .oe_vm_switch_kanban,
 744         .oe_vm_switch_diagram
 745             background: url("/web/static/src/img/views-icons-a.png") repeat-x scroll left top transparent
 746             overflow: hidden
 747             width: 22px
 748             height: 21px
 749             border: none
 750             background-position: 0px 0px
 751             span
 752                 display: none
 753
 754         .oe_vm_switch_list, .oe_vm_switch_tree
 755             background-position: 0px 0px
 756             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 757                 background-position: 0px -21px
 758
 759         .oe_vm_switch_form, .oe_vm_switch_page
 760             background-position: -22px 0px
 761             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 762                 background-position: -22px -21px
 763
 764         .oe_vm_switch_graph
 765             background-position: -44px 0px
 766             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 767                 background-position: -44px -21px
 768
 769         .oe_vm_switch_gantt
 770             background-position: -66px 0px
 771             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 772                 background-position: -66px -21px
 773
 774         .oe_vm_switch_calendar
 775             background-position: -88px 0px
 776             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 777                 background-position: -88px -21px
 778
 779         .oe_vm_switch_kanban
 780             background-position: -110px 0px
 781             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 782                 background-position: -110px -21px
 783
 784         .oe_vm_switch_diagram
 785             background-position: 0px 0px
 786             &:active, &:hover, &:focus, &.oe_view_manager_switch_selected
 787                 background-position: 0px -21px
 788     // }}}
 789     .oe_view_manager_header
 790         border-top: 1px solid #cacaca
 791         border-bottom: 1px solid #cacaca
 792         @include vertical-gradient(#fcfcfc, #dedede)
 793         @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
 794         .oe_view_manager_row
 795             height: 26px
 796             line-height: 26px
 797             margin: 8px
 798             clear: both
 799             text-shadow: 0 1px 1px white
 800             h2
 801                 float: left
 802                 font-size: 18px
 803                 margin: 1px 0
 804                 a
 805                     color: $colour4
 806             .dropdown-toggle:after
 807                 margin-top: 7px
 808                 margin-left: 6px
 809                 border-top-color: #404040
 810         .oe_filter
 811             vertical-align: top
 812             li
 813                 height: 24px
 814                 line-height: 24px
 815                 padding: 0 8px
 816         .oe_button_group
 817             display: inline-block
 818             border: 1px solid #ababab
 819             @include radius(5px)
 820             li
 821                 float: left
 822                 border-right: 1px solid #ababab
 823                 &:last-child
 824                     border: none
 825             a
 826                 color: #4c4c4c
 827                 &:hover
 828                     text-decoration: none
 829             .active
 830                 background: #999
 831                 @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
 832                 a
 833                     color: #fff
 834                     text-shadow: 0 1px 2px rgba(0,0,0,0.4)
 835         .pagination
 836             li
 837                 height: 24px
 838                 line-height: 24px
 839                 padding: 0 8px
 840         .oe_view_manager_switch
 841             float: right
 842         .oe_view_manager_buttons
 843             padding-right: 8px
 844             float: left
 845             margin-right: 12px
 846         .oe_view_manager_sidebar
 847             display: inline-block
 848         .oe_view_manager_pager
 849             float: right
 850
 851     // }}}
 852     // ViewManager.sidebar {{{
 853     .oe_form_dropdown_section
 854         position: relative
 855         display: inline-block
 856         margin-right: 4px
 857     .oe_dropdown_toggle:after
 858         width: 0
 859         height: 0
 860         display: inline-block
 861         content: "&darr"
 862         text-indent: -99999px
 863         vertical-align: top
 864         border-left: 4px solid transparent
 865         border-right: 4px solid transparent
 866         border-top: 4px solid white
 867         @include opacity(0.5)
 868         margin-top: 7px
 869         margin-left: 6px
 870         border-top-color: #404040
 871     .oe_dropdown_menu
 872         display: none
 873         position: absolute
 874         top: 28px
 875         left: 0px
 876         padding: 8px
 877         border: 1px solid #afafb6
 878         width: 120px
 879         overflow-x: hidden
 880         z-index: 900
 881         background: white
 882         @include radius(3px)
 883         @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
 884         li
 885             list-style-type: none
 886             float: none
 887             display: block
 888             background-color: none
 889             a
 890                 display: block
 891                 padding: 3px 6px
 892                 clear: both
 893                 font-weight: normal
 894                 line-height: 14px
 895                 color: #4c4c4c
 896                 text-decoration: none
 897                 &:hover
 898                     text-decoration: none
 899                     @include vertical-gradient(#f0f0fa, #eeeef6)
 900                     @include box-shadow(none)
 901
 902     // }}}
 903     // SearchView xmo {{{
 904     .oe_searchview
 905         position: relative
 906         float: right
 907         .VS-search
 908             .VS-search-box
 909                 min-height: 0
 910                 border-width: 1px
 911                 padding: 0
 912                 width: 410px
 913                 //border: 1px solid #ababab
 914                 //margin-top: 0
 915                 //margin-bottom: 0
 916                 //padding: 4px 19px
 917                 //font-size: 13px
 918                 //background: url('../img/search.png') no-repeat 5px
 919                 //background-color: white
 920                 //@include radius(13px)
 921                 //@include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
 922             .VS-icon
 923                 top: 5px
 924
 925             .VS-icon-search
 926                 left: 5px
 927
 928             .VS-search-inner
 929                 margin: 0 40px 0 17px
 930                 font-size: 13px
 931
 932                 input
 933                     font-size: inherit
 934                     line-height: inherit
 935                     height: auto
 936                     padding: 0
 937
 938                 .VS-input-width-tester
 939                     font-size: inherit
 940                     padding: 0
 941
 942                 .search_input
 943                     margin-left: 0
 944                     height: 22px
 945                     input, .VS-input-width-tester
 946                         padding: 0 2px
 947                         height: inherit
 948                         margin: 0
 949
 950                 .search_facet
 951                     padding: 0
 952                     margin: 1px 0
 953                     border: 1px solid $facets-border
 954                     @include radius(3px)
 955                     background: #f0f0fa
 956                     height: 18px
 957
 958                     &.is_selected
 959                         border-color: $facets-border-selected
 960                         @include box-shadow(0 0 3px 1px $facets-border-selected)
 961
 962                         .category
 963                             margin-left: 0
 964                         .VS-icon-cancel
 965                             // don't change the icon on selection
 966                             @include opacity(1.0)
 967                             background-position: center 0
 968
 969                     .category
 970                         padding: 0 4px 0 14px
 971                         color: white
 972                         background: #8786b7
 973                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
 974                         font-weight: normal
 975                         text-transform: none
 976                         height: 18px
 977                         line-height: 18px
 978                         font-size: inherit
 979
 980                     .search_facet_input_container
 981                         border-left: 1px solid $facets-border
 982                         height: 18px
 983                         line-height: 18px
 984                         padding: 0 4px
 985                         cursor: pointer
 986
 987                     .search_facet_remove
 988                         left: 1px
 989                         top: 3px
 990
 991             .VS-icon-cancel
 992                 right: 24px
 993
 994             .oe_vs_unfold_drawer
 995                 position: absolute
 996                 top: 0
 997                 right: 0
 998                 height: 100%
 999                 line-height: 23px
1000                 padding: 0 7px 0 4px
1001                 color: #ccc
1002                 cursor: pointer
1003                 &:before
1004                     content: "▾"
1005
1006         &.oe_searchview_open_drawer
1007             .oe_searchview_drawer
1008                 display: block
1009
1010         .oe_searchview_drawer
1011             position: absolute
1012             z-index: 1
1013             top: 100%
1014             right: 0
1015             background-color: white
1016             width: 410px
1017             display: none
1018             border: 1px solid #ccc
1019
1020             .oe_searchview_filters
1021                 display: table
1022                 width: 100%
1023
1024                 > div
1025                     @include unscrew-box
1026                     display: table-cell
1027                     width: 50%
1028
1029                 h3
1030                     margin: 2px 4px 2px 8px
1031                     color: $section-title-color
1032
1033                 ul
1034                     margin: 0 12px 3px
1035                     padding: 0
1036                     list-style: none
1037
1038                 li
1039                     list-style: none
1040                     padding: 3px 6px
1041                     height: 14px
1042                     color: inherit
1043                     cursor: pointer
1044
1045                     &:hover
1046                         background-color: #f0f0fa
1047
1048             .oe_searchview_advanced
1049                 h4
1050                     border-top: 1px solid #ccc
1051                     margin: 5px 0 3px
1052                     cursor: pointer
1053
1054                 h4:before
1055                     content: "▸ "
1056
1057                 div
1058                     display: none
1059
1060                 button.oe_add_condition:before
1061                     content: "⊞ "
1062                 button.oe_apply:before
1063                     content: "⚡ "
1064
1065                 ul
1066                     list-style: none
1067                     padding: 0
1068                 li
1069                     list-style: none
1070                     margin: 0
1071
1072                 &.oe_opened
1073                     h4:before
1074                         content: "▾ "
1075                     div
1076                         display: block
1077     // }}}
1078     // FormView.body {{{
1079     .oe_form_header
1080         padding: 8px
1081     .oe_form_invalid
1082         input, select, textarea
1083             background-color: #F66 !important
1084             border: 1px solid #D00 !important
1085     .oe_form_group_cell
1086         line-height: 18px
1087         .oe_form_button
1088             width: 100%
1089             white-space: nowrap
1090     .oe_form_topbar
1091         border-bottom: 1px solid #cacaca
1092         @include vertical-gradient(#fcfcfc, #dedede)
1093         padding: 0 8px
1094         line-height: 30px
1095         button
1096             font-size: 12px
1097             height: 24px
1098             line-height: 24px
1099             vertical-align: top
1100             padding: 0 10px
1101             margin: 3px 0
1102             span.i
1103                 line-height: 20px
1104                 height: 24px
1105         ul
1106             height: 30px
1107             padding: 0
1108             margin: 0
1109             text-shadow: 0 1px 1px white
1110             border-left: 1px solid #cacaca
1111             border-right: 1px solid #cacaca
1112             li
1113                 padding: 0
1114                 margin: 0
1115                 float: left
1116                 vertical-align: top
1117                 border-right: 1px solid #cacaca
1118                 height: 30px
1119                 padding: 0 12px
1120                 &:first-child
1121                     border-left: 1px solid #cacaca
1122                 a
1123                     color: #4c4c4c
1124                     &:hover
1125                         color: black
1126         .oe_form_steps
1127             img
1128                 margin: 0 8px
1129                 vertical-align: top
1130             li
1131                 border-right: none
1132                 padding: 0
1133                 &:first-child
1134                     margin-left: 12px
1135                     border-left: none
1136                 &:last-child
1137                     margin-right: 12px
1138         .oe_form_steps_active
1139             font-weight: bold
1140             color: #b33630
1141     .oe_application
1142         .oe_form_sheetbg
1143             background: url(/web/static/src/img/form_sheetbg.png)
1144             padding: 8px
1145             border-bottom: 1px solid #ddd
1146         .oe_form_sheet_width
1147             min-width: 650px
1148             max-width: 880px
1149             margin: 0 auto
1150         .oe_form_sheet
1151             padding-top: 8px
1152             background: white
1153             min-height: 420px
1154             border: 1px solid #afafb6
1155             @include box-shadow(0 0 10px rgba(0,0,0,0.3))
1156             //.avatar
1157             //    max-height: 52px
1158             //.contacts
1159             //    li
1160             //        float: left
1161             //        width: 33%
1162             //        margin-bottom: 4px
1163             //    .avatar
1164             //        height: 40px
1165             //        width: 40px
1166             //        border: 1px solid
1167             //        border-color: #e5e5e5 #dbdbdb #d2d2d2
1168             //    .data
1169             //        padding: 2px
1170             //        line-height: 18px
1171     // }}}
1172     // FormView.label {{{
1173     .oe_form
1174         label
1175             font-weight: bold
1176     .oe_form_label_help[for], .oe_form_label[for]
1177         white-space: nowrap
1178     // }}}
1179     // FormView.binaryfile {{{
1180     /* http://www.quirksmode.org/dom/inputfile.html
1181      * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
1182      */
1183     .oe_form
1184         .oe-binary-file-set
1185             overflow: hidden
1186             position: relative
1187             width: 45px
1188             height: 30px
1189         input.oe-binary-file
1190             z-index: 0
1191             line-height: 0
1192             font-size: 12px
1193             position: absolute
1194             // Should be adjusted for all browsers
1195             top: 1px
1196             right: 10px
1197             opacity: 0
1198             filter: alpha(opacity = 0)
1199             -ms-filter: "alpha(opacity=0)"
1200             margin: 0
1201             padding: 0
1202     // }}}
1203     // FormView.separator {{{
1204     .oe_horizontal_separator
1205         font-weight: bold
1206         border: 0 solid #666
1207         border-bottom-width: 1px
1208         margin: 3px 4px 3px 1px
1209         height: 17px
1210     .oe_horizontal_separator:empty
1211         height: 5px
1212     .oe_vertical_separator
1213         border-left: 1px solid #666
1214         padding: 0 4px 0 4px
1215     // }}}
1216     // FormView.notebook {{{
1217     .oe_form_notebook
1218         margin: 8px 0
1219         padding: 0 8px
1220         list-style: none
1221         zoom: 1
1222     .oe_form_notebook:before, .oe_form_notebook:after
1223         display: table
1224         content: ""
1225         zoom: 1
1226     .oe_form_notebook:after
1227         clear: both
1228     .oe_form_notebook > li
1229         float: left
1230     .oe_form_notebook > li > a
1231         display: block
1232         color: #4c4c4c
1233     .oe_form_notebook
1234         border-color: #ddd
1235         border-style: solid
1236         border-width: 0 0 1px
1237     .oe_form_notebook > li
1238         position: relative
1239         margin-bottom: -1px
1240     .oe_form_notebook > li > a
1241         padding: 0 12px
1242         margin-right: 2px
1243         line-height: 30px
1244         border: 1px solid transparent
1245         @include radius(4px 4px 0 0)
1246     .oe_form_notebook > li > a:hover
1247         text-decoration: none
1248         background-color: #eee
1249         border-color: #eee #eee #ddd
1250     .oe_form_notebook > li.ui-state-active > a, .oe_form_notebook > li.ui-state-active > a:hover
1251         background-color: #ffffff
1252         border: 1px solid #ddd
1253         border-bottom-color: transparent
1254         cursor: default
1255     .ui-tabs-hide
1256         display: none
1257
1258     // }}}
1259     // FormView.progressbar {{{
1260     .oe_form
1261         .oe_form_field_progressbar.ui-progressbar
1262             height: 22px
1263             font-size: 10px
1264             -moz-box-sizing: border-box
1265             -webkit-box-sizing: border-box
1266             -ms-box-sizing: border-box
1267             box-sizing: border-box
1268             border: 1px solid #999
1269             -moz-border-radius: 3px
1270             -webkit-border-radius: 3px
1271             border-radius: 3px
1272             background: white
1273             min-width: 90px
1274
1275             span
1276                 position: absolute
1277                 margin-left: 10px
1278                 font-weight: bold
1279
1280             .ui-widget-header
1281                 background: #cccccc url(/web/static/lib/jquery.ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x
1282     // }}}
1283     // ListView {{{
1284     .oe-listview-content
1285         width: 100%
1286         thead, tfoot
1287             border-bottom: 2px solid #cacaca
1288             background: #eee
1289         tfoot
1290             border-top: 1px solid #cacaca
1291             border-top: 2px solid #cacaca
1292             border-bottom: 1px solid #cacaca
1293             font-weight: bold
1294         tbody
1295             cursor: pointer
1296             background: white
1297         thead
1298             vertical-align: top
1299         td:first-child, th:first-child
1300             width: 17px
1301             &:after
1302                 border-width: 0
1303         tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th
1304             background-color: #f0f0fa
1305             @include vertical-gradient(#f0f0fa, #eeeef6)
1306         tbody tr:hover td, tbody tr:hover th
1307             @include vertical-gradient(#eee, #dedede)
1308         td, th
1309             padding: 3px 6px
1310             line-height: 18px
1311         .numeric
1312             text-align: right
1313             width: 82px
1314             input
1315                 text-align: right
1316         //thead th:after
1317             //content: ""
1318             //float: right
1319             //margin-top: 7px
1320             //border-width: 0 4px 4px
1321             //border-style: solid
1322             //border-color: #000 transparent
1323             //visibility: hidden
1324         table .sortdown:after, table .sortdown:hover:after
1325             visibility: visible
1326             @include opacity(0.6)
1327         table .sortup:after
1328             border-bottom: none
1329             border-left: 4px solid transparent
1330             border-right: 4px solid transparent
1331             border-top: 4px solid #000
1332             visibility: visible
1333             @include box-shadow(none)
1334             @include opacity(0.6)
1335     // }}}
1336     // KanbanView {{{
1337     .oe_kanban_group_title
1338         margin: 1px 1px 4px
1339         font-size: 15px
1340         font-weight: bold
1341         text-shadow: 0 1px 0 white
1342     .oe_kanban_column, .oe_kanban_group_header
1343         width: 240px
1344         vertical-align: top
1345         padding: 6px 7px 6px 6px
1346         background: #f0eeee
1347         border-left: 1px solid #f0f8f8
1348         border-right: 1px solid #b9b9b9
1349     .oe_kanban_record
1350         position: relative
1351         display: block
1352         min-height: 50px
1353         background: white
1354         border: 1px solid #d8d8d8
1355         border-bottom-color: #b9b9b9
1356         padding: 6px
1357         margin: 6px 0
1358         display: block
1359         @include radius(4px)
1360         &:last-child
1361             margin-bottom: 0
1362         &:hover
1363             @include box-shadow(0 0 3px rgba(0,0,0,0.6))
1364         .oe_kanban_title
1365             font-weight: bold
1366             margin: 2px 4px
1367     .oe_kanban_gravatar
1368         width: 20px
1369         height: 20px
1370         @include radius(3px)
1371         @include box-shadow(0 1px 2px rgba(0,0,0,0.2))
1372     // }}}
1373
1374     // Debugging stuff {{{
1375     .oe_layout_debugging
1376         .oe_form_group
1377             border: 2px dashed red
1378         .oe_form_group_cell
1379             border: 1px solid blue
1380             padding-bottom: 1em
1381         .oe_layout_debug_cell
1382             color: white
1383             background: #696
1384             font-size: 80%
1385             text-align: center
1386         .oe_layout_debug_cell
1387             display: block
1388     .oe_layout_debug_cell
1389         display: none
1390
1391     .oe_debug_view
1392         float: left
1393     .oe_debug_view_log
1394         font-size: 95%
1395     .oe_debug_view_log label
1396         display: block
1397         width: 49%
1398         text-align: right
1399         float: left
1400         font-weight: bold
1401         color: #009
1402     .oe_debug_view_log span
1403         display: block
1404         width: 49%
1405         float: right
1406         color: #333
1407     // }}}
1408
1409 // Transitional overrides for old styles {{{
1410 .openerp
1411     .oe_form_field_many2one
1412         td:first-child
1413             position: relative
1414         span.oe-m2o-drop-down-button
1415             position: absolute
1416             top: 3px
1417             right: 2px
1418 // }}}
1419
1420 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
1421 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
1422