@esportsplus/ui 0.27.3 → 0.27.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/build/css-utilities/flex/scss/index.scss +1 -1
  2. package/package.json +1 -1
  3. package/src/css-utilities/flex/scss/index.scss +13 -12
  4. package/src/css-utilities/flex/scss/variables.scss +37 -22
package/build/css-utilities/flex/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer css-utilities {.--flex-gap-border-width,.--flex-gap-horizontal-border-width,.--flex-gap-border-width-400,.--flex-gap-horizontal-border-width-400,.--flex-gap-border-width,.--flex-gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--flex-gap-border-width-500,.--flex-gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--flex-gap-border-width-600,.--flex-gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--flex-gap-border-width,.--flex-gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--flex-gap-border-width-700,.--flex-gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--flex-gap-spacer-100,.--flex-gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--flex-gap-spacer-200,.--flex-gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--flex-gap-spacer-300,.--flex-gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--flex-gap-spacer,.--flex-gap-horizontal-spacer,.--flex-gap-spacer-400,.--flex-gap-horizontal-spacer-400,.--flex-gap-spacer,.--flex-gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--flex-gap-spacer-500,.--flex-gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--flex-gap-spacer-600,.--flex-gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--flex-gap-spacer,.--flex-gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--flex-gap-spacer-700,.--flex-gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--flex-gap-0px,.--flex-gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--flex-gap-100,.--flex-gap-horizontal-100{--gap-horizontal:var(--size-100)}.--flex-gap-200,.--flex-gap-horizontal-200{--gap-horizontal:var(--size-200)}.--flex-gap-300,.--flex-gap-horizontal-300{--gap-horizontal:var(--size-300)}.--flex-gap-400,.--flex-gap-horizontal-400{--gap-horizontal:var(--size-400)}.--flex-gap-500,.--flex-gap-horizontal-500{--gap-horizontal:var(--size-500)}.--flex-gap-600,.--flex-gap-horizontal-600{--gap-horizontal:var(--size-600)}.--flex-gap-700,.--flex-gap-horizontal-700{--gap-horizontal:var(--size-700)}.--flex-gap-800,.--flex-gap-horizontal-800{--gap-horizontal:var(--size-800)}.--flex-gap-900,.--flex-gap-horizontal-900{--gap-horizontal:var(--size-900)}.--flex-gap-inherit,.--flex-gap-horizontal-inherit{--gap-horizontal:inherit}.--flex-gap-border-width,.--flex-gap-vertical-border-width,.--flex-gap-border-width-400,.--flex-gap-vertical-border-width-400,.--flex-gap-border-width,.--flex-gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--flex-gap-border-width-500,.--flex-gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--flex-gap-border-width-600,.--flex-gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--flex-gap-border-width,.--flex-gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--flex-gap-border-width-700,.--flex-gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--flex-gap-spacer-100,.--flex-gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--flex-gap-spacer-200,.--flex-gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--flex-gap-spacer-300,.--flex-gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--flex-gap-spacer,.--flex-gap-vertical-spacer,.--flex-gap-spacer-400,.--flex-gap-vertical-spacer-400,.--flex-gap-spacer,.--flex-gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--flex-gap-spacer-500,.--flex-gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--flex-gap-spacer-600,.--flex-gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--flex-gap-spacer,.--flex-gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--flex-gap-spacer-700,.--flex-gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--flex-gap-0px,.--flex-gap-vertical-0px{--gap-vertical:var(--size-0px)}.--flex-gap-100,.--flex-gap-vertical-100{--gap-vertical:var(--size-100)}.--flex-gap-200,.--flex-gap-vertical-200{--gap-vertical:var(--size-200)}.--flex-gap-300,.--flex-gap-vertical-300{--gap-vertical:var(--size-300)}.--flex-gap-400,.--flex-gap-vertical-400{--gap-vertical:var(--size-400)}.--flex-gap-500,.--flex-gap-vertical-500{--gap-vertical:var(--size-500)}.--flex-gap-600,.--flex-gap-vertical-600{--gap-vertical:var(--size-600)}.--flex-gap-700,.--flex-gap-vertical-700{--gap-vertical:var(--size-700)}.--flex-gap-800,.--flex-gap-vertical-800{--gap-vertical:var(--size-800)}.--flex-gap-900,.--flex-gap-vertical-900{--gap-vertical:var(--size-900)}.--flex-gap-inherit,.--flex-gap-vertical-inherit{--gap-vertical:inherit}.--flex-center{flex-flow:wrap;place-content:center;display:flex}.--flex-column{flex-flow:column;display:flex}.--flex-end{flex-flow:wrap;justify-content:flex-end;display:flex}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-gap{gap:var(--gap-vertical)var(--gap-horizontal);display:flex}.--flex-horizontal{flex-flow:wrap;justify-content:center;display:flex}.--flex-horizontal-space-between{flex-flow:wrap;justify-content:space-between;display:flex}.--flex-row{flex-flow:row;display:flex}.--flex-start{flex-flow:wrap;justify-content:flex-start;display:flex}.--flex-vertical{flex-flow:wrap;align-items:center;display:flex}.--flex-vertical-space-between{align-items:space-between;flex-flow:wrap;display:flex}}
1
+ @layer css-utilities {.--flex-center,.--flex-column,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-row,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{--gap-horizontal:0px;--gap-vertical:0px}.--flex-gap-border-width,.--flex-gap-horizontal-border-width,.--flex-gap-border-width-400,.--flex-gap-horizontal-border-width-400,.--flex-gap-border-width,.--flex-gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--flex-gap-border-width-500,.--flex-gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--flex-gap-border-width-600,.--flex-gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--flex-gap-border-width,.--flex-gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--flex-gap-border-width-700,.--flex-gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--flex-gap-spacer-100,.--flex-gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--flex-gap-spacer-200,.--flex-gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--flex-gap-spacer-300,.--flex-gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--flex-gap-spacer,.--flex-gap-horizontal-spacer,.--flex-gap-spacer-400,.--flex-gap-horizontal-spacer-400,.--flex-gap-spacer,.--flex-gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--flex-gap-spacer-500,.--flex-gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--flex-gap-spacer-600,.--flex-gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--flex-gap-spacer,.--flex-gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--flex-gap-spacer-700,.--flex-gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--flex-gap-0px,.--flex-gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--flex-gap-100,.--flex-gap-horizontal-100{--gap-horizontal:var(--size-100)}.--flex-gap-200,.--flex-gap-horizontal-200{--gap-horizontal:var(--size-200)}.--flex-gap-300,.--flex-gap-horizontal-300{--gap-horizontal:var(--size-300)}.--flex-gap-400,.--flex-gap-horizontal-400{--gap-horizontal:var(--size-400)}.--flex-gap-500,.--flex-gap-horizontal-500{--gap-horizontal:var(--size-500)}.--flex-gap-600,.--flex-gap-horizontal-600{--gap-horizontal:var(--size-600)}.--flex-gap-700,.--flex-gap-horizontal-700{--gap-horizontal:var(--size-700)}.--flex-gap-800,.--flex-gap-horizontal-800{--gap-horizontal:var(--size-800)}.--flex-gap-900,.--flex-gap-horizontal-900{--gap-horizontal:var(--size-900)}.--flex-gap-inherit,.--flex-gap-horizontal-inherit{--gap-horizontal:inherit}.--flex-gap-border-width,.--flex-gap-vertical-border-width,.--flex-gap-border-width-400,.--flex-gap-vertical-border-width-400,.--flex-gap-border-width,.--flex-gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--flex-gap-border-width-500,.--flex-gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--flex-gap-border-width-600,.--flex-gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--flex-gap-border-width,.--flex-gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--flex-gap-border-width-700,.--flex-gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--flex-gap-spacer-100,.--flex-gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--flex-gap-spacer-200,.--flex-gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--flex-gap-spacer-300,.--flex-gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--flex-gap-spacer,.--flex-gap-vertical-spacer,.--flex-gap-spacer-400,.--flex-gap-vertical-spacer-400,.--flex-gap-spacer,.--flex-gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--flex-gap-spacer-500,.--flex-gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--flex-gap-spacer-600,.--flex-gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--flex-gap-spacer,.--flex-gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--flex-gap-spacer-700,.--flex-gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--flex-gap-0px,.--flex-gap-vertical-0px{--gap-vertical:var(--size-0px)}.--flex-gap-100,.--flex-gap-vertical-100{--gap-vertical:var(--size-100)}.--flex-gap-200,.--flex-gap-vertical-200{--gap-vertical:var(--size-200)}.--flex-gap-300,.--flex-gap-vertical-300{--gap-vertical:var(--size-300)}.--flex-gap-400,.--flex-gap-vertical-400{--gap-vertical:var(--size-400)}.--flex-gap-500,.--flex-gap-vertical-500{--gap-vertical:var(--size-500)}.--flex-gap-600,.--flex-gap-vertical-600{--gap-vertical:var(--size-600)}.--flex-gap-700,.--flex-gap-vertical-700{--gap-vertical:var(--size-700)}.--flex-gap-800,.--flex-gap-vertical-800{--gap-vertical:var(--size-800)}.--flex-gap-900,.--flex-gap-vertical-900{--gap-vertical:var(--size-900)}.--flex-gap-inherit,.--flex-gap-vertical-inherit{--gap-vertical:inherit}.--flex-center,.--flex-end,.--flex-horizontal,.--flex-horizontal-space-between,.--flex-start,.--flex-vertical,.--flex-vertical-space-between{gap:var(--gap-vertical)var(--gap-horizontal);display:flex}.--flex-center{flex-flow:wrap;place-content:center}.--flex-column{gap:var(--gap-vertical)0px;flex-flow:column;display:flex}.--flex-end{flex-flow:wrap;justify-content:flex-end}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-horizontal{flex-flow:wrap;justify-content:center}.--flex-horizontal-space-between{flex-flow:wrap;justify-content:space-between}.--flex-row{gap:0px var(--gap-horizontal);flex-flow:row;display:flex}.--flex-start{flex-flow:wrap;justify-content:flex-start}.--flex-vertical{flex-flow:wrap;align-items:center}.--flex-vertical-space-between{align-items:space-between;flex-flow:wrap}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.27.3",
51
+ "version": "0.27.4",
52
52
  "scripts": {
53
53
  "build": "run-s build:vite build:ts",
54
54
  "build:ts": "tsc && tsc-alias",
package/src/css-utilities/flex/scss/index.scss CHANGED
@@ -1,9 +1,19 @@
1
1
  @use 'variables';
2
2
 
3
3
  .--flex {
4
+ &-center,
5
+ &-end,
6
+ &-horizontal,
7
+ &-horizontal-space-between,
8
+ &-start,
9
+ &-vertical,
10
+ &-vertical-space-between {
11
+ display: flex;
12
+ gap: var(--gap-vertical) var(--gap-horizontal);
13
+ }
14
+
4
15
  &-center {
5
16
  align-content: center;
6
- display: flex;
7
17
  flex-flow: row wrap;
8
18
  justify-content: center;
9
19
  }
@@ -11,10 +21,10 @@
11
21
  &-column {
12
22
  display: flex;
13
23
  flex-flow: column;
24
+ gap: var(--gap-vertical) 0px;
14
25
  }
15
26
 
16
27
  &-end {
17
- display: flex;
18
28
  flex-flow: row wrap;
19
29
  justify-content: flex-end;
20
30
  }
@@ -30,18 +40,11 @@
30
40
  flex: 0 0 var(--width);
31
41
  }
32
42
 
33
- &-gap {
34
- display: flex;
35
- gap: var(--gap-vertical) var(--gap-horizontal);
36
- }
37
-
38
43
  &-horizontal {
39
- display: flex;
40
44
  flex-flow: row wrap;
41
45
  justify-content: center;
42
46
 
43
47
  &-space-between {
44
- display: flex;
45
48
  flex-flow: row wrap;
46
49
  justify-content: space-between;
47
50
  }
@@ -50,22 +53,20 @@
50
53
  &-row {
51
54
  display: flex;
52
55
  flex-flow: row;
56
+ gap: 0px var(--gap-horizontal);
53
57
  }
54
58
 
55
59
  &-start {
56
- display: flex;
57
60
  flex-flow: row wrap;
58
61
  justify-content: flex-start;
59
62
  }
60
63
 
61
64
  &-vertical {
62
65
  align-items: center;
63
- display: flex;
64
66
  flex-flow: row wrap;
65
67
 
66
68
  &-space-between {
67
69
  align-items: space-between;
68
- display: flex;
69
70
  flex-flow: row wrap;
70
71
  }
71
72
  }
package/src/css-utilities/flex/scss/variables.scss CHANGED
@@ -1,38 +1,53 @@
1
1
  @use '/lib';
2
2
  @use '/tokens';
3
3
 
4
- .--flex-gap {
5
- @each $direction in 'horizontal' 'vertical' {
6
- &,
7
- &-#{$direction} {
8
- @each $key in lib.map-keys(tokens.$border-width) {
9
- &-border-width {
10
- --gap-#{$direction}: var(--border-width-400);
4
+ .--flex {
5
+ &-center,
6
+ &-column,
7
+ &-end,
8
+ &-horizontal,
9
+ &-horizontal-space-between,
10
+ &-row,
11
+ &-start,
12
+ &-vertical,
13
+ &-vertical-space-between {
14
+ --gap-horizontal: 0px;
15
+ --gap-vertical: 0px;
16
+ }
11
17
 
12
- &-#{$key} {
13
- --gap-#{$direction}: var(--border-width-#{$key});
18
+ &-gap {
19
+ @each $direction in 'horizontal' 'vertical' {
20
+ &,
21
+ &-#{$direction} {
22
+ @each $key in lib.map-keys(tokens.$border-width) {
23
+ &-border-width {
24
+ --gap-#{$direction}: var(--border-width-400);
25
+
26
+ &-#{$key} {
27
+ --gap-#{$direction}: var(--border-width-#{$key});
28
+ }
14
29
  }
15
30
  }
16
- }
17
31
 
18
- @each $key in lib.map-keys(tokens.$spacer) {
19
- &-spacer {
20
- --gap-#{$direction}: var(--spacer-400);
32
+ @each $key in lib.map-keys(tokens.$spacer) {
33
+ &-spacer {
34
+ --gap-#{$direction}: var(--spacer-400);
21
35
 
22
- &-#{$key} {
23
- --gap-#{$direction}: var(--spacer-#{$key});
36
+ &-#{$key} {
37
+ --gap-#{$direction}: var(--spacer-#{$key});
38
+ }
24
39
  }
25
40
  }
26
- }
27
41
 
28
- @each $key in lib.map-keys(tokens.$size) {
29
- &-#{$key} {
30
- --gap-#{$direction}: var(--size-#{$key});
42
+ @each $key in lib.map-keys(tokens.$size) {
43
+ &-#{$key} {
44
+ --gap-#{$direction}: var(--size-#{$key});
45
+ }
31
46
  }
32
- }
33
47
 
34
- &-inherit {
35
- --gap-#{$direction}: inherit;
48
+ &-inherit {
49
+ --gap-#{$direction}: inherit;
50
+ }
36
51
  }
37
52
  }
38
53
  }