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

Commit 9683aad

Browse files
vis97cvis97c
committed
feat: dynamic px sizes
multiple fixes where perform
1 parent 8610d6d commit 9683aad

File tree

14 files changed

+535
-279
lines changed

14 files changed

+535
-279
lines changed

‎.prettierignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
CHANGELOG.md
1+
CHANGELOG.md
2+
dist/index.css
3+
dist/index.min.css

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@
6969
"semantic-release": "^17.1.1",
7070
"sort-css-media-queries": "vis97c/sort-css-media-queries",
7171
"stylelint": "^13.6.1",
72-
"stylelint-config-prettier": "^8.0.2",
73-
"stylelint-prettier": "^1.1.2"
72+
"stylelint-config-prettier": "^9.0.5",
73+
"stylelint-prettier": "^3.0.0"
7474
},
7575
"engines": {
7676
"node": ">=16.19.0",
@@ -124,4 +124,4 @@
124124
"copyFilesSettings": {
125125
"whenFileExists": "overwrite"
126126
}
127-
}
127+
}

‎src/components/action/_box.scss‎

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@function boxThemeSelector($name) {
55
@return ".#{module.$prefix__default}--tm-#{$name}";
66
}
7-
@function boxSquareSelector($name) {
7+
@function boxSquareSizeSelector($name) {
88
@return ".#{module.$prefix__default}--square-#{$name}";
99
}
1010

@@ -33,27 +33,51 @@
3333
}
3434
}
3535

36+
// borderStyle
37+
//
38+
// @group Modifiers
39+
&.#{module.$prefix__default}--bdr-dashed {
40+
border-style: dashed;
41+
}
42+
3643
// size
3744
//
3845
// @group Modifiers
46+
&.#{module.$prefix__default}--size-xs {
47+
border-radius: 0.7rem;
48+
}
49+
&.#{module.$prefix__default}--size-sm {
50+
border-radius: 0.85rem;
51+
}
3952
&,
40-
&.#{module.$prefix__default}--size {
53+
&.#{module.$prefix__default}--size,
54+
&.#{module.$prefix__default}--size-md {
4155
border-radius: 1rem;
4256
}
4357
&.#{module.$prefix__default}--size-lg {
44-
border-radius: 1.667rem;
58+
border-radius: 1.3rem;
4559
}
46-
&.#{module.$prefix__default}--size-md {
47-
border-radius: 1.333rem;
60+
&.#{module.$prefix__default}--size-xl {
61+
border-radius: 1.6rem;
62+
}
63+
&.#{module.$prefix__default}--size-xx {
64+
border-radius: 2.2rem;
65+
}
66+
&.#{module.$prefix__default}--size-mx {
67+
border-radius: 3rem;
4868
}
4969

50-
// Comment theme
70+
// Box theme
5171
//
5272
// @group Modifiers
5373
@include module.extend-color-modifiers(
5474
meta.get-function("boxThemeSelector")
5575
)
5676
using($name, $value, $isDefault) {
77+
&.#{module.$prefix__default}--bdr-solid,
78+
&.#{module.$prefix__default}--bdr-dashed {
79+
border-color: module.color($name, 0.1);
80+
}
5781
&:not([class*="--bgColor"]) {
5882
background: module.color($name, 0.1);
5983
}
@@ -74,13 +98,25 @@
7498
// border-color: module.color($name, 0.3);
7599
}
76100
}
77-
&.#{module.$prefix__default}--button &,
78-
&.#{module.$prefix__default}--#{module.$component__button} & {
79-
box-shadow: 3px 3px 9px module.color($name, 0.3);
101+
&.#{module.$prefix__default}--button,
102+
&.#{module.$prefix__default}--#{module.$component__button} {
103+
.#{module.$component__box} {
104+
&:not(.#{module.$prefix__default}--bdr-solid):not(.#{module.$prefix__default}--bdr-dashed) {
105+
box-shadow: 3px 3px 9px module.color($name, 0.3);
106+
}
107+
}
80108
}
81109
}
82110

111+
// Box theme
112+
// alternate color
113+
//
114+
// @group Modifiers
83115
&.#{module.$prefix__default}--tm-lightComplement {
116+
&.#{module.$prefix__default}--bdr-solid,
117+
&.#{module.$prefix__default}--bdr-dashed {
118+
border-color: module.color(dark, 0.1);
119+
}
84120
&:not([class*="--bgColor"]) {
85121
background: module.color(light);
86122
}
@@ -101,9 +137,13 @@
101137
// border-color: module.color(light, 0.3);
102138
}
103139
}
104-
&.#{module.$prefix__default}--button &,
105-
&.#{module.$prefix__default}--#{module.$component__button} & {
106-
box-shadow: 3px 3px 9px module.color(light, 0.3);
140+
&.#{module.$prefix__default}--button,
141+
&.#{module.$prefix__default}--#{module.$component__button} {
142+
.#{module.$component__box} {
143+
&:not(.#{module.$prefix__default}--bdr-solid):not(.#{module.$prefix__default}--bdr-dashed) {
144+
box-shadow: 3px 3px 9px module.color(light, 0.3);
145+
}
146+
}
107147
}
108148
}
109149

@@ -116,23 +156,23 @@
116156
p {
117157
text-align: center;
118158
}
119-
}
120-
&.#{module.$prefix__default}--button &,
121-
&.#{module.$prefix__default}--#{module.$component__button} & {
122-
border-color: transparent !important;
159+
.#{module.$component__box} {
160+
&:not(.#{module.$prefix__default}--bdr-solid):not(.#{module.$prefix__default}--bdr-dashed) {
161+
border-color: transparent !important;
162+
}
163+
}
123164
}
124165

125166
& & {
126-
border-radius: 1rem;
127-
128167
// Square shape
129168
// this assummes there is only one child
130169
//
131170
// @group Modifiers
132171
@include module.extend-map-modifiers(
133172
module.$elementSizes,
134-
meta.get-function("boxSquareSelector"),
135-
md
173+
meta.get-function("boxSquareSizeSelector"),
174+
md,
175+
".--square"
136176
)
137177
using($name, $value, $isDefault) {
138178
width: $value;

‎src/components/action/_link.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,20 @@
6767
--cl-h: #{module.color(light, 0.5)};
6868
}
6969
}
70-
.#{module.$prefix__default}--tm-light {
70+
71+
// link theme
72+
// alternative themes
73+
//
74+
// @group Modifiers
75+
&.#{module.$prefix__default}--tm-light {
7176
--cl: #{module.color(light)};
7277
--cl-a: #{module.color(primary)};
78+
--cl-h: #{module.color(light, 0.5)};
7379
}
74-
.#{module.$prefix__default}--tm-lightComplement {
80+
&.#{module.$prefix__default}--tm-lightComplement {
7581
--cl: #{module.color(light)};
7682
--cl-a: #{module.color(primaryComplement)};
83+
--cl-h: #{module.color(light, 0.5)};
7784
}
7885

7986
// link round handling

‎src/components/action/_module.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
}
161161
}
162162
}
163-
// default theme
163+
// default theme overrides
164164
&:not([class*="--tm-"]),
165165
&.#{module.$prefix__default}--tm-secondary-light {
166166
&:not(.#{module.$status__isInvalid}) {
@@ -175,7 +175,8 @@
175175

176176
// Alternative colors
177177
@include module.extend-color-modifiers(
178-
meta.get-function("bttnAndISelectThemeLightSelector")
178+
meta.get-function("bttnAndISelectThemeLightSelector"),
179+
$default: null
179180
)
180181
using($name, $value, $isDefault) {
181182
--cl: #{$value};
@@ -215,6 +216,7 @@
215216
}
216217
}
217218
}
219+
// theme overrides
218220
&.#{module.$prefix__default}--tm-light-primary {
219221
--bg: #{module.color(light)};
220222
&:not(.#{module.$status__isActive}) {

‎src/components/avatar/_module.scss‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -56,27 +56,31 @@
5656
object-position: 50% 50%;
5757
}
5858

59-
// avatar is a link
60-
@at-root a#{&} {
61-
&:hover,
62-
&.#{module.$status__isActive},
63-
&.#{module.$status__isRouteExact}:not(.#{module.$status__noRoute}):not(.#{module.$status__noRouteExact}) {
64-
// box-shadow: 1px 1px 3px module.color(dark, 0.2);
65-
img {
66-
opacity: 0.7;
59+
// action avatar
60+
@at-root {
61+
a#{&},
62+
button#{&},
63+
label#{&} {
64+
&:hover,
65+
&.#{module.$status__isActive},
66+
&.#{module.$status__isRouteExact}:not(.#{module.$status__noRoute}):not(.#{module.$status__noRouteExact}) {
67+
// box-shadow: 1px 1px 3px module.color(dark, 0.2);
68+
img {
69+
opacity: 0.7;
70+
}
6771
}
68-
}
69-
// avatar border
70-
//
71-
// @group Modifiers
72-
&.#{module.$prefix__default}--bdr,
73-
&.#{module.$prefix__default}--border {
74-
&:not(:hover),
75-
&:not(.#{module.$status__isActive}),
76-
&:not(.#{module.$status__isRouteExact}),
77-
&.#{module.$status__isRouteExact}.#{module.$status__noRoute},
78-
&.#{module.$status__isRouteExact}.#{module.$status__noRouteExact} {
79-
border-color: transparent;
72+
// avatar border
73+
//
74+
// @group Modifiers
75+
&.#{module.$prefix__default}--bdr,
76+
&.#{module.$prefix__default}--border {
77+
&:not(:hover),
78+
&:not(.#{module.$status__isActive}),
79+
&:not(.#{module.$status__isRouteExact}),
80+
&.#{module.$status__isRouteExact}.#{module.$status__noRoute},
81+
&.#{module.$status__isRouteExact}.#{module.$status__noRouteExact} {
82+
border-color: transparent;
83+
}
8084
}
8185
}
8286
}

‎src/layouts/_holder.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@use "../utils/module" as utils;
23

34
// limita el ancho de los elementos en el contenidos
@@ -35,7 +36,8 @@
3536
width: 100%;
3637
}
3738
&:not([class*="--maxWidth-"]) {
38-
max-width: 75rem;
39+
// 1200 = 75rem
40+
max-width: math.div(utils.$size__defaultPx, 16) * 1rem;
3941
}
4042
}
4143
}

‎src/modifiers/size/_gap.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,19 +58,19 @@
5858
$value: math.div($i, 3) * 1rem;
5959

6060
// grid Gap, future flex gap
61-
.#{module.$prefix__default}--gap-#{$i*5} {
61+
&-#{$i*5} {
6262
// flex, column & grid only
6363
@include module.extend-viewports-classes {
6464
gap: $value;
6565
}
6666
}
67-
.#{module.$prefix__default}--gapX-#{$i*5} {
67+
&X-#{$i*5} {
6868
// flex, column & grid only, X axis
6969
@include module.extend-viewports-classes {
7070
column-gap: $value;
7171
}
7272
}
73-
.#{module.$prefix__default}--gapY-#{$i*5} {
73+
&Y-#{$i*5} {
7474
// flex, column & grid only, Y axis
7575
@include module.extend-viewports-classes {
7676
row-gap: $value;

‎src/modifiers/size/_height.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
@use "module";
23

34
@mixin height-size {
@@ -17,9 +18,10 @@
1718

1819
// default
1920
&,
20-
&-1200 {
21+
&-#{module.$size__defaultPx} {
2122
@include module.extend-viewports-classes {
22-
min-height: 75rem;
23+
// 1200 = 75rem
24+
min-height: math.div(module.$size__defaultPx, 16) * 1rem;
2325
}
2426
}
2527
}
@@ -29,9 +31,10 @@
2931

3032
// default
3133
&,
32-
&-1200 {
34+
&-#{module.$size__defaultPx} {
3335
@include module.extend-viewports-classes {
34-
max-height: 75rem;
36+
// 1200 = 75rem
37+
max-height: math.div(module.$size__defaultPx, 16) * 1rem;
3538
}
3639
}
3740
}

‎src/modifiers/size/_module.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@
8181
}
8282
}
8383

84-
// pixel based
85-
$sizes: 1400, 1300, 1080, 980, 880, 780, 580, 480, 440, 220, 180;
86-
@each $size in $sizes {
84+
@each $size in module.$size__allPx {
8785
&-#{$size} {
8886
@include module.extend-viewports-classes {
8987
#{$property}: round(math.div($size, 15)) * 1rem;

0 commit comments

Comments
 (0)