@acorex/styles 3.0.27 → 3.0.31

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/fonts/font-awesome/fa-brands-400.svg +3570 -3570
  2. package/fonts/font-awesome/fa-duotone-900.svg +15055 -15055
  3. package/fonts/font-awesome/fa-light-300.svg +12330 -12330
  4. package/fonts/font-awesome/fa-regular-400.svg +11256 -11256
  5. package/fonts/font-awesome/fa-solid-900.svg +9588 -9588
  6. package/fonts/font-awesome/font-awesome.css +16960 -16960
  7. package/package.json +11 -11
  8. package/scss/buttons.scss +64 -64
  9. package/scss/calendar.scss +129 -129
  10. package/scss/checkbox.scss +36 -36
  11. package/scss/context-menu.scss +80 -80
  12. package/scss/data-grid.scss +106 -106
  13. package/scss/drawer.scss +27 -27
  14. package/scss/fieldset.scss +22 -22
  15. package/scss/forms.scss +528 -528
  16. package/scss/list.scss +48 -48
  17. package/scss/master.scss +258 -258
  18. package/scss/menu.scss +471 -471
  19. package/scss/mixin.scss +11 -11
  20. package/scss/page.scss +53 -53
  21. package/scss/progress.scss +10 -10
  22. package/scss/selection-list.scss +116 -116
  23. package/scss/style.scss +49 -49
  24. package/scss/tab-strip.scss +23 -23
  25. package/scss/tab.scss +32 -32
  26. package/scss/toast.scss +23 -23
  27. package/scss/tooltip.scss +52 -52
  28. package/scss/treeview.scss +133 -133
  29. package/scss/upload.scss +168 -168
  30. package/scss/variables.scss +106 -106
package/scss/list.scss CHANGED
@@ -1,48 +1,48 @@
1
- .ax {
2
- &.list-container {
3
- .list-group {
4
- .group-header {
5
- font-weight: bold;
6
- }
7
- }
8
- .list-item {
9
- padding: 0.8em;
10
- cursor: pointer;
11
- transition: all 0.3s;
12
- position: relative;
13
- border: 1px solid transparent;
14
- // &:nth-child(odd) {
15
- // background-color: var(--ax-light-light-color);
16
- // }
17
- &:last-child {
18
- border-bottom: none !important;
19
- }
20
- &.selected {
21
- background: var(--ax-primary-trans-dark-color) !important;
22
- color: var(--ax-primary-color) !important;
23
- border-bottom: 1px solid var(--ax-white-color);
24
- // &::after {
25
- // position: absolute;
26
- // font-family: "Font Awesome 5 Pro";
27
- // content: "\f058";
28
- // display: inline-block;
29
- // vertical-align: middle;
30
- // font-weight: 900;
31
- // right: 0.7em;
32
- // font-size: 1.2em;
33
- // [dir="rtl"] &{
34
- // left: 0.7em;
35
- // right: initial !important;
36
- // }
37
- // }
38
- }
39
- &.focused
40
- {
41
- border: 1px solid var(--ax-border-dark-color);
42
- }
43
- &:hover {
44
- background-color: var(--ax-border-color);
45
- }
46
- }
47
- }
48
- }
1
+ .ax {
2
+ &.list-container {
3
+ .list-group {
4
+ .group-header {
5
+ font-weight: bold;
6
+ }
7
+ }
8
+ .list-item {
9
+ padding: 0.8em;
10
+ cursor: pointer;
11
+ transition: all 0.3s;
12
+ position: relative;
13
+ border: 1px solid transparent;
14
+ // &:nth-child(odd) {
15
+ // background-color: var(--ax-light-light-color);
16
+ // }
17
+ &:last-child {
18
+ border-bottom: none !important;
19
+ }
20
+ &.selected {
21
+ background: var(--ax-primary-trans-dark-color) !important;
22
+ color: var(--ax-primary-color) !important;
23
+ border-bottom: 1px solid var(--ax-white-color);
24
+ // &::after {
25
+ // position: absolute;
26
+ // font-family: "Font Awesome 5 Pro";
27
+ // content: "\f058";
28
+ // display: inline-block;
29
+ // vertical-align: middle;
30
+ // font-weight: 900;
31
+ // right: 0.7em;
32
+ // font-size: 1.2em;
33
+ // [dir="rtl"] &{
34
+ // left: 0.7em;
35
+ // right: initial !important;
36
+ // }
37
+ // }
38
+ }
39
+ &.focused
40
+ {
41
+ border: 1px solid var(--ax-border-dark-color);
42
+ }
43
+ &:hover {
44
+ background-color: var(--ax-border-color);
45
+ }
46
+ }
47
+ }
48
+ }
package/scss/master.scss CHANGED
@@ -1,258 +1,258 @@
1
- @import "./variables.scss";
2
- :root {
3
- --ax-border-color: #d1d5db;
4
- --ax-border-dark-color: rgba(34, 36, 38, 0.3);
5
- --ax-base-size: 8px;
6
- --ax-base-ratio: 5;
7
- // Create Sizes
8
- @each $name, $size in $sizes {
9
- @if type-of($size) == "map" {
10
- @each $subname, $variant in $size {
11
- @if $name== "" {
12
- --ax-size-#{$name}#{$subname}: #{$variant};
13
- } @else {
14
- --ax-size-#{$name}-#{$subname}: #{$variant};
15
- }
16
- }
17
- }
18
- }
19
- // Create Colors
20
- @each $name, $color in $colors {
21
- @if type-of($color) == "map" {
22
- @each $subname, $variant in $color {
23
- @if $subname== "" {
24
- --ax-#{$name}-#{$color-suffix}: #{$variant};
25
- } @else {
26
- --ax-#{$name}-#{$subname}-#{$color-suffix}: #{$variant};
27
- }
28
- }
29
- } @else {
30
- --ax-#{$name}-#{$color-suffix}: #{$color};
31
- }
32
- }
33
- }
34
-
35
- // Sizes
36
- .ax {
37
- &.form-control {
38
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
39
- padding: 0 1rem;
40
- font-size: 1rem;
41
- font-weight: 500;
42
- &.sm {
43
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
44
- padding: 0 0.3rem;
45
- font-size: 0.875rem;
46
- &.ax-button-icon {
47
- padding: 0.3rem;
48
- }
49
- }
50
- &.md {
51
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
52
- padding: 0 1rem;
53
- font-size: 1rem;
54
- font-weight: 500;
55
- &.ax-button-icon {
56
- padding: 0.7rem;
57
- }
58
- }
59
- &.lg {
60
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
61
- padding: 0 0.8rem;
62
- font-size: 1.5rem;
63
- &.ax-button-icon {
64
- padding: 0.9rem;
65
- }
66
- }
67
- }
68
- }
69
-
70
- // @each $name,
71
- // $size in $sizes {
72
- // .ax {
73
- // @if type-of($size)=="map" {
74
- // @each $subname,
75
- // $variant in $size {
76
- // @if $name=="" {
77
- // &.#{$subname} {
78
- // font-size: var(--ax-size-#{$subname}) !important;
79
- // }
80
- // }
81
- // }
82
- // }
83
- // }
84
- // }
85
- @each $name, $size in $sizes {
86
- @if type-of($size) == "map" {
87
- @each $subname, $variant in $size {
88
- @if $name== "" {
89
- .ax-mrg-#{$subname} {
90
- margin: var(--ax-size-#{$subname}) !important;
91
- }
92
- .ax-pad-#{$subname} {
93
- padding: var(--ax-size-#{$subname}) !important;
94
- }
95
- }
96
- }
97
- }
98
- }
99
-
100
- // Create Classes
101
- @each $name, $color in $colors {
102
- .ax {
103
- @if type-of($color) == "map" {
104
- @each $subname, $variant in $color {
105
- @if $subname== "" {
106
- &.bg-#{$name} {
107
- background-color: var(--ax-#{$name}-#{$color-suffix});
108
- }
109
- &.bg-light-#{$name} {
110
- background-color: var(--ax-#{$name}-light-#{$color-suffix});
111
- }
112
- &.bg-dark-#{$name} {
113
- background-color: var(--ax-#{$name}-dark-#{$color-suffix});
114
- }
115
- &.bg-lighten-#{$name} {
116
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
117
- }
118
- &.text-#{$name} {
119
- color: var(--ax-#{$name}-#{$color-suffix});
120
- }
121
- &.lighten-#{$name} {
122
- color: var(--ax-#{$name}-#{$color-suffix});
123
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
124
- }
125
- &.#{$name} {
126
- border: 1px solid;
127
- border-color: var(--ax-#{$name}-#{$color-suffix});
128
- @if ($name == "light") {
129
- background: var(--ax-white-#{$color-suffix});
130
- color: var(--ax-dark-#{$color-suffix});
131
- border-color: var(--ax-border-color);
132
-
133
- } @else {
134
- background: var(--ax-#{$name}-#{$color-suffix});
135
- color: var(--ax-#{$name}-fore-#{$color-suffix});
136
- }
137
- &:hover,
138
- &:focus {
139
- background: var(--ax-#{$name}-dark-#{$color-suffix});
140
- margin-right: calc(0.75rem * var(--tw-space-x-reverse));
141
- margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
142
- }
143
- &:active {
144
- background: var(--ax-#{$name}-light-#{$color-suffix});
145
- }
146
- &.selected{
147
- background: var(--ax-#{$name}-dark-#{$color-suffix});
148
- }
149
- &.disabled {
150
- background: var(--ax-gray-color) !important;
151
- color: var(--ax-gray-fore-color) !important;
152
- border-color: var(--ax-gray-color) !important;
153
- cursor: not-allowed;
154
- &:hover,
155
- &:active {
156
- background: var(--ax-gray-color) !important;
157
- color: var(--ax-gray-fore-color) !important;
158
- }
159
- }
160
- &.twotone {
161
- background: var(--ax-#{$name}-trans-light-#{$color-suffix});
162
- border-color: transparent;
163
-
164
- @if ($name == "light") {
165
- color: var(--ax-#{$name}-fore-#{$color-suffix});
166
- } @else {
167
- color: var(--ax-#{$name}-#{$color-suffix});
168
- }
169
-
170
- &:hover,
171
- &:focus {
172
- background: var(--ax-#{$name}-light-#{$color-suffix});
173
- color: var(--ax-#{$name}-fore-#{$color-suffix});
174
- }
175
- &:active {
176
- background: var(--ax-#{$name}-dark-#{$color-suffix});
177
- color: var(--ax-#{$name}-fore-#{$color-suffix});
178
- }
179
- &.selected{
180
- background: var(--ax-#{$name}-dark-#{$color-suffix});
181
- color: var(--ax-#{$name}-fore-#{$color-suffix});
182
- }
183
- }
184
- &.outline {
185
- background: transparent;
186
- border: 1px solid;
187
- border-color: var(--ax-#{$name}-#{$color-suffix});
188
- @if ($name == "light") {
189
- color: var(--ax-#{$name}-fore-#{$color-suffix});
190
- } @else {
191
- color: var(--ax-#{$name}-#{$color-suffix});
192
- }
193
-
194
- &:hover,
195
- &:focus {
196
- background: var(--ax-#{$name}-#{$color-suffix});
197
- color: var(--ax-#{$name}-fore-#{$color-suffix});
198
- }
199
- &:active {
200
- background: var(--ax-#{$name}-light-#{$color-suffix});
201
- color: var(--ax-#{$name}-fore-#{$color-suffix});
202
- border-color: var(--ax-#{$name}-light-#{$color-suffix});
203
- }
204
- &.selected{
205
- background: var(--ax-#{$name}-dark-#{$color-suffix});
206
- color: var(--ax-#{$name}-fore-#{$color-suffix});
207
- border-color: var(--ax-#{$name}-dark-#{$color-suffix});
208
- }
209
- }
210
- &.blank {
211
- background: transparent;
212
- border-color: transparent;
213
-
214
- @if ($name == "light") {
215
- color: var(--ax-#{$name}-fore-#{$color-suffix});
216
- } @else {
217
- color: var(--ax-#{$name}-#{$color-suffix});
218
- }
219
-
220
- &:hover,
221
- &:focus {
222
- @if ($name == "light") {
223
- background: var(--ax-#{$name}-trans-light-#{$color-suffix});
224
- color: var(--ax-#{$name}-fore-#{$color-suffix});
225
- } @else {
226
- background: var(--ax-#{$name}-trans-light-#{$color-suffix});
227
- color: var(--ax-#{$name}-#{$color-suffix});
228
- }
229
- }
230
- &:active {
231
- @if ($name == "light") {
232
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
233
- color: var(--ax-#{$name}-fore-#{$color-suffix});
234
- } @else {
235
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
236
- color: var(--ax-#{$name}-#{$color-suffix});
237
- }
238
- }
239
- &.selected{
240
- @if ($name == "light") {
241
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
242
- color: var(--ax-#{$name}-fore-#{$color-suffix});
243
- } @else {
244
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
245
- color: var(--ax-#{$name}-#{$color-suffix});
246
- }
247
- }
248
- }
249
- &.panel {
250
- color: var(--ax-#{$name}-fore-#{$color-suffix});
251
- background-color: var(--ax-#{$name}-#{$color-suffix});
252
- }
253
- }
254
- }
255
- }
256
- }
257
- }
258
- }
1
+ @import "./variables.scss";
2
+ :root {
3
+ --ax-border-color: #d1d5db;
4
+ --ax-border-dark-color: rgba(34, 36, 38, 0.3);
5
+ --ax-base-size: 8px;
6
+ --ax-base-ratio: 5;
7
+ // Create Sizes
8
+ @each $name, $size in $sizes {
9
+ @if type-of($size) == "map" {
10
+ @each $subname, $variant in $size {
11
+ @if $name== "" {
12
+ --ax-size-#{$name}#{$subname}: #{$variant};
13
+ } @else {
14
+ --ax-size-#{$name}-#{$subname}: #{$variant};
15
+ }
16
+ }
17
+ }
18
+ }
19
+ // Create Colors
20
+ @each $name, $color in $colors {
21
+ @if type-of($color) == "map" {
22
+ @each $subname, $variant in $color {
23
+ @if $subname== "" {
24
+ --ax-#{$name}-#{$color-suffix}: #{$variant};
25
+ } @else {
26
+ --ax-#{$name}-#{$subname}-#{$color-suffix}: #{$variant};
27
+ }
28
+ }
29
+ } @else {
30
+ --ax-#{$name}-#{$color-suffix}: #{$color};
31
+ }
32
+ }
33
+ }
34
+
35
+ // Sizes
36
+ .ax {
37
+ &.form-control {
38
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
39
+ padding: 0 1rem;
40
+ font-size: 1rem;
41
+ font-weight: 500;
42
+ &.sm {
43
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
44
+ padding: 0 0.3rem;
45
+ font-size: 0.875rem;
46
+ &.ax-button-icon {
47
+ padding: 0.3rem;
48
+ }
49
+ }
50
+ &.md {
51
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
52
+ padding: 0 1rem;
53
+ font-size: 1rem;
54
+ font-weight: 500;
55
+ &.ax-button-icon {
56
+ padding: 0.7rem;
57
+ }
58
+ }
59
+ &.lg {
60
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
61
+ padding: 0 0.8rem;
62
+ font-size: 1.5rem;
63
+ &.ax-button-icon {
64
+ padding: 0.9rem;
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ // @each $name,
71
+ // $size in $sizes {
72
+ // .ax {
73
+ // @if type-of($size)=="map" {
74
+ // @each $subname,
75
+ // $variant in $size {
76
+ // @if $name=="" {
77
+ // &.#{$subname} {
78
+ // font-size: var(--ax-size-#{$subname}) !important;
79
+ // }
80
+ // }
81
+ // }
82
+ // }
83
+ // }
84
+ // }
85
+ @each $name, $size in $sizes {
86
+ @if type-of($size) == "map" {
87
+ @each $subname, $variant in $size {
88
+ @if $name== "" {
89
+ .ax-mrg-#{$subname} {
90
+ margin: var(--ax-size-#{$subname}) !important;
91
+ }
92
+ .ax-pad-#{$subname} {
93
+ padding: var(--ax-size-#{$subname}) !important;
94
+ }
95
+ }
96
+ }
97
+ }
98
+ }
99
+
100
+ // Create Classes
101
+ @each $name, $color in $colors {
102
+ .ax {
103
+ @if type-of($color) == "map" {
104
+ @each $subname, $variant in $color {
105
+ @if $subname== "" {
106
+ &.bg-#{$name} {
107
+ background-color: var(--ax-#{$name}-#{$color-suffix});
108
+ }
109
+ &.bg-light-#{$name} {
110
+ background-color: var(--ax-#{$name}-light-#{$color-suffix});
111
+ }
112
+ &.bg-dark-#{$name} {
113
+ background-color: var(--ax-#{$name}-dark-#{$color-suffix});
114
+ }
115
+ &.bg-lighten-#{$name} {
116
+ background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
117
+ }
118
+ &.text-#{$name} {
119
+ color: var(--ax-#{$name}-#{$color-suffix});
120
+ }
121
+ &.lighten-#{$name} {
122
+ color: var(--ax-#{$name}-#{$color-suffix});
123
+ background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
124
+ }
125
+ &.#{$name} {
126
+ border: 1px solid;
127
+ border-color: var(--ax-#{$name}-#{$color-suffix});
128
+ @if ($name == "light") {
129
+ background: var(--ax-white-#{$color-suffix});
130
+ color: var(--ax-dark-#{$color-suffix});
131
+ border-color: var(--ax-border-color);
132
+
133
+ } @else {
134
+ background: var(--ax-#{$name}-#{$color-suffix});
135
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
136
+ }
137
+ &:hover,
138
+ &:focus {
139
+ background: var(--ax-#{$name}-dark-#{$color-suffix});
140
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
141
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
142
+ }
143
+ &:active {
144
+ background: var(--ax-#{$name}-light-#{$color-suffix});
145
+ }
146
+ &.selected{
147
+ background: var(--ax-#{$name}-dark-#{$color-suffix});
148
+ }
149
+ &.disabled {
150
+ background: var(--ax-gray-color) !important;
151
+ color: var(--ax-gray-fore-color) !important;
152
+ border-color: var(--ax-gray-color) !important;
153
+ cursor: not-allowed;
154
+ &:hover,
155
+ &:active {
156
+ background: var(--ax-gray-color) !important;
157
+ color: var(--ax-gray-fore-color) !important;
158
+ }
159
+ }
160
+ &.twotone {
161
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
162
+ border-color: transparent;
163
+
164
+ @if ($name == "light") {
165
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
166
+ } @else {
167
+ color: var(--ax-#{$name}-#{$color-suffix});
168
+ }
169
+
170
+ &:hover,
171
+ &:focus {
172
+ background: var(--ax-#{$name}-light-#{$color-suffix});
173
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
174
+ }
175
+ &:active {
176
+ background: var(--ax-#{$name}-dark-#{$color-suffix});
177
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
178
+ }
179
+ &.selected{
180
+ background: var(--ax-#{$name}-dark-#{$color-suffix});
181
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
182
+ }
183
+ }
184
+ &.outline {
185
+ background: transparent;
186
+ border: 1px solid;
187
+ border-color: var(--ax-#{$name}-#{$color-suffix});
188
+ @if ($name == "light") {
189
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
190
+ } @else {
191
+ color: var(--ax-#{$name}-#{$color-suffix});
192
+ }
193
+
194
+ &:hover,
195
+ &:focus {
196
+ background: var(--ax-#{$name}-#{$color-suffix});
197
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
198
+ }
199
+ &:active {
200
+ background: var(--ax-#{$name}-light-#{$color-suffix});
201
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
202
+ border-color: var(--ax-#{$name}-light-#{$color-suffix});
203
+ }
204
+ &.selected{
205
+ background: var(--ax-#{$name}-dark-#{$color-suffix});
206
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
207
+ border-color: var(--ax-#{$name}-dark-#{$color-suffix});
208
+ }
209
+ }
210
+ &.blank {
211
+ background: transparent;
212
+ border-color: transparent;
213
+
214
+ @if ($name == "light") {
215
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
216
+ } @else {
217
+ color: var(--ax-#{$name}-#{$color-suffix});
218
+ }
219
+
220
+ &:hover,
221
+ &:focus {
222
+ @if ($name == "light") {
223
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
224
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
225
+ } @else {
226
+ background: var(--ax-#{$name}-trans-light-#{$color-suffix});
227
+ color: var(--ax-#{$name}-#{$color-suffix});
228
+ }
229
+ }
230
+ &:active {
231
+ @if ($name == "light") {
232
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
233
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
234
+ } @else {
235
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
236
+ color: var(--ax-#{$name}-#{$color-suffix});
237
+ }
238
+ }
239
+ &.selected{
240
+ @if ($name == "light") {
241
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
242
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
243
+ } @else {
244
+ background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
245
+ color: var(--ax-#{$name}-#{$color-suffix});
246
+ }
247
+ }
248
+ }
249
+ &.panel {
250
+ color: var(--ax-#{$name}-fore-#{$color-suffix});
251
+ background-color: var(--ax-#{$name}-#{$color-suffix});
252
+ }
253
+ }
254
+ }
255
+ }
256
+ }
257
+ }
258
+ }