diff options
Diffstat (limited to 'addons/website/static/src/scss/website.editor.ui.scss')
| -rw-r--r-- | addons/website/static/src/scss/website.editor.ui.scss | 225 |
1 files changed, 223 insertions, 2 deletions
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss index 403b7929a92..5071e2f8b90 100644 --- a/addons/website/static/src/scss/website.editor.ui.scss +++ b/addons/website/static/src/scss/website.editor.ui.scss @@ -1,3 +1,224 @@ +@each $url in $o-theme-font-urls { + @if $url { + @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}"); + } +} + +.modal.o_theme_customize_modal { + .modal-dialog { + @include o-position-absolute(0, 2%); + width: 96%; + max-width: 550px; + } + .modal-header { + background-color: $o-brand-odoo; + color: white; + border-radius: 0; + + * { + color: inherit; + } + } + + .close:hover, .close:focus { + color: white; + } + + .nav { + padding: 0; + + .nav-item { + background-color: $o-brand-lightsecondary; + + .nav-link { + color: $o-main-text-color; + + &.active { + font-weight: bold; + background-color: white; + border: 1px solid #d9d7d7; + border-left: 1px solid #333333; + } + &:hover, &:focus { + text-decoration: none; + } + } + } + } + + .dropdown-menu { + position: static !important; + transform: none !important; + min-width: 100%; + } + + .o_theme_customize_option { + position: relative; + width: 100%; + + > img { + width: 100%; + + + label { + @include o-position-absolute(0, 0, 0, 0); + width: auto; + background: transparent !important; + } + } + + label { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 24px; + margin: 0; + padding: 8px; + text-align: center; + font-size: 14px; + line-height: 1; + cursor: pointer; + + &:hover::after { + content: ""; + pointer-events: none; + @include o-position-absolute(0, 0, 0, 0); + background-color: rgba(0, 32, 64, 0.03); + } + + &.o_switch { + justify-content: flex-start; + } + } + &:not(.dropdown-item) label { + border: 2px solid transparent; + background-color: $o-brand-lightsecondary; + + &.checked { + border-color: $o-brand-odoo; + color: $o-brand-odoo; + } + } + + &.o_theme_customize_with_widget { + label { + justify-content: flex-start; + text-align: left; + + &.checked { + border-color: transparent; + color: inherit; + } + } + } + } + + .o_theme_customize_color { + position: relative; + width: 30px; + height: 20px; + margin-left: auto; + border: 1px solid black; + + &::before, &::after { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + } + &::before { + background-image: url('/web_editor/static/src/img/transparent.png'); + } + &::after { + background-color: inherit; + } + } + + .o_theme_customize_input { + flex: 1 1 auto; + text-align: right; + + .fa-edit { + visibility: hidden; + color: $o-brand-primary; + } + } + .o_theme_customize_option:hover .o_theme_customize_input .fa-edit { + visibility: visible; + } + + .o_theme_customize_active_input { + @include o-position-absolute(0, 0, 0, 0); + width: auto; + padding: 3px; + + > * { + height: 100% !important; + + &.form-control { + background: white !important; + } + + &.form-control, .btn { + padding: 2px 8px !important; + text-align: right !important; + font-size: $font-size-sm !important; + } + } + } + + .o_theme_customize_option_input { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; + } + + .o_theme_customize_option_list { + box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05); + } + + .o_theme_customize_dropdown_btn { + background-color: $o-brand-lightsecondary; + } + + $i: 1; + @each $font in $o-theme-fonts { + .o_theme_customize_option_font_#{$i} { + font-family: if($font, $font, $font-family-base); + + &.o_theme_customize_option > label > span, + &.dropdown-toggle { + &::before { + content: nth($o-theme-font-names, $i); + } + } + } + $i: $i + 1; + } + + .o_theme_customize_delete_google_font { + @include o-position-absolute(1px, 1px, 1px, auto); + padding: 0 8px !important; + } +} + +.o_homepage_editor_welcome_message { + padding-top: 128px; + padding-bottom: 128px; + font-family: Roboto, $font-family-sans-serif; + + .o_tooltip_container { + transition: opacity 1s linear; + + > .o_tooltip { + @include o-position-absolute; + position: relative; + display: inline-block; + margin: 0 8px; + opacity: 1; + z-index: auto; + } + } +} + // INPUTS .o_switch { display: flex; @@ -8,7 +229,7 @@ >input { display: none; - +span { + + span { background-color: $o-we-switch-inactive-color; box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color, 10%); border-radius: 100rem; @@ -20,7 +241,7 @@ &:after { content: ""; - background: $o-we-color-paper; + background: $o-we-bg-color; display: block; width: $o-we-switch-size - 0.2; height: $o-we-switch-size - 0.2; |