[MERGE] from master
[odoo/odoo.git] / addons / web / static / src / css / base.sass
1 @charset "utf-8"
2
3 // Variables {{{
4 $facets-border: #afafb6
5 $section-title-color: #7C7BAD
6 $tag-bg-light: #f0f0fa
7 $tag-bg-dark: #7C7BAD
8 $tag-border: #afafb6
9 $tag-border-selected: #a6a6fe
10 $hover-background: #f0f0fa
11 $link-color: #7C7BAD
12 $sheet-max-width: 860px
13 $sheet-min-width: 650px
14 $sheet-padding: 16px
15 // }}}
16 // Mixins {{{
17 @font-face
18     font-family: 'mnmliconsRegular'
19     src: url('/web/static/src/font/mnmliconsv21-webfont.eot') format('eot')
20     src: url('/web/static/src/font/mnmliconsv21-webfont.woff') format('woff')
21     src: url('/web/static/src/font/mnmliconsv21-webfont.ttf') format('truetype')
22     src: url('/web/static/src/font/mnmliconsv21-webfont.svg') format('svg') active
23     font-weight: normal
24     font-style: normal
25
26 @font-face
27     font-family: 'EntypoRegular'
28     src: url('/web/static/src/font/entypo-webfont.eot') format('eot')
29     src: url('/web/static/src/font/entypo-webfont.eot?#iefix') format('embedded-opentype')
30     src: url('/web/static/src/font/entypo-webfont.woff') format('woff')
31     src: url('/web/static/src/font/entypo-webfont.ttf') format('truetype')
32     src: url('/web/static/src/font/entypo-webfont.svg') format('svg') active
33     font-weight: normal
34     font-style: normal
35
36 @mixin reset()
37     border: none
38     padding: 0
39     margin: 0
40     background: none
41     @include radius(0)
42     @include box-shadow(none)
43
44 @mixin vertical-gradient($startColor: #555, $endColor: #333)
45     background-color: mix($startColor, $endColor)
46     background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
47     background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
48     background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
49     background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
50     background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
51     background-image:         linear-gradient(to bottom, $startColor, $endColor)
52
53 @mixin radial-gradient($gradient)
54     background-position: center center
55     background-image: -webkit-radial-gradient(circle, $gradient)
56     background-image: -moz-radial-gradient($gradient)
57     background-image: -ms-radial-gradient($gradient)
58     background-image: radial-gradient(circle, $gradient)
59
60 @mixin radius($radius: 5px)
61     -moz-border-radius: $radius
62     -webkit-border-radius: $radius
63     border-radius: $radius
64
65 @mixin box-shadow($bsval: 0px 1px 4px #777)
66     -moz-box-shadow: $bsval
67     -webkit-box-shadow: $bsval
68     box-shadow: $bsval
69
70 @mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
71     -webkit-transition: $transval
72     -moz-transition: $transval
73     -ms-transition: $transval
74     -o-transition: $transval
75     transition: $transval
76
77 @mixin opacity($opacity: .5)
78     filter: alpha(opacity=$opacity * 100)
79     opacity: $opacity
80
81 @mixin background-clip($clip: padding-box)
82     -webkit-background-clip: $clip
83     -moz-background-clip: $clip
84     background-clip: $clip
85
86 @mixin box-sizing($type: content)
87     // type = border || content || padding
88     -webkit-box-sizing: #{$type}-box
89     -moz-box-sizing: #{$type}-box
90     -ms-box-sizing: #{$type}-box
91     box-sizing: #{$type}-box
92
93 @mixin skew-gradient($startColor: #555, $endColor: #333)
94     background-color: $endColor
95     background: -moz-linear-gradient(135deg, $endColor, $startColor)
96     background: -o-linear-gradient(135deg, $startColor, $endColor)
97     background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor))
98     background: -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
99
100 @mixin transform($transform)
101     -webkit-transform: $transform
102     -moz-transform: $transform
103     -ms-transform: $transform
104     -o-transform: $transform
105     transform: $transform
106
107 @mixin keyframes($name)
108     @-webkit-keyframes #{$name}
109         @content
110     @-moz-keyframes #{$name}
111         @content
112     @-ms-keyframes #{$name}
113         @content
114     @-o-keyframes #{$name}
115         @content
116     @keyframes #{$name}
117         @content
118
119
120 // Transforms the (readable) text of an inline element into an mmlicons icon,
121 // allows for actual readable text in-code (and in readers?) with iconic looks
122 @mixin text-to-icon($icon-name, $color: #404040)
123     font-size: 1px
124     letter-spacing: -1px
125     color: transparent
126     text-shadow: none
127     font-weight: normal
128     &:before
129         font: 21px "mnmliconsRegular"
130         content: $icon-name
131         color: $color
132
133 @mixin text-to-entypo-icon($icon-name, $color: #404040, $size: 21px)
134     font-size: 1px
135     letter-spacing: -1px
136     color: transparent
137     text-shadow: none
138     font-weight: normal
139     &:before
140         font: $size "entypoRegular"
141         content: $icon-name
142         color: $color
143
144 // }}}
145
146 #oe_main_menu_navbar
147     min-height: 34px
148     z-index: 1001
149     border-radius: 0
150     li a, li button
151         padding: 4px 8px 4px 8px
152         margin-top: 2px
153         font-size: 13px
154     .oe_topbar_avatar
155         max-height: 18px
156         width: auto
157         
158 #oe_main_menu_navbar.navbar
159     margin-bottom: 0px
160
161 .oe_systray
162     margin-right: 0px !important
163
164 // Notifications {{{
165 .oe_notification
166     z-index: 1600
167     
168 .oe_webclient_timezone_notification
169     a
170         color: white
171         text-decoration: underline
172     p
173         margin-top: 1em
174     dt
175         font-weight: bold
176 .oe_timezone_systray
177     span
178         margin-top: 1px
179         background-color: #f6cf3b
180 // }}}
181 // Top Menu {{{
182 .navbar
183     .oe_topbar_name
184         max-width: 150px
185         display: inline-block
186         height: 15px // Customize to manage caret when topbar_name is over sized.
187         text-overflow: ellipsis
188         white-space: nowrap
189         overflow: hidden // Customize to bring ellipsis when topbar_name is over sized.
190 // }}}
191
192 .openerp
193     // Global style {{{
194     padding: 0
195     margin: 0
196     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
197     color: #4c4c4c
198     font-size: 13px
199     background: white
200     &.openerp_webclient_container
201         height: 95%
202         height: -webkit-calc(100% - 34px)
203         height: calc(100% - 34px)
204         display: -ms-flexbox
205         display: -webkit-flex
206         display: flex
207     @media (max-width: 768px)
208         &.openerp_webclient_container
209             height: 95%
210             height: -webkit-calc(100% - 52px)
211             height: calc(100% - 52px)
212     // }}}
213     //Placeholder style{{{
214     \:-moz-placeholder
215         color: $tag-border !important
216         font-style: italic !important
217     \::-webkit-input-placeholder
218         color: $tag-border !important
219         font-style: italic !important
220     \:-ms-input-placeholder
221         color: $tag-border !important
222         font-style: italic !important
223     //}}}
224     // Tag reset {{{
225     a
226         text-decoration: none
227         cursor: pointer !important
228     table
229         padding: 0
230         border-collapse: collapse
231     thead
232         font-weight: bold
233         background-color: #f0f0f0
234         th
235             border-left: 1px solid #dfdfdf
236             &:first-child
237                 border-left: none
238             &.null
239                 border-left: none
240     th, td
241         padding: 0
242         text-align: left
243     th
244         font-weight: bold
245         vertical-align: middle
246     td
247         vertical-align: top
248     .oe_title
249         float: left
250     .oe_title:after
251         content: "."
252         display: block
253         height: 0
254         clear: both
255         visibility: hidden    
256     .oe_form_group
257         clear: both
258     .zebra tbody tr:nth-child(odd) td
259         background-color: #f0f0fa
260         @include vertical-gradient(#f0f0fa, #eeeef6)
261     .zebra tbody tr:hover td
262         @include vertical-gradient(#eee, #dedede)
263     input, textarea, select
264         padding: 2px 4px
265         border: 1px solid #ccc
266         @include radius(3px)
267         background: white
268     img
269         vertical-align: middle
270     h4
271         margin: 4px 0
272         font-weight: bold
273         font-size: inherit
274     // }}}
275     // Button style {{{
276     a.button:link, a.button:visited, .oe_button, input[type='submit']
277         display: inline-block
278         border: 1px solid rgba(0,0,0,0.4)
279         color: #4c4c4c
280         margin: 0
281         padding: 3px 12px
282         font-size: 13px
283         text-align: center
284         @include vertical-gradient(#efefef, #d8d8d8)
285         @include radius(3px)
286         @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
287         text-shadow: 0 1px 1px rgba(255, 255, 255, .5)
288         -webkit-font-smoothing: antialiased
289         outline: none
290
291     a.button:hover,.oe_button:hover, input[type='submit']:hover
292         @include vertical-gradient(#f6f6f6, #e3e3e3)
293         cursor: pointer
294         background-position: 0
295
296     a.button:focus, .oe_button:focus, input[type='submit']:focus
297         border: 1px solid #80bfff
298         background-position: 0
299         @include vertical-gradient(#f6f6f6, #e3e3e3)
300         @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))
301
302     a.button:active, a.button.active, .oe_button:active, .oe_button.active, input[type='submit']:active, input[type='submit'].active
303         @include vertical-gradient(#e3e3e3, #f6f6f6)
304         @include box-shadow(none)
305
306     a.button.disabled, .oe_button:disabled, input[type='submit']:disabled
307         background: #efefef !important
308         border: 1px solid #d1d1d1 !important
309         @include box-shadow(none !important)
310         color: #aaa !important
311         cursor: default
312         text-shadow: 0 1px 1px #fff !important
313     // }}}
314     // Jquery ui Overrides {{{
315     .ui-widget-content a
316         color: $link-color
317     .oe_bounce_container
318         display: inline-block
319
320     // Bug lp:1051746
321     .text-tag .text-button
322         height: auto !important
323         min-height: 16px
324
325     // bug noted in jquery ui CSS doesn't seem to occur in IE9,
326     // so remove position:relative
327     .ui-tabs
328         position: static
329
330     // }}}
331     // Generic classes {{{
332     .oe_i
333         font-family: "mnmliconsRegular" !important
334         font-size: 21px
335         font-weight: 300 !important
336     .oe_e
337         font-family: "entypoRegular" !important
338         font-size: 34px
339         font-weight: 300 !important
340         line-height: 100%
341     .oe_left
342         float: left
343         margin-right: 8px
344         width: 305px
345     .oe_right
346         float: right
347         margin-left: 8px
348     .oe_text_center
349         text-align: center
350     .oe_text_left
351         text-align: left
352     .oe_text_right
353         text-align: right
354     .oe_clear
355         clear: both
356     .oe_wait
357         cursor: wait
358     .oe_fade
359         color: #888
360         font-weight: normal
361     .oe_bold
362         font-weight: bold
363     .oe_inline
364         width: auto !important
365     .oe_highlight
366         color: white
367         background: #DC5F59
368     button.oe_highlight
369         @include vertical-gradient(#df3f3f, #a21a1a)
370         @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
371     button.oe_highlight:hover
372         @include vertical-gradient(lighten(#e04f4f, 2%), lighten(#a21a1a, 2%))
373     button.oe_highlight:active
374         @include vertical-gradient(lighten(#a21a1a, 8%), darken(#df3f3f, 8%))
375     .oe_background_grey
376         background: #eee !important
377
378     .oe_form_dirty
379         .oe_highlight_on_dirty
380             color: white
381             background: #dc5f59
382             font-weight: bold
383         button.oe_highlight_on_dirty
384             @include vertical-gradient(#dc5f59, #b33630)
385             @include box-shadow(none)
386             &:hover
387                 background: #ED6F6A
388     .oe_warning_redirect
389         border: none !important
390         padding: 0 !important
391         margin-left: 20px !important
392         background: #f5f7f9 !important
393         box-shadow: none !important
394         &:hover
395             text-decoration: underline !important
396     .oe_stat_button
397         font-weight: normal
398         width: 132px !important
399         height: 40px
400         color: #666
401         margin: 0px -1px -1px 0px
402         padding: 0
403         border: 1px solid #dddddd
404         border-radius: 0
405         box-shadow: none
406         background: white
407         > div
408             display: table-cell
409             vertical-align: middle
410             text-align: left
411             padding: 0
412             line-height: 120%
413         .stat_button_icon
414             color: #7C7BAD
415             font-size: 24px
416             padding: 0px 3px
417             width: 37px
418             text-align: center
419         .oe_form_field_percent_pie
420             width: 42px
421         .oe_form_field_bar_chart
422             width: 42px
423         svg
424             width: 38px
425             height: 38px
426             display: inline
427             vertical-align: middle
428     .oe_stat_button:hover
429         background: #7c7bad
430         color: white
431         .fa
432             color: white
433     .oe_button_box
434         width: 400px
435         text-align: right
436         .oe_stat_button
437             display: inline-table
438     .oe_avatar
439         > img
440             max-height: 90px
441             max-width: 90px
442             @include radius(3px)
443             @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.4))
444             border: none
445             margin-bottom: 10px
446     .oe_avatar + div
447         margin-left: 5px
448     .oe_image_small > img
449         max-width: 50px
450         max-height: 50px
451     .oe_image_medium > img
452         max-width: 180px
453         max-height: 180px
454     .oe_button.oe_link
455         @include reset()
456         img
457             display: inline-block
458         span
459             @include reset()
460             color: $link-color
461             font-weight: bold
462             &:hover
463                 text-decoration: underline
464     .oe_star_on, .oe_star_off
465         color: #cccccc
466         text-shadow: 0 0 2px black
467         vertical-align: top
468         position: relative
469         top: -8px
470     .oe_star_on:hover, .oe_star_off:hover
471         text-decoration: none
472     .oe_star_on
473         color: gold
474     p.oe_grey
475         max-width: 650px
476     .oe_grey
477         color: #aaa
478     // Added for generic error message and customize bootstrap3 <pre>,<hr>
479     .oe_error_detail 
480         hr
481             display: block
482             -webkit-margin-before: 0.5em
483             -webkit-margin-after: 0.5em
484             -webkit-margin-start: auto
485             -webkit-margin-end: auto
486             border-style: inset
487             border-width: 1px
488     // }}}
489     // Kanban state (used in form and kanban) {{{
490     .oe_kanban_status
491         position: relative
492         display: inline-block
493         height: 12px
494         width: 12px
495         @include radius(6px)
496         @include radial-gradient((#eee 0%, #ccc 40%, #bbb 100%))
497         // +background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))
498     .oe_kanban_status_green
499         background: green
500         @include radial-gradient((#55dd55 0%, #44aa44 40%, #339933 100%))
501     .oe_kanban_status_red
502         background: red
503         @include radial-gradient((#ee7777 0%, #cc3333 40%, #bb0808 100%))
504     .btn-group.kanban_state
505         padding-top: 8px
506         margin-right: 4px !important
507         a
508             color: #333333
509     // }}}
510     // Tags (for many2many tags, among others) {{{
511     .oe_tag
512         border: 1px solid $tag-border
513         font-size: 11px
514         padding: 2px 4px
515         margin: 0 2px 2px 0
516         @include radius(3px)
517         background: $tag-bg-light
518         color: #4C4C4C
519     .oe_tag_dark
520         background: $tag-bg-dark
521         color: #eee
522     .oe_form_field_radio
523         &.oe_horizontal
524             white-space: nowrap
525             label
526                 display: inline-block
527                 text-align: center
528                 height: 16px
529         &.oe_vertical
530             label
531                 display: inline-block
532                 margin-left: 20px
533         .oe_radio_input
534             border: 2px solid transparent
535             display: inline-block
536             height: 12px
537             width: 12px
538             vertical-align: top
539             border-radius: 10px
540             margin: 1px 0
541             position: absolute
542         &.oe_form_required.oe_form_invalid .oe_radio_input
543             border-color: red
544     .oe_tags
545         &.oe_inline
546             min-width: 250px
547         .text-wrap
548             width: 100% !important
549             textarea
550                 width: 100% !important
551         .text-core
552             min-height: 22px
553             .text-wrap .text-dropdown .text-list .text-suggestion em
554                 font-style: italic
555                 text-decoration: none
556         margin-bottom: 1px
557     // }}}
558     // Notebook {{{
559     .oe_notebook
560         margin: 8px 0
561         padding: 0 16px
562         list-style: none
563         zoom: 1
564     .oe_notebook.ui-corner-all
565         @include radius(0)
566     .oe_notebook:before, .oe_notebook:after
567         display: table
568         content: ""
569         zoom: 1
570     .oe_notebook:after
571         clear: both
572     .oe_notebook > li
573         float: left
574     .oe_notebook > li > a
575         display: block
576         color: #808080
577     .oe_notebook > li.ui-tabs-active > a
578         color: #4c4c4c
579     .oe_notebook
580         border-color: #ddd
581         border-style: solid
582         border-width: 0 0 1px
583     .oe_notebook > li
584         position: relative
585     .oe_notebook > li > a
586         padding: 0 12px
587         margin-right: 2px
588         line-height: 30px
589         border: 1px solid transparent
590         @include radius(4px 4px 0 0)
591     .oe_notebook > li > a:hover
592         text-decoration: none
593         background-color: #eee
594         border-color: #eee #eee #ddd
595     .ui-tabs .oe_notebook.ui-tabs-nav li.ui-tabs-active
596         border-bottom: none
597         padding-bottom: 1px
598     .oe_notebook > li.ui-state-active > a, .oe_notebook > li.ui-state-active > a:hover
599         background-color: #ffffff
600         border: 1px solid #ddd
601         border-bottom-color: transparent
602         cursor: default
603     .oe_notebook_page
604         padding: 0
605         //Customize label weight according bootstrap3
606         > label:not([for])
607             font-weight: normal !important
608         // End of customize 
609     div.ui-tabs
610         padding: 3px 0px 3px 0px
611     .ui-tabs-hide
612         display: none
613     // }}}
614     // Dropdown {{{
615     .oe_dropdown, .oe_dropdown_hover, .oe_dropdown_toggle
616         position: relative
617         cursor: pointer
618     .oe_dropdown_toggle
619         color: #2B2B2B
620         font-weight: normal
621     .oe_dropdown_hover:hover .oe_dropdown_menu, .oe_dropdown_menu.oe_opened
622         display: block
623     .oe_dropdown_menu
624         display: none
625         position: absolute
626         z-index: 3
627         margin: 0
628         border: 1px solid $tag-border
629         background: white
630         padding: 4px 0
631         min-width: 140px
632         text-align: left
633         @include radius(3px)
634         @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
635         > li
636             &:hover
637                 @include vertical-gradient(#f0f0fa, #eeeef6)
638                 @include box-shadow(none)
639             list-style-type: none
640             float: none
641             display: block
642             position: relative
643             margin: 0
644             padding: 2px 8px
645             > a
646                 white-space: nowrap
647                 display: block
648                 color: #4c4c4c
649                 text-decoration: none
650                 &:hover
651                     text-decoration: none
652     .oe_dropdown_arrow:after
653         vertical-align: top
654         margin-top: 8px
655         //margin-left set at 3px to avoid a strange overflow
656         margin-left: 3px
657         border-left: 4px solid transparent
658         border-right: 4px solid transparent
659         border-top: 4px solid#404040
660         @include opacity(0.5)
661     // }}}
662     // Loading {{{
663     .oe_loading
664         display: none
665         z-index: 1001
666         position: fixed
667         top: 0
668         right: 50%
669         padding: 4px 12px
670         background: #A61300
671         color: white
672         text-align: center
673         border: 1px solid #900
674         border-top: none
675         -moz-border-radius-bottomright: 8px
676         -moz-border-radius-bottomleft: 8px
677         border-bottom-right-radius: 8px
678         border-bottom-left-radius: 8px
679     // }}}
680     // CrashManager {{{
681     .oe_dialog_warning
682         width: 100%
683         p
684             text-align: center
685     .oe_dialog_icon
686         padding: 5px
687         width: 32px
688     // }}}
689     // DatabaseManager {{{
690     .oe_database_manager
691         background: #fff
692         color: #000
693         text-align: left
694         .oe_database_manager_menu
695             color: #000
696     // }}}
697     // WebClient.fullscreen {{{
698     .oe_content_full_screen
699         .oe_application
700             top: 0
701             left: 0
702         .oe_topbar, .oe_leftbar
703             display: none
704     // }}}
705     // Webclient.leftbar {{{
706     .oe_leftbar
707         display: -ms-flexbox
708         display: -webkit-flex
709         display: flex
710         -ms-flex-direction: column
711         -webkit-flex-direction: column
712         flex-direction: column
713         -webkit-justify-content: space-between
714         justify-content: space-between
715         -ms-flex: 0 0 auto
716         -webkit-flex-shrink: 0
717         flex-shrink: 0
718         -webkit-flex-grow: 0
719         flex-grow: 0
720         width: 220px
721         height: 100%
722         background: #f0eeee
723         border-right: 1px solid $tag-border
724         position: relative
725         display: inline-block\9
726         vertical-align: top\9
727         a.oe_logo
728             text-align: center
729             -webkit-flex-shrink: 0
730             flex-shrink: 0
731             img
732                 margin: 14px 0
733                 border: 0
734             .oe_logo_edit
735                 margin: 14px 0
736                 position: absolute
737                 top: 1px
738                 padding: 4px
739                 width: 100%
740                 display: none
741                 text-align: center
742                 color: #eee
743                 background: rgba(37,37,37,0.9)
744                 @include box-sizing(border)
745             &:hover .oe_logo_edit_admin
746                 display: block
747         .oe_secondary_menus_container
748             -webkit-flex-grow: 1
749             flex-grow: 1
750             overflow-y: auto
751         .oe_footer
752             background: #f0eeee
753             text-align: center
754             -webkit-flex-shrink: 0
755             flex-shrink: 0
756             a
757                 font-weight: bold
758                 span
759                     color: #a24689
760     // }}}
761     // Webclient.leftbar items {{{
762
763     .oe_secondary_menu_section
764         font-weight: bold
765         margin-left: 8px
766         color: $link-color
767     .oe_secondary_submenu
768         margin-bottom: 10px !important
769         line-height: 1.1em
770         margin-top: 3px
771         .oe_menu_text
772             white-space: nowrap
773             overflow: hidden
774             display: inline-block
775             text-overflow: ellipsis
776             max-width: 85%
777             margin-top: 1px
778         .badge
779             &:hover
780                 cursor: pointer
781                 @include transform(scale(1.1))
782         .oe_menu_toggler:before
783             width: 0
784             height: 0
785             display: inline-block
786             content: "&darr"
787             text-indent: -99999px
788             vertical-align: top
789             margin-left: -12px
790             margin-top: 4px
791             margin-right: 4px
792             border-top: 4px solid transparent
793             border-bottom: 4px solid transparent
794             border-left: 4px solid #4c4c4c
795             @include opacity(0.5)
796         .oe_menu_opened:before
797             margin-top: 6px
798             margin-left: -16px
799             margin-right: 4px
800             border-left: 4px solid transparent
801             border-right: 4px solid transparent
802             border-top: 4px solid #4c4c4c
803         .oe_secondary_submenu li
804             margin-left: 20px
805     // }}}
806     // About openerp {{{
807     $link-color-odoo: #a24689
808     .oe_about
809         .label
810             background-color: $link-color-odoo
811         a
812             color: $link-color-odoo
813
814         .user-details
815             position: relative
816             padding: 0
817             margin-bottom: 275px
818             .user-image
819                 width: 100%
820                 text-align: center
821             .user-info-block
822                 width: 100%
823                 position: absolute
824                 top: 55px
825                 padding-top: 35px
826                 .user-heading
827                     text-align: center
828                     margin: 10px 0 0
829                 .navigation
830                     li
831                         a
832                             padding: 10px 20px
833                         &.active a
834                             background: $link-color-odoo
835                             color: #fff
836                 .user-body
837                     text-align: center
838                     .tab-content > div
839                         float: left
840                         width: 100%
841         a.oe_activate_debug_mode
842             color: white !important
843             font-size: 100%
844         #social
845             i
846                 margin: 10px
847                 &:hover
848                     @include transform(scale(1.3))
849             .social-fb:hover
850                 color: #3B5998
851             .social-tw:hover
852                 color: #4099FF
853             .social-gp:hover
854                 color: #d34836
855             .social-lk:hover
856                 color: #007bb6
857     // }}}
858     // ActionManager {{{
859     a.oe_form_uri:hover
860         text-decoration: underline
861     .oe_application
862         height: 100%
863         -webkit-flex-grow: 1
864         flex-grow: 1
865         -ms-flex-negative: 1
866         display: inline-block\9
867         overflow: auto\9
868         width: -webkit-calc(100% - 220px)
869         width: calc(100% - 220px)
870         .oe_application
871             width: 100%
872     // }}}
873     // ViewManager common {{{
874     .oe-view-manager
875         width: 100%
876         height: 100%
877         display: -webkit-flex
878         display: flex
879         -webkit-flex-direction: column
880         flex-direction: column
881         .oe-view-manager-content
882             overflow: auto
883             -webkit-flex-grow: 1
884             flex-grow: 1
885             position: relative
886             a
887                 color: $link-color
888             > div
889                 position: absolute
890                 position: static\9
891                 top: 0
892                 bottom: 0
893                 right: 0
894                 left: 0
895                 display: none
896             .oe-view-manager-content
897                 > div
898                     position: relative
899                     display: block
900         .oe-view-manager-debug
901             margin-right: 5px
902     .oe-view-manager-header
903         background-color: rgb(240, 238, 238)
904         border-bottom: 1px solid #afafb6
905         -webkit-flex-shrink: 0
906         flex-shrink: 0
907         width: 100%
908         -webkit-user-select: none
909         -moz-user-select: none
910         user-select: none
911         .oe-button-column
912             height: 30px
913         .dropdown-menu
914             li
915                 position: relative
916                 a
917                     padding: 3px 25px
918             .oe_searchview_custom_public
919                 a:after
920                     font-family: FontAwesome
921                     content: "\f0c0"
922                     color: #666
923                     margin-left: 3px
924         .selected
925             display: block
926             a
927                 font-weight: bold
928             a:before
929                 font-family: FontAwesome
930                 position: absolute
931                 left: 6px
932                 top: 3px
933                 content: "\f00c"
934         .oe-right-toolbar
935             float: right
936             > div
937                 display: inline-block
938         .row:first-child
939             padding-top: 3px
940             padding-bottom: 3px
941         .row:last-child
942             padding-bottom: 10px
943         .oe_tag
944             @include radius(0px)
945         .oe-view-title
946             font-size: 18px
947             padding-left: 0
948             margin: 0
949             background-color: rgb(240, 238, 238)
950             li
951                 -moz-user-select: initial
952                 -webkit-user-select: initial
953                 user-select: initial
954         .oe-view-manager-search-view
955             padding-top: 5px
956         .oe-view-manager-switch
957             .oe-vm-switch-kanban:before
958                 content: "\f009"
959             .oe-vm-switch-list:before
960                 content: ""
961             .oe-vm-switch-form:before
962                 content: "\f044"
963             .oe-vm-switch-graph:before
964                 content: "\f080"
965             .oe-vm-switch-calendar:before
966                 content: "\f073"
967             .oe-vm-switch-gantt:before
968                 content: "\f0ae"
969             .oe-vm-switch-pivot:before
970                 content: "\f0ce"
971         .oe-view-manager-buttons
972             display: inline-block
973             > div
974                 display: none
975         .oe-view-manager-sidebar
976             display: inline-block
977             float: right
978             .oe_form_binary_form
979                 cursor: pointer
980                 span
981                     padding: 3px 20px
982                 input.oe_form_binary_file
983                     width: 100%
984
985             .oe_form_binary_form:hover
986                 background-color: #f5f5f5
987             .oe_file_attachment
988                 padding: 3px 20px
989                 display: inline-block
990             .oe_sidebar_delete_item
991                 padding: 0
992                 display: inline-block
993             .dropdown-menu
994                 li
995                     a
996                         width: 100%
997         .oe_form_buttons
998             padding: 0
999         .oe_form_buttons_view
1000             > button
1001                 float: left
1002                 &:last-child
1003                     float: right
1004                     margin-left: 4px
1005
1006         .oe-pager-buttons
1007             min-height: 30px
1008     .oe_view_manager_inline, .oe_view_manager_inlineview
1009         > .oe-view-manager-header
1010             display: none
1011
1012         // }}}
1013     // FormPopup {{{
1014     .o-modal-header
1015         > div
1016             margin-left: 45%
1017     .oe_popup_form 
1018         display: none
1019         .oe_formview .oe_form_pager
1020             display: none !important
1021         // Customize label weight for popup wizard appear from another wizard according bootstrap3
1022         table label
1023             font-weight: normal
1024         // End of customize
1025     .oe_popup_list_pager
1026         float: right
1027     // }}}
1028     // SearchView {{{
1029     .oe_searchview
1030         cursor: text
1031         position: relative
1032         display: none
1033         height: auto
1034         padding-top: 1px
1035         padding-bottom: 1px
1036         .oe_searchview_unfold_drawer
1037             position: absolute
1038             top: 8px
1039             right: 5px
1040             cursor: pointer
1041         .oe_searchview_search
1042             cursor: pointer
1043             position: absolute
1044             top: 8px
1045             left: 5px
1046         .oe_searchview_facets
1047             min-height: 22px
1048             margin: 2px 20px 0 0
1049             *
1050                 vertical-align: top
1051                 display: inline-block
1052                 font-size: 100%
1053             .oe_searchview_facet
1054                 margin: 1px 0
1055                 font-size: 11px
1056                 &:focus
1057                     outline: none
1058                 .label
1059                     @include radius(0px)
1060             .oe_searchview_input
1061                 padding: 2px 0 0 6px
1062                 font-size: 12px
1063                 height: 16px
1064                 -webkit-user-select: initial
1065                 -moz-user-select: initial
1066                 user-select: initial
1067                 &:focus
1068                     outline: none
1069             .oe_searchview_input:first-child
1070                 margin-left: 10px
1071             .oe_searchview_facet
1072                 position: relative
1073                 cursor: pointer
1074                 padding: 0
1075                 -webkit-font-smoothing: auto
1076                 // spacing for opera, FF
1077                 &:focus
1078                     border-color: $tag-border-selected
1079                     @include box-shadow(0 0 3px 1px $tag-border-selected)
1080                 .oe_facet_values
1081                     background: $tag-bg-light
1082                 .oe_facet_category, .oe_facet_value
1083                     padding: 0 4px
1084                 .oe_facet_category
1085                     color: white
1086                     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1087                 .oe_facet_category.oe_i
1088                     font-size: 16px
1089                 .oe_facet_value
1090                     border-left: 1px solid #afafb6
1091                     color: #4C4C4C
1092                     &:last-child
1093                         padding-right: 16px
1094                     &:first-child
1095                         border-left: none
1096                 .oe_facet_remove
1097                     position: absolute
1098                     top: 3px
1099                     right: 3px
1100                     color: #8786b7
1101                     line-height: 8px
1102                     width: 12px
1103                     height: 12px
1104                     padding-top: 1px
1105                     text-align: center
1106                     font-weight: bold
1107                     cursor: pointer
1108                     text-shadow: 0 1px 1px white
1109                     &:hover
1110                         color: white
1111                         background: #8786b7
1112                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
1113                         @include radius(2px)
1114
1115         .oe-autocomplete
1116             display: none
1117             position: absolute
1118             background-color: white
1119             width: 400px
1120             border: 1px solid #afafb6
1121             z-index: 666
1122             margin-top: 2px
1123             cursor: default
1124             @include radius(3px)
1125             ul
1126                 list-style-type: none
1127                 padding-left: 0
1128                 margin: 5px 0px
1129                 li
1130                     padding-left: 20px
1131                     text-shadow: 0 0 0 white
1132                     span:first-child
1133                         margin-right: 5px
1134                     span.oe-expand
1135                         cursor: pointer
1136                 li.oe-indent
1137                     margin-left: 20px
1138                 li.oe-selection-focus
1139                     background-color: #7c7bad
1140                     color: white
1141                 li.oe-separator
1142                     margin-top: 2px
1143                     margin-bottom: 2px
1144                     border-top: 1px solid #afafb6
1145                 li.oe-separator:last-child
1146                     display: none
1147
1148     .oe-search-options
1149         a
1150             padding-left: 25px
1151             padding-right: 25px
1152             width: 100%
1153             -webkit-user-select: none
1154             -moz-user-select: none
1155             user-select: none
1156         .oe-apply-filter
1157             margin-left: 25px
1158         .oe-add-filter-menu
1159             display: none
1160         .oe-add-condition
1161             width: auto
1162             margin-left: 10px
1163             padding-left: 0
1164             padding-right: 10px
1165         .oe-group-selector
1166             margin: 3px 25px
1167             min-width: -webkit-calc(100% - 40px)
1168             min-width: calc(100% - 40px)
1169             max-width: 250px
1170             width: auto
1171         .divider
1172             display: none
1173         .filters-menu
1174             overflow: auto
1175             overflow-x: hidden
1176             .divider
1177                 display: list-item
1178         .closed-menu
1179             a:before
1180                 font-family: FontAwesome
1181                 position: absolute
1182                 left: 12px
1183                 top: 3px
1184                 content: "\f0da"
1185         .open-menu
1186             a:before
1187                 font-family: FontAwesome
1188                 position: absolute
1189                 left: 9px
1190                 top: 3px
1191                 content: "\f0d7"
1192
1193         .oe-select-group
1194             margin: 3px 25px
1195         .oe-add-group
1196             display: none
1197         .oe-save-name
1198             display: none
1199             margin: 3px 25px
1200             span
1201                 white-space: nowrap
1202                 input
1203                     margin-left: 0
1204         .searchview_extended_prop_field
1205             display: inline
1206             width: -webkic-calc(100% - 20px)
1207             width: calc(100% - 20px)
1208         
1209         .searchview_extended_prop_op
1210             margin: 3px 0
1211             width: -webkit-calc(100% - 20px)
1212             width: calc(100% - 20px)
1213         .searchview_extended_delete_prop
1214             float: right
1215             display: inline
1216             cursor: pointer
1217         .searchview_extended_prop_value
1218             width: -webkit-calc(100% - 20px)
1219             width: calc(100% - 20px)
1220             > select, > input
1221                 width: -webkit-calc(100% - 20px)
1222                 width: calc(100% - 20px)
1223             .oe_datepicker_main
1224                 width: -webkit-calc(100% - 20px)
1225                 width: calc(100% - 20px)
1226             .oe_datepicker_master
1227                 width: 100%
1228             .fa-calendar
1229                 margin-left: -21px
1230                 cursor: pointer
1231         span.remove-filter
1232             position: absolute
1233             top: 6px
1234             right: 10px
1235             cursor: pointer
1236         .dropdown-menu
1237             > li
1238                 position: relative
1239                 white-space: nowrap
1240             li.oe-filter-condition
1241                 white-space: normal
1242                 padding-left: 25px
1243                 padding-right: 10px
1244                 margin-bottom: 5px
1245                 .o-or-filter
1246                     display: none
1247             li.oe-filter-condition + li.oe-filter-condition
1248                 margin-top: 10px
1249                 .o-or-filter
1250                     display: block
1251             .o-or-filter
1252                 position: absolute
1253                 left: 5px
1254                 top: 5px
1255         a
1256             display: inline-block
1257
1258     input.oe-save-name
1259         width: auto
1260     .oe_pager_value
1261         display: inline-block  
1262
1263     // }}}
1264     // Views Common {{{
1265     .oe_view_nocontent
1266         padding: 15px
1267         margin-top: 0
1268         color: #777777
1269         font-size: 125%
1270         max-width: 700px
1271         .oe_view_nocontent_create
1272             margin-top: 0
1273             padding-top: 35px
1274             color: #4c4c4c
1275             &:before
1276                 content: ""
1277                 display: inline-block
1278                 position: absolute
1279                 width: 70px
1280                 height: 80px
1281                 margin-left: -70px
1282                 margin-top: -50px
1283                 background: transparent url(/web/static/src/img/view_empty_arrow.png) no-repeat 0px 0px
1284         > p
1285             padding-left: 78px
1286         .oe_empty_custom_dashboard
1287             background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0
1288             margin-top: -15px
1289             padding: 100px 0 0 137px
1290             min-height: 327px
1291             margin-left: -15px
1292     .oe_view.oe_cannot_create
1293         .oe_view_nocontent_create
1294             display: none
1295     // }}}
1296     // FormView.base and dynamic tags {{{
1297     .oe_formview
1298         background: white
1299     .oe_form_dropdown_section
1300         position: relative
1301         display: inline-block
1302     .oe_form_invalid
1303         input, select, textarea
1304             background-color: #F66 !important
1305             border: 1px solid #D00 !important
1306     .oe_view_manager_current .oe_form_editable
1307         .oe_highlight
1308             color: #404040
1309             background: none
1310         button.oe_highlight
1311             @include vertical-gradient(#efefef, #d8d8d8)
1312             @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
1313         button.oe_highlight:active
1314             @include vertical-gradient(#e3e3e3, #f6f6f6)
1315             @include box-shadow(none)
1316         button.oe_highlight:hover
1317             @include vertical-gradient(#f6f6f6, #e3e3e3)
1318             @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
1319     .oe_form_invisible
1320         display: none !important
1321     .oe_form_editable
1322         .oe_read_only
1323             display: none !important
1324     .oe_form_readonly
1325         .oe_edit_only, .oe_form_field:empty
1326             display: none !important
1327         .oe_form .oe_form_field_date
1328             width: auto
1329         .oe_form_field_boolean.boolean
1330             position: relative
1331             top: -20px
1332             width: 14px
1333             height: 14px
1334             z-index: 10000
1335             // IE needs a color in order for the layer to respond to mouse events
1336             backgroundColor: "#fff"
1337             opacity: 0
1338     // Sheet and padding
1339     .oe_form_nosheet
1340         margin: 16px
1341         > header
1342             margin: -16px -16px 0 -16px
1343             padding: 0
1344     .oe_form_nosheet.oe_form_nomargin
1345         margin: 0
1346         > header
1347             margin: 0
1348     .oe_form_sheetbg
1349         padding: 16px 0
1350     .oe_form_sheet_width
1351         min-width: 650px
1352         max-width: $sheet-max-width
1353         margin: 0 auto
1354     .oe_form_sheet
1355         background: white
1356         min-height: 330px
1357         padding: 16px
1358         .oe_list
1359             overflow-x: auto
1360     // Sheet inline mode
1361     .oe_application
1362         .oe_form_sheetbg
1363             background: url(/web/static/src/img/form_sheetbg.png)
1364             border-bottom: 1px solid #ddd
1365             // Customize font weight according bootstrap3
1366             .oe_subtotal_footer label
1367                 font-weight: bold
1368             table label
1369                 font-weight: normal
1370             // End of customize
1371         .oe_form_sheet
1372             border: 1px solid #c8c8d3 //$tag-border
1373             @include box-shadow(0 4px 20px rgba(0,0,0,0.15))
1374             .ui-tabs
1375                 margin: 0 -16px
1376             .oe_notebook_page
1377                 padding: 0 16px
1378     // }}}
1379     // FormView.header {{{
1380     .oe_form > :not(.oe_form_nosheet) header, .oe_form > .oe_form_nosheet header
1381         padding-left: 2px
1382         ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu)
1383             display: inline-block
1384             float: right
1385         .oe_button
1386             margin: 3px 2px 1px
1387             &:first-child
1388                 margin-left: 6px
1389
1390     .oe_form  header
1391         border-bottom: 1px solid #cacaca
1392         padding-left: 2px
1393         @include vertical-gradient(#fcfcfc, #dedede)
1394         > span
1395             margin-left: 4px        
1396         
1397     // }}}
1398     // FormView.custom tags and classes {{{
1399     .oe_form
1400         header
1401             .oe_tags
1402                 margin: 5px 0 0 5px
1403                 width: 400px
1404                 padding-bottom: 0
1405         div.oe_chatter
1406             box-sizing: border-box
1407             min-width: $sheet-min-width + 2* $sheet-padding
1408             max-width: $sheet-max-width + 2* $sheet-padding
1409             margin: 0 auto
1410             padding: 16px 16px 48px
1411         div.oe_form_configuration
1412             p, ul, ol
1413                 color: #aaa
1414                 max-width: 650px
1415             label
1416                 min-width: 150px
1417             .oe_form_group_cell_label
1418                 padding: 1px 0
1419             .oe_form_group_cell div div
1420                 padding: 1px 0
1421         .oe_subtotal_footer
1422             width: 1% !important
1423             td.oe_form_group_cell
1424                 text-align: right
1425                 padding: 0 !important
1426             td.oe_form_group_cell_label
1427                 border-right: none
1428             .oe_subtotal_footer_separator
1429                 min-width: 108px
1430                 border-top: 1px solid #cacaca
1431                 margin-top: 4px
1432                 padding-top: 4px
1433                 font-weight: bold
1434                 font-size: 18px
1435             label:after
1436                 content: ":"
1437             label.oe_subtotal_footer_separator
1438                 font-weight: bold !important
1439                 padding: 2px 11px 2px 0px !important
1440             label.oe_form_label_help
1441                 font-weight: normal !important
1442         .oe_form_box_info
1443             background: #fe9
1444             border-bottom: 1px solid #cb6
1445             padding: 4px
1446             > p
1447                 margin: auto
1448         .oe_form_box_warning
1449             background: #bd362f
1450             border-bottom: 1px solid #900
1451             padding: 4px
1452             *
1453                 color: white
1454                 text-shadow: none
1455             > p
1456                 margin: auto
1457     // }}}
1458     // FormView.group {{{
1459     .oe_form
1460         .oe_form_button
1461             margin: 2px
1462         td.oe_form_group_cell_label
1463             border-right: 1px solid #ddd
1464             padding: 2px 0px
1465             label
1466                 line-height: 18px
1467                 display: block
1468                 min-width: 150px
1469                 font-weight: bold !important
1470         td.oe_form_group_cell + .oe_form_group_cell
1471             padding: 2px 0 2px 8px
1472         .oe_form_group
1473             width: 100%
1474             margin: 9px 0 9px 0
1475             .oe_form_group_cell.oe_group_right
1476                 padding-left: 20px
1477     // }}}
1478     // FormView.label {{{
1479     .oe_form
1480         .oe_form_label_help[for], .oe_form_label[for]
1481             white-space: nowrap
1482             padding-right: 8px
1483             span
1484                 font-size: 80%
1485                 color: darkGreen
1486                 vertical-align: top
1487                 position: relative
1488                 top: -4px
1489                 padding: 0 2px
1490     // }}}
1491     // FormView.separator {{{
1492     .oe_horizontal_border
1493         border-bottom: 1px solid black
1494     .oe_horizontal_separator
1495         font-weight: bold
1496         font-size: 20px
1497         margin: 15px 0px 10px 0px
1498         color: $section-title-color
1499         &:empty
1500             height: 5px
1501     .oe_vertical_separator
1502         border-left: 1px solid #666
1503         padding: 0 4px 0 4px
1504     // }}}
1505     // FormView.progressbar {{{
1506     .oe_form_field_progressbar
1507         display: inline-block
1508         min-width: 70px
1509     .oe_form_field_progressbar.ui-progressbar
1510         height: 22px
1511         font-size: 10px
1512         @include box-sizing(border)
1513         border: 1px solid #999
1514         @include radius(3px)
1515         background: white
1516         min-width: 50px
1517         span
1518             position: absolute
1519             margin-left: 10px
1520             font-weight: bold
1521         .ui-widget-header
1522             background: #cccccc url(/web/static/lib/jquery.ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x
1523     // }}}
1524     // FormView.fields {{{
1525     .oe_form
1526         .oe_form_field_text
1527             width: 100%
1528             .oe_form_text_content
1529                 text-overflow: ellipsis
1530                 display: inline-block
1531                 white-space: pre-wrap
1532                 overflow-x: hidden
1533                 width: 100%
1534         .oe_form_field_char input,
1535         .oe_form_field_url input,
1536         .oe_form_field_email input,
1537         .oe_form_field_text textarea,
1538         .oe_form_field_selection select
1539             width: 100%
1540         .oe_notebook_page .oe_form_field_text textarea
1541             min-height: 96px
1542         .oe_form_field_text.oe_inline, .oe_form_field_text.oe_inline > textarea
1543             width: 500px
1544         h1, h2, h3, h4, h5, h6
1545             margin: 0 0 4px 0
1546             input
1547                 height: inherit !important
1548                 font-size: inherit
1549         // Customize for formview
1550         .oe_title h1, h1
1551             font-weight: bold
1552             font-size: 2em
1553         h2
1554             font-size: 1.5em
1555         label
1556             font-weight: bold
1557             margin-bottom: 0px
1558             display: inline
1559         // End of customize
1560         .oe_form_field
1561             width: 100%
1562             display: inline-block
1563             padding: 2px 2px 2px 0px
1564             vertical-align: top
1565             input
1566                 margin: 0px
1567         input[type="text"], input[type="password"], input[type="file"], select
1568             height: 22px
1569             padding-top: 2px
1570         input[type="text"], input[type="password"], input[type="file"], select, textarea
1571             @include box-sizing(border)
1572             background: white
1573             min-width: 60px
1574             color: #1f1f1f
1575             font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
1576         input[readonly], select[readonly], textarea[readonly], input[disabled], select[disabled]
1577             background: #E5E5E5 !important
1578             color: #666
1579         textarea[disabled]
1580             border: none
1581             padding-left: 8px
1582             @include box-shadow(none)
1583             @include radius(0px)
1584             color: #4c4c4c
1585         textarea.oe_inline[disabled]
1586             border-left: 8px solid #eee
1587         .oe_form_field_url button img
1588             vertical-align: top
1589         .oe_form_field_monetary,
1590         .oe_form_field_date,
1591         .oe_form_field_datetime
1592             white-space: nowrap
1593         .oe_form_field_boolean
1594             width: auto
1595         .oe_datepicker_root
1596             display: inline-block
1597             .datepickerbutton
1598                 margin-left: 5px
1599                 cursor: pointer
1600         .oe_form_required
1601             input:not([disabled]):not([readonly]), select:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])
1602                 background-color: #D2D2FF !important
1603         .oe_form_invalid
1604             input, select, textarea
1605                 background-color: #F66 !important
1606                 border: 1px solid #D00 !important
1607         .oe_input_icon
1608             cursor: pointer
1609             margin: 3px 0 0 -21px
1610             vertical-align: top
1611         .oe_input_icon_disabled
1612             position: absolute
1613             cursor: default
1614             opacity: 0.5
1615             filter: alpha(opacity=50)
1616             right: 5px
1617             top: 3px
1618         .oe_form_field_with_button.oe_no_button > .oe_button
1619             display: none
1620         .oe_form_field_with_button:not(.oe_no_button)
1621             > .oe_button
1622                 float: right
1623                 @include radius(0)
1624                 border-bottom-left-radius: 0px
1625                 height: 22px
1626         .oe_form_field_with_button
1627             input
1628                 width: 100%
1629             > div
1630                 position: relative
1631                 overflow: hidden
1632         .oe_form_embedded_html
1633             position: relative
1634             width: 100%
1635             margin: auto
1636             overflow: auto            
1637             text-align: justify
1638         .oe_form_field_html .oe_input_icon
1639             float: right
1640             margin: 4px 7px
1641
1642     .oe_form_editable
1643         .oe_form
1644             .oe_form_field_integer input
1645                 width: 6em
1646             .oe_form_field_float input
1647                 width: 7em
1648             .oe_form_field_date input
1649                 width: 100px
1650             .oe_form_field_datetime input
1651                 width: 150px
1652     // }}}
1653     // FormView.fields_binary {{{
1654     /* http://www.quirksmode.org/dom/inputfile.html
1655      * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
1656      */
1657     .oe_hidden_input_file
1658         // Position: relative is used for the hidden input[type=file]
1659         // Do not remove it anymore !
1660         position: relative
1661         input.oe_form_binary_file
1662             z-index: 0
1663             line-height: 0
1664             font-size: 12px
1665             position: absolute
1666             top: 1px
1667             left: 0
1668             right: 0
1669             opacity: 0
1670             filter: alpha(opacity = 0)
1671             -ms-filter: "alpha(opacity=0)"
1672             margin: 0
1673             padding: 0
1674     .oe_form
1675         .oe_form_field_binary
1676             display: inline-block
1677         .oe_form_field_image
1678             padding: 0
1679             position: relative
1680             display: inline-block
1681             width: auto
1682             vertical-align: top
1683             .oe_form_field_image_controls
1684                 position: absolute
1685                 top: 1px
1686                 padding: 6px 0
1687                 width: 100%
1688                 display: none
1689                 text-align: center
1690                 color: #eee
1691                 background: rgba(37,37,37,0.9)
1692                 @include radius(3px 3px 0 0)
1693                 @include box-sizing(border)
1694             &:hover .oe_form_field_image_controls
1695                 display: block
1696             img
1697                 max-width: 256px
1698                 max-height: 256px
1699     .oe_fileupload
1700         display: inline-block
1701         clear: both
1702         width: 100%
1703         margin-bottom: -15px
1704         .oe_add
1705             float: left
1706             position: relative
1707             width: 100%
1708             left: +2px
1709             margin: 9px 0 /* Customize margin according bootstrap3 */
1710             overflow: hidden
1711             button
1712                 display: inline
1713                 height: 24px
1714                 font-size: 12px
1715                 line-height: 12px
1716                 vertical-align: middle
1717             button.oe_attach
1718                 width: 24px
1719                 background: transparent
1720                 color: #7C7BAD
1721                 box-shadow: none
1722                 border: none
1723                 text-shadow: none
1724                 .oe_e
1725                     position: relative
1726                     top: -10px
1727                     left: -9px                    
1728             input.oe_form_binary_file
1729                 display: inline-block
1730                 margin-left: -85px
1731                 height: 22px
1732                 width: 152px
1733                 margin-top: -24px
1734                 cursor: pointer
1735             .oe_attach_label
1736                 color: #7C7BAD
1737                 margin-left: -3px
1738         .oe_attachments
1739             margin-bottom: 4px
1740             margin-right: 0px
1741             font-size: 12px
1742             border-radius: 2px
1743             border: solid 1px rgba(124,123,173,0.14)
1744             .oe_attachment
1745                 padding: 2px
1746                 padding-left: 4px
1747                 padding-right: 4px
1748                 .oe_e
1749                     font-size: 23px
1750                     margin-top: -5px
1751                 .oe_e:hover
1752                     text-decoration: none
1753             .oe_attachment:nth-child(odd)
1754                 background: white
1755             .oe_attachment:nth-child(even)
1756                 background: #F4F5FA
1757     // }}}
1758     // FormView.many2one {{{
1759     .oe_form_field_many2one
1760         display: inline-block
1761         td:first-child
1762             position: relative
1763         span.oe_m2o_drop_down_button
1764             position: absolute
1765             top: 2px
1766             right: 0px
1767         .oe_m2o_cm_button
1768             line-height: 14px
1769             float: right
1770             padding-left: 2px
1771         input
1772             padding-right: 13px
1773     &.ui-autocomplete
1774         li.oe_m2o_dropdown_option a
1775             font-style: italic
1776             padding-left: 2em
1777         li:not(.oe_m2o_dropdown_option) + li.oe_m2o_dropdown_option
1778             margin-top: 10px
1779     // }}}
1780     // FormView.fieldstatus {{{
1781     ul.oe_form_status, ul.oe_form_status_clickable
1782         display: inline-block
1783         margin: 0
1784         padding: 0 18px 0 0
1785         li
1786             display: inline-block
1787             list-style-type: none
1788             // It is probably a bad idea to modify this margin
1789             margin: 0 -18px 0 0
1790             padding: 0
1791             @include vertical-gradient(#fcfcfc, #dedede)
1792             &:first-child > .label
1793                 border-left: 1px solid #cacaca
1794                 padding-left: 14px
1795             &:last-child
1796                 border-right: 1px solid #cacaca
1797                 > .label
1798                     padding-right: 14px
1799                 > .arrow
1800                     display: none
1801             > .label
1802                 color: #4c4c4c
1803                 text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
1804                 padding: 7px
1805                 display: inline-block
1806                 padding-left: 24px
1807                 margin: 0
1808                 position: relative
1809                 // Customize for statusbar label
1810                 line-height: normal
1811                 font-size: 100%
1812                 font-weight: normal
1813                 // End of customize
1814             > .arrow
1815                 width: 17px
1816                 height: 30px
1817                 display: inline-block
1818                 vertical-align: top
1819                 overflow: hidden
1820                 margin-left: -5px
1821                 span
1822                     position: relative
1823                     width: 24px
1824                     height: 24px
1825                     display: inline-block
1826                     margin-left: -12px
1827                     margin-top: 3px
1828                     box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
1829                     @include skew-gradient(#fcfcfc, #dedede)
1830                     @include radius(3px)
1831                     @include transform(rotate(45deg))
1832         ul.oe_dropdown_menu
1833             display: none
1834             padding: 0
1835             min-width: 0
1836             &.oe_opened
1837                 display: block
1838             li
1839                 margin: 0
1840                 width: 100%
1841                 span.label
1842                     padding-left: 14px
1843
1844         li.oe_active
1845             @include vertical-gradient(#729fcf, #3465a4)
1846             > .arrow span
1847                 @include skew-gradient(#729fcf, #3465a4)
1848             > .label
1849                 color: white
1850                 text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
1851     ul.oe_form_status_clickable
1852         li
1853             cursor: pointer
1854             &:hover
1855                 @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
1856                 > .label
1857                     text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
1858                 > .arrow span
1859                     @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
1860             > .label
1861                 color: $link-color
1862         li.oe_active
1863             &:hover
1864                 @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
1865                 > .label
1866                     text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
1867                 > .arrow span
1868                     @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
1869     // }}}
1870     // FormView.one2many {{{
1871     .oe_form .oe_form_field_one2many > .oe_view_manager
1872         .oe_list_pager_single_page
1873             display: none
1874     .oe_form_field_one2many,.oe_form_field_many2many
1875         // TODO: oe_form_field_one2many_list?
1876         > .oe_view_manager
1877             .oe_list_pager_single_page
1878                 display: none !important
1879             .oe_view_manager_view_list
1880                 min-height: 132px
1881
1882         .oe_form_field_one2many_list_row_add,.oe_form_field_many2many_list_row_add
1883             font-weight: bold
1884         .oe_list_content
1885             > thead
1886                 border-bottom: 1px
1887             > tbody
1888                 tr:nth-child(odd)
1889                     background: transparent
1890         .oe_list .oe_list_edit_row_save
1891             background: url(/web/static/src/img/iconset-b-remove.png) 50% 50% no-repeat
1892             &:before
1893                 visibility: hidden
1894
1895         &> .oe_view_manager
1896             .oe_header_row_top
1897                 display: none
1898             .oe_view_manager_header2
1899                 td
1900                     padding: 0px 8px
1901                     line-height: 16px
1902                     .oe_i
1903                         font-size: 13px
1904                     .oe_pager_group
1905                         height: auto
1906                         line-height: 16px
1907                         li
1908                             height: auto
1909                             line-height: 16px
1910         .oe_list_buttons.oe_editing .oe_list_save
1911             // keep "save row" button hidden in o2m
1912             visibility: hidden
1913     .oe_form_editable
1914         .oe_list_editable
1915             .oe_list_content
1916                 td.oe_required
1917                     background-color: #d2d2ff
1918                 td.oe_readonly
1919                     background-color: #eee
1920
1921     $row-height: 27px
1922     .oe_list_editable .oe_list_content td.oe_list_field_cell
1923         padding: 4px 6px 3px
1924     .oe_list.oe_list_editable.oe_editing
1925         .oe_edition .oe_list_field_cell
1926             *
1927                 visibility: hidden
1928             color: transparent
1929             text-shadow: none
1930         .oe_m2o_drop_down_button
1931             top: 5px
1932         .oe_m2o_cm_button
1933             line-height: 19px
1934         .oe_input_icon
1935             margin-top: 5px
1936         .oe_form_field
1937             &.oe_list_field_handle
1938                 color: transparent
1939             &.oe_readonly
1940                 padding: 4px 6px 3px
1941                 text-align: left
1942             min-width: 0
1943             max-width: none
1944             input, textarea
1945                 height: $row-height
1946                 @include radius(0)
1947                 border: 1px solid #aaf
1948                 margin: 0
1949             input, textarea, select
1950                 min-width: 0
1951             &.oe_form_field_float,&.oe_form_view_integer
1952                 &.oe_readonly
1953                     padding: 6px 0px 0px
1954                     text-align: right
1955                 span
1956                     padding: 0px 6px
1957                 input
1958                     width: 100% !important
1959                     text-align: right
1960             &.oe_form_field_datetime,&.oe_form_field_date
1961                 input.oe_datepicker_master
1962                     width: 100% !important
1963             &.oe_form_field_reference
1964                 display: table
1965     .oe_list_group_name
1966         white-space: nowrap
1967     // }}}
1968     // FormView.many2many {{{
1969     .oe_form .oe_form_field_many2many > .oe_list
1970         .oe_list_pager_single_page
1971             display: none
1972     // }}}
1973     // ListView {{{
1974     .oe_list_buttons
1975         .oe_alternative
1976             visibility: hidden
1977         .oe_list_save, .oe_list_discard
1978             display: none
1979         &.oe_editing
1980             .oe_list_add
1981                 display: none
1982             .oe_list_save
1983                 display: inline-block
1984             .oe_list_discard
1985                 display: inline
1986             .oe_alternative
1987                 visibility: visible
1988
1989     .oe_list
1990         &.oe_cannot_edit
1991             .oe_list_header_handle, .oe_list_field_handle
1992                 display: none !important
1993                 padding: 0 !important
1994         &.oe_cannot_delete
1995             .oe_list_record_delete
1996                 display: none !important
1997
1998         .oe_form
1999             .oe_form_nosheet
2000                 margin: 0 // FIXME: either class or border should not be by default
2001                 padding: 0
2002                 border: none
2003             .oe_form_field
2004                 width: auto
2005                 position: absolute
2006                 margin: 0 !important // dammit
2007                 padding: 0
2008             .oe_form_field_boolean input
2009                 margin: 1px 0 0 10px !important
2010         .oe_list_content .oe_group_header
2011             @include vertical-gradient(#fcfcfc, #dedede)
2012
2013     .oe_list_content
2014         width: 100%
2015         td:first-child, th:first-child
2016             &:after
2017                 border-width: 0
2018         td.oe_number
2019             text-align: right !important
2020             max-width: 100px
2021         td.oe_list_field_date, th.oe_list_header_date
2022             min-width: 6em
2023         > thead
2024             border-bottom: 2px solid #cacaca
2025             background: #eee
2026             vertical-align: top
2027         td, th
2028             padding: 3px 6px
2029             line-height: 18px
2030         th.oe_sortable, th.oe_sortable div
2031             cursor: pointer
2032         th.oe_sortable div
2033             position: relative
2034         th.oe_sortable div:after
2035             margin-right: 6px
2036             content: ""
2037             margin-top: 7px
2038             border-width: 0 4px 4px
2039             border-style: solid
2040             border-color: #000 transparent
2041             visibility: hidden
2042         th.sortup div:after
2043             float: right
2044             visibility: visible
2045             @include opacity(0.6)
2046         .oe_list_header_many2many_tags
2047             min-width: 70px
2048         th.sortdown div:after
2049             float: right
2050             border-bottom: none
2051             border-left: 4px solid transparent
2052             border-right: 4px solid transparent
2053             border-top: 4px solid #000
2054             visibility: visible
2055             @include box-shadow(none)
2056             @include opacity(0.6)
2057         > tbody
2058             cursor: pointer
2059             > tr
2060                 height: $row-height
2061                 border-top: 1px solid #ddd
2062                 > td.oe_list_field_cell
2063                     padding: 3px 6px
2064                     white-space: pre-line
2065                 > td, > th
2066                     > button
2067                         border: none
2068                         background: transparent
2069                         padding: 0
2070                     > button.btn_txt
2071                         border: 1px solid rgba(0,0,0,0.4)
2072                         background: #e3e3e3
2073                         padding: 3px 12px
2074                 > td.oe_list_checkbox:first-child, th.oe_list_checkbox:first-child
2075                     width: 17px
2076                     &:after
2077                         border-width: 0
2078                 > td.oe_list_field_boolean input
2079                     @include opacity()
2080             > tr:nth-child(odd)
2081                 background-color: #f0f0fa
2082                 @include vertical-gradient(#f0f0fa, #eeeef6)
2083
2084         > tfoot
2085             border-top: 2px solid #cacaca
2086             border-bottom: 1px solid #cacaca
2087             background: #eee
2088             font-weight: bold
2089
2090
2091         .numeric
2092             text-align: right
2093             width: 82px
2094             input
2095                 text-align: right
2096         th.oe_list_header_handle
2097             font-size: 1px
2098             overflow: hidden
2099             text-indent: -9001px
2100         td.oe_list_field_handle
2101             width: 1em
2102             padding: 0 !important
2103             cursor: ns-resize
2104             .oe_list_handle
2105                 @include text-to-entypo-icon("}",#E0E0E0,18px)
2106                 margin-right: 7px
2107         .oe_list_field_progressbar progress
2108             width: 100%
2109     // }}}
2110     // Tree view {{{
2111     .tree_header
2112         background-color: #f0f0f0
2113         border-bottom: 1px solid #cacaca
2114         color: #4c4c4c
2115         padding: 5px
2116         height: 25px
2117         button
2118             float: right
2119             height: 27px
2120             margin-right: 5px
2121     .oe-treeview-table
2122         width: 100%
2123         background-color: white
2124         border-spacing: 0
2125         color: #4c4c4c
2126         th
2127             padding: 10px
2128             font-weight: bold
2129             background-color: #f0f0f0
2130             border-bottom: 2px solid #cacaca
2131
2132         td
2133             cursor: pointer
2134             vertical-align: middle
2135             text-align: left
2136             vertical-align: middle
2137             height: 20px
2138             padding-left: 4px
2139             padding-right: 4px
2140             border-right: 1px solid #e7e7e7
2141
2142         td.oe_number
2143             text-align: right !important
2144         tr
2145             border-bottom: 1px solid #d6d6d6
2146             &:hover
2147                 background-color: #e7e7e7
2148         span
2149             font-size: 90%
2150             font-weight: normal
2151             white-space: nowrap
2152             display: block
2153         .treeview-tr.oe-treeview-first
2154             background: transparent url(/web/static/src/img/expand.gif) 0 50% no-repeat
2155         .oe_open .treeview-tr.oe-treeview-first
2156             background-image: url(/web/static/src/img/collapse.gif)
2157         .treeview-tr.oe-treeview-first span, .treeview-td.oe-treeview-first span
2158             margin-left: 16px
2159     // }}}
2160     // Debugging stuff {{{
2161     .oe_layout_debugging
2162         .oe_form_group
2163             outline: 2px dashed green
2164         .oe_form_group_cell
2165             outline: 1px solid blue
2166         .oe_form_group:hover, .oe_form_group_cell:hover
2167             outline-color: red
2168         .oe_form_group_row_incomplete > td:last-child:after
2169             content: "[Incomplete Row]"
2170             background: red
2171             padding: 2px
2172             font-weight: bold
2173             color: white
2174             float: right
2175         .oe_form_group_row_incomplete.oe_form_group_row_newline > td:last-child:after
2176             content: "[newline]"
2177     .oe_debug_view
2178         float: left
2179         margin-top: 5px
2180         width: auto
2181     .oe_debug_view_log
2182         font-size: 95%
2183         line-height: 1.2em
2184     // }}}
2185     // Bootstrap HACKS {{{
2186     .oe_navbar .dropdown-menu
2187         font-size: 13px
2188         padding: 4px 0
2189         background: #333333 !important
2190         background: rgba(37, 37, 37, 0.9) !important
2191         border-color: #999999
2192         border-color: rgba(0, 0, 0, 0.2)
2193         background-color: #414141
2194         text-shadow: none
2195         @include vertical-gradient(#646060, #262626)
2196         @include radius(3px)
2197         li
2198             a,a:hover,a:focus
2199                 color: #eeeeee
2200
2201     // Minimized unused white space and label weight for wizard popup
2202     .oe_view_manager_new .oe_form_nosheet
2203         margin-top: 8px
2204         .oe_form_label
2205             font-weight: normal
2206
2207     // Customize bootstrap3 for leftbar
2208     .nav-pills
2209         li > a
2210             padding: 6px 4px 2px 18px
2211             color: #4c4c4c
2212         .nav-stacked > li > ul
2213             padding-left: 16px
2214     .nav-pills > li.active,a.list-group-item.active
2215         > a
2216             background-color: #7c7bad
2217             color: white
2218             border-radius: 0
2219         a:hover,a:focus
2220             background-color: #7c7bad
2221         .badge
2222             background-color: white
2223             color: #7c7bad
2224             text-shadow: none
2225     .badge
2226         font-weight: normal
2227         font-size: 11px
2228         background-color: #7c7bad
2229
2230     // Customize for global tags
2231     h1,h2
2232         font-weight: bold
2233     h3
2234         font-size: 1.17em
2235         font-weight: bold
2236     p
2237         display: block
2238         -webkit-margin-before: 1em
2239         -webkit-margin-after: 1em
2240         -webkit-margin-start: 0px
2241         -webkit-margin-end: 0px
2242     pre
2243         background-color: #FFFFFF
2244         border: none
2245         padding: 10px 0 3px 0
2246
2247
2248
2249     // Customize for chatter
2250     h5
2251         font-weight: bold
2252         font-size: smaller
2253     .oe_form .oe_subtype label, .oe_subtype label
2254         font-weight: normal
2255     .oe_msg_subtype_check
2256         margin: 3px 3px 0 !important
2257     // }}}
2258 // Customize for kanban tooltip
2259 .jqstooltip
2260     height: auto !important
2261     width: auto !important
2262     padding: 0
2263         
2264 @-moz-document url-prefix()
2265     .openerp
2266         .oe_form_field_many2one .oe_m2o_cm_button
2267             line-height: 18px
2268         .oe_webclient
2269             .oe_star_on, .oe_star_off
2270                 top: 0px
2271
2272 // Kitten Mode {{{
2273 .kitten-mode-activated
2274     background-size: cover
2275     background-attachment: fixed
2276     >*
2277         opacity: 0.70
2278 .loading-kitten
2279     @include radius(15px)
2280     @include box-shadow(0 0 5px 5px #999)
2281 // }}}
2282
2283 // jQueryUI top level {{{
2284 // The jQuery-ui overlay and Autocomplete are outside the .openerp div, please don't add indentation !!!
2285 div.ui-widget-overlay
2286     background: black
2287     @include opacity(0.3)
2288 // TODO: I think only the overlay is problematic, the other top level widgets should use $.fn.openerpClass()
2289 //       eg: $el.autocomplete().openerpClass();
2290 .ui-widget
2291     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2292     color: #4c4c4c
2293     font-size: 13px
2294
2295 .ui-menu
2296     padding: 2px 0
2297     @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
2298     margin-top: 4px
2299     border: 1px solid $tag-border
2300     .ui-menu-item
2301         width: 100%
2302         padding: 0
2303         a
2304             padding: 1px 16px
2305         a.ui-corner-all
2306             @include radius(0)
2307         a.ui-state-active
2308             background: #f0f0fa
2309     .ui-menu-item a.ui-state-hover, .ui-menu-item a.ui-state-active
2310         background: $tag-bg-dark
2311         //color: #4c4c4c
2312         //@include vertical-gradient(#f0f0fa, #eeeef6)
2313
2314 .ui-corner-all
2315     @include radius(3px)
2316 // }}}
2317
2318 .openerp
2319     .db_option_table
2320         td
2321             padding-bottom: 10px !important
2322
2323 // Server side single forms {{{
2324 @mixin single-form($width: 400px)
2325     padding: 10px
2326     position: absolute
2327     left: 50%
2328     top: 50%
2329     width: $width
2330     /* Set margins to offset 50% of the w/h */
2331     margin-top: -($width / 2)
2332     margin-left: -($width / 2)
2333
2334 body.oe_single_form
2335     background: #eee url(/web/static/src/img/form_sheetbg.png)
2336     height: 100%
2337
2338     .oe_single_form_logo
2339         padding: 10px
2340         text-align: center
2341         margin-bottom: 10px
2342
2343     .oe_single_form_footer
2344         position: absolute
2345         bottom: -30px
2346         right: 0px
2347         width: 100%
2348         text-align: center
2349
2350     .oe_single_form_container
2351         @include single-form(400px)
2352
2353 // }}}
2354
2355 // Internet Explorer 9+ specifics {{{
2356 .openerp_ie
2357     .placeholder
2358         color: $tag-border !important
2359         font-style: italic !important
2360     .oe_form_binary_file
2361         width: 80px
2362     .oe_form_field_boolean input
2363         background: #fff
2364     .db_option_table .oe_form_field_selection
2365         width: auto
2366     input[type='checkbox']
2367         border: none
2368         background: none
2369         box-shadow: none
2370     .oe_logo
2371         img
2372             border: none
2373     .oe_header_row
2374         button.oe_highlight
2375             padding-top: 0
2376             padding-bottom: 0
2377     .oe_view_manager_view_kanban
2378         display: table-cell
2379     .oe_view_manager_buttons
2380         button.oe_write_full
2381             padding-top: 0
2382             padding-bottom: 0
2383         button.oe_highlight
2384             padding-top: 0
2385             padding-bottom: 0
2386         button .oe_form_button_edit
2387             padding-top: 0
2388             padding-bottom: 0
2389         button .oe_form_button_create
2390             padding-top: 0
2391             padding-bottom: 0
2392     .oe_kanban_image
2393         border: none
2394     .oe_msg_icon
2395         border: none
2396     .oe_form
2397         header
2398             ul
2399                 height: 29px
2400     .oe_attach
2401         filter: none
2402     .oe_link
2403         filter: none
2404     .oe_kanban_show_more
2405         clear: both
2406         text-align: center
2407     &.oe_kanban_grouped .oe_kanban_show_more .oe_button
2408         width: 100%
2409         padding: 3px 12px
2410
2411     .oe_form_buttons button
2412         padding-top: 0
2413         padding-bottom: 0
2414     .oe_sidebar button
2415         padding-top: 0
2416         padding-bottom: 0
2417     img
2418         border: none
2419     //buttons.
2420     .oe_dropdown_arrow
2421         line-height: 1.7em
2422     .oe_form_buttons, .oe_view_manager_buttons
2423         button
2424             line-height: 1.7em
2425         .oe_highlight
2426             line-height: 1.7em
2427     .oe_topbar
2428         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646060', endColorstr='#262626')
2429     .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error
2430         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
2431     .oe_popup_form
2432         width: 99% !important
2433     .oe_form_label
2434         white-space: normal !important
2435     ul.oe_form_status, ul.oe_form_status_clickable
2436         li
2437             display: inline-block
2438             clear: both
2439             &:last-child
2440                 overflow: hidden
2441                 border-right: 1px solid #cacaca
2442                 > .label
2443                     padding-right: 14px
2444                     border-right: none
2445                 > .arrow
2446                     display: inline-block
2447                     opacity: 0
2448                     filter: alpha(opacity = 0)
2449                     border: none
2450                     width: 0
2451                     border-right: none 
2452             > .label
2453                 border-bottom: 1px solid #cacaca
2454                 background: transparent
2455             > .arrow
2456                 span
2457                     background-color: #eeeeee !important
2458         li.oe_active
2459             > .label
2460                 border-bottom: 1px solid #729fcf
2461             > .arrow span
2462                 background-color: #729fcf !important
2463
2464     .oe_webclient
2465         height: auto !important
2466 // }}}
2467
2468 // @media print {{{
2469 @media print
2470     .openerp
2471         .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper > div > .oe_view_manager_body
2472             overflow: visible
2473         .oe_header_row, ul.oe_header, div.oe_mail_thread_action, .oe_mail_recthread_actions, .oe_button_box, .oe_form button, button.oe_invite, .oe_form header, .openerp .oe_notebook > li.ui-state-default, .oe_topbar, .oe_leftbar, .oe_loading
2474             // We use !important here because jQuery adds @style = display: block on elements when using $.fn.show()
2475             display: none !important
2476         .oe_list_content
2477             button, input[type=checkbox]
2478                 visibility: hidden
2479         .tree_header button, .oe_mail .oe_mail_thread_msg .oe_mail_unread, .oe_mail_fetch_more, .oe_m2o_drop_down_button img, .oe_form_field_one2many_list_row_add
2480             visibility: hidden
2481         a
2482             &.oe_m2o_cm_button, &.oe_e
2483                 visibility: hidden
2484         .oe_form
2485             .oe_form_field_date img, .oe_form_field_datetime img
2486                 visibility: hidden
2487         .oe_notebook > li.ui-tabs-selected
2488             display: block
2489         .oe_application
2490             .oe_form_sheet, .oe_form_sheetbg
2491                 border: 0px !important
2492                 box-shadow: 0px 0px 0px
2493                 .oe_list
2494                     overflow-x: visible
2495         .oe_view_manager_current > .oe_view_manager_header
2496             border: 0px !important
2497             box-shadow: 0px 0px 0px
2498         text-shadow: none
2499         .text-core .text-wrap .text-arrow
2500             background: none
2501         .openerp div.oe_mail_wall
2502             overflow: hidden !important
2503     .openerp.openerp_webclient_container
2504         overflow: visible
2505 // }}}
2506
2507 // End of customize
2508
2509 // Customize bootstrap3 for tooltip
2510 .tooltip
2511     padding: 0
2512     margin: 0
2513     font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
2514     color: #4c4c4c
2515     font-size: 12px
2516     background: white
2517     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
2518     background-color: transparent
2519     z-index: 1800
2520     .tooltip-inner
2521         text-align: left !important
2522         max-width: 350px
2523         .oe_tooltip_string
2524             color: #FD5
2525             font-weight: bold
2526             font-size: 13px
2527         .oe_tooltip_help
2528             white-space: pre-wrap
2529         .oe_tooltip_technical
2530             padding: 0 0 4px 0
2531             margin: 5px 0 0 15px
2532             li
2533                 list-style: circle
2534         .oe_tooltip_technical_title
2535             font-weight: bold
2536         .oe_tooltip_close
2537             margin: -5px 0 0 2px
2538             cursor: default
2539             float: right
2540             color: white
2541             &:hover
2542                 color: #999
2543                 cursor: pointer
2544         .oe_tooltip_message
2545             max-width: 310px
2546
2547 // Hack for ui icon {{{
2548 .ui-icon
2549     width: 18px
2550     height: 18px
2551 // End hack}}}
2552
2553 // Customized modal according bootstrap3
2554 .modal
2555     .modal-header button.close
2556         border: none
2557         background: none
2558         padding: 1px
2559         height: 18px
2560         font-size: 20px
2561     .modal-body
2562         overflow: auto
2563         padding: 0
2564         .oe_application
2565             width: 100%
2566         .oe_popup_list
2567             display: none
2568             min-height: 150px
2569         .oe-view-manager
2570             min-height: 150px
2571         .oe_form_sheetbg
2572             .oe_form_sheet
2573                 padding: 0
2574     .modal-footer
2575         text-align: left
2576     .oe_button
2577         margin: 0 4px 0 0
2578     .oe_act_window.modal-body
2579         padding: 0
2580     .oe-view-manager-content > div
2581         position: static !important
2582
2583 @media (min-width: 768px)
2584     .modal .modal-body
2585         max-height: -webkit-calc(100vh - 170px)
2586         max-height: calc(100vh - 170px)
2587
2588 .ui-datepicker
2589     z-index: 1500 !important
2590
2591 input[type="radio"], input[type="checkbox"]
2592     margin-right: 4px
2593     margin-left: 4px
2594
2595 .blockUI.blockOverlay
2596     background-color: black
2597     opacity: 0.6000000238418579
2598
2599 /* ---- EDITOR TOUR ---- {{{ */
2600
2601 div.tour-backdrop
2602     z-index: 2009
2603 .popover.tour
2604     &.orphan .arrow
2605         display: none
2606     .popover-navigation
2607         padding: 9px 14px
2608         *[data-role="end"]
2609             float: right
2610         *[data-role="next"],*[data-role="end"]
2611             cursor: pointer
2612 .popover.fixed
2613     position: fixed
2614 .tour-backdrop
2615     position: fixed
2616     top: 0
2617     right: 0
2618     bottom: 0
2619     left: 0
2620     z-index: 1100
2621     background-color: #000
2622     opacity: 0.8
2623
2624
2625 // }}}
2626
2627 body
2628     overflow: hidden
2629
2630 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
2631     .oe-view-manager-content
2632         > div
2633             position: absolute !important
2634         .oe-view-manager-content
2635             > div
2636                 position: relative !important
2637
2638
2639 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
2640 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: