Theming: minimal but effective tweaks (rounding, shadows, typo)

Author: muratcakir

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

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

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

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

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 {

src/Presentation/SmartStore.Web/Themes/Flex/Content/_search.scss

@@ -27,15 +27,16 @@ $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;
     transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
     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;

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;
 

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;

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';

src/Presentation/SmartStore.Web/Themes/Flex/theme.config

@@ -128,8 +128,8 @@
     <!-- Search -->
     <Var name="searchbox-bg" type="Color">#fff</Var>
     <Var name="searchbox-focus-bg" type="Color">#fff</Var>
-    <Var name="searchbox-border-color" type="Color">rgba(0,0,0, 0.12)</Var>
-    <Var name="searchbox-border-active-color" type="Color">rgba(0,0,0, 0.2)</Var>
+    <Var name="searchbox-border-color" type="Color">rgba(0,0,0, 0.1)</Var>
+    <Var name="searchbox-border-active-color" type="Color">rgba(0,0,0, 0.1)</Var>
     <Var name="search-button-style" type="Select#brand-colors">primary</Var>
     <Var name="search-button-flat" type="Boolean">false</Var>
     <Var name="searchbox-hit-tag-color" type="Color">darken($warning, 10%)</Var>    
@@ -168,7 +168,7 @@
     <Var name="costep-progress-color" type="Color">$warning</Var>
     <Var name="offcanvas-cart-footer" type="Color">$success</Var>
     <Var name="art-active-bg-color" type="Color">#fff</Var>
-    <Var name="art-active-border-color" type="Color">rgba(0,0,0, 0.2)</Var>
+    <Var name="art-active-border-color" type="Color">rgba(0,0,0, 0)</Var>
   </Vars>
 
   <Selects>

src/Presentation/SmartStore.Web/Views/Common/Partials/TopBar.cshtml

@@ -8,7 +8,7 @@
 
 @{ Html.RenderWidget("header_menu_top"); }
 
-<nav class="menubar">
+<nav class="menubar navbar navbar-slide">
     <nav class="menubar-group ml-0">
         @{ 
 			Html.RenderAction("LanguageSelector", "Common");

src/Presentation/SmartStore.Web/Views/Product/Partials/Product.Info.cshtml

@@ -27,7 +27,7 @@
 
 	<!-- Title -->
 	<div class="page-title">
-		<h1 @Html.LanguageAttributes(Model.Name) class="pd-name pd-name-sm" itemprop="name">
+		<h1 @Html.LanguageAttributes(Model.Name) class="pd-name" itemprop="name">
 			@if (Model.IsAssociatedProduct && Model.VisibleIndividually)
 			{
 				<a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@T("Products.Details")">@Model.Name</a>

src/Presentation/SmartStore.Web/Views/Search/FacetTemplates/MultiSelect.cshtml

@@ -43,7 +43,7 @@
 	</div>
 }
 
-<div class="facet-body-inner@(Model.IsScrollable ? " scrollable" : "")">
+<div class="facet-body-inner@(Model.IsScrollable ? " scrollable custom-scrollbar" : "")">
 	@foreach (var facet in facets)
 	{
 		<div class="facet-item facet-check" data-href="@Url.FacetToggle(facet)">