@acorex/styles 5.0.24 → 5.0.25

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +17 -10
  3. package/src/components/_popup.scss +16 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.24",
3
+ "version": "5.0.25",
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-baseline ax-rounded;
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;
4
4
  transition: visibility 0s, opacity 0.5s ease-in-out;
5
5
  &.ax-state-hidden {
6
6
  visibility: hidden;
@@ -11,7 +11,7 @@
11
11
  opacity: 1;
12
12
  }
13
13
  .ax-alert-icon {
14
- @apply ax-text-xl ax-align-text-bottom;
14
+ @apply ax-text-xl ax-self-baseline;
15
15
 
16
16
  }
17
17
  .ax-alert-body {
@@ -44,9 +44,16 @@
44
44
  }
45
45
  }
46
46
 
47
+ }
48
+ .ax-alert-prefix {
49
+ .ax-alert-buttons{
50
+ @apply ax-flex;
51
+ }
52
+
47
53
  }
48
54
  .ax-alert-suffix {
49
55
  .ax-alert-buttons {
56
+ @apply ax-flex;
50
57
  .ax-alert-button {
51
58
  @apply ax-me-0.5 ax-text-sm ax-font-semibold ax-cursor-pointer;
52
59
  i {
@@ -56,7 +63,7 @@
56
63
  }
57
64
  }
58
65
  &.ax-primary-default {
59
- @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-50;
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;
60
67
  .ax-alert-title {
61
68
  @apply ax-text-primary-700 dark:ax-text-primary-100;
62
69
  }
@@ -67,7 +74,7 @@
67
74
  }
68
75
  }
69
76
  &.ax-secondary-default {
70
- @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-50;
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;
71
78
  .ax-alert-title {
72
79
  @apply ax-text-secondary-700 dark:ax-text-secondary-100;
73
80
  }
@@ -78,7 +85,7 @@
78
85
  }
79
86
  }
80
87
  &.ax-success-default {
81
- @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-50;
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;
82
89
  .ax-alert-title {
83
90
  @apply ax-text-success-700 dark:ax-text-success-100;
84
91
  }
@@ -89,7 +96,7 @@
89
96
  }
90
97
  }
91
98
  &.ax-warning-default {
92
- @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white;
99
+ @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white ax-border-warning-500/10;
93
100
  .ax-alert-title {
94
101
  @apply ax-text-warning-700 dark:ax-text-warning-100;
95
102
  }
@@ -100,7 +107,7 @@
100
107
  }
101
108
  }
102
109
  &.ax-danger-default {
103
- @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-50;
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;
104
111
  .ax-alert-title {
105
112
  @apply ax-text-danger-700 dark:ax-text-danger-100;
106
113
  }
@@ -111,7 +118,7 @@
111
118
  }
112
119
  }
113
120
  &.ax-info-default {
114
- @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-50;
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;
115
122
  .ax-alert-title {
116
123
  @apply ax-text-info-700 dark:ax-text-info-100;
117
124
  }
@@ -122,7 +129,7 @@
122
129
  }
123
130
  }
124
131
  &.ax-light-default {
125
- @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50;
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;
126
133
  .ax-alert-title {
127
134
  @apply ax-text-light-fore dark:ax-text-light-100;
128
135
  }
@@ -133,7 +140,7 @@
133
140
  }
134
141
  }
135
142
  &.ax-dark-default {
136
- @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50;
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;
137
144
  .ax-alert-title {
138
145
  @apply ax-text-dark-fore dark:ax-text-dark-100;
139
146
  }
package/src/components/_popup.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
  }
47
47
 
48
- &.ax-full {
48
+ &.ax-popup-full {
49
49
  @apply ax-w-screen ax-h-screen;
50
50
  }
51
51
 
@@ -54,66 +54,66 @@
54
54
  }
55
55
 
56
56
  @media all and (min-width: 1280px) {
57
- &.ax-sm {
57
+ &.ax-popup-sm {
58
58
  width: 420px !important;
59
59
  }
60
60
 
61
- &.ax-md {
61
+ &.ax-popup-md {
62
62
  width: 680px !important;
63
63
  }
64
64
 
65
- &.ax-lg {
65
+ &.ax-popup-lg {
66
66
  width: 1024px !important;
67
67
  }
68
68
  }
69
69
 
70
70
  @media all and (min-width: 1024px) and (max-width: 1279px) {
71
- &.ax-sm {
71
+ &.ax-popup-sm {
72
72
  width: 100vw;
73
73
  max-height: 100vh;
74
74
  }
75
75
 
76
- &.ax-md {
76
+ &.ax-popup-md {
77
77
  width: 500px !important;
78
78
  }
79
79
 
80
- &.ax-lg {
80
+ &.ax-popup-lg {
81
81
  width: 900px !important;
82
82
  }
83
83
  }
84
84
 
85
85
  @media all and (min-width: 768px) and (max-width: 1023px) {
86
- &.ax-sm {
86
+ &.ax-popup-sm {
87
87
  width: 100vw;
88
88
  max-height: 100vh;
89
89
  }
90
90
 
91
- &.ax-md {
91
+ &.ax-popup-md {
92
92
  width: 500px !important;
93
93
  }
94
94
 
95
- &.ax-lg {
95
+ &.ax-popup-lg {
96
96
  width: 700px !important;
97
97
  }
98
98
  }
99
99
 
100
100
  @media all and (min-width: 425px) and (max-width: 767px) {
101
- &.ax-sm {
101
+ &.ax-popup-sm {
102
102
  width: 100vw;
103
103
  max-height: 100vh;
104
104
  }
105
105
 
106
- &.ax-md,
107
- &.ax-lg {
106
+ &.ax-popup-md,
107
+ &.ax-popup-lg {
108
108
  width: 460px !important;
109
109
  }
110
110
  }
111
111
 
112
112
  @media all and (min-width: 0px) and (max-width: 424px) {
113
113
 
114
- &.ax-sm,
115
- &.ax-md,
116
- &.ax-lg {
114
+ &.ax-popup-sm,
115
+ &.ax-popup-md,
116
+ &.ax-popup-lg {
117
117
  width: 100vw;
118
118
  max-height: 100vh;
119
119
  }