@esportsplus/ui 0.27.4 → 0.28.0
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.
- package/build/components/grid/scss/index.scss +1 -1
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/components/row/scss/index.scss +1 -1
- package/build/css-utilities/flex/scss/index.scss +1 -1
- package/build/css-utilities/gap/scss/index.scss +2 -0
- package/build/css-utilities/index.d.ts +2 -0
- package/build/css-utilities/index.js +2 -0
- package/build/css-utilities/scroller/scss/index.scss +2 -0
- package/package.json +1 -1
- package/src/components/grid/scss/index.scss +1 -1
- package/src/components/grid/scss/variables.scss +2 -2
- package/src/components/index.ts +0 -1
- package/src/components/row/scss/index.scss +1 -0
- package/src/components/row/scss/variables.scss +4 -0
- package/src/css-utilities/flex/scss/variables.scss +0 -37
- package/src/css-utilities/gap/scss/index.scss +1 -0
- package/src/css-utilities/gap/scss/variables.scss +39 -0
- package/src/css-utilities/index.ts +2 -0
- package/src/css-utilities/scroller/scss/index.scss +8 -0
- package/src/css-utilities/scroller/scss/variables.scss +4 -0
- package/build/components/group/index.d.ts +0 -1
- package/build/components/group/index.js +0 -1
- package/build/components/group/scss/index.scss +0 -2
- package/src/components/group/index.ts +0 -1
- package/src/components/group/scss/index.scss +0 -38
- package/src/components/group/scss/variables.scss +0 -19
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.grid{--
|
|
1
|
+
@layer components {.grid{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--gap-horizontal)var(--gap-vertical);grid-template-columns:repeat(auto-fit,minmax(var(--min-width),var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -13,7 +13,6 @@ export { default as ellipsis } from './ellipsis/index.js';
|
|
|
13
13
|
export { default as form } from './form/index.js';
|
|
14
14
|
export * as frame from './frame/index.js';
|
|
15
15
|
export * as grid from './grid/index.js';
|
|
16
|
-
export * as group from './group/index.js';
|
|
17
16
|
export { default as highlight } from './highlight/index.js';
|
|
18
17
|
export { default as icon } from './icon/index.js';
|
|
19
18
|
export { default as input } from './input/index.js';
|
|
@@ -13,7 +13,6 @@ export { default as ellipsis } from './ellipsis/index.js';
|
|
|
13
13
|
export { default as form } from './form/index.js';
|
|
14
14
|
export * as frame from './frame/index.js';
|
|
15
15
|
export * as grid from './grid/index.js';
|
|
16
|
-
export * as group from './group/index.js';
|
|
17
16
|
export { default as highlight } from './highlight/index.js';
|
|
18
17
|
export { default as icon } from './icon/index.js';
|
|
19
18
|
export { default as input } from './input/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.row{flex-wrap:wrap;justify-content:flex-start;width:100%;display:flex;position:relative}}
|
|
1
|
+
@layer components {.row{gap:var(--gap-vertical)var(--gap-horizontal);flex-wrap:wrap;justify-content:flex-start;width:100%;display:flex;position:relative}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
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-
|
|
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-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*/
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer css-utilities {.--gap-border-width,.--gap-horizontal-border-width,.--gap-border-width-400,.--gap-horizontal-border-width-400,.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-500,.--gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--gap-border-width-600,.--gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--gap-border-width,.--gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--gap-border-width-700,.--gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--gap-spacer-100,.--gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--gap-spacer-200,.--gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--gap-spacer-300,.--gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--gap-spacer,.--gap-horizontal-spacer,.--gap-spacer-400,.--gap-horizontal-spacer-400,.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-500,.--gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--gap-spacer-600,.--gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--gap-spacer,.--gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--gap-spacer-700,.--gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--gap-0px,.--gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--gap-100,.--gap-horizontal-100{--gap-horizontal:var(--size-100)}.--gap-200,.--gap-horizontal-200{--gap-horizontal:var(--size-200)}.--gap-300,.--gap-horizontal-300{--gap-horizontal:var(--size-300)}.--gap-400,.--gap-horizontal-400{--gap-horizontal:var(--size-400)}.--gap-500,.--gap-horizontal-500{--gap-horizontal:var(--size-500)}.--gap-600,.--gap-horizontal-600{--gap-horizontal:var(--size-600)}.--gap-700,.--gap-horizontal-700{--gap-horizontal:var(--size-700)}.--gap-800,.--gap-horizontal-800{--gap-horizontal:var(--size-800)}.--gap-900,.--gap-horizontal-900{--gap-horizontal:var(--size-900)}.--gap-inherit,.--gap-horizontal-inherit{--gap-horizontal:inherit}.--gap-border-width,.--gap-vertical-border-width,.--gap-border-width-400,.--gap-vertical-border-width-400,.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-500,.--gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--gap-border-width-600,.--gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--gap-border-width,.--gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--gap-border-width-700,.--gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--gap-spacer-100,.--gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--gap-spacer-200,.--gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--gap-spacer-300,.--gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--gap-spacer,.--gap-vertical-spacer,.--gap-spacer-400,.--gap-vertical-spacer-400,.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-500,.--gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--gap-spacer-600,.--gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--gap-spacer,.--gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--gap-spacer-700,.--gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--gap-0px,.--gap-vertical-0px{--gap-vertical:var(--size-0px)}.--gap-100,.--gap-vertical-100{--gap-vertical:var(--size-100)}.--gap-200,.--gap-vertical-200{--gap-vertical:var(--size-200)}.--gap-300,.--gap-vertical-300{--gap-vertical:var(--size-300)}.--gap-400,.--gap-vertical-400{--gap-vertical:var(--size-400)}.--gap-500,.--gap-vertical-500{--gap-vertical:var(--size-500)}.--gap-600,.--gap-vertical-600{--gap-vertical:var(--size-600)}.--gap-700,.--gap-vertical-700{--gap-vertical:var(--size-700)}.--gap-800,.--gap-vertical-800{--gap-vertical:var(--size-800)}.--gap-900,.--gap-vertical-900{--gap-vertical:var(--size-900)}.--gap-inherit,.--gap-vertical-inherit{--gap-vertical:inherit}}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -7,12 +7,14 @@ import './disabled/scss/index.scss';
|
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
8
|
import './flicker/scss/index.scss';
|
|
9
9
|
import './focus/scss/index.scss';
|
|
10
|
+
import './gap/scss/index.scss';
|
|
10
11
|
import './glass/scss/index.scss';
|
|
11
12
|
import './hidden/scss/index.scss';
|
|
12
13
|
import './inline/scss/index.scss';
|
|
13
14
|
import './line-height/scss/index.scss';
|
|
14
15
|
import './not-allowed/scss/index.scss';
|
|
15
16
|
import './pointer/scss/index.scss';
|
|
17
|
+
import './scroller/scss/index.scss';
|
|
16
18
|
import './size/scss/index.scss';
|
|
17
19
|
import './squircle/scss/index.scss';
|
|
18
20
|
import './text/scss/index.scss';
|
|
@@ -7,12 +7,14 @@ import './disabled/scss/index.scss';
|
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
8
|
import './flicker/scss/index.scss';
|
|
9
9
|
import './focus/scss/index.scss';
|
|
10
|
+
import './gap/scss/index.scss';
|
|
10
11
|
import './glass/scss/index.scss';
|
|
11
12
|
import './hidden/scss/index.scss';
|
|
12
13
|
import './inline/scss/index.scss';
|
|
13
14
|
import './line-height/scss/index.scss';
|
|
14
15
|
import './not-allowed/scss/index.scss';
|
|
15
16
|
import './pointer/scss/index.scss';
|
|
17
|
+
import './scroller/scss/index.scss';
|
|
16
18
|
import './size/scss/index.scss';
|
|
17
19
|
import './squircle/scss/index.scss';
|
|
18
20
|
import './text/scss/index.scss';
|
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -13,7 +13,6 @@ export { default as ellipsis } from './ellipsis';
|
|
|
13
13
|
export { default as form } from './form';
|
|
14
14
|
export * as frame from './frame';
|
|
15
15
|
export * as grid from './grid';
|
|
16
|
-
export * as group from './group';
|
|
17
16
|
export { default as highlight } from './highlight';
|
|
18
17
|
export { default as icon } from './icon';
|
|
19
18
|
export { default as input } from './input';
|
|
@@ -14,41 +14,4 @@
|
|
|
14
14
|
--gap-horizontal: 0px;
|
|
15
15
|
--gap-vertical: 0px;
|
|
16
16
|
}
|
|
17
|
-
|
|
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
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@each $key in lib.map-keys(tokens.$spacer) {
|
|
33
|
-
&-spacer {
|
|
34
|
-
--gap-#{$direction}: var(--spacer-400);
|
|
35
|
-
|
|
36
|
-
&-#{$key} {
|
|
37
|
-
--gap-#{$direction}: var(--spacer-#{$key});
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@each $key in lib.map-keys(tokens.$size) {
|
|
43
|
-
&-#{$key} {
|
|
44
|
-
--gap-#{$direction}: var(--size-#{$key});
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
&-inherit {
|
|
49
|
-
--gap-#{$direction}: inherit;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
17
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@use 'variables';
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@use '/lib';
|
|
2
|
+
@use '/tokens';
|
|
3
|
+
|
|
4
|
+
.--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);
|
|
11
|
+
|
|
12
|
+
&-#{$key} {
|
|
13
|
+
--gap-#{$direction}: var(--border-width-#{$key});
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@each $key in lib.map-keys(tokens.$spacer) {
|
|
19
|
+
&-spacer {
|
|
20
|
+
--gap-#{$direction}: var(--spacer-400);
|
|
21
|
+
|
|
22
|
+
&-#{$key} {
|
|
23
|
+
--gap-#{$direction}: var(--spacer-#{$key});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@each $key in lib.map-keys(tokens.$size) {
|
|
29
|
+
&-#{$key} {
|
|
30
|
+
--gap-#{$direction}: var(--size-#{$key});
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-inherit {
|
|
35
|
+
--gap-#{$direction}: inherit;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -7,12 +7,14 @@ import './disabled/scss/index.scss';
|
|
|
7
7
|
import './flex/scss/index.scss';
|
|
8
8
|
import './flicker/scss/index.scss';
|
|
9
9
|
import './focus/scss/index.scss';
|
|
10
|
+
import './gap/scss/index.scss';
|
|
10
11
|
import './glass/scss/index.scss';
|
|
11
12
|
import './hidden/scss/index.scss';
|
|
12
13
|
import './inline/scss/index.scss';
|
|
13
14
|
import './line-height/scss/index.scss';
|
|
14
15
|
import './not-allowed/scss/index.scss';
|
|
15
16
|
import './pointer/scss/index.scss';
|
|
17
|
+
import './scroller/scss/index.scss';
|
|
16
18
|
import './size/scss/index.scss';
|
|
17
19
|
import './squircle/scss/index.scss';
|
|
18
20
|
import './text/scss/index.scss';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './scss/index.scss';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './scss/index.scss';
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
@layer components {.group{--margin-horizontal:var(--size-400)}.group-item{--width:auto}.group.--flex-column .group-item{--width:100%}.group--scroller .group-item{--margin-vertical:0px}.group{margin:0 calc(var(--margin-horizontal)/-2);width:calc(100% + var(--margin-horizontal));flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.group-item{margin:var(--margin-vertical)calc(var(--margin-horizontal)/2)0;width:var(--width);display:flex;position:relative}.group-item[class*=--width]{width:calc(var(--width) - var(--margin-horizontal))}}
|
|
2
|
-
/*$vite$:1*/
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import './scss/index.scss';
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
@use 'variables';
|
|
2
|
-
|
|
3
|
-
.group {
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-wrap: wrap;
|
|
6
|
-
justify-content: flex-start;
|
|
7
|
-
margin: 0 calc(var(--margin-horizontal) / -2);
|
|
8
|
-
position: relative;
|
|
9
|
-
width: calc(100% + var(--margin-horizontal));
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
&--offset {
|
|
13
|
-
@each $direction in 'bottom' 'top' {
|
|
14
|
-
&-#{$direction} {
|
|
15
|
-
margin-#{$direction}: calc(var(--margin-vertical) * -1);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&--scroller {
|
|
21
|
-
flex-flow: row;
|
|
22
|
-
margin-bottom: calc(var(--scrollbar-width) * -1);
|
|
23
|
-
overflow-y: hidden;
|
|
24
|
-
padding-bottom: var(--scrollbar-width);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
&-item {
|
|
29
|
-
display: flex;
|
|
30
|
-
margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
|
|
31
|
-
position: relative;
|
|
32
|
-
width: var(--width);
|
|
33
|
-
|
|
34
|
-
&[class*='--width'] {
|
|
35
|
-
width: calc(var(--width) - var(--margin-horizontal));
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|