[IMP] website: create customize theme application and color-picker; Create theme_boot...
[odoo/odoo.git] / addons / website / static / src / css / website.sass
1 @charset "utf-8"
2
3 @import "common"
4
5 /*
6  *       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
7  *
8  * css for editor buttons, openerp widget included in the website and other
9  * stuff must go to the editor.css
10  *
11  */
12
13 /* ----- GENERIC LAYOUTING HELPERS ---- */
14
15 /* Vertical Spacing */
16 .mt128
17     margin-top: 128px !important
18 .mt92
19     margin-top: 92px !important
20 .mt64
21     margin-top: 64px !important
22 .mt48
23     margin-top: 48px !important
24 .mt32
25     margin-top: 32px !important
26 .mt16
27     margin-top: 16px !important
28 .mt8
29     margin-top: 8px !important
30 .mt4
31     margin-top: 4px !important
32 .mt0
33     margin-top: 0px !important
34
35 .mb128
36     margin-bottom: 128px !important
37 .mb92
38     margin-bottom: 92px !important
39 .mb64
40     margin-bottom: 64px !important
41 .mb48
42     margin-bottom: 48px !important
43 .mb32
44     margin-bottom: 32px !important
45 .mb16
46     margin-bottom: 16px !important
47 .mb8
48     margin-bottom: 8px !important
49 .mb4
50     margin-bottom: 4px !important
51 .mb0
52     margin-bottom: 0px !important
53
54 /* Extra Styles */
55
56 img.shadow
57     +border-radius(3px)
58     +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
59     margin: 0 auto
60
61 h1.text-muted, h2.text-muted, h3.text-muted
62     margin-top: 10px
63
64 header
65     a.navbar-brand.logo
66         padding: 0 15px
67     a.navbar-brand
68         img
69             max-height: 50px
70
71 // add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at
72 // the beginning of paragraphs so they don't "disappear" after saving when
73 // used solely for spacing.
74 #wrapwrap p:empty:after
75     content: '\2060'
76
77 /* ----- Snippets Styles ----- */
78
79 .para_large
80     font-size: 120%
81
82 .readable
83     font-size: 120%
84     max-width: 700px
85     margin-left: auto
86     margin-right: auto
87
88 /* ----- EDITOR ----- */
89 #oe_main_menu_navbar
90     min-height: 34px
91     z-index: 1001
92     +border-radius(0px)
93     margin-bottom: 0px
94     li a, li button
95         padding: 4px 8px 4px 8px
96         margin-top: 2px
97         font-size: 13px
98     .navbar-nav.navbar-right:last-child
99         margin-right: 0 !important
100
101 .css_non_editable_mode_hidden
102     display: none
103
104 /* ----- BOOTSTRAP FIX ----- */
105
106 .container, .readable
107     .container
108         padding-left: 0
109         padding-right: 0
110         width: auto
111
112 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
113
114 .navbar.navbar-static-top
115     margin-bottom: 0
116     ul.nav
117         > li.divider
118             margin-top: 15px
119             padding-top: 20px
120             border-right: 1px solid grey
121
122 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
123
124 html,body, #wrapwrap
125     +box-sizing(border-box)
126     height: 100%
127
128 #wrapwrap
129     display: table
130     width: 100%
131
132 header, main, footer
133     display: table-row
134
135 footer
136     height: 100%
137     background: rgb(239, 248, 248)
138     background: rgba(200, 200, 200, 0.1)
139
140 #footer_container
141     padding-top: 24px
142     padding-bottom: 12px
143
144 /* ----- BOOTSTRAP FIX ----- */
145
146 .col-md-12
147     float: left
148     width: 100%
149
150 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
151
152 .oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
153     background-image: url('/website/static/src/img/drag_here.png') !important
154
155 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
156     background-image: none
157     background-repeat: no-repeat
158     background-position: center
159     height: 220px !important
160
161 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
162     position: static
163
164 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
165     content: ' '
166     text-align: center
167     display: block
168     padding-top: 160px
169     padding-bottom: 30px
170     color: grey
171     font-size: 24px
172
173 .oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
174     content: 'Drag Building Blocks Here' !important
175
176 .css_editable_display
177     display: none
178
179 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
180
181 .navbar .nav > li > p
182     margin-bottom: 0px
183
184 // .navbar .nav > li  a
185 //     text-shadow: none
186
187 // .nav > li  a
188 //     display: block
189
190 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
191
192 .nav-hierarchy
193     padding-left: 16px
194
195 /* -- Hack for removing double scrollbar from mobile preview -- */
196 div#mobile-preview.modal
197     overflow: hidden
198
199 ul.nav-stacked > li > a
200     padding: 2px 15px
201
202 #customize-menu .dropdown-header
203     text-transform: uppercase
204
205 /* ---- PUBLISH ---- */
206 .css_published
207     .btn-danger, .css_publish
208         display: none
209 .css_unpublished
210     .btn-success, .css_unpublish
211         display: none
212
213 [data-publish='off']>*:not(.css_options)
214     +opacity(0.5)
215
216 /* ---- END of PUBLISH ---- */
217
218 @include selection
219     background: rgba(150, 150, 220, 0.3)
220
221 .logo-img
222     width: 220px
223
224
225 .oe_demo
226     position: relative
227     img
228         width: 100%
229     div
230         position: absolute
231         left: 0
232         background-color: rgba(0,0,0,0.4)
233         opacity: 0.85
234         bottom: 0px
235         width: 100%
236         padding: 7px
237         color: white
238         font-weight: bold
239         a
240             color: white
241
242
243 /* ---- SNIPPETS --- */
244
245 .oe_img_bg
246     background-size: 100%
247
248 .carousel, .parallax, .blockquote
249     overflow: hidden
250
251 @media (max-width: 400px)
252     section, .parallax, .row, .hr, .blockquote
253         height: auto !important
254
255 .carousel-inner
256     height: 100%
257     .item
258         height: 100%
259         background-size: cover
260 .carousel
261     .carousel-control
262         cursor: pointer
263         span
264             top: 50%
265             position: absolute
266             margin-top: -8px
267         &.left
268             left: -10px
269             *
270                 position: absolute
271                 top: 50%
272                 z-index: 5
273                 right: 50%
274         &.right
275             right: -10px
276             *
277                 position: absolute
278                 top: 50%
279                 z-index: 5
280                 left: 50%
281
282 .quotecarousel
283     padding-bottom: 16px
284
285 .hr
286     padding: 4px 0
287
288 /* Parallax Theme */
289
290 div.carousel
291     .carousel-indicators
292         li
293             border: 1px solid grey
294         .active
295             background-color: grey
296     span.carousel-img img, div.carousel-content
297         max-height: 95%
298         padding: 10px        
299     div.carousel-content
300         background-color: black
301         color: white
302         background: rgba(0, 0, 0, 0.3)
303         margin-top: 75px
304
305 .parallax
306     background-size: cover
307     > div
308         position: relative
309         display: table
310         width: 100%
311         min-height: 200px
312         > div
313             display: table-cell
314             vertical-align: middle
315             padding: 32px 0
316
317 /* Misc */
318
319 .texttop
320     vertical-align: top
321
322 table.well tr
323     th
324         text-align: right
325         padding-right: 10px
326     td
327         padding-right: 5px
328
329 .logo-img
330     width: 220px
331
332 .oe_demo
333     position: relative
334     img
335         width: 100%
336     div
337         position: absolute
338         left: 0
339         background-color: rgba(0,0,0,0.4)
340         opacity: 0.85
341         bottom: 0px
342         width: 100%
343         padding: 7px
344         color: white
345         font-weight: bold
346         a
347             color: white
348
349 address
350     .fa.fa-mobile-phone
351         margin: 0 3px 0 2px
352     .fa.fa-file-text-o
353         margin-right: 1px
354
355 span[data-oe-type="monetary"]
356     white-space: nowrap
357
358 .oe_template_fallback
359     @include column-count(3)
360
361 .oe_website_login_container
362     width: 400px
363     margin: 40px auto
364
365 .oe_website_overflow_ellipsis
366     white-space:nowrap
367     overflow:hidden
368     text-overflow:ellipsis
369
370 div.media_iframe_video
371     height: 0
372     margin: 0 auto
373     text-align: center
374     position: relative
375     overflow: hidden
376     padding-bottom: 66.5%
377     iframe
378         width: 100%
379         height: 100%
380     div
381         position: absolute
382         width: 100%
383         height: 100%
384         display: none
385
386 /* Mobile view */
387
388 @media (max-width: 768px)
389     img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
390         -webkit-transform: none !important
391         -moz-transform: none !important
392         -ms-transform: none !important
393         -o-transform: none !important
394         transform: none !important