monkey-style-guide 21.2.7 → 21.2.9

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 (30) hide show
  1. package/README.md +24 -24
  2. package/assets/scss/autocomplete/_index.scss +6 -6
  3. package/assets/scss/autocomplete/_styles.scss +149 -149
  4. package/assets/scss/directives/_badge.scss +48 -48
  5. package/assets/scss/directives/_index.scss +8 -8
  6. package/assets/scss/directives/_popover.scss +102 -102
  7. package/assets/scss/directives/_styles.scss +99 -99
  8. package/assets/scss/input/_index.scss +6 -6
  9. package/assets/scss/input/_styles.scss +67 -67
  10. package/assets/scss/partials/_breakpoints.scss +145 -145
  11. package/assets/scss/partials/_grid-system.scss +5069 -5069
  12. package/assets/scss/partials/_helper-classes.scss +373 -373
  13. package/assets/scss/partials/_icons.scss +38 -38
  14. package/assets/scss/partials/_index.scss +14 -14
  15. package/assets/scss/partials/_popover.scss +3 -3
  16. package/assets/scss/partials/_scrollbars.scss +29 -29
  17. package/assets/scss/partials/_skeleton-loading.scss +95 -95
  18. package/assets/scss/partials/_style-reset.scss +191 -191
  19. package/assets/scss/partials/_variables.scss +95 -95
  20. package/assets/scss/table/_index.scss +6 -6
  21. package/assets/scss/table/_styles.scss +11 -11
  22. package/assets/scss/theme.scss +14 -14
  23. package/assets/scss/typography/_index.scss +6 -6
  24. package/assets/scss/typography/_styles.scss +60 -60
  25. package/fesm2022/monkey-style-guide.mjs +4369 -2260
  26. package/fesm2022/monkey-style-guide.mjs.map +1 -1
  27. package/monkey-style-guide-21.2.9.tgz +0 -0
  28. package/package.json +1 -1
  29. package/types/monkey-style-guide.d.ts +844 -133
  30. package/monkey-style-guide-21.2.7.tgz +0 -0
package/assets/scss/partials/_icons.scss CHANGED
@@ -1,38 +1,38 @@
1
- $size-sm: 16px;
2
- $size-md: 18px;
3
- $size-lg: 24px;
4
- $size-xl: 32px;
5
- $size-xxl: 48px;
6
-
7
- .mk-i {
8
- display: inline-flex;
9
- align-items: center;
10
- justify-content: center;
11
- font-size: $size-lg;
12
- width: $size-lg;
13
- height: $size-lg;
14
-
15
- &.sm, &.xs {
16
- font-size: $size-sm;
17
- width: $size-sm;
18
- height: $size-sm;
19
- }
20
-
21
- &.md {
22
- font-size: $size-md;
23
- width: $size-md;
24
- height: $size-md;
25
- }
26
-
27
- &.xl {
28
- font-size: $size-xl;
29
- width: $size-xl;
30
- height: $size-xl;
31
- }
32
-
33
- &.xxl {
34
- font-size: $size-xxl;
35
- width: $size-xxl;
36
- height: $size-xxl;
37
- }
38
- }
1
+ $size-sm: 16px;
2
+ $size-md: 18px;
3
+ $size-lg: 24px;
4
+ $size-xl: 32px;
5
+ $size-xxl: 48px;
6
+
7
+ .mk-i {
8
+ display: inline-flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ font-size: $size-lg;
12
+ width: $size-lg;
13
+ height: $size-lg;
14
+
15
+ &.sm, &.xs {
16
+ font-size: $size-sm;
17
+ width: $size-sm;
18
+ height: $size-sm;
19
+ }
20
+
21
+ &.md {
22
+ font-size: $size-md;
23
+ width: $size-md;
24
+ height: $size-md;
25
+ }
26
+
27
+ &.xl {
28
+ font-size: $size-xl;
29
+ width: $size-xl;
30
+ height: $size-xl;
31
+ }
32
+
33
+ &.xxl {
34
+ font-size: $size-xxl;
35
+ width: $size-xxl;
36
+ height: $size-xxl;
37
+ }
38
+ }
package/assets/scss/partials/_index.scss CHANGED
@@ -1,14 +1,14 @@
1
- /**************************
2
- * Copyright Monkey Exchange. All Rights Reserved
3
- * This style guide was developed by Monkey Exchange Team
4
- * MIT Licence
5
- **************************/
6
- @use 'style-reset';
7
- @use 'variables';
8
- @use 'breakpoints';
9
- @use 'grid-system';
10
- @use 'scrollbars';
11
- @use 'skeleton-loading';
12
- @use 'helper-classes';
13
- @use 'popover';
14
- @use 'icons';
1
+ /**************************
2
+ * Copyright Monkey Exchange. All Rights Reserved
3
+ * This style guide was developed by Monkey Exchange Team
4
+ * MIT Licence
5
+ **************************/
6
+ @use 'style-reset';
7
+ @use 'variables';
8
+ @use 'breakpoints';
9
+ @use 'grid-system';
10
+ @use 'scrollbars';
11
+ @use 'skeleton-loading';
12
+ @use 'helper-classes';
13
+ @use 'popover';
14
+ @use 'icons';
package/assets/scss/partials/_popover.scss CHANGED
@@ -1,3 +1,3 @@
1
- monkey-popover-content {
2
- margin-top: 3px;
3
- }
1
+ monkey-popover-content {
2
+ margin-top: 3px;
3
+ }
package/assets/scss/partials/_scrollbars.scss CHANGED
@@ -1,29 +1,29 @@
1
- /* stylelint-disable color-no-hex */
2
-
3
- /**************************
4
- * Copyright Monkey Exchange. All Rights Reserved
5
- * This style guide was developed by Monkey Exchange Team
6
- * MIT Licence
7
- **************************/
8
- body:not(.is-mobile) {
9
- ::-webkit-scrollbar {
10
- width: 12px;
11
- height: 12px;
12
- background-color: #0000;
13
- }
14
-
15
- ::-webkit-scrollbar:hover {
16
- background-color: #0000001f;
17
- }
18
-
19
- ::-webkit-scrollbar-thumb {
20
- border: 2px solid transparent;
21
- box-shadow: inset 0 0 0 12px #0000005e;
22
- border-radius: 12px;
23
- }
24
-
25
- ::-webkit-scrollbar-thumb:active {
26
- box-shadow: inset 0 0 0 12px #0000008a;
27
- border-radius: 12px;
28
- }
29
- }
1
+ /* stylelint-disable color-no-hex */
2
+
3
+ /**************************
4
+ * Copyright Monkey Exchange. All Rights Reserved
5
+ * This style guide was developed by Monkey Exchange Team
6
+ * MIT Licence
7
+ **************************/
8
+ body:not(.is-mobile) {
9
+ ::-webkit-scrollbar {
10
+ width: 12px;
11
+ height: 12px;
12
+ background-color: #0000;
13
+ }
14
+
15
+ ::-webkit-scrollbar:hover {
16
+ background-color: #0000001f;
17
+ }
18
+
19
+ ::-webkit-scrollbar-thumb {
20
+ border: 2px solid transparent;
21
+ box-shadow: inset 0 0 0 12px #0000005e;
22
+ border-radius: 12px;
23
+ }
24
+
25
+ ::-webkit-scrollbar-thumb:active {
26
+ box-shadow: inset 0 0 0 12px #0000008a;
27
+ border-radius: 12px;
28
+ }
29
+ }
package/assets/scss/partials/_skeleton-loading.scss CHANGED
@@ -1,95 +1,95 @@
1
- /**************************
2
- * Copyright Monkey Exchange. All Rights Reserved
3
- * This style guide was developed by Monkey Exchange Team
4
- * MIT Licence
5
- **************************/
6
- %skeleton {
7
- animation: skeleton-loading 1s linear infinite alternate;
8
- display: block;
9
- border-radius: 4px;
10
- width: 100%;
11
- }
12
-
13
- @keyframes skeleton-loading {
14
- 0% {
15
- background-color: hsl(200deg 20% 85%);
16
- }
17
-
18
- 100% {
19
- background-color: hsl(200deg 20% 95%);
20
- }
21
- }
22
-
23
- .text-loading-xxs {
24
- @extend %skeleton;
25
-
26
- border-radius: 2px;
27
- margin: 2px 0;
28
- height: 8px;
29
- }
30
-
31
- .text-loading-xs {
32
- @extend %skeleton;
33
-
34
- border-radius: 2px;
35
- margin: 2px 0;
36
- height: 9px;
37
- }
38
-
39
- .text-loading-sm {
40
- @extend %skeleton;
41
-
42
- border-radius: 2px;
43
- margin: 2px 0;
44
- height: 10px;
45
- }
46
-
47
- .text-loading-md {
48
- @extend %skeleton;
49
-
50
- border-radius: 2px;
51
- margin: 2px 0;
52
- height: 12px;
53
- }
54
-
55
- .text-loading-lg {
56
- @extend %skeleton;
57
-
58
- margin: 2px 0;
59
- height: 20px;
60
- }
61
-
62
- .text-loading-xl {
63
- @extend %skeleton;
64
-
65
- margin: 2px 0;
66
- height: 28px;
67
- }
68
-
69
- .text-loading-xxl {
70
- @extend %skeleton;
71
-
72
- margin: 2px 0;
73
- height: 44px;
74
- }
75
-
76
- .loading-sm {
77
- @extend %skeleton;
78
-
79
- border-radius: 12px;
80
- height: 32px;
81
- }
82
-
83
- .loading-md {
84
- @extend %skeleton;
85
-
86
- border-radius: 12px;
87
- height: 40px;
88
- }
89
-
90
- .loading-lg {
91
- @extend %skeleton;
92
-
93
- border-radius: 12px;
94
- height: 48px;
95
- }
1
+ /**************************
2
+ * Copyright Monkey Exchange. All Rights Reserved
3
+ * This style guide was developed by Monkey Exchange Team
4
+ * MIT Licence
5
+ **************************/
6
+ %skeleton {
7
+ animation: skeleton-loading 1s linear infinite alternate;
8
+ display: block;
9
+ border-radius: 4px;
10
+ width: 100%;
11
+ }
12
+
13
+ @keyframes skeleton-loading {
14
+ 0% {
15
+ background-color: hsl(200deg 20% 85%);
16
+ }
17
+
18
+ 100% {
19
+ background-color: hsl(200deg 20% 95%);
20
+ }
21
+ }
22
+
23
+ .text-loading-xxs {
24
+ @extend %skeleton;
25
+
26
+ border-radius: 2px;
27
+ margin: 2px 0;
28
+ height: 8px;
29
+ }
30
+
31
+ .text-loading-xs {
32
+ @extend %skeleton;
33
+
34
+ border-radius: 2px;
35
+ margin: 2px 0;
36
+ height: 9px;
37
+ }
38
+
39
+ .text-loading-sm {
40
+ @extend %skeleton;
41
+
42
+ border-radius: 2px;
43
+ margin: 2px 0;
44
+ height: 10px;
45
+ }
46
+
47
+ .text-loading-md {
48
+ @extend %skeleton;
49
+
50
+ border-radius: 2px;
51
+ margin: 2px 0;
52
+ height: 12px;
53
+ }
54
+
55
+ .text-loading-lg {
56
+ @extend %skeleton;
57
+
58
+ margin: 2px 0;
59
+ height: 20px;
60
+ }
61
+
62
+ .text-loading-xl {
63
+ @extend %skeleton;
64
+
65
+ margin: 2px 0;
66
+ height: 28px;
67
+ }
68
+
69
+ .text-loading-xxl {
70
+ @extend %skeleton;
71
+
72
+ margin: 2px 0;
73
+ height: 44px;
74
+ }
75
+
76
+ .loading-sm {
77
+ @extend %skeleton;
78
+
79
+ border-radius: 12px;
80
+ height: 32px;
81
+ }
82
+
83
+ .loading-md {
84
+ @extend %skeleton;
85
+
86
+ border-radius: 12px;
87
+ height: 40px;
88
+ }
89
+
90
+ .loading-lg {
91
+ @extend %skeleton;
92
+
93
+ border-radius: 12px;
94
+ height: 48px;
95
+ }