armtek-uikit-react 1.0.242 → 1.0.243

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 (57) hide show
  1. package/assets/Accordion.scss +113 -113
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +104 -104
  5. package/assets/AvatarGroup.scss +47 -47
  6. package/assets/BackDrop.scss +27 -27
  7. package/assets/Badge.scss +96 -96
  8. package/assets/Button.scss +750 -750
  9. package/assets/ButtonGroup.scss +37 -37
  10. package/assets/ButtonIcon.scss +32 -32
  11. package/assets/Card.scss +13 -13
  12. package/assets/Checkbox.scss +313 -313
  13. package/assets/Chip.scss +279 -279
  14. package/assets/DateField.scss +2 -2
  15. package/assets/DatePicker.scss +72 -72
  16. package/assets/Dropdown.scss +42 -42
  17. package/assets/FormControls.scss +14 -14
  18. package/assets/HelperText.scss +11 -11
  19. package/assets/Icon.scss +30 -30
  20. package/assets/Interval.scss +34 -34
  21. package/assets/Link.scss +96 -96
  22. package/assets/ListItem.scss +72 -72
  23. package/assets/Loader.scss +56 -56
  24. package/assets/Logo.scss +28 -28
  25. package/assets/Modal.scss +97 -97
  26. package/assets/Pagination.scss +3 -3
  27. package/assets/Paper.scss +19 -19
  28. package/assets/Period.scss +8 -8
  29. package/assets/Popper.scss +2 -2
  30. package/assets/Rating.scss +26 -26
  31. package/assets/Select.scss +85 -85
  32. package/assets/Skeleton.scss +25 -25
  33. package/assets/Slider.scss +5 -5
  34. package/assets/Stack.scss +27 -27
  35. package/assets/Status.scss +50 -50
  36. package/assets/StepItem.scss +89 -89
  37. package/assets/StepItemIcon.scss +47 -47
  38. package/assets/Stepper.scss +30 -30
  39. package/assets/Switch.scss +67 -67
  40. package/assets/Table.scss +37 -37
  41. package/assets/TextArea.scss +17 -17
  42. package/assets/TextField.scss +197 -197
  43. package/assets/Tooltip.scss +17 -17
  44. package/assets/classes.scss +422 -422
  45. package/assets/fonts.scss +24 -24
  46. package/assets/global.scss +221 -221
  47. package/assets/styles.scss +46 -46
  48. package/assets/variables.scss +13 -13
  49. package/lib/hooks/useEnhancedEffect.js +6 -6
  50. package/lib/hooks/useTimeout.js +2 -2
  51. package/package.json +1 -1
  52. package/ui/Form/DatePicker/styles.css +802 -802
  53. package/ui/Form/FormControls/FormControls.js +1 -1
  54. package/ui/Form/FormControls/const.d.ts +1 -0
  55. package/ui/Form/FormControls/const.js +3 -2
  56. package/ui/Modal/Modal.js +1 -0
  57. package/ui/Slider/style.scss +346 -346
@@ -1,73 +1,73 @@
1
- @use "variables" as v;
2
-
3
- .arm-listitem{
4
- outline: none;
5
- padding: calc(var(--size-step) * 1.5) calc(var(--size-step) * 2);
6
- color: var(--color-neutral);
7
- background: #fff;
8
- @include v.transition(0.3s, background);
9
- @include v.flex();
10
- width: 100%;
11
- border: none;
12
- text-align: left;
13
- cursor: pointer;
14
- text-decoration: none;
15
- font-size: 16px;
16
- line-height: 1.1;
17
- font-family: inherit;
18
- min-height: 48px;
19
- &:hover{
20
- background: var(--color-gray-50);
21
- }
22
- &.arm-listitem_active,
23
- &:active{
24
- background: rgba(var(--color-primary-rgba), 0.1);
25
- }
26
- }
27
-
28
- .arm-listitem_disabled{
29
- pointer-events: none;
30
- background: #fff;
31
- color: var(--color-gray-400);
32
- user-select: none;
33
- cursor: default;
34
- }
35
- .arm-listitem__content{
36
- display: block;
37
- margin-right: calc(var(--size-step) * 2);
38
- }
39
- .arm-listitem__content_adornment_left{
40
- margin-left: calc(var(--size-step) * 2);
41
- }
42
- .arm-listitem_endAdornment{
43
-
44
- }
45
- .arm-listitem_divider{
46
- border-bottom: 1px solid var(--color-gray-200);
47
- }
48
- .arm-listitem__text{
49
- display: block;
50
- }
51
- .arm-listitem__helper{
52
- margin-top: calc(var(--size-step) / 2);
53
- display: block;
54
- color: var(--color-neutral-light);
55
- }
56
- .arm-theme-dark {
57
-
58
- .arm-listitem{
59
- background-color: var(--color-gray-700);
60
- color: var(--color-gray-200);
61
- &:hover{
62
- background-color: rgba(var(--color-white-rgba), 0.1);
63
- }
64
- &.arm-listitem_active,
65
- &:active{
66
- background-color: rgba(var(--color-white-rgba), 0.2);
67
- }
68
- &.arm-listitem_disabled{
69
- color: var(--color-gray-600);
70
- background-color: var(--color-gray-700);
71
- }
72
- }
1
+ @use "variables" as v;
2
+
3
+ .arm-listitem{
4
+ outline: none;
5
+ padding: calc(var(--size-step) * 1.5) calc(var(--size-step) * 2);
6
+ color: var(--color-neutral);
7
+ background: #fff;
8
+ @include v.transition(0.3s, background);
9
+ @include v.flex();
10
+ width: 100%;
11
+ border: none;
12
+ text-align: left;
13
+ cursor: pointer;
14
+ text-decoration: none;
15
+ font-size: 16px;
16
+ line-height: 1.1;
17
+ font-family: inherit;
18
+ min-height: 48px;
19
+ &:hover{
20
+ background: var(--color-gray-50);
21
+ }
22
+ &.arm-listitem_active,
23
+ &:active{
24
+ background: rgba(var(--color-primary-rgba), 0.1);
25
+ }
26
+ }
27
+
28
+ .arm-listitem_disabled{
29
+ pointer-events: none;
30
+ background: #fff;
31
+ color: var(--color-gray-400);
32
+ user-select: none;
33
+ cursor: default;
34
+ }
35
+ .arm-listitem__content{
36
+ display: block;
37
+ margin-right: calc(var(--size-step) * 2);
38
+ }
39
+ .arm-listitem__content_adornment_left{
40
+ margin-left: calc(var(--size-step) * 2);
41
+ }
42
+ .arm-listitem_endAdornment{
43
+
44
+ }
45
+ .arm-listitem_divider{
46
+ border-bottom: 1px solid var(--color-gray-200);
47
+ }
48
+ .arm-listitem__text{
49
+ display: block;
50
+ }
51
+ .arm-listitem__helper{
52
+ margin-top: calc(var(--size-step) / 2);
53
+ display: block;
54
+ color: var(--color-neutral-light);
55
+ }
56
+ .arm-theme-dark {
57
+
58
+ .arm-listitem{
59
+ background-color: var(--color-gray-700);
60
+ color: var(--color-gray-200);
61
+ &:hover{
62
+ background-color: rgba(var(--color-white-rgba), 0.1);
63
+ }
64
+ &.arm-listitem_active,
65
+ &:active{
66
+ background-color: rgba(var(--color-white-rgba), 0.2);
67
+ }
68
+ &.arm-listitem_disabled{
69
+ color: var(--color-gray-600);
70
+ background-color: var(--color-gray-700);
71
+ }
72
+ }
73
73
  }
@@ -1,57 +1,57 @@
1
- @use "variables";
2
-
3
- @mixin bg ($color:var(--color-gray-800), $size: 2px) {
4
- background:
5
- radial-gradient(farthest-side, $color 94%,#0000) top/$size $size no-repeat,
6
- conic-gradient(#0000 30%, $color);
7
- -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - $size),#000 0);
8
- }
9
-
10
- .arm-loader{
11
- width: 20px;
12
- height: 20px;
13
- aspect-ratio: 1;
14
- border-radius: 50%;
15
- @include bg();
16
- animation: s3 1s infinite linear;
17
- }
18
- .arm-loader_color_primary{
19
- @include bg(var(--color-primary));
20
- }
21
- .arm-loader_color_secondary{
22
- @include bg(var(--color-secondary));
23
- }
24
-
25
- .arm-theme-dark{
26
- .arm-loader{
27
- background:
28
- radial-gradient(farthest-side, #ffffff 94%,#ffff) top/2px 2px no-repeat,
29
- conic-gradient(#0000 30%, #ffffff);
30
- -webkit-mask: radial-gradient(farthest-side,#ffff calc(100% - 2px),#000 0);
31
- }
32
- .arm-loader_color_neutral{
33
- @include bg(#fff);
34
- }
35
- }
36
-
37
- .arm-loader_size_small{
38
- width: 20px;
39
- height: 20px;
40
- }
41
- .arm-loader_size_medium{
42
- width: 23px;
43
- height: 23px;
44
- }
45
- .arm-loader_size_large{
46
- width: 25px;
47
- height: 25px;
48
- }
49
- .arm-loader_size_extraLarge{
50
- width: 30px;
51
- height: 30px;
52
- background-position: top/6px 6px !important;
53
- -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0) !important;;
54
- }
55
- @keyframes s3{
56
- 100%{transform: rotate(1turn)}
1
+ @use "variables";
2
+
3
+ @mixin bg ($color:var(--color-gray-800), $size: 2px) {
4
+ background:
5
+ radial-gradient(farthest-side, $color 94%,#0000) top/$size $size no-repeat,
6
+ conic-gradient(#0000 30%, $color);
7
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - $size),#000 0);
8
+ }
9
+
10
+ .arm-loader{
11
+ width: 20px;
12
+ height: 20px;
13
+ aspect-ratio: 1;
14
+ border-radius: 50%;
15
+ @include bg();
16
+ animation: s3 1s infinite linear;
17
+ }
18
+ .arm-loader_color_primary{
19
+ @include bg(var(--color-primary));
20
+ }
21
+ .arm-loader_color_secondary{
22
+ @include bg(var(--color-secondary));
23
+ }
24
+
25
+ .arm-theme-dark{
26
+ .arm-loader{
27
+ background:
28
+ radial-gradient(farthest-side, #ffffff 94%,#ffff) top/2px 2px no-repeat,
29
+ conic-gradient(#0000 30%, #ffffff);
30
+ -webkit-mask: radial-gradient(farthest-side,#ffff calc(100% - 2px),#000 0);
31
+ }
32
+ .arm-loader_color_neutral{
33
+ @include bg(#fff);
34
+ }
35
+ }
36
+
37
+ .arm-loader_size_small{
38
+ width: 20px;
39
+ height: 20px;
40
+ }
41
+ .arm-loader_size_medium{
42
+ width: 23px;
43
+ height: 23px;
44
+ }
45
+ .arm-loader_size_large{
46
+ width: 25px;
47
+ height: 25px;
48
+ }
49
+ .arm-loader_size_extraLarge{
50
+ width: 30px;
51
+ height: 30px;
52
+ background-position: top/6px 6px !important;
53
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0) !important;;
54
+ }
55
+ @keyframes s3{
56
+ 100%{transform: rotate(1turn)}
57
57
  }
package/assets/Logo.scss CHANGED
@@ -1,29 +1,29 @@
1
- @use "variables";
2
-
3
- .arm-logo{
4
- display: inline-block;
5
- }
6
- .arm-logo_shape{
7
- box-shadow: var(--box-shadow);
8
- padding: calc(var(--size-step) * 2);
9
- transform: skewX(-10deg);
10
- & .arm-logo__inner{
11
- transform: skewX(10deg);
12
- }
13
- }
14
- .arm-logo__inner{
15
-
16
- }
17
-
18
- .arm-logo__img{
19
- font-size: 0;
20
- }
21
- .arm-logo__description{
22
- color: var(--color-gray-900);
23
- font-size: 14px;
24
- font-style: italic;
25
- margin-top: 2px;
26
- }
27
- .arm-logo_inverse .arm-logo__description{
28
- color: #fff;
1
+ @use "variables";
2
+
3
+ .arm-logo{
4
+ display: inline-block;
5
+ }
6
+ .arm-logo_shape{
7
+ box-shadow: var(--box-shadow);
8
+ padding: calc(var(--size-step) * 2);
9
+ transform: skewX(-10deg);
10
+ & .arm-logo__inner{
11
+ transform: skewX(10deg);
12
+ }
13
+ }
14
+ .arm-logo__inner{
15
+
16
+ }
17
+
18
+ .arm-logo__img{
19
+ font-size: 0;
20
+ }
21
+ .arm-logo__description{
22
+ color: var(--color-gray-900);
23
+ font-size: 14px;
24
+ font-style: italic;
25
+ margin-top: 2px;
26
+ }
27
+ .arm-logo_inverse .arm-logo__description{
28
+ color: #fff;
29
29
  }
package/assets/Modal.scss CHANGED
@@ -1,98 +1,98 @@
1
- @use "variables";
2
-
3
- .arm-modal{
4
- border-radius: var(--border-radius);
5
- width: 100%;
6
- background-color: #fff;
7
- display: flex;
8
- max-height: calc(100vh - 120px);
9
- position: relative;
10
- }
11
- .arm-modal__inner{
12
- display: flex;
13
- flex-direction: column;
14
- width: 100%;
15
- }
16
- .arm-modal__controls{
17
- justify-content: flex-end;
18
- }
19
- .arm-modal__header{
20
- background: var(--color-gray-200);
21
- min-height: 78px;
22
- display: flex;
23
- align-items: center;
24
- padding: var(--size-step) calc(var(--size-step) * 4);
25
- border-top-left-radius:var(--border-radius);
26
- border-top-right-radius:var(--border-radius);
27
- position: relative;
28
- }
29
- .arm-modal__title{
30
- font-size: 20px;
31
- color: var(--color-gray-900);
32
- }
33
- .arm-modal__body{
34
- padding: calc(var(--size-step) * 4);
35
- overflow-y: auto;
36
- }
37
- .arm-modal__footer{
38
- margin-top: calc(var(--size-step) * 4);
39
- padding: 0 calc(var(--size-step) * 4) calc(var(--size-step) * 4) calc(var(--size-step) * 4)
40
- }
41
- .arm-modal__close{
42
- position: absolute;
43
- right: calc(var(--size-step) * 4);
44
- top: 50%;
45
- transform: translateY(-50%);
46
- }
47
- .arm-modal__backdrop{
48
- background: rgba(0, 0, 0, 0.25);
49
- }
50
-
51
- .arm-theme-dark {
52
- .arm-modal{
53
- background-color: var(--color-gray-900);
54
- color: var(--color-white);
55
- border : 1px solid var(--color-gray-700);
56
- }
57
- .arm-modal__header{
58
- background-color: var(--color-gray-900);
59
- border-bottom: 1px solid var(--color-gray-700);
60
- }
61
- .arm-modal__title {
62
- color: var(--color-white)
63
- }
64
- }
65
-
66
-
67
- .arm-modal {
68
-
69
- &__ContentWrapper {
70
- &_hidden{
71
- display: none;
72
- }
73
- &Enter {
74
- opacity: 0;
75
- overflow: hidden;
76
- }
77
-
78
- &EnterActive {
79
- opacity: 1;
80
- transition: 0.3s opacity ease;
81
- }
82
- &Exit {
83
- opacity: 1;
84
- }
85
-
86
- &ExitActive {
87
- opacity: 0;
88
- transition: 0.3s opacity ease;
89
- }
90
-
91
- }
92
-
93
- &__Content {
94
- transition: all 0.3s;
95
- }
96
-
97
-
1
+ @use "variables";
2
+
3
+ .arm-modal{
4
+ border-radius: var(--border-radius);
5
+ width: 100%;
6
+ background-color: #fff;
7
+ display: flex;
8
+ max-height: calc(100vh - 120px);
9
+ position: relative;
10
+ }
11
+ .arm-modal__inner{
12
+ display: flex;
13
+ flex-direction: column;
14
+ width: 100%;
15
+ }
16
+ .arm-modal__controls{
17
+ justify-content: flex-end;
18
+ }
19
+ .arm-modal__header{
20
+ background: var(--color-gray-200);
21
+ min-height: 78px;
22
+ display: flex;
23
+ align-items: center;
24
+ padding: var(--size-step) calc(var(--size-step) * 4);
25
+ border-top-left-radius:var(--border-radius);
26
+ border-top-right-radius:var(--border-radius);
27
+ position: relative;
28
+ }
29
+ .arm-modal__title{
30
+ font-size: 20px;
31
+ color: var(--color-gray-900);
32
+ }
33
+ .arm-modal__body{
34
+ padding: calc(var(--size-step) * 4);
35
+ overflow-y: auto;
36
+ }
37
+ .arm-modal__footer{
38
+ margin-top: calc(var(--size-step) * 4);
39
+ padding: 0 calc(var(--size-step) * 4) calc(var(--size-step) * 4) calc(var(--size-step) * 4)
40
+ }
41
+ .arm-modal__close{
42
+ position: absolute;
43
+ right: calc(var(--size-step) * 4);
44
+ top: 50%;
45
+ transform: translateY(-50%);
46
+ }
47
+ .arm-modal__backdrop{
48
+ background: rgba(0, 0, 0, 0.25);
49
+ }
50
+
51
+ .arm-theme-dark {
52
+ .arm-modal{
53
+ background-color: var(--color-gray-900);
54
+ color: var(--color-white);
55
+ border : 1px solid var(--color-gray-700);
56
+ }
57
+ .arm-modal__header{
58
+ background-color: var(--color-gray-900);
59
+ border-bottom: 1px solid var(--color-gray-700);
60
+ }
61
+ .arm-modal__title {
62
+ color: var(--color-white)
63
+ }
64
+ }
65
+
66
+
67
+ .arm-modal {
68
+
69
+ &__ContentWrapper {
70
+ &_hidden{
71
+ display: none;
72
+ }
73
+ &Enter {
74
+ opacity: 0;
75
+ overflow: hidden;
76
+ }
77
+
78
+ &EnterActive {
79
+ opacity: 1;
80
+ transition: 0.3s opacity ease;
81
+ }
82
+ &Exit {
83
+ opacity: 1;
84
+ }
85
+
86
+ &ExitActive {
87
+ opacity: 0;
88
+ transition: 0.3s opacity ease;
89
+ }
90
+
91
+ }
92
+
93
+ &__Content {
94
+ transition: all 0.3s;
95
+ }
96
+
97
+
98
98
  }
@@ -1,3 +1,3 @@
1
- .arm-pagination__item{
2
- font-size: 13px;
3
- }
1
+ .arm-pagination__item{
2
+ font-size: 13px;
3
+ }
package/assets/Paper.scss CHANGED
@@ -1,20 +1,20 @@
1
- @use "variables";
2
-
3
- .arm-paper{
4
- border-radius: var(--border-radius);
5
- background-color: #fff;
6
- padding: calc(var(--size-step) * 2);
7
- }
8
- .arm-paper_elevation{
9
- box-shadow: var(--box-shadow);
10
- }
11
- .arm-paper_outlined{
12
- border: 1px solid var(--color-gray-300)
13
- }
14
-
15
- .arm-paper_dark{
16
- background-color: var(--color-gray-700);
17
- &.arm-paper_outlined{
18
- border: 1px solid rgba(255, 255, 255, 0.2)
19
- }
1
+ @use "variables";
2
+
3
+ .arm-paper{
4
+ border-radius: var(--border-radius);
5
+ background-color: #fff;
6
+ padding: calc(var(--size-step) * 2);
7
+ }
8
+ .arm-paper_elevation{
9
+ box-shadow: var(--box-shadow);
10
+ }
11
+ .arm-paper_outlined{
12
+ border: 1px solid var(--color-gray-300)
13
+ }
14
+
15
+ .arm-paper_dark{
16
+ background-color: var(--color-gray-700);
17
+ &.arm-paper_outlined{
18
+ border: 1px solid rgba(255, 255, 255, 0.2)
19
+ }
20
20
  }
@@ -1,9 +1,9 @@
1
- .arm-period{
2
- position: relative;
3
- }
4
- .arm-period__picker{
5
- //position: absolute;
6
- //top: 100%;
7
- //right: 0;
8
- //z-index: 6;
1
+ .arm-period{
2
+ position: relative;
3
+ }
4
+ .arm-period__picker{
5
+ //position: absolute;
6
+ //top: 100%;
7
+ //right: 0;
8
+ //z-index: 6;
9
9
  }
@@ -1,3 +1,3 @@
1
- .arm-popper{
2
- z-index: 9000
1
+ .arm-popper{
2
+ z-index: 9000
3
3
  }
@@ -1,27 +1,27 @@
1
- @use "variables" as v;
2
- .arm-rating{
3
- font-size: 0;
4
- @include v.flex();
5
- }
6
- .arm-rating__item_container {
7
- cursor: pointer;
8
- }
9
- .arm-rating__item{
10
- color: var(--color-gray-400);
11
- font-size: 30px;
12
- }
13
- .arm-rating__item_active{
14
- color: #F7B519;
15
- }
16
- .arm-rating__item_medium{
17
- font-size: 24px;
18
- }
19
- .arm-rating__item_small{
20
- font-size: 18px;
21
- }
22
- .arm-rating__item_disabled{
23
- color: var(--color-gray-400);
24
- }
25
- .arm-rating__item_error{
26
- color: var(--color-error)
1
+ @use "variables" as v;
2
+ .arm-rating{
3
+ font-size: 0;
4
+ @include v.flex();
5
+ }
6
+ .arm-rating__item_container {
7
+ cursor: pointer;
8
+ }
9
+ .arm-rating__item{
10
+ color: var(--color-gray-400);
11
+ font-size: 30px;
12
+ }
13
+ .arm-rating__item_active{
14
+ color: #F7B519;
15
+ }
16
+ .arm-rating__item_medium{
17
+ font-size: 24px;
18
+ }
19
+ .arm-rating__item_small{
20
+ font-size: 18px;
21
+ }
22
+ .arm-rating__item_disabled{
23
+ color: var(--color-gray-400);
24
+ }
25
+ .arm-rating__item_error{
26
+ color: var(--color-error)
27
27
  }