diff --git a/src/Presentation/SmartStore.Web/Content/shared/_typo.scss b/src/Presentation/SmartStore.Web/Content/shared/_typo.scss index 800eb3e8a4..0e164459a4 100644 --- a/src/Presentation/SmartStore.Web/Content/shared/_typo.scss +++ b/src/Presentation/SmartStore.Web/Content/shared/_typo.scss @@ -91,7 +91,7 @@ h6, .h6 { display: inline-block; background: var(--body-bg, #fff); padding-right: 1rem; - font-weight: $font-weight-light; + font-weight: $font-weight-normal; } } diff --git a/src/Presentation/SmartStore.Web/Content/skinning/_select2.scss b/src/Presentation/SmartStore.Web/Content/skinning/_select2.scss index 2d5429af00..89d1515689 100644 --- a/src/Presentation/SmartStore.Web/Content/skinning/_select2.scss +++ b/src/Presentation/SmartStore.Web/Content/skinning/_select2.scss @@ -356,6 +356,7 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado padding-bottom: $s2bs-padding-base-vertical; padding-left: $s2bs-padding-base-horizontal; padding-right: calc(#{$s2sm-caret-width} + #{$s2bs-padding-base-horizontal / 2}); + --border-radius: #{$input-border-radius}; //padding-right: ($s2bs-padding-base-horizontal + ($s2bs-caret-width-base * 3)); /** * Adjust the single Select2's dropdown arrow button appearance. @@ -374,6 +375,9 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado border-left-width: 1px; width: calc(#{$s2sm-caret-width} - 2px); background-color: $s2sm-shade-bg; + border-radius: var(--border-radius); + border-top-left-radius: 0; + border-bottom-left-radius: 0; b { border-color: $s2bs-dropdown-arrow-color transparent transparent transparent; @@ -491,9 +495,11 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado height: $s2bs-input-height-small; line-height: $s2bs-line-height-small; padding: $s2bs-padding-small-vertical $s2bs-padding-small-horizontal + $s2bs-caret-width-base*3 $s2bs-padding-small-vertical $s2bs-padding-small-horizontal; + --border-radius: #{$input-border-radius-sm}; /* 2 */ .select2-selection__arrow { width: calc(#{$input-height-sm} - 2px); + border-radius: $border-radius; } } @@ -536,6 +542,7 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado padding-right: calc(#{$s2bs-input-height-large} + #{$s2bs-caret-width-large*2}); padding-bottom: $s2bs-padding-large-vertical; padding-left: $s2bs-padding-large-horizontal; + --border-radius: #{$input-border-radius-lg}; /* 1 */ .select2-selection__arrow { width: calc(#{$input-height-lg} - 2px); @@ -714,6 +721,10 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado right: auto; border-left-width: 0; border-right-width: 1px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } } diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_artlist.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_artlist.scss index e28880a4b8..d4a147a5b1 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_artlist.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_artlist.scss @@ -12,7 +12,11 @@ $art-font-size-xs: $font-size-xs; $art-line-height: 1.3; $art-price-color: $product-price-color; $art-price-offer-color: $red; -$art-border-color: #ddd; +$art-border-color: transparent; +$art-divider-color: $gray-300; +$art-border-radius: $border-radius-sm; +$art-box-shadow: 0 0 1px rgba(#000, 0.1), 0 1px 2px rgba(#000, 0.12), 0 2px 5px rgba(#000, 0.125); +$art-drop-box-shadow: 0 1px 1px rgba(#000, 0.1), 0 2px 2px rgba(#000, 0.12), 0 4px 6px rgba(#000, 0.125); @mixin make-art-row() { display: flex; @@ -57,8 +61,7 @@ $art-border-color: #ddd; margin-bottom: 0; } - .btn - { + .btn { border-radius: 0; transition: none; } @@ -84,8 +87,8 @@ $art-border-color: #ddd; .artlist-action--pager { > * { position: relative; } > *:not(:first-child) { margin-left: -1px; } - .btn-pager-prev { border-top-left-radius: 3px; border-bottom-left-radius: 3px } - .btn-pager-next { border-top-right-radius: 3px; border-bottom-right-radius: 3px } + .btn-pager-prev { border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius } + .btn-pager-next { border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius } } @media (max-width: 360px) { @@ -138,7 +141,7 @@ $art-border-color: #ddd; @include media-breakpoint-up(lg) { flex-wrap: nowrap; - border-bottom: 1px solid $art-border-color; + border-bottom: 1px solid $art-divider-color; .artlist-action-group--filtersort { flex-grow: 0; @@ -194,11 +197,12 @@ $art-border-color: #ddd; margin-left: -1px; border-collapse: collapse; + border-radius: $art-border-radius; &.active { background: $art-active-bg-color; border-color: $art-active-border-color !important; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + box-shadow: $art-box-shadow; } } @@ -344,12 +348,14 @@ $art-border-color: #ddd; right: -1px; bottom: 0; background: $art-active-bg-color; - border: 1px solid $art-active-border-color; - border-top-color: #fff; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); + box-shadow: $art-drop-box-shadow; + padding-top: 1px; + clip-path: inset(0 -5px -15px -5px); + border-radius: 0 0 $art-border-radius $art-border-radius; + overflow: hidden; opacity: 0; visibility: hidden; - z-index: -1; + z-index: -1; .art.active & { opacity: 1; @@ -430,7 +436,7 @@ $art-border-color: #ddd; margin-right: 0; padding-left: 0; padding-right: 0; - border-bottom-color: $art-border-color; + border-bottom-color: $art-divider-color; } .art-data-block { @@ -559,12 +565,12 @@ $art-border-color: #ddd; content: ''; width: 100%; height: 1px; - background: $art-border-color; + background: $art-divider-color; bottom: 1px; } .art { - border-bottom-color: $art-border-color; + border-bottom-color: $art-divider-color; display: flex; flex-flow: column; } @@ -692,8 +698,9 @@ $art-border-color: #ddd; .art { background: $art-active-bg-color; border-color: $art-border-color; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); margin: 0 0.5rem 1rem 0.5rem; + //box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + box-shadow: $art-box-shadow; } } } diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_block.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_block.scss index be68253678..23b30eabc1 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_block.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_block.scss @@ -26,11 +26,12 @@ &.block-boxed { border: 1px dotted rgba(0,0,0, 0.2); + border-radius: $border-radius; .block-title > * { font-weight: $font-weight-normal; } } &.block-boxed .block-title { - color: $gray-500; + color: $gray-600; margin-left: 1.5rem; margin-right: 1.5rem; } diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_product.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_product.scss index 0456f51f3f..606c3ab12c 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_product.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_product.scss @@ -43,6 +43,10 @@ $pd-offer-spacing: $grid-gutter-width / 2; .pd-tabs { margin-bottom: 1rem; + + > .nav-tabs { + justify-content: center; + } } @@ -75,11 +79,12 @@ $pd-offer-spacing: $grid-gutter-width / 2; // ===================================================== .pd-name { - font-size: 1.8rem; + font-size: 1.75rem; + font-weight: $font-weight-bold; } .pd-name-sm { - font-size: 1.2rem; + font-size: 1.25rem; font-weight: $font-weight-medium; } @@ -166,6 +171,7 @@ $pd-offer-spacing: $grid-gutter-width / 2; padding: $pd-offer-spacing; line-height: $pd-line-height; width: 100%; + border-radius: $border-radius; } .row.pd-offer-actions { diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_search.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_search.scss index 4c3a7bc28c..f928750a62 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_search.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_search.scss @@ -27,7 +27,7 @@ $facet-selection-color: darken($success, 15%); position: relative; padding-left: 1rem; padding-right: 1rem; - border-radius: 2px; + //border-radius: 2px; background: $searchbox-bg; border-color: $searchbox-border-color; box-shadow: none; @@ -35,7 +35,8 @@ $facet-selection-color: darken($success, 15%); padding-right: 60px; &:hover, &:focus, &:active { - box-shadow: 0 2px 6px 0 rgba(0,0,0, 0.12); + //box-shadow: 0 2px 6px 0 rgba(0,0,0, 0.12); + box-shadow: $box-shadow-sm-var; } &:focus, &:active { background-color: $searchbox-focus-bg; @@ -73,10 +74,10 @@ $facet-selection-color: darken($success, 15%); max-width: 100%; min-height: 50px; border: 1px solid $searchbox-border-active-color; - box-shadow: 0 6px 6px 0 rgba(0,0,0, 0.12); + box-shadow: $box-shadow-var; // 0 6px 6px 0 rgba(0,0,0, 0.12); background-color: $dropdown-bg; z-index: $zindex-dropdown + 100; - border-radius: 0 0 2px 2px; + border-radius: 0 0 $border-radius $border-radius; &.open { display: block; diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_shopbar.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_shopbar.scss index 100bff88a6..a1129be8be 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_shopbar.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_shopbar.scss @@ -218,6 +218,7 @@ .menubar { display: flex; flex-direction: row; + padding: 0; } .menubar-group { @@ -229,7 +230,7 @@ position: relative; display: block; font-size: $font-size-xs; - padding: 1em 0.8em; + padding: 1.25em 0.8em; text-decoration: none !important; text-transform: uppercase; diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_variables.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_variables.scss index 86ce5c3b26..8f5612bde8 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/_variables.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/_variables.scss @@ -46,8 +46,8 @@ $megamenu-rotator-bg: rgba(255, 255, 255, 0.92) !default; $searchbox-bg: #fff !default; $searchbox-focus-bg: #fff !default; -$searchbox-border-color: rgba(0,0,0, 0.12) !default; -$searchbox-border-active-color: rgba(0,0,0, 0.2) !default; +$searchbox-border-color: rgba(0,0,0, 0.1) !default; +$searchbox-border-active-color: rgba(0,0,0, 0.1) !default; $searchbox-hit-tag-color: darken($warning, 10%) !default; $footer-bg: $gray-100 !default; @@ -68,8 +68,8 @@ $font-size-root-sm: 14px !default; // Material tabs // ============================================================== -$mtab-text-transform: uppercase; -$mtab-font-weight: $font-weight-normal; +$mtab-text-transform: none; +$mtab-font-weight: $font-weight-medium; $mtab-color: inherit; // @@ -134,9 +134,9 @@ $display2-weight: $font-weight-light; $display3-weight: $font-weight-light; $display4-weight: $font-weight-light; -$btn-border-radius: .125rem; -$btn-border-radius-lg: .1875rem; -$btn-border-radius-sm: .125rem; +$btn-border-radius: $border-radius; +$btn-border-radius-lg: $border-radius-lg; +$btn-border-radius-sm: $border-radius-sm; // Shadows @@ -150,6 +150,9 @@ $box-shadow-lg-var: 0 1px 2px rgba(var(--shadow-color-rgb), calc(var 0 3px 8px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.06)), 0 8px 20px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.1)), 0 16px 42px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.12)); +$box-shadow-xs-var: 0 0 1px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.1)), + 0 1px 2px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.12)), + 0 2px 5px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.125)); $box-shadow-sm: var(--box-shadow); $box-shadow: var(--box-shadow); @@ -275,13 +278,13 @@ $custom-control-indicator-checked-disabled-bg: rgba($blue, .5); // Misc -$card-deck-margin: 10px; -$alert-border-radius: 0; -$product-price-color: $body-color !default; -$login-box-bg: #fcfcfc !default; -$cart-footer-bg: $gray-100 !default; -$costep-progress-color: $warning !default; -$offcanvas-cart-footer: $success !default; -$art-active-bg-color: #fff !default; -$art-active-border-color: rgba(0,0,0, 0.2) !default; +$card-deck-margin: 10px; +$alert-border-radius: $border-radius; +$product-price-color: $body-color !default; +$login-box-bg: $gray-100 !default; +$cart-footer-bg: $gray-100 !default; +$costep-progress-color: $warning !default; +$offcanvas-cart-footer: $success !default; +$art-active-bg-color: #fff !default; +$art-active-border-color: rgba(0,0,0, 0) !default; $product-detail-addtocart-box-bg: $gray-100 !default; \ No newline at end of file diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/Content/theme.scss b/src/Presentation/SmartStore.Web/Themes/Flex/Content/theme.scss index 0e6323558f..020a09017c 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/Content/theme.scss +++ b/src/Presentation/SmartStore.Web/Themes/Flex/Content/theme.scss @@ -16,7 +16,7 @@ // and bootstrap variable overrides. // -------------------------------------------------- -@import '_variables-custom.scss'; +@import '_variables-custom.scss'; @import '_variables.scss'; // @@ -78,6 +78,7 @@ @import "../../../Content/shared/_offcanvas.scss"; @import "../../../Content/shared/_sections.scss"; @import "../../../Content/shared/_bg.scss"; +@import '../../../Content/shared/_custom-scrollbar.scss'; @import "../../../Content/shared/_box.scss"; @import "../../../Content/shared/_utils.scss"; @import '../../../Content/shared/_switch.scss'; diff --git a/src/Presentation/SmartStore.Web/Themes/Flex/theme.config b/src/Presentation/SmartStore.Web/Themes/Flex/theme.config index 78ee810a13..f2ad75a13c 100644 --- a/src/Presentation/SmartStore.Web/Themes/Flex/theme.config +++ b/src/Presentation/SmartStore.Web/Themes/Flex/theme.config @@ -128,8 +128,8 @@ #fff #fff - rgba(0,0,0, 0.12) - rgba(0,0,0, 0.2) + rgba(0,0,0, 0.1) + rgba(0,0,0, 0.1) primary false darken($warning, 10%) @@ -168,7 +168,7 @@ $warning $success #fff - rgba(0,0,0, 0.2) + rgba(0,0,0, 0) diff --git a/src/Presentation/SmartStore.Web/Views/Common/Partials/TopBar.cshtml b/src/Presentation/SmartStore.Web/Views/Common/Partials/TopBar.cshtml index 00f7dba080..c1ccda6eff 100644 --- a/src/Presentation/SmartStore.Web/Views/Common/Partials/TopBar.cshtml +++ b/src/Presentation/SmartStore.Web/Views/Common/Partials/TopBar.cshtml @@ -8,7 +8,7 @@ @{ Html.RenderWidget("header_menu_top"); } -