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"); }
-