diff options
Diffstat (limited to 'addons/web_editor/static/src/scss/web_editor.common.scss')
| -rw-r--r-- | addons/web_editor/static/src/scss/web_editor.common.scss | 186 |
1 files changed, 92 insertions, 94 deletions
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 99f6a474397..577e2e568b3 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -31,7 +31,7 @@ html, body { min-width: 20px; } } - @media (max-width: @screen-xs-max) { + @media (max-width: $screen-xs-max) { .table-responsive > table.table { table-layout: auto; } @@ -83,7 +83,7 @@ div.media_iframe_video { iframe { width: 100%; height: 100%; - .o-position-absolute(@top: 0); + @include o-position-absolute($top: 0); margin: 0 auto; margin-left: -50%; } @@ -108,7 +108,7 @@ div.media_iframe_video { } .css_editable_mode_display { - .o-position-absolute(); + @include o-position-absolute; width: 100%; height: 100%; display: none; @@ -120,7 +120,7 @@ html[data-browser^="msie"] div.media_iframe_video iframe { margin-left: 0; } -@media (max-width: @screen-xs-max) { +@media (max-width: $screen-xs-max) { img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa { -webkit-transform: none !important; -moz-transform: none !important; @@ -159,72 +159,70 @@ ul.oe_menu_editor { } // Generate all spacings for all sizes -.o-spacing-all(@factor: 1) { +@mixin o-spacing-all($factor: 1) { // Generate vertical margin/padding classes used by the editor - .o-generate-spacings(256/8); - .o-generate-spacings(@n, @i: 0) when (@i =< @n) { - .o-vspacing(@i * 8); - .o-generate-spacings(@n, @i + 1); + @for $i from 0 through (256 / 8) { + @include o-vspacing($i * 8); } - .o-vspacing(4, @factor); + @include o-vspacing(4, $factor); // 92px vertical margin is kept for compatibility - .o-vmargins(92, @factor); + @include o-vmargins(92, $factor); // Some horizontal margin classes defined for convenience // (and compatibility) - .o-hmargins(0, @factor); - .o-hmargins(4, @factor); - .o-hmargins(8, @factor); - .o-hmargins(16, @factor); - .o-hmargins(32, @factor); - .o-hmargins(64, @factor); + @include o-hmargins(0, $factor); + @include o-hmargins(4, $factor); + @include o-hmargins(8, $factor); + @include o-hmargins(16, $factor); + @include o-hmargins(32, $factor); + @include o-hmargins(64, $factor); } // Generate all spacings for one size, scalled by a given factor // (0 <= factor <= 1) -.o-vspacing(@name, @factor: 1) { - .o-vmargins(@name, @factor); - .o-vpaddings(@name, @factor); +@mixin o-vspacing($name, $factor: 1) { + @include o-vmargins($name, $factor); + @include o-vpaddings($name, $factor); } -.o-vmargins(@name, @factor: 1) { - .o-vmargins-define(@name, @factor * @name); +@mixin o-vmargins($name, $factor: 1) { + @include o-vmargins-define($name, $factor * $name); } -.o-vpaddings(@name, @factor: 1) { - .o-vpaddings-define(@name, @factor * @name); +@mixin o-vpaddings($name, $factor: 1) { + @include o-vpaddings-define($name, $factor * $name); } -.o-hspacing(@name, @factor: 1) { - .o-hmargins(@name, @factor); - .o-hpaddings(@name, @factor); +@mixin o-hspacing($name, $factor: 1) { + @include o-hmargins($name, $factor); + @include o-hpaddings($name, $factor); } -.o-hmargins(@name, @factor: 1) { - .o-hmargins-define(@name, @factor * @name); +@mixin o-hmargins($name, $factor: 1) { + @include o-hmargins-define($name, $factor * $name); } -.o-hpaddings(@name, @factor: 1) { - .o-hpaddings-define(@name, @factor * @name); +@mixin o-hpaddings($name, $factor: 1) { + @include o-hpaddings-define($name, $factor * $name); } // Generate all spacings for one size, given the name of the spacing and // intended size -.o-vmargins-define(@name, @size: @name) { - .mt@{name} { margin-top: unit(@size, px)!important; } - .mb@{name} { margin-bottom: unit(@size, px)!important; } +@mixin o-vmargins-define($name, $size: $name) { + .mt#{$name} { margin-top: $size * 1px !important; } + .mb#{$name} { margin-bottom: $size * 1px !important; } } -.o-vpaddings-define(@name, @size: @name) { - .pt@{name} { padding-top: unit(@size, px)!important; } - .pb@{name} { padding-bottom: unit(@size, px)!important; } +@mixin o-vpaddings-define($name, $size: $name) { + .pt#{$name} { padding-top: $size * 1px !important; } + .pb#{$name} { padding-bottom: $size * 1px !important; } } -.o-hmargins-define(@name, @size: @name) { - .ml@{name} { margin-left: unit(@size, px)!important; } - .mr@{name} { margin-right: unit(@size, px)!important; } +@mixin o-hmargins-define($name, $size: $name) { + .ml#{$name} { margin-left: $size * 1px !important; } + .mr#{$name} { margin-right: $size * 1px !important; } } -.o-hpaddings-define(@name, @size: @name) { - .pl@{name} { padding-left: unit(@size, px)!important; } - .pr@{name} { padding-right: unit(@size, px)!important; } +@mixin o-hpaddings-define($name, $size: $name) { + .pl#{$name} { padding-left: $size * 1px !important; } + .pr#{$name} { padding-right: $size * 1px !important; } } // Generate all margins -.o-spacing-all(); +@include o-spacing-all; // Underline a.o_underline { @@ -235,74 +233,74 @@ a.o_underline { } // Colors -@gray-white: #fff; +$gray-white: #fff; -@color-alpha: #1cc1a9; -@color-beta: #875A7B; -@color-gamma: #BA3C3D; -@color-delta: #0D6759; -@color-epsilon: #0B2E59; +$color-alpha: #1cc1a9; +$color-beta: #875A7B; +$color-gamma: #BA3C3D; +$color-delta: #0D6759; +$color-epsilon: #0B2E59; // Greyscale transparent colours -@color-black-25: fade(black, 25%); -@color-black-50: fade(black, 50%); -@color-black-75: fade(black, 75%); -@color-white-25: fade(white, 25%); -@color-white-50: fade(white, 50%); -@color-white-75: fade(white, 75%); +$color-black-25: rgba(black, 0.25); +$color-black-50: rgba(black, 0.5); +$color-black-75: rgba(black, 0.75); +$color-white-25: rgba(white, 0.25); +$color-white-50: rgba(white, 0.5); +$color-white-75: rgba(white, 0.75); -.o-create-color-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @content-color: @color) { - .bg-@{name} { - background-color: @color; - color: @complementary; +@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) { + .bg-#{$name} { + background-color: $color; + color: $complementary; .text-muted { - color: fade(@complementary, 40%); + color: rgba($complementary, 0.4); } } - body .text-@{name} { // body to make the rules more important that bg-* ones - color: @content-color; + body .text-#{$name} { // body to make the rules more important that bg-* ones + color: $content-color; } } -.o-create-color-btn-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @border-color: darken(@color, 5%)) { - .btn-@{name} { - .button-variant(@complementary, @color, @border-color); +@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) { + .btn-#{$name} { + @include button-variant($complementary, $color, $border-color); } } // Create classes for theme colors... -.o-create-color-classes(alpha, @color-alpha); -.o-create-color-classes(beta, @color-beta); -.o-create-color-classes(gamma, @color-gamma); -.o-create-color-classes(delta, @color-delta); -.o-create-color-classes(epsilon, @color-epsilon); +@include o-create-color-classes(alpha, $color-alpha); +@include o-create-color-classes(beta, $color-beta); +@include o-create-color-classes(gamma, $color-gamma); +@include o-create-color-classes(delta, $color-delta); +@include o-create-color-classes(epsilon, $color-epsilon); // ... and button classes -.o-create-color-btn-classes(alpha, @color-alpha); -.o-create-color-btn-classes(beta, @color-beta); -.o-create-color-btn-classes(gamma, @color-gamma); -.o-create-color-btn-classes(delta, @color-delta); -.o-create-color-btn-classes(epsilon, @color-epsilon); +@include o-create-color-btn-classes(alpha, $color-alpha); +@include o-create-color-btn-classes(beta, $color-beta); +@include o-create-color-btn-classes(gamma, $color-gamma); +@include o-create-color-btn-classes(delta, $color-delta); +@include o-create-color-btn-classes(epsilon, $color-epsilon); // Create classes for UI colors -.o-create-color-classes(primary, @brand-primary); -.o-create-color-classes(success, @state-success-bg, @content-color: @state-success-text); -.o-create-color-classes(info, @state-info-bg, @content-color: @state-info-text); -.o-create-color-classes(warning, @state-warning-bg, @content-color: @state-warning-text); -.o-create-color-classes(danger, @state-danger-bg, @content-color: @state-danger-text); +@include o-create-color-classes(primary, $brand-primary); +@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); +@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); +@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); +@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); // Create classes for greyscale colors -.o-create-color-classes(~'black', @gray-base); -.o-create-color-classes(~'gray-darker', @gray-darker); -.o-create-color-classes(~'gray-dark', @gray-dark); -.o-create-color-classes(~'gray', @gray); -.o-create-color-classes(~'gray-light', @gray-light); -.o-create-color-classes(~'gray-lighter', @gray-lighter); -.o-create-color-classes(~'white', @gray-white); +@include o-create-color-classes('black', $gray-base); +@include o-create-color-classes('gray-darker', $gray-darker); +@include o-create-color-classes('gray-dark', $gray-dark); +@include o-create-color-classes('gray', $gray); +@include o-create-color-classes('gray-light', $gray-light); +@include o-create-color-classes('gray-lighter', $gray-lighter); +@include o-create-color-classes('white', $gray-white); // Create classes for greyscale transparent colours -.o-create-color-classes(~'black-25', @color-black-25); -.o-create-color-classes(~'black-50', @color-black-50); -.o-create-color-classes(~'black-75', @color-black-75); -.o-create-color-classes(~'white-25', @color-white-25); -.o-create-color-classes(~'white-50', @color-white-50); -.o-create-color-classes(~'white-75', @color-white-75); +@include o-create-color-classes('black-25', $color-black-25); +@include o-create-color-classes('black-50', $color-black-50); +@include o-create-color-classes('black-75', $color-black-75); +@include o-create-color-classes('white-25', $color-white-25); +@include o-create-color-classes('white-50', $color-white-50); +@include o-create-color-classes('white-75', $color-white-75); |