diff options
Diffstat (limited to 'theme_common/static/src/scss')
15 files changed, 2626 insertions, 0 deletions
diff --git a/theme_common/static/src/scss/compatibility-saas-10-1.scss b/theme_common/static/src/scss/compatibility-saas-10-1.scss new file mode 100644 index 0000000..4c1066a --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-10-1.scss @@ -0,0 +1,17 @@ +// This file is for compatibility since saas-10 web_editor refactoring. +// As a fix to work properly in the editor, some classes have been renamed. +// To allow a smooth transition, old classes alias are created here. + +@mixin bg-compatibility-mixin($bg, $color) { + background-color: $bg; + color: $color; + .text-muted { + color: rgba($color, 0.4); + } +} + +.black { @include bg-compatibility-mixin($black, gray('600')); } +.darkgray { @include bg-compatibility-mixin(gray('800'), $white); } +.gray { @include bg-compatibility-mixin(gray('700'), $white); } +.lightgray { @include bg-compatibility-mixin(gray('200'), gray('700')); } +.white { @include bg-compatibility-mixin($white, gray('700')); } diff --git a/theme_common/static/src/scss/compatibility-saas-10-2.scss b/theme_common/static/src/scss/compatibility-saas-10-2.scss new file mode 100644 index 0000000..41f2709 --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-10-2.scss @@ -0,0 +1,28 @@ +// This file is for compatibility since saas-10 web_editor refactoring. +// As a fix to work properly in the editor, some classes have been renamed. +// To allow a smooth transition, old classes alias are created here. + +// Define new theme variables in case the user changes its theme +$gray-light-light: gray('200'); +$gray-light-dark: gray('600'); +$gray-dark-light: gray('700'); +$gray-dark-dark: gray('900'); +$gray-darkest: gray('900'); + +body .color-black { color: $black; } +body .color-white { color: $white; } +body .color-gray-lighter { color: gray('200'); } +body .color-gray-light-light { color: $gray-light-light; } +body .color-gray-light { color: gray('600'); } +body .color-gray-light-dark { color: $gray-light-dark; } +body .color-gray { color: gray('700'); } +body .color-gray-dark-light { color: $gray-dark-light; } +body .color-gray-dark { color: gray('900'); } +body .color-gray-dark-dark { color: $gray-dark-dark; } +body .color-gray-darker { color: gray('900'); } +body .color-gray-darkest { color: $gray-darkest; } +body .color-alpha { color: o-color('alpha'); } +body .color-beta { color: o-color('beta'); } +body .color-gamma { color: o-color('gamma'); } +body .color-delta { color: o-color('delta'); } +body .color-epsilon { color: o-color('epsilon'); } diff --git a/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss b/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss new file mode 100644 index 0000000..ca460c6 --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss @@ -0,0 +1,62 @@ + +@mixin carousel-indicators($bottom, $bottom-sm) { + bottom: $bottom; + li { + width: 12px; + height: 12px; + border-color: gray('900'); + margin: 0; + &:hover { + border-color: o-color('alpha'); + } + &.active { + background-color: o-color('alpha'); + border-color: o-color('alpha'); + margin: 0; + } + } + @include media-breakpoint-down(md) { + bottom: $bottom-sm; + } +} + +$s-banner-2-background-position: 50% 50%; +$s-banner-2-content-margin: 0; + +$s-banner-3-carosel-control-color: rgba(0, 0, 0, 0); +$s-banner-3-carosel-control-height: 100%; +$s-banner-3-padding: 130px; +$s-banner-3-fa-color: o-color('gamma'); +$s-banner-3-carousel-height: 500px; +$s-banner-3-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86); +$s-banner-3-hero-bg-color: o-color('alpha'); +$s-banner-3-indicators-visible: hidden; +$s-banner-3-h1-size: 80px; +$s-banner-3-h2-size: 40px; +$s-banner-3-h1-mobile-font-size: 50px; + +@mixin s-banner-3-col-center-hook {}; +@mixin s-banner-3-row-hook {}; +@mixin s-banner-3-carousel-control-hook {}; +@mixin s-banner-3-carousel-control-right-hook {}; +@mixin s-banner-3-carousel-control-left-hook {}; + +$s-text-big-picture-padding: 50px 0; +$s-text-big-picture-text-align: left; + +@mixin s-text-big-picture-hero-hook {}; +@mixin s-big-picture-text-hero-hook {}; + +$s-big-picture-text-padding: 50px 0; +$s-big-picture-text-align: left; + +@mixin s-big-picture-text-hero-hook {}; +@mixin s-big-picture-row-hook {}; + +$s-cubes-big-cube-min-height: 600px; + +$s-products-carousel-carousel-control-color: rgba(0, 0, 0, 0); +$s-products-carousel-carousel-icon-color: o-color('gamma') !default; + +$s-timeline-company-color: null; +$s-timeline-color: if(variable-exists(color-wind), $color-wind, #F7F7F7); diff --git a/theme_common/static/src/scss/compatibility-saas-11.4.scss b/theme_common/static/src/scss/compatibility-saas-11.4.scss new file mode 100644 index 0000000..a313523 --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-11.4.scss @@ -0,0 +1,1276 @@ + +// This file is for compatibility before 12.0 website snippets refactoring. +// As a fix to work properly in the editor, some classes have been renamed. +// To allow a smoother transition, old classes alias are created here. + +.s_1_column_text, +.s_2_column_text, +.s_3_column_text, +.s_4_column_text { + padding: 30px 0px; +} + +.s_logo_bar { + min-height: 192px; + color: white; + padding: 48px 0; + img { + max-height: 80px; + } + @include media-breakpoint-down(sm) { + [class*="col-lg-"] { + padding-bottom: 15px; + } + } +} + +#wrapwrap .s_banner_2.carousel { + margin-top: 0; + margin-bottom: 0; + .row.content { + margin: $s-banner-2-content-margin; + outline: 0; + } + .carousel-box-content { + padding: 15px 30px; + } + .carousel-box-image { + padding: 0; + } + .carousel-inner .item { + background-position: $s-banner-2-background-position; + } + .carousel-control { + @include carousel-control(15px, 0, 2px); + } + .carousel-indicators { + @include carousel-indicators(10px, 10px); + } +} + +.s_banner_3 { + .fa { + color: $s-banner-3-fa-color; + font-size: 35px; + transition: all 0.3s ease 0s; + position: relative; + top: 50%; + transform: translateY(-50%); + &:hover { + color: o-color('beta'); + } + } + .carousel-inner { + height: $s-banner-3-carousel-height; + } + .carousel-control { + opacity: 1; + top: 205px; + width: 70px; + height: 70px; + text-shadow: none; + &.left, &.right { + @include s-banner-3-carousel-control-hook; + background-color: $s-banner-3-carosel-control-color; + background-image: none; + height: $s-banner-3-carosel-control-height; + top: 0px; + } + &.left { + left: 0px; + @include s-banner-3-carousel-control-left-hook; + .fa-chevron-left { + right: 39%; + top: 50%; + } + } + &.right { + right: 0px; + @include s-banner-3-carousel-control-right-hook; + .fa-chevron-right { + left: 39%; + top: 50%; + } + } + } + .carousel-indicators { + bottom: 0px; + visibility: $s-banner-3-indicators-visible; + } + .carousel .carousel-control.left *, .carousel .carousel-control.right * { + position: relative; + top: 19px; + z-index: 5; + } + .container-fluid { + padding: 0; + overflow: hidden; + @include s-banner-3-row-hook; + .row .hero-bg { + @include s-banner-3-col-center-hook; + padding-left: $s-banner-3-padding; + color: $s-banner-3-hero-bg-color; + @include media-breakpoint-down(sm) { + top: 0px; + text-align: center; + padding-left: 0px; + } + @media screen and (max-width: 360px) { // FIXME + padding-left: 15px; + } + h1 { + font-size: $s-banner-3-h1-size; + text-shadow: $s-banner-3-text-shadow; + @media screen and (max-width: 360px) { // FIXME + font-size: 50px; + } + } + h2 { + font-size: $s-banner-3-h2-size; + text-shadow: $s-banner-3-text-shadow; + @media screen and (max-width: 360px) { // FIXME + font-size: 30px; + } + } + img { + max-height: 200px; + @media screen and (max-width: 360px) { // FIXME + max-width: 250px; + } + } + } + } +} + +.s_slide_banner { + min-height: 480px; + &.carousel { + overflow: hidden; + .carousel-content { + background: none; + margin-top: 75px; + color: $body-color; + } + .carousel-inner { + height: 100%; + .item { + height: 100%; + background-size: cover; + } + } + .carousel-control { + width: 10%; + cursor: pointer; + span { + @include o-position-absolute($top: 50%); + margin-top: -8px; + } + &.left { + left: -10px; + * { + @include o-position-absolute(50%, 50%); + } + } + &.right { + right: -10px; + * { + @include o-position-absolute($top: 50%); + } + } + } + } +} + +#wrapwrap .s_carousel_boxed .carousel { + .carousel-inner { + border-radius: $border-radius; + } + .carousel-control { + width: 10%; + @include carousel-control(15px, 20px, 3px); + @include fa-size-generator(15px); + .fa { + top: auto; + bottom: 30px; + } + } + .carousel-indicators { + display: none; + } + .carousel-caption { + bottom: 15px; + border-radius: ($border-radius-lg * 3); + min-height: 35px; + padding: 5px 0; + p { + margin: 0; + } + } +} + +.s_text_big_picture { + padding: $s-text-big-picture-padding; + .row { + @include s-big-picture-row-hook; + } + .hero-paragraph { + padding: 0px 40px; + text-align: $s-text-big-picture-text-align; + h1 { + font-weight: 900; + @include s-text-big-picture-hero-hook; + @media only screen and (max-width : 1024px) { + font-size: 25px; + font-weight: 900; + } + } + h2 { + @media only screen and (max-width : 1024px) { + font-size: 20px; + } + } + p { + font-size: 16px; + @media only screen and (max-width : 1024px) { + font-size: 14px; + } + } + } + .hero-image { + padding-left: 0px; + padding-right: 0px; + float: right; + img { + width: 100%; + } + } +} + +.s_big_picture_text { + padding: $s-big-picture-text-padding; + .row { + @include s-big-picture-row-hook; + } + .hero-paragraph { + padding: 0px 40px; + text-align: $s-big-picture-text-align; + h1 { + font-weight: 900; + @include s-big-picture-text-hero-hook; + @media only screen and (max-width : 1024px) { // FIXME + font-size: 25px; + font-weight: 900; + } + } + h2 { + @media only screen and (max-width : 1024px) { // FIXME + font-size: 20px; + } + } + p { + font-size: 16px; + @media only screen and (max-width : 1024px) { // FIXME + font-size: 14px; + } + } + } + .hero-image { + padding-left: 0px; + padding-right: 0px; + img { + width: 100%; + } + } +} + +.s_separator_color hr { + height: 12px; + background-color: $secondary !important; + border-radius: 0px; +} + +#wrapwrap .s_separator_block { + min-height: 1px; +} + +#wrapwrap .s_separator_color hr { + height: 2px; + border-top: 0; + background-color: o-color('beta'); + border-radius: 5px; +} + +#wrapwrap .s_separator_multicolor_fw div { + padding: 0px; + margin: 0; + height: 14px; + + hr { + height: 14px; + border-top: 0; + padding: 0px; + margin: 0; + background: linear-gradient(to right, o-color('beta') 0%, o-color('beta') 30%, o-color('delta') 30%, o-color('delta') 80%, o-color('gamma') 80%); + } +} + +#wrapwrap .s_separator_shade hr { + height: 2px; + border-top: 0; + background: gray('700'); + border-radius: 5px; +} + +#wrapwrap .s_separator_multicolor hr { + height: 12px; + border-top: 0; + background: linear-gradient(to right, o-color('beta') 0%, o-color('beta') 30%, o-color('delta') 30%, o-color('delta') 80%, o-color('gamma') 80%); +} + +.s_separator { + border-color: inherit; + border-top: 0; + padding: 8px 0; + margin: 0 0 16px 0; + height: 1px; + display: inline-block; + width: 100%; + border-style: solid; + border-bottom-width: 1px; + &.hr-small { + width: 20%; + } + &.hr-half { + width: 50%; + } + &.hr-full { + width: 100%; + } + &.hr-dashed { + border-style: dashed; + } + &.hr-dotted { + border-style: dotted; + } + &.hr-double { + border-style: double; + } + &.hr-solid { + border-style: solid; + } + @mixin hr-thickness($n) { + @for $i from 1 through $n { + &.hr-#{$i}{ + border-bottom-width: ($i * 1); + } + } + } + @include hr-thickness(5); +} + +.s_testimonial_slider { + &.carousel { + .carousel-inner { + .item { + opacity: 0; + -webkit-transition-property: opacity; + -ms-transition-property: opacity; + transition-property: opacity; + } + .active { + opacity: 1; + -webkit-transition-property: opacity; + -ms-transition-property: opacity; + transition-property: opacity; + } + } + .carousel-indicators { + bottom: 10px; + > li { + background-color: $primary; + border: none; + } + } + } + blockquote { + text-align: center; + border: none; + font-size: 28px; + font-weight: 300; + } + .row > div > img { + @include media-breakpoint-down(sm) { + max-height: 100px; + } + } +} + +.s_lead_bar { + min-height: 192px; + overflow: hidden; + color: white; + padding-top: 32px; + p { + color: gray('800'); + font-size: 16px; + } +} + +#wrapwrap .s_features_circle { + @include fa-size-generator(20px); +} + +#wrapwrap .s_features_grid_circle { + @include fa-size-generator(20px); + .feature-text { + overflow: hidden; + margin: 0 0 12px 0; + padding: 0 0 0 10px; + } +} + +#wrapwrap .s_quotes_slider_2 { + blockquote{ + padding: 0 20px; + } + &.quotecarousel { + padding: 0; + } + @include blockquote-layout(#fff, gray('900')); + .carousel-indicators { + @include carousel-indicators(5px, -5px); + } +} + +#wrapwrap .s_three_columns { + [class*="bg-"] { + border: 10px solid rgba(0, 0, 0, 0); + padding: 20px; + background-clip: padding-box; + > .carousel [class*="bg-"]{ + border: 0; + } + } + .bg-none { + padding: 0; + } + .carousel-control { + @include carousel-control(0, 0, 2px); + } +} + +#wrapwrap .s_icon_box_square { + .fa { + margin: 0 20px; + &:hover { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); + } + } + @include fa-size-generator(25px); + .icon_box_content { + overflow: hidden; + } +} + +#wrapwrap .s_icon_box_circle { + .fa { + margin: 0 20px; + &:hover { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); + } + } + @include fa-size-generator(25px); + .icon_box_content { + overflow: hidden; + } +} + +#wrapwrap .s_big_icon_square { + text-align: center!important; +} + +#wrapwrap .s_big_icon_square_box { + text-align: center!important; + min-height: 180px; + width: 150px; + margin: 0 auto; + + .fa { + color:white; + font-size: 40px; + } +} + +#wrapwrap .s_big_icon_square_icon { + width:120px; + height:110px; + text-align:center!important; + color:#fff; + padding: 36px 0; + transition: all 0.3s ease-in-out; + background-color: o-color('alpha'); + h5 { + margin-top: 48px; + color: o-color('alpha'); + } +} + +#wrapwrap .s_big_icon_square_box:hover .s_big_icon_square_icon { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); +} + +#wrapwrap .s_big_icon_square_box:hover .s_big_icon_square_content h4 { + transition: all 0.3s ease-in-out; + color: o-color('gamma'); +} + +#wrapwrap .s_big_icons { + text-align: center!important; + @include s-big-icon-circle-height-hook; + //fix -- without this in mobile view the circles go to the top and so they hide the h2 and h3 above it. + .col-lg-12 { + float: none; + } +} + +#wrapwrap .s_big_icons_box { + text-align: center!important; + width: 150px; + margin: 0 auto; + + .fa { + color:white; + font-size: 40px; + @include s-big-icon-circle-fa-hook; + } +} + +#wrapwrap .s_big_icons_icon { + width: $s-big-icon-circle-icon-size; + height: $s-big-icon-circle-icon-size; + text-align:center!important; + padding: 40px 0; + transition: all 0.3s ease-in-out; + border-radius: 80px; + margin: 0px auto; + h5 { + margin-top: 48px; + } +} + +#wrapwrap .s_big_icons_box:hover .s_big_icons_icon { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); +} + +#wrapwrap .s_big_icons_box:hover .s_big_icons_content h4 { + transition: all 0.3s ease-in-out; + color: o-color('gamma'); +} + +#wrapwrap .s_color_blocks_slider { + width: 100%; + + .s_color_blocks_slider_img { + padding: 0; + } + + .s_color_blocks_slider_content { + padding: 8% 5%; + height: auto; + .fa { + color: white; + } + img { + max-width: 100%; + height: auto; + } + } +} + +#wrapwrap .s_timeline_ul { + list-style: none; + padding: 20px 0 20px; + position: relative; + + &:before { + top: 0; + bottom: 0; + position: absolute; + content: " "; + width: 3px; + background-color: gray('200'); + left: 50%; + margin-left: -1.5px; + } + + > li { + margin-bottom: 20px; + position: relative; + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } + + > .s_timeline_panel { + width: 50%; + position: relative; + float: left; + padding: 0 44px 0 0; + + @include media-breakpoint-down(sm) { + width: 100%; + padding: 0; + } + + > div { + background-color: $s-timeline-color; + width: 100%; + float: left; + border: 1px solid #d4d4d4; + border-radius: 2px; + padding: 20px; + position: relative; + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + + &:before { + position: absolute; + top: 26px; + right: -15px; + display: inline-block; + border-top: 15px solid rgba(0, 0, 0, 0); + border-left: 15px solid #ccc; + border-right: 0 solid #ccc; + border-bottom: 15px solid rgba(0, 0, 0, 0); + content: " "; + @include media-breakpoint-down(sm) { + display: none; + } + } + + &:after { + position: absolute; + top: 27px; + right: -14px; + display: inline-block; + border-top: 14px solid rgba(0, 0, 0, 0); + border-left: 14px solid $s-timeline-color; + border-right: 0 solid $s-timeline-color; + border-bottom: 14px solid rgba(0, 0, 0, 0); + content: " "; + @include media-breakpoint-down(sm) { + display: none; + } + } + } + } + + > .s_timeline_badge { + color: #fff; + width: 50px; + height: 50px; + line-height: 50px; + font-size: 1.4em; + text-align: center; + position: absolute; + top: 16px; + left: 50%; + margin-left: -25px; + background-color: #999999; + z-index: 100; + border-top-right-radius: 50%; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + + @include media-breakpoint-down(sm) { + display: none; + } + } + + &:not(.s_timeline_inverted) > .s_timeline_panel:nth-child(2n+1) { + float: right; + padding: 0 0 0 44px; + + @include media-breakpoint-down(sm) { + padding: 0; + margin-top: 20px; + } + + > div { + float: right; + + &:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } + } + + &.s_timeline_inverted > .s_timeline_panel:nth-child(2n) { + float: right; + padding: 0 0 0 44px; + + @include media-breakpoint-down(sm) { + padding: 0; + } + + > div { + float: right; + + &:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } + } + } +} + +#wrapwrap .s_timeline_badge.primary { + background-color: o-color('alpha') !important; +} + +#wrapwrap .s_timeline_badge.success { + background-color: o-color('beta') !important; +} + +#wrapwrap .s_timeline_badge.warning { + background-color: o-color('delta') !important; +} + +#wrapwrap .s_timeline_badge.danger { + background-color: o-color('epsilon') !important; +} + +#wrapwrap .s_timeline_badge.info { + background-color: o-color('gamma') !important; +} + +#wrapwrap .s_timeline_title { + margin-top: 0; + color: gray('800'); +} + +#wrapwrap .s_timeline_info { + margin-top: 0; + color: gray('700'); +} + +#wrapwrap .s_timeline_date { + margin-top: 0; + color: gray('800'); +} + +$s-timeline-company-color: o-color('alpha') !default; + +#wrapwrap .s_timeline_company { + margin-top: 0; + color: $s-timeline-company-color; +} + +#wrapwrap .s_timeline_heading { + color: gray('800'); +} + +#wrapwrap .s_timeline_body > p, +#wrapwrap .s_timeline_body > ul { + margin-bottom: 0; + color: gray('800'); +} + +#wrapwrap .s_timeline_body > p + p { + margin-top: 5px; +} + +@include media-breakpoint-down(sm) { + #wrapwrap ul.timeline:before { + display: none; + } + + #wrapwrap ul.timeline > li { + margin-bottom: 0; + > .s_timeline_panel { + float: right; + width: 100%; + padding: 0 !important; + margin-bottom: 20px; + > .s_timeline_panel_content { + &:before, &:after { + display: none; + } + } + } + > .s_timeline_badge { + display: none; + } + } +} + +#wrapwrap .s_timeline_icons ul.timeline { + list-style: none; + padding: 0; + &:before { + content: ''; + position: absolute; + width: 1px; + top: 10px; + bottom: 10px; + left: 50%; + background-color: gray('700'); + } + + li { + position: relative; + margin-bottom: 15px; + &:before, + &:after { + content: ''; + display: table; + } + &:after { + clear: both; + } + + /* Left & Right */ + .timeline-content, + .timeline-content-double { + position: relative; + width: 50%; + color: gray('900'); + &:after { + content: ''; + position: absolute; + top: 10px; + right: 30px; + display: inline-block; + border-top: 5px solid rgba(0, 0, 0, 0); + border-left: 5px solid gray('900'); + border-right: 0 solid gray('900'); + border-bottom: 5px solid rgba(0, 0, 0, 0); + } + + /* Text */ + .timeline-text { + overflow: hidden; + min-height: 50px; + padding: 3px 10px; + p, ul{ + margin: 0; + + p{ + margin-top: 5px; + } + } + } + + /* Badge */ + .fa { + margin: -5px 0 0 0; + color: #fff; + text-align: center; + } + + /* Icons size */ + @include fa-size-generator(20px); + + } + + /* Date */ + .timeline-date { + position: absolute; + left: 50%; + width: 60px; + height: 30px; + line-height: 30px; + margin-left: -40px; + background-color: #fff; + color: gray('900'); + font-weight: 700; + text-align: center; + z-index: $zindex-navbar; + } + + /* Left */ + &:not(.timeline-inverted) .timeline-content, + &.timeline-inverted .timeline-content-double { + float: left; + padding: 0 45px 0 0; + text-align: right; + .fa { + float: right; + margin-left: 10px; + } + } + + /* Right */ + &.timeline-inverted .timeline-content, + &:not(.timeline-inverted) .timeline-content-double { + float: right; + padding: 0 0 0 45px; + &:after { + border-left-width: 0; + border-right-width: 5px; + left: 30px; + right: auto; + } + .fa { + float: left; + margin-right: 10px; + } + } + } +} + +@include media-breakpoint-down(sm) { + #wrapwrap .s_timeline_icons ul.timeline { + text-align: center; + &:before{ + display: none; + } + + li { + border-bottom: 1px solid gray('200'); + &:last-child{ + border-bottom: 0; + } + &.timeline-inverted .timeline-content, + &.timeline-inverted .timeline-content-double, + &:not(.timeline-inverted) .timeline-content, + &:not(.timeline-inverted) .timeline-content-double { + width: 100%; + padding: 0; + text-align: center; + &:after{ + display: none; + } + + .fa { + float: none; + margin: 10px 0 0 0; + } + + .timeline-text{ + padding: 10px 0 20px 0; + min-height: 0; + } + } + + .timeline-date{ + position: relative; + left: auto; + margin: 0; + background-color: rgba(0, 0, 0, 0); + } + } + } +} + +#wrapwrap .s_images_captions_fw [class*="col-"] { + padding: 0; + p { + display: inline-block; + margin: 0; + padding: 5px 15px; + } +} + +#wrapwrap .s_team_profile_box { + margin: 0.32em; + padding: 32px 24px; + box-shadow: 0px 1px 8px rgba(black, 0.15); + background-color: rgba(white, 0.05); + border: 1px solid rgba(white, 0.05); + img { + border: 4px solid white; + width: 160px; + box-shadow: 1px 1px 8px rgba(black, 0.1); + } + +} + +#wrapwrap .s_team_profile_share { + margin: 24px 0; + .fa { + color: o-color('alpha'); + padding: 0 2px; + } +} + +#wrapwrap .s_team_profiles_2 { + .profile-body { + padding: 30px; + img { + display: inline-block; + margin: 30px 0 0 0; + max-width: 50%; + } + } + .profile-options { + font-size: $font-size-sm; + margin: 0; + div { + border-bottom: 1px solid #fff; + border-right: 1px solid #fff; + padding: 0; + + &:last-child { + border-right: none; + } + } + a { + display: block; + padding: 8px 0; + } + p { + display: block; + padding: 8px 0; + margin-bottom: 0; + + } + .fa { + padding: 16px 0 0 0; + display: block; + } + } +} + +#wrapwrap .s_cubes { + .cube { + min-height: 200px; + + h3 { + text-align: center; + } + h4 { + padding-bottom: 20px; + } + + .cube-heading { + position: relative; + top: 25%; + } + > .row { + height: 50%; + } + } + + .cube-big { + height: 600px; + @media screen and (max-width: 640px) { // FIXME + height: auto; + } + + .cube-heading { + position: relative; + top: 25%; + } + &:first-child { + min-height: $s-cubes-big-cube-min-height; + } + } + + .cube-small, .cube-text { + height: 300px; + } +} + +#wrapwrap .s_news_carousel { + .container { + height: 100%; + .row { + height: 100%; + > div { + height: 100%; + @include media-breakpoint-down(md) { + height: auto !important; + } + } + } + } + .carousel-inner { + width: 80%; + margin: 0 10%; + @include media-breakpoint-down(md) { + width: 100%; + margin: 0; + } + .item { + padding: 0 15px; + } + } + .news-carousel-time { + padding: 32px 0; + .day { + display: block; + margin-left: auto; + margin-right: auto; + width: ($h2-font-size * 2); + height: ($h2-font-size * 2); + line-height: ($h2-font-size * 2); + font-size: $h2-font-size; + } + .month { + display: block; + margin-left: auto; + margin-right: auto; + font-size: $h6-font-size; + margin-top: 6px; + } + .year { + display: block; + margin-left: auto; + margin-right: auto; + font-size: $h6-font-size; + } + } + .news-carousel-content { + padding: 32px; + } + .carousel-control { + @include carousel-control(15px, 0, 2px); + .fa { + margin-top: -21px; + @include media-breakpoint-down(md) { + top: 65px; + margin-top: 0; + } + } + } +} + +#wrapwrap .s_references_2 { + @include blockquote-layout(gray('200'), gray('900')); + .carousel-indicators { + @include carousel-indicators(-15px, -10px); + } +} + +#wrapwrap .s_medias_list { + background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200')); + .media { + @include media-breakpoint-down(md) { + height: auto !important; + } + > .row { + margin: 16px 0; + background-color: #fff; + > [class*="col-"] { + padding: 0; + &.media-content{ + padding: 30px; + } + } + .media-options { + height: 100%; + background-color: gray('200'); + > .row { + margin: 0; + [class*="col-"]{ + padding: 0; + margin-bottom: 1px; + p { + margin: 0; + font-size: $font-size-sm; + display: inline-block; + } + @include fa-size-generator(10px); + .fa { + margin-right: 10px; + } + } + } + } + } + } +} + +#wrapwrap .s_products_carousel { + .fa { + color: $s-products-carousel-carousel-icon-color; + font-size: 35px; + transition: all 0.3s ease 0s; + position: relative; + top: 50%; + transform: translateY(-50%); + &:hover { + color: o-color('beta'); + } + } + + .carousel-control { + opacity: 1; + top: 205px; + width: 70px; + height: 70px; + text-shadow: none; + } + + .carousel-control.left, .carousel-control.right { + @include s-products-carousel-hook; + background-color: $s-products-carousel-carousel-control-color; + background-image: none; + height: 100%; + top: 0; + } + + .carousel-control.left { + left: 0; + .fa-chevron-left { + right: 39%; + top: 50%; + } + } + + .carousel-control.right { + right: 0; + .fa-chevron-right { + left: 39%; + top: 50%; + } + } + + .carousel .carousel-control.left *, + .carousel .carousel-control.right * { + position: relative; + top: 19px; + z-index: 5; + } +} diff --git a/theme_common/static/src/scss/fonts.scss b/theme_common/static/src/scss/fonts.scss new file mode 100644 index 0000000..8195f75 --- /dev/null +++ b/theme_common/static/src/scss/fonts.scss @@ -0,0 +1,9 @@ +/** + * Fonts which are not google fonts and thus need to be served by Odoo directly. + * Ideally, using google fonts is always better ! + * + * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + * ! Please triple check Licence before to add new font ! + * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + */ + diff --git a/theme_common/static/src/scss/mixins.scss b/theme_common/static/src/scss/mixins.scss new file mode 100644 index 0000000..8f5ae18 --- /dev/null +++ b/theme_common/static/src/scss/mixins.scss @@ -0,0 +1,1205 @@ +@function o-theme-common-add-color-variations($from, $to, $variations: ('light': 10%, 'dark': -10%)) { + $color-variations: (); + @each $color-name in ('alpha', 'beta', 'gamma', 'delta', 'epsilon') { + $color: map-get($from, $color-name); + @if $color != null { + @each $variation-name, $amount in $variations { + $color-variations: map-merge($color-variations, ( + '#{$color-name}-#{$variation-name}': adjust-color($color, $lightness: $amount), + )); + } + } + } + @return map-merge($color-variations, $to); +} + +@mixin fa-size-generator($base-size) { + .fa { + text-align: center; + display: inline-block; + vertical-align: middle; + } + .fa, + .fa.fa-1x { + width: ($base-size + 20px); + height: ($base-size + 20px); + line-height: ($base-size + 20px); + } + .fa.fa-2x { + width: ($base-size + 40px); + height: ($base-size + 40px); + line-height: ($base-size + 40px); + } + .fa.fa-3x { + width: ($base-size + 60px); + height: ($base-size + 60px); + line-height: ($base-size + 60px); + } + .fa.fa-4x { + width: ($base-size + 80px); + height: ($base-size + 80px); + line-height: ($base-size + 80px); + } + .fa.fa-5x { + width: ($base-size + 100px); + height: ($base-size + 100px); + line-height: ($base-size + 100px); + } +} + +@mixin blockquote-layout($bg-color, $color) { + blockquote { + font-style: italic; + margin: 0 0 12px 0; + padding: 0; + border: 0; + > .fa, + > span .fa { + float: left; + } + @include fa-size-generator(20px); + img { + display: inline-block; + max-width: 40px; + max-height: 40px; + } + small { + display: inline-block; + } + .blockquote-text { + overflow: hidden; + font-size: $font-size-base; + text-align: left; + &:focus{ + outline: none; + } + } + p { + padding: 24px; + } + } +} + +@mixin carousel-control($position, $fa-position, $fa-padding) { + opacity: 1; + text-shadow: none; + color: gray('900'); + font-size: inherit; + width: 5%; + .fa { + top: 50%; + background-color: #fff; + &:hover { + color: theme-color('primary'); + } + @include media-breakpoint-down(sm) { + top: auto; + bottom: 0; + } + } + @include fa-size-generator(20px); + &.left { + background-image: none; + left: $position; + .fa { + left: $fa-position; + right: auto; + padding-right: $fa-padding; + } + } + &.right { + background-image: none; + right: $position; + .fa { + right: $fa-position; + left: auto; + padding-left: $fa-padding; + } + } +} + +@mixin PlaceholderStyle($color) { + ::-webkit-input-placeholder { /* WebKit browsers */ + color: $color; + } + :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: $color; + opacity: 1; + } + ::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: $color; + opacity: 1; + } + :-ms-input-placeholder { /* Internet Explorer 10+ */ + color: $color; + } +} + +//------------------------------------------------------------------------------ +// Themes specific style. +// +// This was introduced as a post-stable-12.0 review. The goal is to regroup +// similar block of scss code (accross different theme) in theme_common +// mixins which are then simply called in the related themes. This will ease +// stable fixes and master refactorings. +//------------------------------------------------------------------------------ + +@mixin o-theme-responsive-spacing-classes($lg, $md, $sm, $xs) { + @include media-breakpoint-down(lg) { + @include o-spacing-all($lg); + } + @include media-breakpoint-down(md) { + @include o-spacing-all($md); + } + @include media-breakpoint-down(sm) { + @include o-spacing-all($sm); + } + @include media-breakpoint-down(xs) { + @include o-spacing-all($xs); + } +} + +@mixin o-theme-cfa-bg-img-classes( + $bg1: $o-theme-bg-img-01, $bg2: $o-theme-bg-img-02, $bg3: $o-theme-bg-img-03, + $bg4: $o-theme-bg-img-04, $bg5: $o-theme-bg-img-05, $bg6: $o-theme-bg-img-06, + $bg7: $o-theme-bg-img-07) { + %cfa-bg-img { + background-size: cover; + background-position: center center; + } + .bg-img-01 { + @extend %cfa-bg-img; + background-image: $bg1; + } + .bg-img-02 { + @extend %cfa-bg-img; + background-image: $bg2; + } + .bg-img-03 { + @extend %cfa-bg-img; + background-image: $bg3; + } + .bg-img-04 { + @extend %cfa-bg-img; + background-image: $bg4; + } + .bg-img-05 { + @extend %cfa-bg-img; + background-image: $bg5; + } + .bg-img-06 { + @extend %cfa-bg-img; + background-image: $bg6; + } + .bg-img-07 { + @extend %cfa-bg-img; + background-image: $bg7; + } +} + +// This is probably to deprecate +@mixin o-theme-cfa-px-classes() { + .px14 { + font-size: 14px !important; + line-height: 25px; + } + .px16 { + font-size: 16px !important; + line-height: 28px; + } + .px18 { + font-size: 18px !important; + line-height: 30px; + } + .px22 { + font-size: 22px !important; + line-height: 32px; + } + .px30 { + font-size: 30px !important; + line-height: 30px; + } + .px36 { + font-size: 36px !important; + line-height: 36px; + } + .px42 { + font-size: 42px !important; + line-height: 42px; + } + .px50 { + font-size: 50px !important; + line-height: 50px; + } + .px60 { + font-size: 60px !important; + line-height: 60px; + } +} + +@mixin o-theme-cfa-btn-main-style() { + .btn { + transition: all 0.3s ease-out; + } +} + +@mixin o-theme-cfa-btn-style() { + @include o-theme-cfa-btn-main-style(); + + @if ($o-support-13-0-color-system) { + .btn { + // TODO this is not very consistent but this was how the theme was + // designed... should we keep this ? + @each $color, $alias in ('success': 'epsilon', 'info': 'gamma', 'warning': 'delta') { + &.btn-#{$color} { + @include button-variant(theme-color($alias), theme-color($alias)); + } + &.btn-outline-#{$color} { + @include button-outline-variant(theme-color($alias)); + } + } + &.btn-danger { + @include button-variant(gray('black'), gray('black')); + } + &.btn-outline-danger { + @include button-outline-variant(gray('black'), gray('black')); + } + } + } +} + +@mixin o-theme-cfa-header-responsive-sizes() { + @include media-breakpoint-down(sm) { + h1 { + font-size: 30px; + } + h2 { + font-size: 26px; + } + h3 { + font-size: 22px; + } + } +} + +@mixin o-theme-cfa-custom-form-control($with-color: true, $with-focus-border-width: true) { + border-top-width: 0px; + border-left-width: 0px; + border-right-width: 0px; + border-radius: 0px; + @if $with-color { + color: gray('700'); + } + + &:focus { + border-bottom-color: o-color('primary'); + @if $with-focus-border-width { + border-bottom-width: 2px; + } + } + + + .input-group-append { + margin-left: 1em; + } +} + +@mixin o-theme-cfa-full-width-styles() { + #wrapwrap { + #wrap { + width: 100%; + max-width: 100%; + margin: auto; + } + .navbar > .container { + max-width: 100%; + } + } + #footer { + width: 100%; + } +} + +@mixin o-theme-cfa-card-classes($font-size: $h4-font-size) { + .card-header { + background-color: inherit; + border: none; + font-size: $font-size; + } + .card-footer { + background: inherit; + } + .card { + text-align: center; + box-shadow: none; + border-radius: 0px; + } +} + +@mixin o-theme-cfa-top-menu-style($padding: 0, $display: flex, $margin: 0, $media-padding: 0, + $bg-color: white, $top: auto, $font-size: inherit, $dropdown-item-color: o-color('delta'), + $dropdown-item-hover-bg-color: rgba(0, 0, 0, 0), $dropdown-item-hover-color: o-color('epsilon'), + $nav-link-color: rgba(0, 0, 0, 0.5), $font-weight: normal, $text-transform: none, + $transition: all 0s ease 0s) { + + padding: $padding; + margin: $margin; + @include media-breakpoint-up(md) { + display: $display; + } + @include media-breakpoint-down(sm) { + padding: $media-padding; + } + .divider { + display: none; + } + .nav-link { + font-weight: $font-weight; + text-transform: $text-transform; + transition: $transition; + + &.active { + font-weight: bolder; + } + } + .dropdown-menu, .navbar-collapse { // FIXME navbar should be removed ? (https://github.com/odoo/design-themes/commit/d20298fe41fdee5324c7e32f78e89d26edc71896#diff-042ad6434fc37ef55af3ca7db63906b8L259) + border-radius: 0px; + box-shadow: none; + top: $top; + .dropdown-item, .nav-link { + font-size: $font-size; + } + .dropdown-divider, .divider { + margin: 0; + } + } +} + +@mixin o-theme-cfa-footer-style($font-size: 14px, $container-padding: 8px 65px 32px, $padding: 0, $border-top: 0, $margin-right: 50px, $h4-padding: 0 0 0 20px, $text-transform: uppercase) { + + .container { + .js_language_selector .dropdown-toggle { + padding: 6px 20px; + } + p, .list-unstyled { + font-size: $font-size; + } + h4 { + margin-right: $margin-right; + padding: $h4-padding; + text-transform: $text-transform; + } + } + .o_footer_copyright { + border-top: $border-top; + padding: $padding; + } +} + +@mixin o-theme-cfa-ecommerce-classes( + $nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: gray('800'), + $nav-link-active-bg-color: rgba(0, 0, 0, 0), $nav-link-active-color: o-color('epsilon'), + $js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: gray('700'), + $h6-padding-y: 10px, $h6-font-size: 13px, $h6-text-align: left, $h6-border-top: 0, $h6-border-bottom: 0, $h6-color: o-color('delta'), + $price-font-size: 12px, $product-price-padding: 0, $product-price-align: left, $btn-secondary-padding: 5px 10px, + $right-column-border-bottom: 1px solid gray('700'), $right-column-color: gray('700'), $right-column-font-weight: bold, + $add-cart-bg-color: gray('700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) { + + .breadcrumb { + padding-top: 20px; + font-size: 15px; + } + .form-inline .input-group { + .form-control { + width: 100%; + box-shadow: none; + &:focus { + box-shadow: none; + } + } + .input-group-btn { + width: 50px; + .btn { + line-height: 2.5; + } + .btn-secondary { + border-radius: 0px; + height: 50px; + width: 50px; + } + } + } + .js_add_cart_variants { + li strong { + font-size: 20px; + } + } + .oe_product { + .btn.btn-danger { + @include button-variant(theme-color('danger'), theme-color('danger')); + } + .text-danger { + color: theme-color('danger') !important; + } + .o_wsale_product_information { + padding: 0px 15px; + h6 { + border-top: $h6-border-top; + border-bottom: $h6-border-bottom; + font-size: $h6-font-size; + margin: 0px; + padding: $h6-padding-y 0px; + text-align: $h6-text-align; + } + .oe_subdescription { + text-align: left; + } + .product_price { + font-size: $price-font-size; + padding: $product-price-padding; + position: relative; + text-align: $product-price-align; + } + } + + .o_wsale_product_btn { + @include o-position-absolute(auto, map-get($spacers, 2), map-get($spacers, 2), auto); + padding: 0; + + .btn { + padding: $btn-padding-y-sm $btn-padding-x-sm; + transform: scale(1); + } + } + } + .oe_product_cart { + &:not(:hover) { + border-color: transparent; + } + } + + #products_grid { + &.o_wsale_layout_list { + .oe_product_cart { + border-bottom: $card-border-width solid $card-border-color; + + .o_wsale_product_information { + padding-right: 0px !important; + + h6 { + text-align: left !important; + font-size: 24px !important; + border-bottom: none !important; + } + .product_price { + display: inline-block; + font-size: 18px !important; + } + .oe_subdescription { + max-width: 70%; + } + } + .o_wsale_product_btn { + position: static; + display: inline-block; + width: auto; + padding: 0; + background: transparent; + + > .btn { + padding: $btn-padding-y $btn-padding-x; + } + } + } + } + } + + /* =================== Categories =================== */ + #products_grid_before { + + .card, .card-body { + border: none !important; + padding: 0 !important; + background-color: transparent !important; + box-shadow: none !important; + text-align: left !important + } + + .js_attributes { + padding: $js-attributes-padding; + + .css_attribute_color.active { + border: 5px ridge o-color('primary'); + } + li > ul { + display: block; + padding-left: 15px; + } + strong { + display: block; + padding-left: 10px; + margin-bottom: 10px; + margin-top: 10px; + text-transform: uppercase; + } + } + } + .list-unstyled .css_attribute_color.active { + border: 3px solid; + } + #website_sale_recommended_products { + padding: 30px; + h3 { + text-align: center; + border-bottom: 5px solid; + padding-bottom: 20px; + } + .row { + padding: 0 15px; + } + .col-lg-2 { + margin-top: 10px; + min-height: 160px; + } + } + .oe_cart { + .btn { + @include media-breakpoint-down(sm) { + padding: 10px; + } + } + .card { + background-color: rgba(0, 0, 0, 0); + } + strong { + color: gray('700'); + } + #cart_products img { + max-width: 100px; + } + .a-submit { + padding: 20px 0px; + min-width: 150px; + } + } + #modal_optional_products { + .modal-title { + background: rgba(0, 0, 0, 0); + } + .input-group { + border-collapse: inherit; + } + } + .product-description { + text-align: center; + font-size: 18px; + } + #right_column { + color: gray('700'); + a { + color: red; + } + .btn { + border-radius: 0px; + border: none; + } + .input-group-btn { + padding-left: 5px; + } + h4 { + border-bottom: $right-column-border-bottom; + color: $right-column-color; + font-size: 22px; + font-weight: $right-column-font-weight; + } + .fa { + padding-right: 5px; + } + } + .wizard { + box-shadow: none; + @include media-breakpoint-down(sm) { + padding-right: 0px; + li { + padding-left: 7px; + } + } + } + .oe_sale_acquirer_button .btn { + min-width: 150px !important; + text-transform: uppercase; + font-size: 20px; + margin-bottom: 20px; + } +} + +@mixin o-theme-chd-bg-img-classes( + $bg1: $o-theme-bg-img-01, $bg2: $o-theme-bg-img-02, $bg3: $o-theme-bg-img-03, + $bg4: $o-theme-bg-img-04, $bg5: $o-theme-bg-img-05, $bg6: $o-theme-bg-img-06, + $bg7: $o-theme-bg-img-07, $bg8: $o-theme-bg-img-08, $bg9: $o-theme-bg-img-09, + $bg10: $o-theme-bg-img-10, $bg11: $o-theme-bg-img-11, $bg12: $o-theme-bg-img-12, + $font-color: white) { + %chd-bg-img { + background-size: cover; + } + .bg-img-01 { + @extend %chd-bg-img; + background-image: $bg1; + } + .bg-img-02 { + @extend %chd-bg-img; + background-image: $bg2; + } + .bg-img-03 { + @extend %chd-bg-img; + background-image: $bg3; + } + .bg-img-04 { + @extend %chd-bg-img; + background-image: $bg4; + } + .bg-img-05 { + @extend %chd-bg-img; + background-image: $bg5; + } + .bg-img-06 { + @extend %chd-bg-img; + background-image: $bg6; + } + .bg-img-07 { + @extend %chd-bg-img; + background-image: $bg7; + } + .bg-img-08 { + @extend %chd-bg-img; + background-image: $bg8; + } + .bg-img-09 { + @extend %chd-bg-img; + background-image: $bg9; + } + .bg-img-10 { + @extend %chd-bg-img; + background-image: $bg10; + } + .bg-img-11 { + @extend %chd-bg-img; + background-image: $bg11; + } + .bg-img-12 { + @extend %chd-bg-img; + background-image: $bg12; + } +} + +@mixin o-theme-chd-bg-pattern-classes($o-theme-bg-patterns) { + @for $i from 1 through length($o-theme-bg-patterns) { + .bg-pattern-0#{$i} { + background-image: nth($o-theme-bg-patterns, $i); + } + } +} + +@mixin o-theme-chd-bg-gradient-classes() { + .bg_gradient_primary_down { + background-image: linear-gradient( rgba(theme-color('primary'), 0), rgba(theme-color('primary'), 1) ),; + } + .bg_gradient_primary_up { + background-image: linear-gradient( rgba(theme-color('primary'), 1), rgba(theme-color('primary'), 0) ),; + } + .bg_gradient_white_down_thumb { + background-image: linear-gradient( rgba(#ccc, 1), rgba(white, 0.5) ),; + } + .bg_gradient_white_down { + background-image: linear-gradient( rgba(white, 0), rgba(white, 0.5) ),; + } + .bg_gradient_white_up_thumb { + background-image: linear-gradient( rgba(white, 0.5), rgba(#ccc, 1) ),; + } + .bg_gradient_white_up { + background-image: linear-gradient( rgba(white, 0.5), rgba(white, 0) ),; + } + .bg_gradient_black_up { + background-image: linear-gradient( rgba(black, 0.5), rgba(black, 0) ),; + } + .bg_gradient_black_down { + background-image: linear-gradient( rgba(black, 0), rgba(black, 0.5) ),; + } +} + +@mixin o-theme-chd-bg-option-menu-styles() { + .bg_option_menu_img, .bg_option_menu_gradient { + height: 25px; + width: 120px; + border: 1px solid #ccc; + } +} + +@mixin o-theme-chd-padding-l-r-classes() { + // Note: To be removed. + // Kept for back-compatibility only. + .padding-l-r-8 { + @extend .px-2; + } + .padding-l-r-16 { + @extend .px-3; + } + .padding-l-r-32 { + @extend .px-4; + } +} + +@mixin o-theme-chd-footer-styles() { + p { + text-align: justify; + } +} + +@mixin o-theme-chd-ecommerce-classes() { + #products_grid .oe_product section { + padding: 4px 15px 24px 10px; + border-top: 1px dotted; + background-color: rgba(o-color('primary'), 0.2); + h5 a { + font-weight: 300; + } + &:hover { + background-color: rgba(o-color('primary'), 0.4); + transition: all 0.3s ease-in-out; + } + } + #products_grid_before .nav-pills { + font-size: 15px; + .nav-link { + font-size: 16px; + margin: 1px 0px; + + &.active, &:focus, &:hover { + transition: all 0.3s ease-in-out; + padding: 6px 6px; + } + } + } +} + +@mixin o-theme-chd-big-icons-styles($bg-color: o-color('alpha'), $border-color: o-color('alpha'), + $transform: scale(1.1, 1.1), $fa-color: white, $h5-color: white) { + + background-color: $bg-color !important; + border-color: $border-color; + transform: $transform; + .fa { + color: $fa-color !important; + } + h5.o_default_snippet_text { + color: $h5-color !important; + } +} + +@mixin o-theme-sri-bg-effects-styles( + $opacity: 1, $border-top: 2px solid #fff, $border-bottom: 2px solid #848484, + $background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 241, 241, 0.5) 50%, rgba(225, 225, 225, 0.5) 51%, rgba(246, 246, 246, 0.5) 100%)) { + + position: relative; + opacity: 0.999; // Force stacking context creation + &:before { + content: ""; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + display: block; + opacity: $opacity; + background: $background; + border-top: $border-top; + border-bottom: $border-bottom; + } +} + +@mixin o-theme-sri-bg-effects-classes() { + // TODO: remove these classes in a future version (kept for compatibility) + .glossy { + @include o-theme-sri-bg-effects-styles($border-top: 2px solid rgba(255, 255, 255, 0.73), $border-bottom: 1px solid rgba(155, 155, 155, 0.73)); + } + .glossy-medium { + @include o-theme-sri-bg-effects-styles($opacity: 0.7); + } + .glossy-soft { + @include o-theme-sri-bg-effects-styles($opacity: 0.3); + } + .insetShadow { + @include o-theme-sri-bg-effects-styles( + $background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%), + $border-top: 0, $border-bottom: 0); + } + .insetShadowBig { + @include o-theme-sri-bg-effects-styles( + $background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0.4) 100%), + $border-top: 0, $border-bottom: 0); + } +} + +@mixin o-theme-sri-bg-styles($std-url, $x, $y, $body-color, $url-2x) { + background-image: $std-url!important; + background-position: $x $y; + background-repeat: no-repeat; + background-size: cover; + color: $body-color; + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: $url-2x!important; + } +} + +@mixin o-theme-sri-bg-image-styles($img, $body-color: white, $shadow-color : rgba(255, 0, 0, 0), $x: 50%, $y: 50%) { + @include o-theme-sri-bg-styles(url("/#{$o-theme-img-base-url}#{$img}"), $x, $y, $body-color, url("/#{$o-theme-img-base-url}#{$o-theme-pattern-2x-prefix}#{$img}")); + text-shadow: 0 1px 1px transparentize($shadow-color, 0.4); +} + +@mixin o-theme-sri-bg-pattern-styles($img, $body-color: white, $x: 50%, $y: 50%) { + @include o-theme-sri-bg-styles(url("/#{$o-theme-pattern-base-url}#{$img}"), $x, $y, $body-color, url("/#{$o-theme-pattern-base-url}#{$o-theme-img-2x-prefix}#{$img}")); +} + +@mixin o-theme-sri-bg-img-thumb-classes($backgrounds) { + @each $name, $image in $backgrounds { + .#{$name}-thumb { + background-image: url("/#{$o-theme-thumb-base-url}#{$image}") !important; + background-position: center center; + background-size: cover; + } + } +} + +@mixin o-theme-sri-ecommerce-classes() { + // GENERAL + .oe_website_sale .wizard { + font-weight: bold; + } + // PRODUCTS' LIST + #products_grid { + div.oe_product { + padding-bottom: 15px; + padding-top: 10px; + + &:nth-child(odd) { + background: rgba(black, 0.015); + } + &:first-child { + border-top: 1px solid rgba(black, 0.1); + } + } + td.oe_product, div.oe_product .oe_product_image { + padding: 5px; + } + } + // PPRODUCTS CATEGORIES + #products_grid_before > ul > li { + &:first-child { + margin-bottom: 10px; + } + > a { + font-weight: bold; + margin-top: 5px; + } + } + // PPRODUCT PAGE + #product_detail { + > .row:first-of-type{ + margin-bottom: 36px; + } + form .form-control, form .input-group .btn { + height: 36px; + } + #product_details { + position: relative; + + &:before { + content: ""; + width: 1px; + background-color: gray('200'); + height: 100%; + @include o-position-absolute(0, auto, 0, -10%); + } + > h1 { + margin: 0 0 20px; + } + hr:first-of-type{ + display: none; + } + // LIST VIEW OF VARIANTS + .js_product > label > input{ + position: relative; + margin: 0 10px 0 0; + } + // PRODUCTS'S VARIANTS + ul.js_add_cart_variants { + margin-bottom: 20px; + display: table; + width: 100%; + + > li { + display: block; + > strong { + font-size: 0.9em; + display: block; + opacity: 0.7; + padding: 0; + margin-top: 20px; + } + > ul { + display: block; + padding-left: 0; + margin-left: 0; + + &.list-unstyled > label { + margin: 0!important; + } + &.list-inline { + li { + padding-left: 0; + } + label.css_attribute_color { + opacity: 0.8; + cursor: pointer; + border: 1px solid gray('600'); + box-shadow: inset 0 0 0 2px #fff; + border-radius: 2px; + + input { + cursor: pointer; + margin: 1px; + width: 18px; + } + &.active { + opacity: 1; + border: 2px solid #55e58e; + } + &:hover { + opacity: 1; + } + } + } + } + } + } + @include media-breakpoint-up(md) { + .css_quantity { + float: left; + } + #add_to_cart { + margin-top: 0!important; + margin-left: 10px; + } + ul.js_add_cart_variants > li { + display: table-row; + > strong, > ul { + display: table-cell; + } + } + } + .product_price h4 { + border-top: 1px solid #eee; + font-size: 35px; + margin-top: 25px; + padding-top: 10px; + } + } + } +} + +@mixin o-theme-sri-header-styles($name, $text-transform, $font-weight) { + ##{$name}_header { + font-family: $headings-font-family; + .navbar { + padding: 20px 0 20px; + + .navbar-nav { + > li > a { + text-transform: $text-transform; + font-weight: $font-weight; + } + .navbar-toggle { + margin: 0; + } + } + } + } + #wrapwrap { + .o_header_affixed:not(.o_header_fixed) { + .navbar { + padding: 2px 20px; + } + } + &.o_header_overlay { + > main, > footer { + opacity: 0.999; // hack to create a stacking context allowing to place top_content on top of background but behind everything else + } + .move_to_top { + z-index: -1; + width: 100%; + @include o-position-absolute($top: 0, $left: 0); + } + } + } +} + +@mixin o-theme-sri-ripple-animation-styles($name) { + .preserve3d, %preserve3d { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + } + + .btn { + z-index: 2; + @extend %preserve3d; + } + + @keyframes ripple { + 100% { opacity: 0; transform: scale(2.5); } + } + + .#{$name}-ripple { + display: block; + position: absolute; + border-radius: 100%; + opacity: 0.3; + z-index: -1; + background: currentColor; + pointer-events: none; + transform: scale(0); + + &.#{$name}-ripple-animated { + animation: ripple 0.35s ease-in; + } + } +} + +@mixin o-theme-sri-v-align-class() { + .v-align { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + + @media only screen and (max-width : 480px) { + top: auto; + transform: translate(0, 0); + } + > *:first-child { + margin-top: 0; + } + } +} + +@mixin o-theme-nmi-website-forum-classes($border-radius, $navbar-brand-color, $padding, + $hover-bg-color, $hover-color, $active-bg-color) { + .o_wforum_navbar_container { + .navbar { + padding-top: 0; + padding-bottom: 0; + border-radius: $border-radius; + .navbar-brand { + padding: 18px; + font-weight: $font-weight-bold; + color: $navbar-brand-color; + } + .navbar-nav .nav-link { + &:hover { + background-color: $hover-bg-color; + color: $hover-color; + } + &.active, &:focus { + background-color: $active-bg-color; + color: $hover-bg-color; + } + } + } + .input-group .form-control { + height: auto; + padding: $padding; + color: gray('900'); + @include border-left-radius(20px); + + + .input-group-append button { + padding: 6px 20px; + } + } + } + .website_forum #wrap { + // Ask a question - Button + .btn-group .btn { + padding: 6px 12px; + @include border-right-radius(0); + &.dropdown-toggle { + @include border-left-radius(0); + @include border-right-radius(20px); + } + } + // Ask a question - Editor icons + .btn-toolbar .btn { + background-color: rgba(0, 0, 0, 0); + color: #000; + border-radius: 0; + &.dropdown-toggle { + border-radius: 0; + } + } + } +} + +@mixin o-theme-nmi-bg-pattern-classes($o-theme-bg-patterns) { + @for $i from 1 through length($o-theme-bg-patterns) { + .bg-pattern-0#{$i}{ + background-image: nth($o-theme-bg-patterns, $i); + background-repeat: repeat !important; + background-size: inherit !important; + } + } +} + +@mixin o-theme-nmi-bg-image-classes($o-theme-bg-imgs, $bg-size) { + @for $i from 1 through length($o-theme-bg-imgs) { + $j: $i; + @if $i < 10 { $j: 0#{$i}; } + .bg-img-#{$j}{ + background: nth($o-theme-bg-imgs, $i); + background-repeat: no-repeat !important; + background-size: $bg-size !important; + } + } +} + +@mixin o-theme-nmi-wrapwrap-styles($shadow-class, $border-radius) { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + background-color: rgba(0, 0, 0, 0); + + p:not(.s_share) a:not(.btn) { + text-decoration: underline; + } + .readable { + padding: 0 30px; + .container { + width: auto; + } + } + .text-underline { + text-decoration: underline; + } + .text-boxed { + border: 1px solid; + border-color: inherit; + padding: 20px; + border-radius: $border-radius; + } +} diff --git a/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss new file mode 100644 index 0000000..2823f13 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 2; +$o-theme-color-palette-number: 2; +$o-gray-color-palette-number: 2; diff --git a/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss new file mode 100644 index 0000000..9bdce54 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 3; +$o-theme-color-palette-number: 3; +$o-gray-color-palette-number: 3; diff --git a/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss new file mode 100644 index 0000000..9150d43 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 4; +$o-theme-color-palette-number: 4; +$o-gray-color-palette-number: 4; diff --git a/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss new file mode 100644 index 0000000..58021de --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 5; +$o-theme-color-palette-number: 5; +$o-gray-color-palette-number: 5; diff --git a/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss new file mode 100644 index 0000000..bd9a2b5 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 6; +$o-theme-color-palette-number: 6; +$o-gray-color-palette-number: 6; diff --git a/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss new file mode 100644 index 0000000..464ff4a --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 7; +$o-theme-color-palette-number: 7; +$o-gray-color-palette-number: 7; diff --git a/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss new file mode 100644 index 0000000..6fa642a --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 8; +$o-theme-color-palette-number: 8; +$o-gray-color-palette-number: 8; diff --git a/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss new file mode 100644 index 0000000..da879d2 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 9; +$o-theme-color-palette-number: 9; +$o-gray-color-palette-number: 9; diff --git a/theme_common/static/src/scss/primary_variables.scss b/theme_common/static/src/scss/primary_variables.scss new file mode 100644 index 0000000..72feaa2 --- /dev/null +++ b/theme_common/static/src/scss/primary_variables.scss @@ -0,0 +1,5 @@ +//------------------------------------------------------------------------------ +// s_medias_list +//------------------------------------------------------------------------------ + +$s-medias-list-bg-color-main: null; // Default to BS color |