Skip to content
This repository was archived by the owner on Jul 25, 2023. It is now read-only.

Commit 8610d6d

Browse files
vis97cvis97c
committed
feat: extend base viewports
BREAKING CHANGE: desktopFirst avilable be default on --hidden only
1 parent 403e454 commit 8610d6d

33 files changed

+173
-318
lines changed

‎src/base/_initialize.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
font-weight: utils.weight(bold);
105105
@supports (-moz-appearance: none) {
106106
// firefox fix
107-
font-weight: utils.weight(bold-alt);
107+
font-weight: utils.weight(boldAlt);
108108
}
109109
}
110110
}
@@ -121,7 +121,7 @@
121121
// firefox fix, font weight bug
122122
-webkit-font-smoothing: antialiased;
123123
-moz-osx-font-smoothing: grayscale;
124-
font-weight: utils.weight(regular-alt);
124+
font-weight: utils.weight(regularAlt);
125125
}
126126

127127
// Dinamically switch UI size

‎src/components/_hr.scss‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
@use "../utils/module" as utils;
22
@use "sass:meta";
33

4-
@function hrXThemeSelector($name) {
5-
@return ".#{utils.$prefix__default}--tm-#{$name}";
6-
}
7-
@function hrYThemeSelector($name) {
4+
@function hrThemeSelector($name) {
85
@return ".#{utils.$prefix__default}--tm-#{$name}";
96
}
107

@@ -15,7 +12,7 @@
1512
hr {
1613
box-sizing: border-box;
1714
&.#{utils.$prefix__default}--hrX {
18-
@include utils.extend-viewports-classes(true, utils.$viewports) {
15+
@include utils.extend-viewports-classes {
1916
// max-height: 2px;
2017
height: 2px;
2118
width: 100%;
@@ -28,19 +25,16 @@
2825
// Tema del delimitador
2926
//
3027
// @group Modifiers
31-
@include utils.extend-map-modifiers(
32-
utils.$extendedThemeColors,
33-
meta.get-function("hrXThemeSelector"),
34-
secondary,
35-
':not([class*="--tm-"])'
28+
@include utils.extend-color-modifiers(
29+
meta.get-function("hrThemeSelector")
3630
)
3731
using($name, $value, $isDefault) {
3832
background-image: url("#{utils.$ruleSvgPathX}#{str-replace(#{$value}, '#')}#{utils.$ruleSvgPathEnd}");
3933
}
4034
}
4135
}
4236
&.#{utils.$prefix__default}--hrY {
43-
@include utils.extend-viewports-classes(true, utils.$viewports) {
37+
@include utils.extend-viewports-classes {
4438
// max-width: 2px;
4539
width: 2px;
4640
height: 100%;
@@ -53,11 +47,8 @@
5347
// Tema del delimitador
5448
//
5549
// @group Modifiers
56-
@include utils.extend-map-modifiers(
57-
utils.$extendedThemeColors,
58-
meta.get-function("hrYThemeSelector"),
59-
secondary,
60-
':not([class*="--tm-"])'
50+
@include utils.extend-color-modifiers(
51+
meta.get-function("hrThemeSelector")
6152
)
6253
using($name, $value, $isDefault) {
6354
background-image: url("#{utils.$ruleSvgPathY}#{str-replace(#{$value}, '#')}#{utils.$ruleSvgPathEnd}");
@@ -66,7 +57,7 @@
6657
}
6758
&.#{utils.$prefix__default}--hrX,
6859
&.#{utils.$prefix__default}--hrY {
69-
@include utils.extend-viewports-classes(true, utils.$viewports) {
60+
@include utils.extend-viewports-classes {
7061
opacity: 0.2;
7162
background-repeat: round;
7263
background-position: 50% 50%;

‎src/components/action/_box.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,8 @@
5050
// Comment theme
5151
//
5252
// @group Modifiers
53-
@include module.extend-map-modifiers(
54-
module.$extendedThemeColors,
55-
meta.get-function("boxThemeSelector"),
56-
secondary,
57-
':not([class*="--tm-"])'
53+
@include module.extend-color-modifiers(
54+
meta.get-function("boxThemeSelector")
5855
)
5956
using($name, $value, $isDefault) {
6057
&:not([class*="--bgColor"]) {

‎src/components/action/_button.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@
2424
//
2525
// @group Modifiers
2626
&.#{module.$prefix__default}--round {
27-
@include module.extend-viewports-classes(
28-
true,
29-
module.$viewports
30-
) {
27+
@include module.extend-viewports-classes {
3128
:not(:only-child) {
3229
&:not(:last-child),
3330
&:not(:nth-child(2)) {

‎src/components/action/_buttonLink.scss‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,8 @@
109109
// nav link themes
110110
//
111111
// @group Modifiers
112-
@include module.extend-map-modifiers(
113-
module.$extendedThemeColors,
114-
meta.get-function("buttonLinkThemeSelector"),
115-
secondary,
116-
':not([class*="--tm-"])'
112+
@include module.extend-color-modifiers(
113+
meta.get-function("buttonLinkThemeSelector")
117114
)
118115
using($name, $value, $isDefault) {
119116
--rw: #{module.color($name)};
@@ -133,9 +130,9 @@
133130
}
134131

135132
// Alternative themes
136-
@include module.extend-map-modifiers(
137-
module.$extendedThemeColors,
138-
meta.get-function("buttonLinkThemeSelectorLight")
133+
@include module.extend-color-modifiers(
134+
meta.get-function("buttonLinkThemeSelectorLight"),
135+
$default: false
139136
)
140137
using($name, $value, $isDefault) {
141138
--rw: #{module.color(light)};

‎src/components/action/_buttonToggle.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,8 @@
6666
// second value is the textColor
6767
//
6868
// @group Modifiers
69-
@include module.extend-map-modifiers(
70-
module.$extendedThemeColors,
71-
meta.get-function("buttonToggleThemeSelector"),
72-
secondary,
73-
':not([class*="--tm-"])'
69+
@include module.extend-color-modifiers(
70+
meta.get-function("buttonToggleThemeSelector")
7471
)
7572
using($name, $value, $isDefault) {
7673
--cl: #{module.color($name)};

‎src/components/action/_inputSelect.scss‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,8 @@ $selectPathEnd: "'/%3E%3C/svg%3E";
3535
// Theme
3636
//
3737
// @group Unions
38-
@include module.extend-map-modifiers(
39-
module.$extendedThemeColors,
40-
meta.get-function("iSelectThemeSelector"),
41-
secondary,
42-
':not([class*="--tm-"])'
38+
@include module.extend-color-modifiers(
39+
meta.get-function("iSelectThemeSelector")
4340
)
4441
using($name, $value, $isDefault) {
4542
//chevron-light down
@@ -72,9 +69,10 @@ $selectPathEnd: "'/%3E%3C/svg%3E";
7269
}
7370

7471
// Alternative colors
75-
@include module.extend-map-modifiers(
72+
@include module.extend-color-modifiers(
73+
meta.get-function("iSelectThemeLightSelector"),
7674
module.$themeColors,
77-
meta.get-function("iSelectThemeLightSelector")
75+
false
7876
)
7977
using($name, $value, $isDefault) {
8078
//chevron-light down

‎src/components/action/_inputText.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,9 @@
5858
// theme
5959
//
6060
// @group Modifiers
61-
@include module.extend-map-modifiers(
62-
module.$themeColors,
61+
@include module.extend-color-modifiers(
6362
meta.get-function("iTxtThemeSelector"),
64-
secondary,
65-
':not([class*="--tm-"])'
63+
module.$themeColors
6664
)
6765
using($name, $value, $isDefault) {
6866
--bg: #{module.color($name, 0.1)};

‎src/components/action/_link.scss‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,9 @@
5555
// link theme
5656
//
5757
// @group Modifiers
58-
@include module.extend-map-modifiers(
59-
module.$themeColors,
58+
@include module.extend-color-modifiers(
6059
meta.get-function("linkThemeSelector"),
61-
secondary,
62-
':not([class*="--tm-"])'
60+
module.$themeColors
6361
)
6462
using($name, $value, $isDefault) {
6563
--cl: #{module.color($name)};
@@ -80,7 +78,7 @@
8078

8179
// link round handling
8280
&.#{module.$prefix__default}--round {
83-
@include module.extend-viewports-classes(true, module.$viewports) {
81+
@include module.extend-viewports-classes {
8482
i.#{module.$component__icon},
8583
.#{module.$component__svg} {
8684
&:last-child {

‎src/components/action/_module.scss‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
// Size
3434
padding: 0 0.8rem;
3535
&.#{module.$prefix__default}--round {
36-
@include module.extend-viewports-classes(true, module.$viewports) {
36+
@include module.extend-viewports-classes {
3737
padding: 0; // button padding
3838
width: 2.4rem;
3939
}
@@ -44,7 +44,7 @@
4444
//
4545
// @group Modifiers
4646
&.#{module.$prefix__default}--round {
47-
@include module.extend-viewports-classes(true, module.$viewports) {
47+
@include module.extend-viewports-classes {
4848
i.#{module.$component__icon},
4949
.#{module.$component__svg} {
5050
+ span {
@@ -81,7 +81,7 @@
8181
margin-left: 0.4em;
8282
}
8383
&.#{module.$prefix__default}--round {
84-
@include module.extend-viewports-classes(true, module.$viewports) {
84+
@include module.extend-viewports-classes {
8585
> * + * {
8686
margin-left: 0;
8787
}
@@ -118,11 +118,9 @@
118118
// second value is the textColor
119119
//
120120
// @group Unions
121-
@include module.extend-map-modifiers(
122-
module.$themeColors,
121+
@include module.extend-color-modifiers(
123122
meta.get-function("bttnAndISelectThemeSelector"),
124-
secondary,
125-
':not([class*="--tm-"])'
123+
module.$themeColors
126124
)
127125
using($name, $value, $isDefault) {
128126
--cl: #{module.color(light)};
@@ -176,8 +174,7 @@
176174
}
177175

178176
// Alternative colors
179-
@include module.extend-map-modifiers(
180-
module.$extendedThemeColors,
177+
@include module.extend-color-modifiers(
181178
meta.get-function("bttnAndISelectThemeLightSelector")
182179
)
183180
using($name, $value, $isDefault) {
@@ -415,11 +412,8 @@
415412
// Radio theme
416413
//
417414
// @group Modifiers
418-
@include module.extend-map-modifiers(
419-
module.$extendedThemeColors,
420-
meta.get-function("iToggleThemeSelector"),
421-
secondary,
422-
':not([class*="--tm-"])'
415+
@include module.extend-color-modifiers(
416+
meta.get-function("iToggleThemeSelector")
423417
)
424418
using($name, $value, $isDefault) {
425419
+ label {

0 commit comments

Comments
 (0)