Skip to content

Commit 7868b04

Browse files
muratcakirmuratcakir
committed
Theming: minimal but effective tweaks (rounding, shadows, typo)
1 parent ee2004f commit 7868b04

File tree

14 files changed

+79
-48
lines changed

14 files changed

+79
-48
lines changed

‎src/Presentation/SmartStore.Web/Content/shared/_typo.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ h6, .h6 {
9191
display: inline-block;
9292
background: var(--body-bg, #fff);
9393
padding-right: 1rem;
94-
font-weight: $font-weight-light;
94+
font-weight: $font-weight-normal;
9595
}
9696
}
9797

‎src/Presentation/SmartStore.Web/Content/skinning/_select2.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,7 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado
356356
padding-bottom: $s2bs-padding-base-vertical;
357357
padding-left: $s2bs-padding-base-horizontal;
358358
padding-right: calc(#{$s2sm-caret-width} + #{$s2bs-padding-base-horizontal / 2});
359+
--border-radius: #{$input-border-radius};
359360
//padding-right: ($s2bs-padding-base-horizontal + ($s2bs-caret-width-base * 3));
360361
/**
361362
* 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
374375
border-left-width: 1px;
375376
width: calc(#{$s2sm-caret-width} - 2px);
376377
background-color: $s2sm-shade-bg;
378+
border-radius: var(--border-radius);
379+
border-top-left-radius: 0;
380+
border-bottom-left-radius: 0;
377381

378382
b {
379383
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
491495
height: $s2bs-input-height-small;
492496
line-height: $s2bs-line-height-small;
493497
padding: $s2bs-padding-small-vertical $s2bs-padding-small-horizontal + $s2bs-caret-width-base*3 $s2bs-padding-small-vertical $s2bs-padding-small-horizontal;
498+
--border-radius: #{$input-border-radius-sm};
494499
/* 2 */
495500
.select2-selection__arrow {
496501
width: calc(#{$input-height-sm} - 2px);
502+
border-radius: $border-radius;
497503
}
498504
}
499505

@@ -536,6 +542,7 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado
536542
padding-right: calc(#{$s2bs-input-height-large} + #{$s2bs-caret-width-large*2});
537543
padding-bottom: $s2bs-padding-large-vertical;
538544
padding-left: $s2bs-padding-large-horizontal;
545+
--border-radius: #{$input-border-radius-lg};
539546
/* 1 */
540547
.select2-selection__arrow {
541548
width: calc(#{$input-height-lg} - 2px);
@@ -714,6 +721,10 @@ $s2bs-form-control-transition: none; // border-color ease-in-out .15s, box-shado
714721
right: auto;
715722
border-left-width: 0;
716723
border-right-width: 1px;
724+
border-top-right-radius: 0;
725+
border-bottom-right-radius: 0;
726+
border-top-left-radius: var(--border-radius);
727+
border-bottom-left-radius: var(--border-radius);
717728
}
718729
}
719730

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_artlist.scss‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ $art-font-size-xs: $font-size-xs;
1212
$art-line-height: 1.3;
1313
$art-price-color: $product-price-color;
1414
$art-price-offer-color: $red;
15-
$art-border-color: #ddd;
15+
$art-border-color: transparent;
16+
$art-divider-color: $gray-300;
17+
$art-border-radius: $border-radius-sm;
18+
$art-box-shadow: 0 0 1px rgba(#000, 0.1), 0 1px 2px rgba(#000, 0.12), 0 2px 5px rgba(#000, 0.125);
19+
$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);
1620

1721
@mixin make-art-row() {
1822
display: flex;
@@ -57,8 +61,7 @@ $art-border-color: #ddd;
5761
margin-bottom: 0;
5862
}
5963

60-
.btn
61-
{
64+
.btn {
6265
border-radius: 0;
6366
transition: none;
6467
}
@@ -84,8 +87,8 @@ $art-border-color: #ddd;
8487
.artlist-action--pager {
8588
> * { position: relative; }
8689
> *:not(:first-child) { margin-left: -1px; }
87-
.btn-pager-prev { border-top-left-radius: 3px; border-bottom-left-radius: 3px }
88-
.btn-pager-next { border-top-right-radius: 3px; border-bottom-right-radius: 3px }
90+
.btn-pager-prev { border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius }
91+
.btn-pager-next { border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius }
8992
}
9093

9194
@media (max-width: 360px) {
@@ -138,7 +141,7 @@ $art-border-color: #ddd;
138141

139142
@include media-breakpoint-up(lg) {
140143
flex-wrap: nowrap;
141-
border-bottom: 1px solid $art-border-color;
144+
border-bottom: 1px solid $art-divider-color;
142145

143146
.artlist-action-group--filtersort {
144147
flex-grow: 0;
@@ -194,11 +197,12 @@ $art-border-color: #ddd;
194197
margin-left: -1px;
195198

196199
border-collapse: collapse;
200+
border-radius: $art-border-radius;
197201

198202
&.active {
199203
background: $art-active-bg-color;
200204
border-color: $art-active-border-color !important;
201-
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
205+
box-shadow: $art-box-shadow;
202206
}
203207
}
204208

@@ -344,12 +348,14 @@ $art-border-color: #ddd;
344348
right: -1px;
345349
bottom: 0;
346350
background: $art-active-bg-color;
347-
border: 1px solid $art-active-border-color;
348-
border-top-color: #fff;
349-
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
351+
box-shadow: $art-drop-box-shadow;
352+
padding-top: 1px;
353+
clip-path: inset(0 -5px -15px -5px);
354+
border-radius: 0 0 $art-border-radius $art-border-radius;
355+
overflow: hidden;
350356
opacity: 0;
351357
visibility: hidden;
352-
z-index: -1;
358+
z-index: -1;
353359

354360
.art.active & {
355361
opacity: 1;
@@ -430,7 +436,7 @@ $art-border-color: #ddd;
430436
margin-right: 0;
431437
padding-left: 0;
432438
padding-right: 0;
433-
border-bottom-color: $art-border-color;
439+
border-bottom-color: $art-divider-color;
434440
}
435441

436442
.art-data-block {
@@ -559,12 +565,12 @@ $art-border-color: #ddd;
559565
content: '';
560566
width: 100%;
561567
height: 1px;
562-
background: $art-border-color;
568+
background: $art-divider-color;
563569
bottom: 1px;
564570
}
565571

566572
.art {
567-
border-bottom-color: $art-border-color;
573+
border-bottom-color: $art-divider-color;
568574
display: flex;
569575
flex-flow: column;
570576
}
@@ -692,8 +698,9 @@ $art-border-color: #ddd;
692698
.art {
693699
background: $art-active-bg-color;
694700
border-color: $art-border-color;
695-
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
696701
margin: 0 0.5rem 1rem 0.5rem;
702+
//box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
703+
box-shadow: $art-box-shadow;
697704
}
698705
}
699706
}

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_block.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@
2626

2727
&.block-boxed {
2828
border: 1px dotted rgba(0,0,0, 0.2);
29+
border-radius: $border-radius;
2930
.block-title > * { font-weight: $font-weight-normal; }
3031
}
3132

3233
&.block-boxed .block-title {
33-
color: $gray-500;
34+
color: $gray-600;
3435
margin-left: 1.5rem;
3536
margin-right: 1.5rem;
3637
}

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_product.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ $pd-offer-spacing: $grid-gutter-width / 2;
4343

4444
.pd-tabs {
4545
margin-bottom: 1rem;
46+
47+
> .nav-tabs {
48+
justify-content: center;
49+
}
4650
}
4751

4852

@@ -75,11 +79,12 @@ $pd-offer-spacing: $grid-gutter-width / 2;
7579
// =====================================================
7680

7781
.pd-name {
78-
font-size: 1.8rem;
82+
font-size: 1.75rem;
83+
font-weight: $font-weight-bold;
7984
}
8085

8186
.pd-name-sm {
82-
font-size: 1.2rem;
87+
font-size: 1.25rem;
8388
font-weight: $font-weight-medium;
8489
}
8590

@@ -166,6 +171,7 @@ $pd-offer-spacing: $grid-gutter-width / 2;
166171
padding: $pd-offer-spacing;
167172
line-height: $pd-line-height;
168173
width: 100%;
174+
border-radius: $border-radius;
169175
}
170176

171177
.row.pd-offer-actions {

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,16 @@ $facet-selection-color: darken($success, 15%);
2727
position: relative;
2828
padding-left: 1rem;
2929
padding-right: 1rem;
30-
border-radius: 2px;
30+
//border-radius: 2px;
3131
background: $searchbox-bg;
3232
border-color: $searchbox-border-color;
3333
box-shadow: none;
3434
transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
3535
padding-right: 60px;
3636

3737
&:hover, &:focus, &:active {
38-
box-shadow: 0 2px 6px 0 rgba(0,0,0, 0.12);
38+
//box-shadow: 0 2px 6px 0 rgba(0,0,0, 0.12);
39+
box-shadow: $box-shadow-sm-var;
3940
}
4041
&:focus, &:active {
4142
background-color: $searchbox-focus-bg;
@@ -73,10 +74,10 @@ $facet-selection-color: darken($success, 15%);
7374
max-width: 100%;
7475
min-height: 50px;
7576
border: 1px solid $searchbox-border-active-color;
76-
box-shadow: 0 6px 6px 0 rgba(0,0,0, 0.12);
77+
box-shadow: $box-shadow-var; // 0 6px 6px 0 rgba(0,0,0, 0.12);
7778
background-color: $dropdown-bg;
7879
z-index: $zindex-dropdown + 100;
79-
border-radius: 0 0 2px 2px;
80+
border-radius: 0 0 $border-radius $border-radius;
8081

8182
&.open {
8283
display: block;

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_shopbar.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@
218218
.menubar {
219219
display: flex;
220220
flex-direction: row;
221+
padding: 0;
221222
}
222223

223224
.menubar-group {
@@ -229,7 +230,7 @@
229230
position: relative;
230231
display: block;
231232
font-size: $font-size-xs;
232-
padding: 1em 0.8em;
233+
padding: 1.25em 0.8em;
233234
text-decoration: none !important;
234235
text-transform: uppercase;
235236

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_variables.scss‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ $megamenu-rotator-bg: rgba(255, 255, 255, 0.92) !default;
4646

4747
$searchbox-bg: #fff !default;
4848
$searchbox-focus-bg: #fff !default;
49-
$searchbox-border-color: rgba(0,0,0, 0.12) !default;
50-
$searchbox-border-active-color: rgba(0,0,0, 0.2) !default;
49+
$searchbox-border-color: rgba(0,0,0, 0.1) !default;
50+
$searchbox-border-active-color: rgba(0,0,0, 0.1) !default;
5151
$searchbox-hit-tag-color: darken($warning, 10%) !default;
5252

5353
$footer-bg: $gray-100 !default;
@@ -68,8 +68,8 @@ $font-size-root-sm: 14px !default;
6868
// Material tabs
6969
// ==============================================================
7070

71-
$mtab-text-transform: uppercase;
72-
$mtab-font-weight: $font-weight-normal;
71+
$mtab-text-transform: none;
72+
$mtab-font-weight: $font-weight-medium;
7373
$mtab-color: inherit;
7474

7575
//
@@ -134,9 +134,9 @@ $display2-weight: $font-weight-light;
134134
$display3-weight: $font-weight-light;
135135
$display4-weight: $font-weight-light;
136136

137-
$btn-border-radius: .125rem;
138-
$btn-border-radius-lg: .1875rem;
139-
$btn-border-radius-sm: .125rem;
137+
$btn-border-radius: $border-radius;
138+
$btn-border-radius-lg: $border-radius-lg;
139+
$btn-border-radius-sm: $border-radius-sm;
140140

141141
// Shadows
142142

@@ -150,6 +150,9 @@ $box-shadow-lg-var: 0 1px 2px rgba(var(--shadow-color-rgb), calc(var
150150
0 3px 8px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.06)),
151151
0 8px 20px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.1)),
152152
0 16px 42px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.12));
153+
$box-shadow-xs-var: 0 0 1px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.1)),
154+
0 1px 2px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.12)),
155+
0 2px 5px rgba(var(--shadow-color-rgb), calc(var(--shadow-color-intensity, 1) * 0.125));
153156

154157
$box-shadow-sm: var(--box-shadow);
155158
$box-shadow: var(--box-shadow);
@@ -275,13 +278,13 @@ $custom-control-indicator-checked-disabled-bg: rgba($blue, .5);
275278

276279
// Misc
277280

278-
$card-deck-margin: 10px;
279-
$alert-border-radius: 0;
280-
$product-price-color: $body-color !default;
281-
$login-box-bg: #fcfcfc !default;
282-
$cart-footer-bg: $gray-100 !default;
283-
$costep-progress-color: $warning !default;
284-
$offcanvas-cart-footer: $success !default;
285-
$art-active-bg-color: #fff !default;
286-
$art-active-border-color: rgba(0,0,0, 0.2) !default;
281+
$card-deck-margin: 10px;
282+
$alert-border-radius: $border-radius;
283+
$product-price-color: $body-color !default;
284+
$login-box-bg: $gray-100 !default;
285+
$cart-footer-bg: $gray-100 !default;
286+
$costep-progress-color: $warning !default;
287+
$offcanvas-cart-footer: $success !default;
288+
$art-active-bg-color: #fff !default;
289+
$art-active-border-color: rgba(0,0,0, 0) !default;
287290
$product-detail-addtocart-box-bg: $gray-100 !default;

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/theme.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// and bootstrap variable overrides.
1717
// --------------------------------------------------
1818

19-
@import '_variables-custom.scss';
19+
@import '_variables-custom.scss';
2020
@import '_variables.scss';
2121

2222
//
@@ -78,6 +78,7 @@
7878
@import "../../../Content/shared/_offcanvas.scss";
7979
@import "../../../Content/shared/_sections.scss";
8080
@import "../../../Content/shared/_bg.scss";
81+
@import '../../../Content/shared/_custom-scrollbar.scss';
8182
@import "../../../Content/shared/_box.scss";
8283
@import "../../../Content/shared/_utils.scss";
8384
@import '../../../Content/shared/_switch.scss';

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,8 @@
128128
<!-- Search -->
129129
<Var name="searchbox-bg" type="Color">#fff</Var>
130130
<Var name="searchbox-focus-bg" type="Color">#fff</Var>
131-
<Var name="searchbox-border-color" type="Color">rgba(0,0,0, 0.12)</Var>
132-
<Var name="searchbox-border-active-color" type="Color">rgba(0,0,0, 0.2)</Var>
131+
<Var name="searchbox-border-color" type="Color">rgba(0,0,0, 0.1)</Var>
132+
<Var name="searchbox-border-active-color" type="Color">rgba(0,0,0, 0.1)</Var>
133133
<Var name="search-button-style" type="Select#brand-colors">primary</Var>
134134
<Var name="search-button-flat" type="Boolean">false</Var>
135135
<Var name="searchbox-hit-tag-color" type="Color">darken($warning, 10%)</Var>
@@ -168,7 +168,7 @@
168168
<Var name="costep-progress-color" type="Color">$warning</Var>
169169
<Var name="offcanvas-cart-footer" type="Color">$success</Var>
170170
<Var name="art-active-bg-color" type="Color">#fff</Var>
171-
<Var name="art-active-border-color" type="Color">rgba(0,0,0, 0.2)</Var>
171+
<Var name="art-active-border-color" type="Color">rgba(0,0,0, 0)</Var>
172172
</Vars>
173173

174174
<Selects>

0 commit comments

Comments
 (0)