@acorex/styles 5.0.44 → 5.0.47

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +5 -95
  3. package/src/components/_badge.scss +27 -26
  4. package/src/components/_popup.scss +37 -9
  5. package/src/components/_selection-list.scss +4 -0
  6. package/src/utility/_mixins.scss +38 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.44",
3
+ "version": "5.0.47",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_alert.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
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 ax-border;
3
+ @apply ax-flex ax-bg-light-100 ax-text-light-fore ax-px-3.5 ax-py-4 ax-items-center ax-rounded ;
4
4
  transition: visibility 0s, opacity 0.5s ease-in-out;
5
5
  &.ax-state-hidden {
6
6
  visibility: hidden;
@@ -12,7 +12,6 @@
12
12
  }
13
13
  .ax-alert-icon {
14
14
  @apply ax-text-xl ax-self-baseline ax-me-2;
15
-
16
15
  }
17
16
  .ax-alert-body {
18
17
  @apply ax-ml-2 ax-flex-1;
@@ -24,7 +23,7 @@
24
23
  }
25
24
  .ax-alert-content {
26
25
  @apply ax-block ax-text-sm ax-break-words;
27
-
26
+
28
27
  ul {
29
28
  @apply ax-my-2 ax-ms-5 ax-list-disc;
30
29
  }
@@ -43,13 +42,11 @@
43
42
  }
44
43
  }
45
44
  }
46
-
47
45
  }
48
46
  .ax-alert-prefix {
49
- .ax-alert-buttons{
47
+ .ax-alert-buttons {
50
48
  @apply ax-flex;
51
49
  }
52
-
53
50
  }
54
51
  .ax-alert-suffix {
55
52
  .ax-alert-buttons {
@@ -62,93 +59,6 @@
62
59
  }
63
60
  }
64
61
  }
65
- &.ax-primary-default {
66
- @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-600 dark:ax-text-primary-50 ax-border-primary-500/10;
67
- .ax-alert-title {
68
- @apply ax-text-primary-700 dark:ax-text-primary-100;
69
- }
70
- .ax-alert-button {
71
- &:hover {
72
- @apply ax-text-primary-900;
73
- }
74
- }
75
- }
76
- &.ax-secondary-default {
77
- @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-600 dark:ax-text-secondary-50 ax-border-secondary-500/10;
78
- .ax-alert-title {
79
- @apply ax-text-secondary-700 dark:ax-text-secondary-100;
80
- }
81
- .ax-alert-button {
82
- &:hover {
83
- @apply ax-text-secondary-900;
84
- }
85
- }
86
- }
87
- &.ax-success-default {
88
- @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-600 dark:ax-text-success-50 ax-border-success-500/10;
89
- .ax-alert-title {
90
- @apply ax-text-success-700 dark:ax-text-success-100;
91
- }
92
- .ax-alert-button {
93
- &:hover {
94
- @apply ax-text-success-900;
95
- }
96
- }
97
- }
98
- &.ax-warning-default {
99
- @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white ax-border-warning-500/10;
100
- .ax-alert-title {
101
- @apply ax-text-warning-700 dark:ax-text-warning-100;
102
- }
103
- .ax-alert-button {
104
- &:hover {
105
- @apply ax-text-warning-900;
106
- }
107
- }
108
- }
109
- &.ax-danger-default {
110
- @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-600 dark:ax-text-danger-50 ax-border-danger-500/10;
111
- .ax-alert-title {
112
- @apply ax-text-danger-700 dark:ax-text-danger-100;
113
- }
114
- .ax-alert-button {
115
- &:hover {
116
- @apply ax-text-danger-900;
117
- }
118
- }
119
- }
120
- &.ax-info-default {
121
- @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-600 dark:ax-text-info-50 ax-border-info-500/10;
122
- .ax-alert-title {
123
- @apply ax-text-info-700 dark:ax-text-info-100;
124
- }
125
- .ax-alert-button {
126
- &:hover {
127
- @apply ax-text-info-900;
128
- }
129
- }
130
- }
131
- &.ax-light-default {
132
- @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50 ax-border-light-500/10;
133
- .ax-alert-title {
134
- @apply ax-text-light-fore dark:ax-text-light-100;
135
- }
136
- .ax-alert-button {
137
- &:hover {
138
- @apply ax-text-light-900;
139
- }
140
- }
141
- }
142
- &.ax-dark-default {
143
- @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50 ax-border-dark-500/10;
144
- .ax-alert-title {
145
- @apply ax-text-dark-fore dark:ax-text-dark-100;
146
- }
147
- .ax-alert-button {
148
- &:hover {
149
- @apply ax-text-dark-200;
150
- }
151
- }
152
- }
62
+ @include color-look-generator();
153
63
  }
154
- }
64
+ }
package/src/components/_badge.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  @apply ax-rounded ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm ax-px-2;
4
4
  min-width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
5
5
  height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
6
-
7
6
  ax-prefix {
8
7
  @apply ax-me-1.5;
9
8
  }
@@ -16,29 +15,31 @@
16
15
  @apply ax-m-0;
17
16
  }
18
17
  }
19
- &.ax-primary-default{
20
- @apply ax-bg-primary-100 ax-text-primary-600 dark:ax-bg-primary-300;
21
- }
22
- &.ax-secondary-default{
23
- @apply ax-bg-secondary-100 ax-text-secondary-600 dark:ax-bg-secondary-300 ;
24
- }
25
- &.ax-success-default{
26
- @apply ax-bg-success-100 ax-text-success-600 dark:ax-bg-success-300 ;
27
- }
28
- &.ax-warning-default{
29
- @apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-300 ;
30
- }
31
- &.ax-danger-default{
32
- @apply ax-bg-danger-100 ax-text-danger-600 dark:ax-bg-danger-300 ;
33
- }
34
- &.ax-info-default{
35
- @apply ax-bg-info-100 ax-text-info-600 dark:ax-bg-info-300 ;
36
- }
37
- &.ax-light-default{
38
- @apply ax-bg-light-200 ax-text-light-700;
39
- }
40
- &.ax-dark-default{
41
- @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-300 dark:ax-text-dark-50;
42
- }
18
+
19
+ @include color-look-generator();
20
+ // &.ax-primary-default {
21
+ // @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
22
+ // }
23
+ // &.ax-secondary-default {
24
+ // @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
25
+ // }
26
+ // &.ax-success-default {
27
+ // @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
28
+ // }
29
+ // &.ax-warning-default {
30
+ // @apply ax-bg-warning-50 ax-text-warning-700 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
31
+ // }
32
+ // &.ax-danger-default {
33
+ // @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
34
+ // }
35
+ // &.ax-info-default {
36
+ // @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
37
+ // }
38
+ // &.ax-light-default {
39
+ // @apply ax-bg-light-200 ax-text-light-700;
40
+ // }
41
+ // &.ax-dark-default {
42
+ // @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
43
+ // }
43
44
  }
44
- }
45
+ }
package/src/components/_popup.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  ax-page-footer,
3
3
  ax-page-header {
4
- @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
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
5
 
6
6
  ax-prefix {
7
7
  @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
@@ -43,10 +43,13 @@
43
43
  @apply ax-overflow-auto ax-flex-1;
44
44
  }
45
45
  .ax-popup-footer-container{
46
-
46
+
47
47
  }
48
48
  &.ax-popup-full {
49
- @apply ax-w-screen ax-h-screen ax-max-h-screen;
49
+ @apply ax-w-screen;
50
+ height: calc(100 * var(--ax-vh));
51
+ max-height: calc(100 * var(--ax-vh));
52
+
50
53
  }
51
54
 
52
55
  &.ax-fit {
@@ -70,7 +73,7 @@
70
73
  @media all and (min-width: 1024px) and (max-width: 1279px) {
71
74
  &.ax-popup-sm {
72
75
  width: 100vw;
73
- max-height: 100vh;
76
+ max-height: calc(100 * var(--ax-vh));
74
77
  .ax-popup-main {
75
78
  @apply ax-h-screen;
76
79
  }
@@ -88,7 +91,7 @@
88
91
  @media all and (min-width: 768px) and (max-width: 1023px) {
89
92
  &.ax-popup-sm {
90
93
  width: 100vw;
91
- max-height: 100vh;
94
+ max-height: calc(100 * var(--ax-vh));
92
95
  .ax-popup-main {
93
96
  @apply ax-h-screen;
94
97
  }
@@ -106,8 +109,8 @@
106
109
  @media all and (min-width: 425px) and (max-width: 767px) {
107
110
  &.ax-popup-sm {
108
111
  width: 100vw;
109
- height: 100vh;
110
- max-height: 100vh;
112
+ height: calc(100 * var(--ax-vh));
113
+ max-height: calc(100 * var(--ax-vh));
111
114
  .ax-popup-main {
112
115
  @apply ax-h-screen;
113
116
  }
@@ -124,8 +127,8 @@
124
127
  &.ax-popup-md,
125
128
  &.ax-popup-lg {
126
129
  width: 100vw;
127
- height: 100vh;
128
- max-height: 100vh;
130
+ height: calc(100 * var(--ax-vh));
131
+ max-height: calc(100 * var(--ax-vh));
129
132
  .ax-popup-main {
130
133
  @apply ax-h-screen;
131
134
  }
@@ -133,3 +136,28 @@
133
136
  }
134
137
  }
135
138
  }
139
+
140
+ // @layer components {
141
+ // ax-popup {
142
+ // @apply ax-bg-white ax-rounded-md;
143
+ // // ax-page-footer,
144
+ // // ax-page-header {
145
+ // // @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
146
+
147
+ // // ax-prefix {
148
+ // // @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
149
+ // // }
150
+
151
+ // // ax-suffix {
152
+ // // @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
153
+ // // }
154
+ // // }
155
+ // // ax-page-footer {
156
+ // // @apply ax-border-t;
157
+ // // }
158
+
159
+ // // ax-page-header {
160
+ // // @apply ax-border-b;
161
+ // // }
162
+ // }
163
+ // }
package/src/components/_selection-list.scss CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  &.ax-vertical {
6
6
  @apply ax-flex-col;
7
+ .ax-checkbox-container,
8
+ .ax-radio-container {
9
+ @apply ax-mb-4;
10
+ }
7
11
  }
8
12
 
9
13
  &.ax-horizontal {
package/src/utility/_mixins.scss CHANGED
@@ -18,38 +18,60 @@
18
18
  }
19
19
 
20
20
  @mixin colors($array) {
21
- @each $name,
22
- $color in $array {
23
- @if (type-of($color)=="map") {
24
- @each $subname,
25
- $variant in $color {
26
- @if ($subname !="") {
21
+ @each $name, $color in $array {
22
+ @if (type-of($color) == "map") {
23
+ @each $subname, $variant in $color {
24
+ @if ($subname != "") {
27
25
  --ax-color-#{$name}-#{$subname}: #{$variant};
28
- }
29
- @else {
26
+ } @else {
30
27
  --ax-color-#{$name}: #{$variant};
31
28
  }
32
29
  }
33
- }
34
- @else {
30
+ } @else {
35
31
  --ax-color-#{$name}: #{$color};
36
32
  }
37
33
  }
38
34
  }
39
35
 
40
36
  @mixin control-states($type) {
41
-
42
- @if($type == "editor"){
37
+ @if ($type == "editor") {
43
38
  @apply dark:ax-border-white/[0.06] dark:ax-bg-white/[0.06] dark:ax-backdrop-blur-3xl;
44
39
  }
45
- @if($type == "editor-disabled"){
40
+ @if ($type == "editor-disabled") {
46
41
  @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.06] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed;
47
-
48
42
  }
49
- @if($type == "surface"){
43
+ @if ($type == "surface") {
50
44
  @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
51
45
  }
46
+ }
52
47
 
53
-
48
+ @mixin color-look($color, $look) {
49
+ @if ($look == "default") {
50
+ @if ($color == "light") {
51
+ @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore;
52
+ } @else {
53
+ @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
54
+ }
55
+ }
56
+ @if ($look == "outline") {
57
+ @apply ax-bg-transparent ax-text-#{$color}-500 ax-border ax-rounded-md ax-border-#{$color}-500;
58
+ }
59
+ @if ($look == "twotone") {
60
+ @apply ax-bg-#{$color}-50 ax-text-#{$color}-500;
61
+ }
62
+ @if ($look == "blank") {
63
+ @apply ax-bg-transparent ax-text-#{$color}-500;
64
+ }
54
65
  }
55
66
 
67
+ @mixin color-look-generator() {
68
+ $colors: ("primary", "secondary", "success", "warning", "danger", "info", "light", "dark");
69
+ $looks: ("default", "outline", "twotone", "blank");
70
+ @each $c in $colors {
71
+ @each $l in $looks {
72
+ &.ax-#{$c}-#{$l} {
73
+ @include color-look($c, $l);
74
+ }
75
+ }
76
+ }
77
+ }