@acorex/styles 5.2.2 → 5.3.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.
Files changed (20) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +65 -28
  3. package/src/components/_button.scss +9 -9
  4. package/src/components/_decoration.scss +36 -0
  5. package/src/components/_drawer.scss +51 -77
  6. package/src/components/_dropdown.scss +0 -23
  7. package/src/components/_list.scss +0 -6
  8. package/src/components/_picker.scss +118 -10
  9. package/src/components/_popup.scss +0 -35
  10. package/src/components/_toast.scss +4 -74
  11. package/src/components/index.scss +2 -1
  12. package/src/icons/demo-files/demo.css +152 -152
  13. package/src/icons/demo-files/demo.js +30 -30
  14. package/src/icons/demo.html +500 -500
  15. package/src/icons/fonts/acorex-icon.svg +42 -42
  16. package/src/icons/style.css +126 -126
  17. package/src/icons/style.scss +195 -195
  18. package/src/icons/variables.scss +37 -37
  19. package/src/utility/_mixins.scss +34 -1
  20. package/src/variables/_colors.scss +12 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.2.2",
3
+ "version": "5.3.0",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_alert.scss CHANGED
@@ -1,64 +1,101 @@
1
1
  @layer components {
2
- .ax-alert {
3
- @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ;
2
+ ax-alert {
3
+ @apply ax-relative ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden;
4
4
  transition: visibility 0s, opacity 0.5s ease-in-out;
5
+
5
6
  &.ax-state-hidden {
6
7
  visibility: hidden;
7
8
  opacity: 0;
8
9
  }
10
+
9
11
  &.ax-state-visible {
10
12
  visibility: visible;
11
13
  opacity: 1;
12
14
  }
13
- .ax-alert-icon {
14
- @apply ax-text-xl ax-self-baseline ax-me-2;
15
+
16
+ & > ax-header {
17
+ @apply ax-px-3.5 ax-py-3 ax-bg-transparent ax-border-none ax-justify-start ax-text-sm;
18
+ & > ax-icon {
19
+ @apply ax-me-3 ax-text-2xl;
20
+ }
15
21
  }
16
22
  .ax-alert-body {
17
- @apply ax-ml-2 ax-flex-1;
18
- .ax-alert-title {
19
- @apply ax-inline-flex ax-text-sm ax-font-bold ax-mb-2.5;
20
- a {
21
- @apply ax-text-current ax-font-bold;
22
- }
23
+ @apply ax-flex-1 ax-p-3.5 ax-text-sm;
24
+ ax-icon {
25
+ @apply ax-me-3 ax-text-2xl;
23
26
  }
24
- .ax-alert-content {
27
+ & > ax-content {
25
28
  @apply ax-block ax-text-sm ax-break-words;
26
29
 
27
30
  ul {
28
31
  @apply ax-my-2 ax-ms-5 ax-list-disc;
29
32
  }
33
+
30
34
  a {
31
35
  @apply ax-text-current ax-font-bold ax-underline;
36
+
32
37
  &:hover {
33
38
  @apply ax-underline;
34
39
  }
35
40
  }
36
41
  }
37
- .ax-alert-footer {
38
- .ax-alert-buttons {
39
- @apply ax-flex ax-mt-4;
40
- .ax-alert-button {
41
- @apply ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
42
- }
42
+
43
+ ax-suffix {
44
+ @apply ax-block ax-mt-3;
45
+ ax-button {
46
+ @apply ax-ms-2 ax-me-0 #{!important};
47
+ }
48
+ }
49
+
50
+ ax-footer {
51
+ @apply ax-bg-transparent ax-border-none ax-p-0 ax-mt-3;
52
+ ax-button {
53
+ @apply ax-me-2;
43
54
  }
44
55
  }
45
56
  }
46
- .ax-alert-prefix {
47
- .ax-alert-buttons {
48
- @apply ax-flex;
57
+ &.ax-light-default {
58
+ ax-header {
59
+ @apply ax-bg-light-200;
60
+ }
61
+ .ax-alert-body {
62
+ @applyax-bg-light-300;
63
+ }
64
+ .ax-alert-progress {
65
+ @apply ax-absolute ax-bg-light-400;
49
66
  }
50
67
  }
51
- .ax-alert-suffix {
52
- .ax-alert-buttons {
53
- @apply ax-flex;
54
- .ax-alert-button {
55
- @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
56
- i {
57
- @apply ax-mx-1;
58
- }
68
+ &.ax-dark-default {
69
+ ax-button {
70
+ @apply ax-bg-white/30 #{!important};
71
+ &:hover,
72
+ &:active,
73
+ &:focus {
74
+ @apply ax-bg-white/20 #{!important};
59
75
  }
60
76
  }
61
77
  }
78
+ &[class*="dark"] {
79
+ .ax-alert-progress {
80
+ @apply ax-bg-white/50;
81
+ }
82
+ }
83
+ .ax-alert-progress {
84
+ @apply ax-absolute ax-bg-black/30 ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
85
+ animation-duration: 4s;
86
+ animation-timing-function: linear;
87
+ animation-name: progressBar;
88
+ }
89
+ @keyframes progressBar {
90
+ 0% {
91
+ width: 100%;
92
+ }
93
+ 100% {
94
+ width: 0%;
95
+ }
96
+ }
97
+ @include button-on-colorful-bg();
98
+
62
99
  @include color-look-generator();
63
100
  }
64
101
  }
package/src/components/_button.scss CHANGED
@@ -117,7 +117,7 @@
117
117
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
118
118
  }
119
119
  &:active {
120
- @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
120
+ @apply ax-bg-warning-600 ax-text-warning-fore ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
121
121
  }
122
122
  }
123
123
 
@@ -249,19 +249,19 @@
249
249
  }
250
250
  }
251
251
  &.ax-warning-twotone {
252
- @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
252
+ @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-fore;
253
253
  &:not(.ax-state-disabled) {
254
254
  &:hover,
255
255
  &:focus {
256
- @apply ax-bg-warning-200 ax-text-warning-700;
256
+ @apply ax-bg-warning-200 ax-text-warning-fore;
257
257
  }
258
258
  &:active {
259
- @apply ax-bg-warning-300 ax-text-warning-700;
259
+ @apply ax-bg-warning-300 ax-text-warning-fore;
260
260
  }
261
261
  }
262
262
 
263
263
  &.ax-state-selected {
264
- @apply ax-bg-warning-200 ax-text-warning-700;
264
+ @apply ax-bg-warning-200 ax-text-warning-fore;
265
265
  }
266
266
  }
267
267
  &.ax-danger-twotone {
@@ -515,10 +515,10 @@
515
515
  &:not(.ax-state-disabled) {
516
516
  &:hover,
517
517
  &:focus {
518
- @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
518
+ @apply ax-bg-warning-50 ax-text-warning-fore dark:ax-bg-transparent;
519
519
  }
520
520
  &:active {
521
- @apply ax-bg-warning-100 ax-text-warning-700;
521
+ @apply ax-bg-warning-100 ax-text-warning-fore;
522
522
  }
523
523
  }
524
524
 
@@ -644,10 +644,10 @@
644
644
  &:not(.ax-state-disabled) {
645
645
  &:hover,
646
646
  &:focus {
647
- @apply ax-text-warning-600 ax-border-warning-600;
647
+ @apply ax-text-warning-fore ax-border-warning-600;
648
648
  }
649
649
  &:active {
650
- @apply ax-text-warning-500 ax-border-warning-500;
650
+ @apply ax-text-warning-fore ax-border-warning-500;
651
651
  }
652
652
  }
653
653
 
package/src/components/_decoration.scss ADDED
@@ -0,0 +1,36 @@
1
+ @layer components {
2
+ ax-header,
3
+ ax-footer {
4
+ @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
5
+ }
6
+
7
+ ax-header {
8
+ @apply ax-border-b;
9
+
10
+ & > ax-prefix,
11
+ & > ax-suffix {
12
+ @apply ax-flex ax-items-center;
13
+ }
14
+ }
15
+
16
+ ax-footer {
17
+ @apply ax-border-t;
18
+ }
19
+
20
+ ax-title {
21
+ @apply ax-font-medium;
22
+ }
23
+
24
+ ax-icon {
25
+ @apply ax-font-medium;
26
+ }
27
+
28
+ ax-close-button {
29
+ ax-icon {
30
+ @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
31
+ &:hover {
32
+ @apply ax-text-light-500 dark:ax-text-light-100;
33
+ }
34
+ }
35
+ }
36
+ }
package/src/components/_drawer.scss CHANGED
@@ -1,126 +1,100 @@
1
1
  @layer components {
2
- .ax-drawer-container {
2
+ ax-drawer-container {
3
3
  @apply ax-flex ax-relative ax-w-full ax-h-full ax-overflow-hidden;
4
4
 
5
- .ax-drawer-backdrop {
6
- @apply ax-absolute ax-w-full ax-h-full ax-z-[990] ax-transition-all ax-top-0 ax-bottom-0 ax-bg-black/50;
7
-
5
+ &.ax-fixed {
6
+ @apply ax-hidden ax-top-0 ax-right-0 ax-left-0 ax-bottom-0 ax-z-[1000];
7
+
8
+ &.ax-visible {
9
+ @apply ax-flex;
10
+ }
8
11
  }
9
12
 
10
- .ax-drawer {
11
-
13
+ .ax-backdrop {
14
+ @apply ax-bg-black/30 ax-absolute ax-w-full ax-h-full ax-z-[1] ax-top-0 ax-bottom-0 ax-transition-all;
15
+ }
12
16
 
13
- // &.ax-animated {
14
- // transition: all 500ms;
15
- // }
17
+ ax-drawer {
18
+ @apply ax-flex ax-flex-col ax-max-w-[95%] ax-h-full ax-animate-duration-300 ax-transition-all #{!important};
16
19
 
17
- &.ax-drawer-overlay {
18
- @apply ax-absolute ax-z-[999];
19
- z-index: 9999;
20
+ &.ax-preload {
21
+ @apply ax-animate-duration-[0ms] ax-transition-none #{!important};
20
22
  }
21
23
 
22
- &.ax-drawer-start {
23
- @apply ax-h-full;
24
- &.ax-hide {
25
- position: absolute;
26
- left: -9999px;
27
- }
28
24
 
29
- &.ax-collapsed {
30
- margin-inline-start: calc(-2 * var(--attr-width));
31
- }
25
+ &>ax-content
26
+ {
27
+ @apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full;
28
+ }
29
+
30
+ &.ax-drawer-overlay {
31
+ @apply ax-absolute;
32
32
 
33
33
  &.ax-expanded {
34
- margin-inline-start: 0;
34
+ @apply ax-z-[2];
35
35
  }
36
- }
37
36
 
38
- &.ax-drawer-end {
39
- @apply ax-h-full;
40
- &.ax-hide {
41
- position: absolute;
42
- right: -9999px;
37
+ &.ax-collapsed {
38
+ @apply ax-z-[0];
43
39
  }
44
40
 
45
- &.ax-drawer-overlay {
46
- &.ax-collapsed {
47
- right: calc(-2 * var(--attr-width));
48
- }
41
+ &.ax-drawer-start {
49
42
 
50
43
  &.ax-expanded {
51
- right: calc(-2 * var(--attr-diff));
44
+ left:0;
52
45
  }
53
- }
54
46
 
55
- &.ax-drawer-push {
56
47
  &.ax-collapsed {
57
- margin-inline-end: calc(-2 * var(--attr-width));
48
+ left: calc(-1 * var(--ax-el-width));
58
49
  }
59
50
 
60
- &.ax-expanded {
61
- margin-inline-end: 0;
62
- }
63
- }
64
- }
65
- &.ax-drawer-top {
66
- @apply ax-w-full;
67
- &.ax-hide {
68
- position: absolute;
69
- top: -9999px;
70
51
  }
71
52
 
72
- &.ax-drawer-overlay {
73
- &.ax-collapsed {
74
- top: calc(-2 * var(--attr-height));
75
- }
53
+ &.ax-drawer-end {
76
54
 
77
55
  &.ax-expanded {
78
- top: calc(-2 * var(--attr-diff));
56
+ right:0;
79
57
  }
80
- }
81
58
 
82
- &.ax-drawer-push {
83
59
  &.ax-collapsed {
84
- margin-block-start: calc(-2 * var(--attr-height));
85
- }
86
-
87
- &.ax-expanded {
88
- margin-block-start: 0;
60
+ right: calc(-1 * var(--ax-el-width));
89
61
  }
90
62
  }
91
63
  }
92
- &.ax-drawer-bottom {
93
- @apply ax-w-full;
94
- &.ax-hide {
95
- position: absolute;
96
- bottom: -9999px;
97
- }
98
64
 
99
- &.ax-drawer-overlay {
100
- &.ax-collapsed {
101
- bottom: calc(-2 * var(--attr-height));
102
- }
65
+ &.ax-drawer-push {
66
+ @apply ax-flex-initial;
67
+
68
+ &.ax-drawer-start {
69
+ @apply ax-order-first;
103
70
 
104
71
  &.ax-expanded {
105
- bottom: calc(-2 * var(--attr-diff));
72
+ margin-inline-start: 0%
106
73
  }
107
- }
108
74
 
109
- &.ax-drawer-push {
110
75
  &.ax-collapsed {
111
- margin-block-start: calc(-2 * var(--attr-height));
76
+ margin-inline-start: calc(-1 * var(--ax-el-width));
112
77
  }
113
78
 
79
+ }
80
+
81
+ &.ax-drawer-end {
82
+ @apply ax-order-last;
83
+
114
84
  &.ax-expanded {
115
- margin-block-start: 0;
85
+ margin-inline-end: 0%;
86
+ }
87
+
88
+ &.ax-collapsed {
89
+ margin-inline-end: calc(-1 * var(--ax-el-width));
116
90
  }
117
91
  }
118
92
  }
93
+
119
94
  }
120
95
 
121
- .ax-drawer-content {
122
- @apply ax-flex-1 ax-overflow-auto;
123
- width: var(--attr-content-width);
96
+ &>ax-content {
97
+ @apply ax-flex-1 ax-h-full ax-overflow-auto;
124
98
  }
125
99
  }
126
- }
100
+ }
package/src/components/_dropdown.scss CHANGED
@@ -11,14 +11,6 @@
11
11
  }
12
12
  }
13
13
 
14
- .ax-backdrop-light {
15
- @apply cdk-overlay-backdrop ax-bg-white ax-bg-opacity-50;
16
- }
17
-
18
- .ax-backdrop-dark {
19
- @apply cdk-overlay-backdrop ax-bg-black ax-bg-opacity-50;
20
- }
21
-
22
14
  .ax-overlay-pane {
23
15
  @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
24
16
  @include control-states("surface");
@@ -50,21 +42,6 @@
50
42
  @apply ax-w-screen ax-h-screen;
51
43
  }
52
44
 
53
- .ax-header {
54
- @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
55
-
56
- span {
57
- @apply ax-font-medium;
58
- }
59
-
60
- i {
61
- @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
62
- &:hover {
63
- @apply ax-text-light-500 dark:ax-text-light-100;
64
- }
65
- }
66
- }
67
-
68
45
  &.ax-dropdown-list {
69
46
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
70
47
 
package/src/components/_list.scss CHANGED
@@ -3,13 +3,7 @@
3
3
  display: block;
4
4
  @apply ax-h-full ax-flex ax-flex-col ax-overflow-hidden md:ax-max-h-80;
5
5
 
6
- .ax-header {
7
- @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2.5;
8
- }
9
-
10
6
  .ax-content {
11
-
12
-
13
7
  @apply ax-flex-1 ax-overflow-y-auto ax-overflow-x-hidden;
14
8
 
15
9
  &.ax-list-items-container {
package/src/components/_picker.scss CHANGED
@@ -58,14 +58,122 @@
58
58
  // }
59
59
  // }
60
60
 
61
- @layer components {
62
- ax-picker {
63
- @apply ax-max-h-full ax-overflow-y-scroll;
64
- scroll-snap-type: mandatory;
65
- scroll-snap-points-y: repeat(1rem);
66
- scroll-snap-type: y mandatory;
67
- li {
68
- @apply ax-py-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-snap-start ax-text-sm;
69
- }
70
- }
61
+ // @layer components {
62
+ // ax-picker {
63
+ // @apply ax-max-h-full ax-overflow-y-scroll;
64
+ // scroll-snap-type: mandatory;
65
+ // scroll-snap-points-y: repeat(1rem);
66
+ // scroll-snap-type: y mandatory;
67
+ // li {
68
+ // @apply ax-py-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-snap-start ax-text-sm;
69
+ // }
70
+ // }
71
+ // }
72
+ .ng-data-picker {
73
+ font-size: 1rem;
74
+ height: 10em;
75
+ position: relative;
76
+ background-color: white;
77
+ overflow: hidden;
78
+ }
79
+ .ng-data-picker.black {
80
+ color: white;
81
+ }
82
+ .ng-data-picker .picker-group {
83
+ }
84
+ .ng-data-picker .picker-list {
85
+ height: 6.25em;
86
+ position: relative;
87
+ top: 4em; // half of picker height - half of item height
88
+ }
89
+ .ng-data-picker .picker-item {
90
+ position: absolute;
91
+ top: 0;
92
+ left: 0;
93
+ overflow: hidden;
94
+ width: 100%;
95
+ text-overflow: ellipsis;
96
+ white-space: nowrap;
97
+ display: block;
98
+ text-align: center;
99
+ will-change: transform;
100
+ contain: strict;
101
+ height: 2em;
102
+ line-height: 2;
103
+ font-size: 1em;
104
+ }
105
+ .ng-data-picker .selected-item {
106
+ }
107
+
108
+ /* picker handle layer */
109
+ .ng-data-picker .picker-handle-layer {
110
+ position: absolute;
111
+ width: 100%;
112
+ height: calc(100% + 2px);
113
+ left: 0;
114
+ right: 0;
115
+ top: -1px;
116
+ bottom: -1px;
117
+ }
118
+ .ng-data-picker .picker-handle-layer .picker-top {
119
+ border-bottom: 0.55px solid rgba(74, 73, 89, 0.5);
120
+ background: linear-gradient(to bottom, white 2%, rgba(255, 255, 255, 0.1) 100%);
121
+ transform: translate3d(0, 0, 5.625em);
122
+ }
123
+ .ng-data-picker .picker-handle-layer .picker-middle {
124
+ height: 2em;
125
+ }
126
+ .ng-data-picker .picker-handle-layer .picker-bottom {
127
+ border-top: 0.55px solid rgba(74, 73, 89, 0.5);
128
+ background: linear-gradient(to top, white 2%, rgba(255, 255, 255, 0.1) 100%);
129
+ transform: translate3d(0, 0, 5.625em);
130
+ }
131
+
132
+ /* flex system */
133
+ .flex-box {
134
+ display: flex;
135
+ }
136
+ .flex-box.dir-column {
137
+ flex-direction: column;
138
+ }
139
+ .flex-box.dir-row {
140
+ flex-direction: row;
141
+ }
142
+
143
+ /* flex system - for items */
144
+ .flex-box .weight-1 {
145
+ flex: 1;
146
+ }
147
+ .flex-box .weight-2 {
148
+ flex: 2;
149
+ }
150
+ .flex-box .weight-3 {
151
+ flex: 3;
152
+ }
153
+ .flex-box .weight-4 {
154
+ flex: 4;
155
+ }
156
+ .flex-box .weight-5 {
157
+ flex: 5;
158
+ }
159
+ .flex-box .weight-6 {
160
+ flex: 6;
161
+ }
162
+ .flex-box .weight-7 {
163
+ flex: 7;
164
+ }
165
+ .flex-box .weight-8 {
166
+ flex: 8;
167
+ }
168
+ .flex-box .weight-9 {
169
+ flex: 9;
170
+ }
171
+ .flex-box .weight-10 {
172
+ flex: 10;
173
+ }
174
+ .flex-box .weight-11 {
175
+ flex: 11;
176
+ }
177
+ .flex-box .weight-12 {
178
+ flex: 12;
71
179
  }
package/src/components/_popup.scss CHANGED
@@ -1,44 +1,9 @@
1
1
  @layer components {
2
- ax-page-footer,
3
- ax-page-header {
4
- @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
5
-
6
- ax-prefix {
7
- @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
8
- }
9
-
10
- ax-suffix {
11
- @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
12
- }
13
- }
14
-
15
- ax-page-footer {
16
- @apply ax-border-t;
17
- }
18
-
19
- ax-page-header {
20
- @apply ax-border-b;
21
- }
22
2
 
23
3
  .ax-popup {
24
4
  @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
25
5
  @include control-states("surface");
26
6
 
27
- .ax-popup-header {
28
- @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
29
-
30
- span {
31
- @apply ax-font-medium;
32
- }
33
-
34
- i {
35
- @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
36
- &:hover {
37
- @apply ax-text-light-500 dark:ax-text-light-100;
38
- }
39
- }
40
- }
41
-
42
7
  .ax-popup-main-container {
43
8
  @apply ax-overflow-auto ax-flex-1;
44
9
  }