@esportsplus/ui 0.0.1 → 0.0.2

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 (88) hide show
  1. package/.gitattributes +2 -2
  2. package/components/accordion/scss/accordion.scss +16 -16
  3. package/components/accordion/scss/variables.scss +4 -4
  4. package/components/anchor/scss/anchor.scss +41 -41
  5. package/components/anchor/scss/anchors.scss +9 -9
  6. package/components/anchor/scss/variables.scss +5 -5
  7. package/components/banner/scss/banner.scss +13 -13
  8. package/components/border/scss/border.scss +10 -10
  9. package/components/border/scss/variables.scss +6 -6
  10. package/components/bubble/scss/bubble.scss +30 -30
  11. package/components/bubble/scss/variables.scss +19 -19
  12. package/components/button/scss/button.scss +93 -93
  13. package/components/button/scss/variables.scss +70 -70
  14. package/components/card/scss/card.scss +36 -36
  15. package/components/card/scss/variables.scss +42 -42
  16. package/components/container/scss/container.scss +10 -10
  17. package/components/container/scss/variables.scss +5 -5
  18. package/components/field/scss/_check.scss +225 -225
  19. package/components/field/scss/_normalize.scss +36 -36
  20. package/components/field/scss/_text.scss +103 -103
  21. package/components/field/scss/field.scss +137 -132
  22. package/components/field/scss/variables.scss +138 -133
  23. package/components/group/scss/group.scss +41 -41
  24. package/components/group/scss/variables.scss +25 -25
  25. package/components/icon/scss/icon.scss +18 -18
  26. package/components/icon/scss/variables.scss +8 -8
  27. package/components/link/scss/link.scss +29 -29
  28. package/components/link/scss/variables.scss +48 -48
  29. package/components/loading/scss/loading.scss +24 -24
  30. package/components/loading/scss/variables.scss +31 -31
  31. package/components/page/scss/page.scss +22 -22
  32. package/components/page/scss/variables.scss +19 -19
  33. package/components/root/scss/root.scss +93 -93
  34. package/components/root/scss/variables.scss +54 -54
  35. package/components/row/scss/row.scss +8 -8
  36. package/components/scrollbar/scss/scrollbar.scss +51 -51
  37. package/components/scrollbar/scss/variables.scss +8 -8
  38. package/components/sidebar/scss/sidebar.scss +50 -50
  39. package/components/sidebar/scss/sidebars.scss +13 -13
  40. package/components/sidebar/scss/variables.scss +25 -25
  41. package/components/text/scss/text.scss +12 -12
  42. package/components/text/scss/variables.scss +9 -9
  43. package/components/thumbnail/scss/thumbnail.scss +7 -7
  44. package/components/thumbnail/scss/variables.scss +7 -7
  45. package/components/tooltip/scss/_center.scss +13 -13
  46. package/components/tooltip/scss/_east.scss +34 -34
  47. package/components/tooltip/scss/_north.scss +34 -34
  48. package/components/tooltip/scss/_south.scss +35 -35
  49. package/components/tooltip/scss/_west.scss +34 -34
  50. package/components/tooltip/scss/tooltip.scss +107 -107
  51. package/components/tooltip/scss/variables.scss +25 -25
  52. package/css-utilities/[margin,padding]/scss/styles.scss +41 -41
  53. package/css-utilities/[margin,padding]/scss/variables.scss +52 -52
  54. package/css-utilities/[max,min]/scss/variables.scss +23 -23
  55. package/css-utilities/absolute/scss/absolute.scss +59 -59
  56. package/css-utilities/background/scss/variables.scss +28 -28
  57. package/css-utilities/border/scss/border.scss +21 -21
  58. package/css-utilities/border/scss/variables.scss +66 -66
  59. package/css-utilities/color/scss/variables.scss +32 -32
  60. package/css-utilities/flex/scss/flex.scss +67 -67
  61. package/css-utilities/hidden/scss/hidden.scss +28 -28
  62. package/css-utilities/index.scss +14 -14
  63. package/css-utilities/pointer/scss/pointer.scss +5 -5
  64. package/css-utilities/size/scss/variables.scss +12 -12
  65. package/css-utilities/slide/scss/slide.scss +20 -20
  66. package/css-utilities/slide/scss/variables.scss +6 -6
  67. package/css-utilities/text/scss/text.scss +93 -93
  68. package/css-utilities/text/scss/variables.scss +31 -31
  69. package/css-utilities/width/scss/variables.scss +12 -12
  70. package/lib/index.scss +7 -7
  71. package/lib/scss/color.scss +8 -8
  72. package/lib/scss/list.scss +112 -112
  73. package/lib/scss/string.scss +54 -54
  74. package/package.json +22 -22
  75. package/storage/fonts/Montserrat/montserrat.css +79 -79
  76. package/tokens/index.scss +11 -11
  77. package/tokens/scss/border-radius.scss +12 -12
  78. package/tokens/scss/border-width.scss +6 -6
  79. package/tokens/scss/box-shadow.scss +13 -13
  80. package/tokens/scss/breakpoints.scss +13 -13
  81. package/tokens/scss/color.scss +71 -71
  82. package/tokens/scss/font-size.scss +12 -12
  83. package/tokens/scss/font-weight.scss +6 -6
  84. package/tokens/scss/line-height.scss +6 -6
  85. package/tokens/scss/size.scss +13 -13
  86. package/tokens/scss/state.scss +93 -93
  87. package/tokens/scss/transition-duration.scss +5 -5
  88. package/webpack.sass.config.js +59 -59
@@ -1,93 +1,93 @@
1
- @use 'ui/lib';
2
- @use 'ui/tokens';
3
-
4
- .--text {
5
- &-bold {
6
- font-weight: var(--font-weight-500);
7
-
8
- @each $key in lib.map-keys(tokens.$font-weight) {
9
- @if $key > 500 {
10
- &-#{$key} {
11
- font-weight: var(--font-weight-#{$key});
12
- }
13
- }
14
- }
15
- }
16
-
17
- &-center {
18
- text-align: center;
19
- }
20
-
21
- &-crop {
22
- &::after,
23
- &::before,
24
- &-bottom::after,
25
- &-top::before {
26
- content: '';
27
- display: block;
28
- height: 0;
29
- width: 100%;
30
- }
31
-
32
- &::after,
33
- &-bottom::after {
34
- margin-bottom: calc((1 - var(--line-height)) * 0.618em);
35
- }
36
-
37
- &::before,
38
- &-top::before {
39
- margin-top: calc((1 - var(--line-height)) * 0.618em);
40
- }
41
- }
42
-
43
- &-italic {
44
- font-style: italic;
45
- }
46
-
47
- &-linethrough {
48
- text-decoration: line-through;
49
- }
50
-
51
- &-multiplier {
52
- font-size: calc(var(--font-size) * var(--text-multiplier));
53
- }
54
-
55
- &-outline {
56
- color: var(--color);
57
- word-break: break-word;
58
- word-wrap: break-word;
59
-
60
- @supports (-webkit-text-stroke-width: 1px) {
61
- color: transparent;
62
- -webkit-text-fill-color: transparent;
63
- -webkit-text-stroke-color: var(--color);
64
- -webkit-text-stroke-width: var(--stroke-width);
65
- }
66
- }
67
-
68
- &-strike-through {
69
- text-decoration: line-through;
70
- text-decoration-thickness: var(--line-width);
71
- }
72
-
73
- &-truncate {
74
- line-height: var(--size);
75
- max-width: 100%;
76
- overflow: hidden;
77
- text-overflow: ellipsis;
78
- white-space: nowrap;
79
- }
80
-
81
- &-underline {
82
- text-decoration: underline;
83
-
84
- &-dotted {
85
- text-decoration: underline;
86
- text-decoration-style: dotted;
87
- }
88
- }
89
-
90
- &-uppercase {
91
- text-transform: uppercase;
92
- }
93
- }
1
+ @use 'ui/lib';
2
+ @use 'ui/tokens';
3
+
4
+ .--text {
5
+ &-bold {
6
+ font-weight: var(--font-weight-500);
7
+
8
+ @each $key in lib.map-keys(tokens.$font-weight) {
9
+ @if $key > 500 {
10
+ &-#{$key} {
11
+ font-weight: var(--font-weight-#{$key});
12
+ }
13
+ }
14
+ }
15
+ }
16
+
17
+ &-center {
18
+ text-align: center;
19
+ }
20
+
21
+ &-crop {
22
+ &::after,
23
+ &::before,
24
+ &-bottom::after,
25
+ &-top::before {
26
+ content: '';
27
+ display: block;
28
+ height: 0;
29
+ width: 100%;
30
+ }
31
+
32
+ &::after,
33
+ &-bottom::after {
34
+ margin-bottom: calc((1 - var(--line-height)) * 0.618em);
35
+ }
36
+
37
+ &::before,
38
+ &-top::before {
39
+ margin-top: calc((1 - var(--line-height)) * 0.618em);
40
+ }
41
+ }
42
+
43
+ &-italic {
44
+ font-style: italic;
45
+ }
46
+
47
+ &-linethrough {
48
+ text-decoration: line-through;
49
+ }
50
+
51
+ &-multiplier {
52
+ font-size: calc(var(--font-size) * var(--text-multiplier));
53
+ }
54
+
55
+ &-outline {
56
+ color: var(--color);
57
+ word-break: break-word;
58
+ word-wrap: break-word;
59
+
60
+ @supports (-webkit-text-stroke-width: 1px) {
61
+ color: transparent;
62
+ -webkit-text-fill-color: transparent;
63
+ -webkit-text-stroke-color: var(--color);
64
+ -webkit-text-stroke-width: var(--stroke-width);
65
+ }
66
+ }
67
+
68
+ &-strike-through {
69
+ text-decoration: line-through;
70
+ text-decoration-thickness: var(--line-width);
71
+ }
72
+
73
+ &-truncate {
74
+ line-height: var(--size);
75
+ max-width: 100%;
76
+ overflow: hidden;
77
+ text-overflow: ellipsis;
78
+ white-space: nowrap;
79
+ }
80
+
81
+ &-underline {
82
+ text-decoration: underline;
83
+
84
+ &-dotted {
85
+ text-decoration: underline;
86
+ text-decoration-style: dotted;
87
+ }
88
+ }
89
+
90
+ &-uppercase {
91
+ text-transform: uppercase;
92
+ }
93
+ }
@@ -1,31 +1,31 @@
1
- @use 'ui/lib';
2
- @use 'ui/tokens';
3
-
4
- .--text {
5
- @each $key in lib.map-keys(tokens.$font-size) {
6
- &-#{$key} {
7
- --font-size: var(--font-size-#{$key});
8
- }
9
- }
10
-
11
- &-outline {
12
- --color: inherit;
13
- --stroke-width: var(--border-width-400);
14
-
15
- @each $key in lib.map-keys(tokens.$border-width) {
16
- &-#{$key} {
17
- --stroke-width: var(--border-width-#{$key});
18
- }
19
- }
20
- }
21
-
22
- &-strike-through {
23
- --line-width: var(--border-width-400);
24
-
25
- @each $key in lib.map-keys(tokens.$border-width) {
26
- &-#{$key} {
27
- --line-width: var(--border-width-#{$key});
28
- }
29
- }
30
- }
31
- }
1
+ @use 'ui/lib';
2
+ @use 'ui/tokens';
3
+
4
+ .--text {
5
+ @each $key in lib.map-keys(tokens.$font-size) {
6
+ &-#{$key} {
7
+ --font-size: var(--font-size-#{$key});
8
+ }
9
+ }
10
+
11
+ &-outline {
12
+ --color: inherit;
13
+ --stroke-width: var(--border-width-400);
14
+
15
+ @each $key in lib.map-keys(tokens.$border-width) {
16
+ &-#{$key} {
17
+ --stroke-width: var(--border-width-#{$key});
18
+ }
19
+ }
20
+ }
21
+
22
+ &-strike-through {
23
+ --line-width: var(--border-width-400);
24
+
25
+ @each $key in lib.map-keys(tokens.$border-width) {
26
+ &-#{$key} {
27
+ --line-width: var(--border-width-#{$key});
28
+ }
29
+ }
30
+ }
31
+ }
@@ -1,12 +1,12 @@
1
- @use 'ui/lib';
2
- @use 'ui/tokens';
3
-
4
- .--width {
5
- &-full {
6
- --width: 100%;
7
- }
8
-
9
- &-half {
10
- --width: 50%;
11
- }
12
- }
1
+ @use 'ui/lib';
2
+ @use 'ui/tokens';
3
+
4
+ .--width {
5
+ &-full {
6
+ --width: 100%;
7
+ }
8
+
9
+ &-half {
10
+ --width: 50%;
11
+ }
12
+ }
package/lib/index.scss CHANGED
@@ -1,7 +1,7 @@
1
- @forward 'scss/breakpoint';
2
- @forward 'scss/color' as color-*;
3
- @forward 'scss/css-variables';
4
- @forward 'scss/list' as list-*;
5
- @forward 'scss/map' as map-*;
6
- @forward 'scss/position';
7
- @forward 'scss/string' as string-*;
1
+ @forward 'scss/breakpoint';
2
+ @forward 'scss/color' as color-*;
3
+ @forward 'scss/css-variables';
4
+ @forward 'scss/list' as list-*;
5
+ @forward 'scss/map' as map-*;
6
+ @forward 'scss/position';
7
+ @forward 'scss/string' as string-*;
@@ -1,8 +1,8 @@
1
- /**
2
- *------------------------------------------------------------------------------
3
- *
4
- * Wrap Native FN
5
- *
6
- */
7
-
8
- @forward 'sass:color';
1
+ /**
2
+ *------------------------------------------------------------------------------
3
+ *
4
+ * Wrap Native FN
5
+ *
6
+ */
7
+
8
+ @forward 'sass:color';
@@ -1,112 +1,112 @@
1
- @use 'sass:list';
2
- @use 'sass:string';
3
-
4
- /**
5
- *------------------------------------------------------------------------------
6
- *
7
- * Wrap Native FN
8
- *
9
- */
10
-
11
- @forward 'sass:list';
12
-
13
- /**
14
- *------------------------------------------------------------------------------
15
- *
16
- * Simplify Searching For Value(s) Within List
17
- *
18
- */
19
-
20
- @function contains($needles, $haystack) {
21
- $haystack: to-list($haystack);
22
- $needles: to-list($needles);
23
-
24
- @each $needle in $needles {
25
- @if list.index($haystack, $needle) {
26
- @return true;
27
- }
28
- }
29
-
30
- @return false;
31
- }
32
-
33
- /**
34
- *------------------------------------------------------------------------------
35
- *
36
- * Join List Elements With A String
37
- *
38
- */
39
-
40
- @function implode($glue, $list) {
41
- $list: unique($list);
42
- $output: null;
43
-
44
- @if type-of($list) != list {
45
- @error "#{$list} Is Not A Valid List";
46
- }
47
-
48
- @for $i from 1 through list.length($list) {
49
- $m: nth($list, $i);
50
-
51
- // If $k Is A List Flatten By Running Through Function Again
52
- @if type-of($m) == list {
53
- $output: string.unquote("#{$output}#{$glue}#{implode($glue, $m)}");
54
- }
55
- // Piece Together String
56
- @else {
57
- $output: string.unquote("#{$output}#{$glue}#{$m}");
58
- }
59
- }
60
-
61
- @if $output != null {
62
- $output: string.slice($output, string.length($glue) + 1, -1);
63
- }
64
-
65
- @return $output;
66
- }
67
-
68
- /**
69
- *------------------------------------------------------------------------------
70
- *
71
- * Convert Input To List
72
- *
73
- */
74
-
75
- @function to-list($input) {
76
- $output: $input;
77
-
78
- @if type-of($input) != list {
79
- $output: ($input,);
80
- }
81
-
82
- @return $output;
83
- }
84
-
85
-
86
- /**
87
- *------------------------------------------------------------------------------
88
- *
89
- * Remove Duplicate Values From List
90
- *
91
- */
92
-
93
- @function unique($list, $recursive: false) {
94
- $result: ();
95
-
96
- @if type-of($list) != list {
97
- @error "#{$list} Is Not A Valid List";
98
- }
99
-
100
- @each $item in $list {
101
- @if not list.index($result, $item) and $item != '' {
102
- @if list.length($item) > 1 and $recursive {
103
- $result: list.append($result, unique($item, $recursive));
104
- }
105
- @else {
106
- $result: list.append($result, $item);
107
- }
108
- }
109
- }
110
-
111
- @return $result;
112
- }
1
+ @use 'sass:list';
2
+ @use 'sass:string';
3
+
4
+ /**
5
+ *------------------------------------------------------------------------------
6
+ *
7
+ * Wrap Native FN
8
+ *
9
+ */
10
+
11
+ @forward 'sass:list';
12
+
13
+ /**
14
+ *------------------------------------------------------------------------------
15
+ *
16
+ * Simplify Searching For Value(s) Within List
17
+ *
18
+ */
19
+
20
+ @function contains($needles, $haystack) {
21
+ $haystack: to-list($haystack);
22
+ $needles: to-list($needles);
23
+
24
+ @each $needle in $needles {
25
+ @if list.index($haystack, $needle) {
26
+ @return true;
27
+ }
28
+ }
29
+
30
+ @return false;
31
+ }
32
+
33
+ /**
34
+ *------------------------------------------------------------------------------
35
+ *
36
+ * Join List Elements With A String
37
+ *
38
+ */
39
+
40
+ @function implode($glue, $list) {
41
+ $list: unique($list);
42
+ $output: null;
43
+
44
+ @if type-of($list) != list {
45
+ @error "#{$list} Is Not A Valid List";
46
+ }
47
+
48
+ @for $i from 1 through list.length($list) {
49
+ $m: nth($list, $i);
50
+
51
+ // If $k Is A List Flatten By Running Through Function Again
52
+ @if type-of($m) == list {
53
+ $output: string.unquote("#{$output}#{$glue}#{implode($glue, $m)}");
54
+ }
55
+ // Piece Together String
56
+ @else {
57
+ $output: string.unquote("#{$output}#{$glue}#{$m}");
58
+ }
59
+ }
60
+
61
+ @if $output != null {
62
+ $output: string.slice($output, string.length($glue) + 1, -1);
63
+ }
64
+
65
+ @return $output;
66
+ }
67
+
68
+ /**
69
+ *------------------------------------------------------------------------------
70
+ *
71
+ * Convert Input To List
72
+ *
73
+ */
74
+
75
+ @function to-list($input) {
76
+ $output: $input;
77
+
78
+ @if type-of($input) != list {
79
+ $output: ($input,);
80
+ }
81
+
82
+ @return $output;
83
+ }
84
+
85
+
86
+ /**
87
+ *------------------------------------------------------------------------------
88
+ *
89
+ * Remove Duplicate Values From List
90
+ *
91
+ */
92
+
93
+ @function unique($list, $recursive: false) {
94
+ $result: ();
95
+
96
+ @if type-of($list) != list {
97
+ @error "#{$list} Is Not A Valid List";
98
+ }
99
+
100
+ @each $item in $list {
101
+ @if not list.index($result, $item) and $item != '' {
102
+ @if list.length($item) > 1 and $recursive {
103
+ $result: list.append($result, unique($item, $recursive));
104
+ }
105
+ @else {
106
+ $result: list.append($result, $item);
107
+ }
108
+ }
109
+ }
110
+
111
+ @return $result;
112
+ }
@@ -1,54 +1,54 @@
1
- @use 'list';
2
- @use 'sass:string';
3
-
4
- /**
5
- *------------------------------------------------------------------------------
6
- *
7
- * Wrap Native FN
8
- *
9
- */
10
-
11
- @forward 'sass:string';
12
-
13
- /**
14
- *------------------------------------------------------------------------------
15
- *
16
- * Simplify Searching For Value(s) Within String
17
- *
18
- */
19
-
20
- @function contains($needles, $haystack) {
21
- $haystack: string.quote($haystack);
22
- $needles: list.to-list($needles);
23
-
24
- @each $needle in $needles {
25
- $needle: string.quote($needle);
26
-
27
- @if string.index($haystack, $needle) != null {
28
- @return true;
29
- }
30
- }
31
-
32
- @return false;
33
- }
34
-
35
- /**
36
- *------------------------------------------------------------------------------
37
- *
38
- * Find And Replace A Value In String
39
- *
40
- */
41
-
42
- @function replace($find, $replace, $haystack) {
43
- @if type-of($haystack) != string {
44
- @error "#{$haystack} Is Not A Valid String";
45
- }
46
-
47
- $index: string.index($haystack, string.quote($find));
48
-
49
- @if $index {
50
- $haystack: string.slice($haystack, 1, $index - 1) + $replace + replace($find, $replace, string.slice($haystack, $index + string.length($find)));
51
- }
52
-
53
- @return $haystack;
54
- }
1
+ @use 'list';
2
+ @use 'sass:string';
3
+
4
+ /**
5
+ *------------------------------------------------------------------------------
6
+ *
7
+ * Wrap Native FN
8
+ *
9
+ */
10
+
11
+ @forward 'sass:string';
12
+
13
+ /**
14
+ *------------------------------------------------------------------------------
15
+ *
16
+ * Simplify Searching For Value(s) Within String
17
+ *
18
+ */
19
+
20
+ @function contains($needles, $haystack) {
21
+ $haystack: string.quote($haystack);
22
+ $needles: list.to-list($needles);
23
+
24
+ @each $needle in $needles {
25
+ $needle: string.quote($needle);
26
+
27
+ @if string.index($haystack, $needle) != null {
28
+ @return true;
29
+ }
30
+ }
31
+
32
+ @return false;
33
+ }
34
+
35
+ /**
36
+ *------------------------------------------------------------------------------
37
+ *
38
+ * Find And Replace A Value In String
39
+ *
40
+ */
41
+
42
+ @function replace($find, $replace, $haystack) {
43
+ @if type-of($haystack) != string {
44
+ @error "#{$haystack} Is Not A Valid String";
45
+ }
46
+
47
+ $index: string.index($haystack, string.quote($find));
48
+
49
+ @if $index {
50
+ $haystack: string.slice($haystack, 1, $index - 1) + $replace + replace($find, $replace, string.slice($haystack, $index + string.length($find)));
51
+ }
52
+
53
+ @return $haystack;
54
+ }
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
- {
2
- "author": "ICJR",
3
- "devDependencies": {
4
- "autoprefixer": "^10.4.8",
5
- "css-loader": "^6.7.1",
6
- "cssnano": "^5.1.13",
7
- "glob": "^8.0.3",
8
- "modern-normalize": "^1.1.0",
9
- "path-browserify": "^1.0.1",
10
- "postcss-loader": "^7.0.1",
11
- "run-for-every-file": "^1.1.0",
12
- "sass": "^1.54.9",
13
- "sass-loader": "^13.0.2",
14
- "style-loader": "^3.3.1",
15
- "webpack": "^5.74.0",
16
- "webpack-cli": "^4.10.0"
17
- },
18
- "description": "UI",
19
- "name": "@esportsplus/ui",
20
- "private": false,
21
- "version": "0.0.1"
22
- }
1
+ {
2
+ "author": "ICJR",
3
+ "dependencies": {
4
+ "autoprefixer": "^10.4.8",
5
+ "css-loader": "^6.7.1",
6
+ "cssnano": "^5.1.13",
7
+ "glob": "^8.0.3",
8
+ "modern-normalize": "^1.1.0",
9
+ "path-browserify": "^1.0.1",
10
+ "postcss-loader": "^7.0.1",
11
+ "run-for-every-file": "^1.1.0",
12
+ "sass": "^1.54.9",
13
+ "sass-loader": "^13.0.2",
14
+ "style-loader": "^3.3.1",
15
+ "webpack": "^5.74.0",
16
+ "webpack-cli": "^4.10.0"
17
+ },
18
+ "description": "UI",
19
+ "name": "@esportsplus/ui",
20
+ "private": false,
21
+ "version": "0.0.2"
22
+ }