diff options
| author | qsm-odoo <qsm@odoo.com> | 2019-12-18 02:38:25 +0100 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2019-12-18 02:38:25 +0100 |
| commit | f710979b617171e49f2ce58bd99a760cf98ce090 (patch) | |
| tree | 92d8f7c282acb6a85c116277967ba068149b299a /addons/website/static/src | |
| parent | 70717ab71378596f5201699a85b28ec3c96bd563 (diff) | |
[REF] fake move of snippets.xml and website.scss
Diffstat (limited to 'addons/website/static/src')
| -rw-r--r-- | addons/website/static/src/scss/website.scss | 897 |
1 files changed, 0 insertions, 897 deletions
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss deleted file mode 100644 index f973c7adbfc..00000000000 --- a/addons/website/static/src/scss/website.scss +++ /dev/null @@ -1,897 +0,0 @@ -/// -/// This file regroups the website design rules. -/// - -$-seen: (); -$-font-numbers: ( - o-website-value('font-number'), - o-website-value('headings-font-number'), - o-website-value('navbar-font-number'), - o-website-value('buttons-font-number'), -); -@each $-number in $-font-numbers { - @if index($-seen, $-number) == null { - $-seen: append($-seen, $-number); - $-theme-font: nth($o-theme-font-urls, $-number); - @if $-theme-font { - @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}&display=swap"); - } - } -} - -:root { - // The theme customize modal JS will need to know the value of some scss - // variables used to render the user website, and those may have been - // customized by themes, the user or anything else (so there is no file to - // parse to get them). Those will be printed here as CSS variables. - - // 1) Handle default values - --header-font-size: #{$font-size-base}; - - // 2) The values in the $theme-colors map are already printed by Bootstrap. - - // 3) The values in the $colors map are also printed by Bootstrap. - - // 4) The Odoo values map, $o-website-values, must be printed. - @each $key, $value in $o-website-values { - --#{$key}: #{$value}; - } - - // 5) Use final value used by the theme - $-h1-color: if($headings-color == inherit or not $headings-color, $body-color, $headings-color); - $-h2-color: if(color('h2'), color('h2'), $-h1-color); - $-h3-color: if(color('h3'), color('h3'), $-h2-color); - $-h4-color: if(color('h4'), color('h4'), $-h3-color); - $-h5-color: if(color('h5'), color('h5'), $-h4-color); - $-h6-color: if(color('h6'), color('h6'), $-h5-color); - - --body: #{$body-bg}; - --text: #{$body-color}; - --h1: #{$-h1-color}; - --h2: #{$-h2-color}; - --h3: #{$-h3-color}; - --h4: #{$-h4-color}; - --h5: #{$-h5-color}; - --h6: #{$-h6-color}; - - --logo-height: #{$o-theme-navbar-logo-height}; - --number-of-fonts: #{length($o-theme-fonts)}; -} - -#wrapwrap { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - - @if ($o-theme-layout == 'boxed') { - @include media-breakpoint-up(md) { - padding: 0 7.5%; - } - - #wrap { - background-color: $white; - } - } -} - -.navbar { - @if ($o-theme-navbar-font != $o-theme-font) { - font-family: $o-theme-navbar-font; - } - - .nav-item { - transition: opacity 1000ms ease 0s; - } - .o_menu_loading .nav-item { - height: 0 !important; - overflow: hidden !important; - opacity: 0 !important; - } -} - -.navbar-light { - // Style only navbar-light which Odoo is only supposed to use in standard - // anyway. Automatically mimic navbar-dark if the user's menu color is dark. - // Note: this only works because navbar-light is defined before navbar-dark, - // we may want to use a safest way when possible. - @if color('menu') { - background-color: color('menu') !important; - @if (color-yiq(color('menu')) != $yiq-text-dark) { - @extend .navbar-dark; - } - } -} - -$-header-nav-link-height: $nav-link-height; -@if o-website-value('header-font-size') { - $-header-nav-link-height: o-website-value('header-font-size') * $line-height-base + $nav-link-padding-y * 2; - header { - font-size: o-website-value('header-font-size'); - - .dropdown-menu { - font-size: inherit; - } - } -} -@if $o-theme-navbar-logo-height { - // With default values, this makes it slightly bigger than standard - // navbar-brand, which is what we want - header .navbar-brand { - font-size: $o-theme-navbar-logo-height / $line-height-base; - - $-logo-padding-y: max(0, $-header-nav-link-height - $o-theme-navbar-logo-height) / 2; - &, &.logo { - padding-top: $-logo-padding-y; - padding-bottom: $-logo-padding-y; - } - } -} - -.o_footer { - @if color('footer') { - @include o-bg-color(color('footer')); - } - - > #footer { - // FIXME needed to prevent the dropzone at the bottom of the #wrap element - // to be at the same place of the dropzone at the top of the #footer element - border-top: 1px solid transparent; - } -} -h2, h3, h4, h5, h6 { - color: color('h2'); -} -h3, h4, h5, h6 { - color: color('h3'); -} -h4, h5, h6 { - color: color('h4'); -} -h5, h6 { - color: color('h5'); -} -h6 { - color: color('h6'); -} -.btn { - @if ($o-theme-buttons-font != $o-theme-font) { - font-family: $o-theme-buttons-font; - } -} - -// Texts -font[style*='background'], -font[class*='bg-'] { - padding: 2px 6px 4px; -} - -// Icons -.fa { - font-family: "FontAwesome" !important; - $size: 3rem; - - &.rounded-circle, - &.rounded, - &.rounded-0, - &.rounded-leaf, - &.img-thumbnail, - &.shadow { - display: inline-block; - vertical-align: middle; - text-align: center; - // fa-1x is not ouput - @include size($size); - line-height: $size; - @for $i from 2 through 5 { - &.fa-#{$i}x { - @include size($size + $i); - line-height: $size + $i; - } - } - // Default, if no background-color already selected - background-color: $gray-100; - } - &.img-thumbnail { - padding: 0; - } - &.rounded-leaf { - border-top-left-radius: $size; - border-bottom-right-radius: $size; - } -} - -// Buttons -.btn { - &.flat { - border: 0; - letter-spacing: 0.05em; - text-transform: uppercase; - @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), $btn-line-height, 0); - &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), $btn-line-height-lg, 0); } - &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), $btn-line-height-sm, 0); } - &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), $btn-line-height-sm, 0); } - } - &.rounded-circle { - border-radius: 100px !important; - @include button-size(0.45rem, 1.35rem, $font-size-base, $btn-line-height, 30px); - &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, $btn-line-height-lg, 30px); } - &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, $btn-line-height-sm, 30px); } - &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), $btn-line-height-sm, 30px); } - } -} - -// Blockquotes -.blockquote { - font-size: 1rem; - footer { - background-color: inherit; - } -} - -// Background Images -.oe_img_bg { - background-size: cover; - background-repeat: no-repeat; - - &.o_bg_img_opt_repeat { - background-size: auto; - background-repeat: repeat; - } - - // Compatibility <= 13.0, TODO remove? - // ----------------------------------- - &.o_bg_img_opt_contain { - background-size: contain; - background-position: center center; - } - &.o_bg_img_opt_custom { - background-size: auto; - } - &.o_bg_img_opt_repeat_x { - background-repeat: repeat-x; - } - &.o_bg_img_opt_repeat_y { - background-repeat: repeat-y; - } -} - -// Background videos -.o_background_video { - position: relative; - - > * { - position: relative; - } -} -.o_bg_video_container { - @include o-position-absolute(0, 0 ,0 ,0); - overflow: hidden; -} -.o_bg_video_iframe { - position: relative; - pointer-events: none !important; -} -.o_bg_video_loading { - @include o-position-absolute(0, 0 ,0 ,0); -} - -// Probably outdated -// Lists -.o_ul_toggle { - display: none; -} - -.o_ul_folded { - .o_close { - display: none!important; - } - .o_ul_toggle_self, - .o_ul_toggle_next { - display: inline-block; - line-height: inherit; - float: left; - position: relative; - margin-left: -1em; - top: -0.15em; - left: 0.2em; - font-size: 1.4em; - text-decoration: none; - &.o_open:before { - content: ""; - } - &:before { - content: ""; - } - } -} - -// Probably outdated -// Disable fixed height -@media (max-width: 400px) { - section, - .parallax, - .row, - .hr, - .blockquote { - height: auto !important; - } -} - -// Probably outdated -// Table -.table_desc { - margin: 0 0 20px 0; - width: 100%; - word-break: break-all; - border: 1px solid #dddddd; -} -.table_heading { - background-color: #f5f5f5; - border: 1px solid #dddddd; - color: #666666; - font-size: 14px; - padding: 4px; -} -table.table_desc tr td { - text-align: left; - padding: 5px; - font-size: 13px; - &:first-child { - width: 25%; - font-weight: bold; - border-bottom: 1px solid #c9c9c9; - border-right: 1px solid #c9c9c9; - border-left: none; - } - &:last-child { - border-bottom: 1px solid #c9c9c9; - } -} - -// Jumbotron -.jumbotron { - border-radius: 0; -} - -// -// Snippets -// - -// Title -.s_title { - .s_title_boxed { - > * { - display: inline-block; - padding: $grid-gutter-width; - border: 1px solid; - } - } - .s_title_lines { - overflow: hidden; - &:before, - &:after { - content: ""; - display: inline-block; - vertical-align: middle; - width: 100%; - border-top: 1px solid; - border-top-color: inherit; - } - &:before { margin: 0 $grid-gutter-width/2 0 -100%; } - &:after { margin: 0 -100% 0 $grid-gutter-width/2; } - } - .s_title_underlined { - @extend %o-page-header; - } - .s_title_small_caps { - font-variant: small-caps; - } - .s_title_transparent { - opacity: .5; - } - .s_title_thin { - font-weight: 300; - } -} - - -// Features Grid -.s_features_grid { - &_content { - overflow: hidden; - p { - margin-bottom: 0; - } - } - &_icon { - float: left; - margin-right: $grid-gutter-width/2; - } -} - -// FAQ -.s_faq_collapse { - .accordion .card { - .card-header { - cursor: pointer; - display: inline-block; - width: 100%; - padding: .5em 0; - border-radius: 0; - outline: none; - &:before { - content:'\f056'; - font-family: 'FontAwesome'; - display: inline-block; - margin: 0 .5em 0 .75em; - color: $gray-600; - } - &.collapsed:before { - content:'\f055'; - font-family: 'FontAwesome'; - } - &:hover, - &:focus { - text-decoration: none; - } - } - .card-body { - padding: 1em 2.25em; - } - } - .card-body p:last-child, - .card-body ul:last-child { - margin-bottom: 0; - } -} - - -// References -.s_references .img-thumbnail { - border: none; -} - -// Carousel -> TODO: should be versioned in 000.scss file but how ? -.s_carousel, -.s_quotes_carousel { - - // Controls - .carousel-control-prev, - .carousel-control-next { - cursor: pointer; - width: 8%; - opacity: 1; - } - .carousel-control-prev { justify-content: flex-start; } - .carousel-control-next { justify-content: flex-end; } - .carousel-control-prev-icon, - .carousel-control-next-icon { - @include size(auto); - background-image: none; - color: $body-color; - &:before { - font-family: "FontAwesome"; - display: inline-block; - background-color: #fff; - } - } - // Content - .carousel-inner { - overflow: hidden; - height: 100%; - .carousel-item { - height: 100%; - } - } - // Indicators - .carousel-indicators li:hover:not(.active) { - background-color: rgba(255,255,255,.8); - } - - // Default - &.s_carousel_default { - // Controls - chevron - .carousel-control-prev-icon:before { content: "\f053" #{"/*rtl:'\f054'*/"}; margin-left: 1.5rem; } - .carousel-control-next-icon:before { content: "\f054" #{"/*rtl:'\f053'*/"}; margin-right: 1.5rem; } - .carousel-control-prev-icon:before, - .carousel-control-next-icon:before { - background-color: rgba(0,0,0,0); - font-size: 2rem; - color: #fff; - text-shadow: $box-shadow-sm; - } - // Indicators - .carousel-indicators li { - height: .5rem; - box-shadow: $box-shadow-sm; - border-radius: 2px; - } - } - - // Border - &.s_carousel_bordered { - border: 2rem solid rgba(0,0,0,0); - // Controls - caret - .carousel-control-prev-icon:before { content: "\f0d9"; } - .carousel-control-next-icon:before { content: "\f0da"; } - .carousel-control-prev-icon:before, - .carousel-control-next-icon:before { - @include size(2rem, 6rem); - line-height: 6rem; - font-size: 1.5rem; - } - // Indicators - .carousel-indicators li { - @include size(3rem, 1rem); - } - } - - // Circle - &.s_carousel_rounded { - // Container - // .carousel-inner { - // border-top-left-radius: 10rem; - // border-bottom-right-radius: 10rem; - // } - // Controls - arrow - .carousel-control-prev { margin-left: 1.5rem; } - .carousel-control-next { margin-right: 1.5rem; } - .carousel-control-prev-icon:before { content: "\f060"; } - .carousel-control-next-icon:before { content: "\f061"; } - .carousel-control-prev-icon:before, - .carousel-control-next-icon:before { - @include size(4rem); - line-height: 4rem; - border-radius: 50%; - font-size: 1.25rem; - } - // Indicators - .carousel-indicators li { - @include size(1rem); - border-radius: 50%; - } - } - - // Boxed - &.s_carousel_boxed { - @include make-container(); - @include make-container-max-widths(); - .carousel-item { - padding: 0 1rem; - } - // Controls - angle - .carousel-control-prev, - .carousel-control-next { - align-items: flex-end; - margin-bottom: 1.25rem; - } - .carousel-control-prev { margin-left: 3rem; } - .carousel-control-next { margin-right: 3rem; } - .carousel-control-prev-icon:before { content: "\f104"; } - .carousel-control-next-icon:before { content: "\f105"; } - .carousel-control-prev-icon:before, - .carousel-control-next-icon:before { - @include size(2rem); - line-height: 2rem; - font-size: 1.25rem; - } - // Indicators - .carousel-indicators li { - @include size(1rem); - &:hover:not(.active) { - background-color: rgba(255,255,255,.8); - } - } - } -} - - -.carousel .container { - .carousel-img img { - max-height: 95%; - padding: 10px; - } - > .carousel-caption { - @include o-position-absolute($right: 50%, $left: 50%); - bottom: 20px; - > div { - position: absolute; - text-align: left; - padding: 20px; - background: rgba(0, 0, 0, 0.4); - bottom: 20px; - } - } - > .carousel-image { - @include o-position-absolute($top: 5%, $bottom: 5%); - max-height: 90%; - margin: 0 auto; - } - .carousel-item.text_image .container { - > .carousel-caption { - left: 10%; - > div { - right: 50%; - margin-right: -20%; - max-width: 550px; - } - } - > .carousel-image { - right: 10%; - left: 50%; - } - } - .carousel-item.image_text .container { - > .carousel-caption { - right: 10%; - > div { - left: 50%; - margin-left: -20%; - max-width: 550px; - } - } - > .carousel-image { - right: 50%; - left: 10%; - } - } - .carousel-item.text_only .container { - > .carousel-caption { - left: 10%; - right: 10%; - top: 10%; - bottom: auto; - > div { - text-align: center; - background: transparent; - bottom: auto; - width: 100%; - } - } - > .carousel-image { - display: none !important; - } - } -} - - -// Quotes Slider -.s_quotes_carousel { - blockquote { - padding: $grid-gutter-width; - margin-bottom: 0; - .s_quotes_carousel_icon { - position: absolute; - top: 0; - left: -3rem; - } - img { - max-width: 40px; - margin-right: 5px; - border-radius: 50%; - } - footer { - background-color: transparent; - &:before { - content:""; - } - } - } -} - -// Company Team -.s_company_team { - @include media-breakpoint-down(md) { - img { - max-width: 50%; - } - } -} - -// Parallax -.parallax { - position: relative; - - // TODO this introduces a limitation: no dropdown will be able to - // overflow. Maybe there is a better way to find. - &:not(.s_parallax_no_overflow_hidden) { - overflow: hidden; - } - - > * { - position: relative; - } - > .s_parallax_bg { - @include o-position-absolute(0, 0, 0, 0); - display: block; - background-color: inherit; - background-size: cover; - background-attachment: scroll; - pointer-events: none; - - &::after { - content: ""; - @include o-position-absolute(0, 0, 0, 0); - display: block; - background-color: inherit; - } - } - @include media-breakpoint-up(xl) { - // Fixed backgrounds are disabled when using a mobile/tablet device, - // which is not a big deal but, on some of them (iOS...), defining the - // background as fixed breaks the background-size/position props. - // So we enable this only for >= XL devices. - &.s_parallax_is_fixed > .s_parallax_bg { - background-attachment: fixed; - } - } -} - - -// -// Layout -// - -// Header -.o_header_affix { - display: block; - @include o-position-absolute(0, 0, auto, 0); - position: fixed; - z-index: $zindex-modal - 20; - background: $light; - margin-top: -999px; - transition: margin-top 500ms ease 0s; - @include media-breakpoint-down(sm) { - .navbar-collapse { - max-height: 70vh; - overflow-y: auto; - } - } - &.affixed { - margin-top: 0px !important; // the default margin-top is adapted in JS - } -} -#oe_main_menu_navbar + #wrapwrap .o_header_affix { - top: $o-navbar-height; -} - -// Navbar -.navbar .o_extra_menu_items.show > ul { - > li { - + li { - border-top: 1px solid gray('200'); - } - > a.dropdown-toggle { - background-color: gray('200'); - color: inherit; // Useful when the toggle is active - pointer-events: none; // hack to prevent clicking on it because dropdown always opened - } - > ul { // remove dropdown-menu default style as it is nested in another one - position: static; - float: none; - display: block; - max-height: none; - margin-top: 0; - padding: 0; - border: none; - box-shadow: none; - } - } -} - -// Mega menu -.o_mega_menu { - width: 100%; - padding: 0; - margin-top: 0; - border-radius: 0; - background-clip: unset; // Remove the 1px gap introduced by BS4 - - .container, .container-fluid { - // Need to reforce those because they are removed since its a container - // inside another container (the one in the navbar) - padding-left: $grid-gutter-width / 2; - padding-right: $grid-gutter-width / 2; - } -} -.o_mega_menu_container_size { - @include media-breakpoint-up(md) { - left: 50%; - transform: translateX(-50%); - } - - $-mm-max-widths: (); - @each $k, $v in $container-max-widths { - $-mm-max-widths: map-merge($-mm-max-widths, ( - #{$k}: $v - $grid-gutter-width, - )); - } - @include make-container-max-widths($-mm-max-widths); -} - -// Copyright -.o_footer_copyright { - padding: 8px; - .js_language_selector { - display: inline-block; - } - @include media-breakpoint-up(md) { - .row { - display: flex; - > div { - margin: auto 0; - } - } - } -} - -#wrapwrap.o_header_overlay { - > header:not(.o_header_affix) { - @include o-position-absolute(0, 0, auto, 0); - z-index: 1000; - - > .navbar { - background-color: transparent !important; - border-color: transparent; - - .nav-item { - > .nav-link { - background-color: transparent; - color: inherit; - } - &.show, &.active { - > .nav-link { - background-color: white; - color: black; - } - } - } - } - } -} -// Figure with special style -.o_figure_relative_layout { - position: relative; - - .figure-img { - margin-bottom: 0; - } - .figure-caption { - @include o-position-absolute(auto, 0, 0, 0); - @include o-bg-color(rgba(theme-color('dark'), $o-theme-figcaption-opacity)); - padding: $tooltip-padding-y $tooltip-padding-x; - font-weight: $font-weight-bold; - a { - color: inherit; - } - } -} - -@each $color, $value in $theme-colors { - .bg-#{$color}-light { - background-color: rgba($value, 0.1); - } -} - -@each $media, $color in $o-social-colors { - @include text-emphasis-variant(".text-#{$media}", $color); -} - -// TODO: Will be handled properly in master/saas-12.2, temp fix for website_event.registration_attendee_details -.modal-footer > .float-left { - margin-right: auto; -} - -// CoverProperties -.o_record_cover_container { - position: relative; - - .o_record_cover_component { - @include o-position-absolute(0, 0, 0, 0); - - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } -} |
