@acorex/styles 3.0.6 → 3.0.11
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.
- package/package.json +1 -1
- package/scss/calendar.scss +107 -128
- package/scss/forms.scss +53 -18
- package/scss/master.scss +11 -8
- package/scss/menu.scss +67 -24
- package/scss/treeview.scss +2 -2
- package/scss/variables.scss +95 -3
package/package.json
CHANGED
package/scss/calendar.scss
CHANGED
|
@@ -1,151 +1,130 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
.ax-calendar {
|
|
2
|
+
border: 1px solid var(--ax-border-color);
|
|
3
|
+
border-radius: var(--ax-size-border-radius);
|
|
4
|
+
.ax-calendar-header {
|
|
5
|
+
display: grid;
|
|
6
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
7
|
+
padding-top: 0.5rem;
|
|
8
|
+
padding-bottom: 0.5rem;
|
|
9
|
+
padding-left: 0.5rem;
|
|
10
|
+
padding-right: 0.5rem;
|
|
11
|
+
border-bottom: 1px solid var(--ax-border-color);
|
|
12
|
+
.ax-nav-button {
|
|
13
|
+
grid-column: span 8 / span 8;
|
|
14
|
+
justify-content: flex-start;
|
|
15
|
+
}
|
|
16
|
+
.ax-controll-button {
|
|
17
|
+
grid-column: span 2 / span 2;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
margin-inline-start: 0.25rem;
|
|
20
|
+
}
|
|
4
21
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
.ax
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
.
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
.
|
|
19
|
-
|
|
20
|
-
-webkit-transform: scaleX(-1);
|
|
21
|
-
transform: scaleX(-1);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
.arrows {
|
|
26
|
-
width: 3em;
|
|
27
|
-
height: 3em;
|
|
22
|
+
.ax-calendar-body {
|
|
23
|
+
padding: 0.5rem;
|
|
24
|
+
.ax-month-items,
|
|
25
|
+
.ax-day-items {
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
28
|
+
}
|
|
29
|
+
.ax-month-container,
|
|
30
|
+
.ax-year-container {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
33
|
+
>div {
|
|
34
|
+
font-size: 1rem;
|
|
35
|
+
line-height: 1.25rem;
|
|
36
|
+
position: relative;
|
|
28
37
|
display: flex;
|
|
29
38
|
align-items: center;
|
|
30
39
|
justify-content: center;
|
|
31
40
|
cursor: pointer;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
41
|
+
margin: 0.125rem;
|
|
42
|
+
border-radius: 0.25rem;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
background-color: rgb(241, 241, 241);
|
|
45
|
+
&::before {
|
|
46
|
+
content: "";
|
|
47
|
+
padding-top: 100%;
|
|
48
|
+
float: left;
|
|
38
49
|
}
|
|
39
|
-
|
|
40
|
-
|
|
50
|
+
&::after {
|
|
51
|
+
content: "";
|
|
52
|
+
display: block;
|
|
53
|
+
clear: both;
|
|
41
54
|
}
|
|
42
55
|
}
|
|
43
|
-
|
|
56
|
+
}
|
|
57
|
+
.ax-month-items {
|
|
58
|
+
margin: 0.5rem 0;
|
|
59
|
+
.ax-month-item {
|
|
60
|
+
font-size: 1rem;
|
|
61
|
+
line-height: 1.25rem;
|
|
62
|
+
text-align: center;
|
|
63
|
+
position: relative;
|
|
44
64
|
display: flex;
|
|
45
65
|
align-items: center;
|
|
46
66
|
justify-content: center;
|
|
47
|
-
cursor:
|
|
67
|
+
cursor: text;
|
|
68
|
+
margin: 0.125rem;
|
|
48
69
|
}
|
|
49
70
|
}
|
|
50
|
-
.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
opacity: 0.5;
|
|
67
|
-
cursor: not-allowed !important;
|
|
68
|
-
&:hover {
|
|
69
|
-
color: unset !important;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
71
|
+
.ax-day-items {
|
|
72
|
+
.ax-day-item {
|
|
73
|
+
font-size: 1rem;
|
|
74
|
+
line-height: 1.25rem;
|
|
75
|
+
position: relative;
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
margin: 0.125rem;
|
|
81
|
+
border-radius: 0.25rem;
|
|
82
|
+
font-weight: 500;
|
|
83
|
+
&::before {
|
|
84
|
+
content: "";
|
|
85
|
+
padding-top: 100%;
|
|
86
|
+
float: left;
|
|
72
87
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
&:hover,
|
|
87
|
-
&.focused {
|
|
88
|
-
background: var(--ax-primary-trans-dark-color);
|
|
89
|
-
border: 1px solid transparent;
|
|
90
|
-
color: var(--ax-primay-color);
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
}
|
|
93
|
-
&.next-month {
|
|
94
|
-
visibility: hidden;
|
|
95
|
-
&:hover {
|
|
96
|
-
background: var(--ax-white-color);
|
|
97
|
-
color: var(--ax-gray-color);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
&.selected {
|
|
101
|
-
background: var(--ax-success-color) !important;
|
|
102
|
-
color: var(--ax-success-fore-color) !important;
|
|
103
|
-
border: 1px solid !important;
|
|
104
|
-
border-color: var(--ax-success-color) !important;
|
|
88
|
+
&::after {
|
|
89
|
+
content: "";
|
|
90
|
+
display: block;
|
|
91
|
+
clear: both;
|
|
92
|
+
}
|
|
93
|
+
&:hover {
|
|
94
|
+
background-color: var(--ax-light-light-color);
|
|
95
|
+
}
|
|
96
|
+
&.holiday {
|
|
97
|
+
color: var(--ax-danger-color);
|
|
98
|
+
&:hover {
|
|
99
|
+
color: #000;
|
|
105
100
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
101
|
+
}
|
|
102
|
+
&.today {
|
|
103
|
+
background-color: var(--ax-success-color);
|
|
104
|
+
color: var(--ax-success-fore-color);
|
|
105
|
+
}
|
|
106
|
+
&.selected {
|
|
107
|
+
background-color: var(--ax-primary-color);
|
|
108
|
+
color: var(--ax-primary-fore-color);
|
|
109
|
+
&:hover {
|
|
110
110
|
color: var(--ax-primary-fore-color);
|
|
111
|
-
&.unselect {
|
|
112
|
-
border: 1px solid;
|
|
113
|
-
border-color: var(--ax-primary-color);
|
|
114
|
-
background: var(--ax-primary-color);
|
|
115
|
-
color: var(--ax-primary-fore-color);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
&.disabled {
|
|
119
|
-
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAm0lEQVRIx7XVwQnAIAwF0ExSdBF1a6Er9dIRqsVAazWJmh4+iuBT4YMQ4w4pWxk1clt5YlOOFKeAumJZXAgKOKIBb6yBv9AansU/aAsexZtoD5biXZSCOZxEObiHs6gErnERKoURP0uCZM9IpRB2WvDz+eIqzvRUhMNkT1mcQz1xsKfwWZTFV1ASX0W7uAbaxPOCUUBr3MBfn+kF3CNLT2/yky4AAAAASUVORK5CYII=") center center no-repeat;
|
|
120
|
-
cursor: not-allowed;
|
|
121
|
-
&:hover {
|
|
122
|
-
color: var(--ax-danger-color);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
&.holiday {
|
|
126
|
-
color: var(--ax-danger-color);
|
|
127
|
-
font-weight: bold;
|
|
128
|
-
&:hover {
|
|
129
|
-
&:not(.selected) {
|
|
130
|
-
background-color: var(--ax-danger-trans-light-color);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
111
|
}
|
|
134
112
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
}
|
|
113
|
+
&.next-month {
|
|
114
|
+
opacity: 0.5;
|
|
115
|
+
}
|
|
116
|
+
&.unselect {
|
|
117
|
+
cursor: not-allowed;
|
|
118
|
+
position: relative;
|
|
119
|
+
background-color: rgb(245, 138, 138, 30%);
|
|
120
|
+
color: var(--ax-danger-color);
|
|
121
|
+
|
|
122
|
+
|
|
147
123
|
}
|
|
148
124
|
}
|
|
149
125
|
}
|
|
150
126
|
}
|
|
127
|
+
.ax-calendar-footer {
|
|
128
|
+
padding: 0.5rem;
|
|
129
|
+
}
|
|
151
130
|
}
|
package/scss/forms.scss
CHANGED
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
background-color: var(--ax-primary-color);
|
|
51
51
|
color: white;
|
|
52
52
|
}
|
|
53
|
-
&.error {
|
|
53
|
+
&.error-state {
|
|
54
54
|
border-color: var(--ax-danger-color) !important;
|
|
55
|
-
|
|
55
|
+
& > input {
|
|
56
56
|
&::-webkit-input-placeholder {
|
|
57
57
|
color: var(--ax-danger-color) !important;
|
|
58
58
|
}
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
font-style: normal;
|
|
75
75
|
display: inline-flex;
|
|
76
76
|
color: #1d1d1d;
|
|
77
|
+
|
|
77
78
|
&.icon {
|
|
78
79
|
input {
|
|
79
80
|
padding-inline-start: 2.1em;
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
.text-right {
|
|
86
87
|
padding-inline-end: 0.5em !important;
|
|
87
88
|
}
|
|
88
|
-
|
|
89
|
+
& > i.icon {
|
|
89
90
|
cursor: default;
|
|
90
91
|
position: absolute;
|
|
91
92
|
text-align: center;
|
|
@@ -105,12 +106,12 @@
|
|
|
105
106
|
}
|
|
106
107
|
}
|
|
107
108
|
&.disabled {
|
|
108
|
-
|
|
109
|
+
& > input {
|
|
109
110
|
background-color: var(--ax-light-light-color) !important;
|
|
110
111
|
cursor: not-allowed !important;
|
|
111
112
|
}
|
|
112
113
|
}
|
|
113
|
-
|
|
114
|
+
& > input {
|
|
114
115
|
margin: 0;
|
|
115
116
|
max-width: 100%;
|
|
116
117
|
flex: 1 0 auto;
|
|
@@ -119,6 +120,7 @@
|
|
|
119
120
|
text-align: inherit;
|
|
120
121
|
font-size: inherit;
|
|
121
122
|
font-family: inherit;
|
|
123
|
+
font-weight: 500;
|
|
122
124
|
background: #fff;
|
|
123
125
|
border: none !important;
|
|
124
126
|
color: rgba(0, 0, 0, 0.87);
|
|
@@ -161,7 +163,7 @@
|
|
|
161
163
|
&::-ms-input-placeholder {
|
|
162
164
|
text-align: left !important;
|
|
163
165
|
}
|
|
164
|
-
|
|
166
|
+
::placeholder {
|
|
165
167
|
text-align: left !important;
|
|
166
168
|
}
|
|
167
169
|
}
|
|
@@ -193,7 +195,7 @@
|
|
|
193
195
|
-webkit-box-shadow: none;
|
|
194
196
|
box-shadow: none;
|
|
195
197
|
@include ax-transition-all();
|
|
196
|
-
|
|
198
|
+
& + i.icon {
|
|
197
199
|
opacity: 1 !important;
|
|
198
200
|
color: var(--ax-primary-color);
|
|
199
201
|
}
|
|
@@ -220,6 +222,7 @@
|
|
|
220
222
|
display: block;
|
|
221
223
|
font-size: inherit !important;
|
|
222
224
|
padding: 0.5em 0;
|
|
225
|
+
font-weight: 500;
|
|
223
226
|
}
|
|
224
227
|
&.form-group {
|
|
225
228
|
display: inline-flex;
|
|
@@ -237,8 +240,16 @@
|
|
|
237
240
|
border: 1px solid;
|
|
238
241
|
border-color: var(--ax-border-color);
|
|
239
242
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
243
|
+
|
|
244
|
+
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
240
245
|
&:focus-within {
|
|
241
246
|
border-color: var(--ax-primary-color);
|
|
247
|
+
box-shadow: 0px 0px 0px 1px var(--ax-primary-color);
|
|
248
|
+
.input {
|
|
249
|
+
i {
|
|
250
|
+
color: var(--ax-primary-color) !important;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
242
253
|
}
|
|
243
254
|
&.required-state {
|
|
244
255
|
// position: relative;
|
|
@@ -272,19 +283,50 @@
|
|
|
272
283
|
border-inline-start-width: 2px;
|
|
273
284
|
border-inline-start-style: solid;
|
|
274
285
|
border-inline-start-color: var(--ax-warning-color) !important;
|
|
286
|
+
&:focus-within {
|
|
287
|
+
border-color: var(--ax-warning-color);
|
|
288
|
+
box-shadow: 0px 0px 0px 1px var(--ax-warning-color);
|
|
289
|
+
.input {
|
|
290
|
+
i {
|
|
291
|
+
color: var(--ax-warning-color) !important;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
275
296
|
}
|
|
276
297
|
&.success-state {
|
|
277
298
|
border-inline-start-width: 2px;
|
|
278
299
|
border-inline-start-style: solid;
|
|
279
300
|
border-inline-start-color: var(--ax-success-color) !important;
|
|
301
|
+
&:focus-within {
|
|
302
|
+
border-color: var(--ax-success-color);
|
|
303
|
+
box-shadow: 0px 0px 0px 1px var(--ax-success-color);
|
|
304
|
+
.input {
|
|
305
|
+
i {
|
|
306
|
+
color: var(--ax-success-color) !important;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
}
|
|
280
310
|
}
|
|
281
311
|
&.error-state {
|
|
312
|
+
border-inline-start-width: 2px;
|
|
313
|
+
border-inline-start-style: solid;
|
|
314
|
+
border-inline-start-color: var(--ax-danger-color) !important;
|
|
282
315
|
&::before {
|
|
283
316
|
border-inline-start-color: var(--ax-danger-trans-dark-color);
|
|
284
317
|
}
|
|
285
318
|
&::after {
|
|
286
319
|
color: var(--ax-danger-dark-color);
|
|
287
320
|
}
|
|
321
|
+
&:focus-within {
|
|
322
|
+
border-color: var(--ax-danger-color);
|
|
323
|
+
box-shadow: 0px 0px 0px 1px var(--ax-danger-color);
|
|
324
|
+
.input {
|
|
325
|
+
i {
|
|
326
|
+
color: var(--ax-danger-color) !important;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
}
|
|
288
330
|
}
|
|
289
331
|
@include ax-border-radius(var(--ax-size-border-radius));
|
|
290
332
|
&.disabled {
|
|
@@ -296,14 +338,7 @@
|
|
|
296
338
|
cursor: no-drop;
|
|
297
339
|
}
|
|
298
340
|
}
|
|
299
|
-
|
|
300
|
-
border-color: var(--ax-primary-color) !important;
|
|
301
|
-
.input {
|
|
302
|
-
i {
|
|
303
|
-
color: var(--ax-primary-color) !important;
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
}
|
|
341
|
+
|
|
307
342
|
.form-item {
|
|
308
343
|
&:not(.error) {
|
|
309
344
|
border: none;
|
|
@@ -356,7 +391,7 @@
|
|
|
356
391
|
&::-ms-input-placeholder {
|
|
357
392
|
text-align: left !important;
|
|
358
393
|
}
|
|
359
|
-
|
|
394
|
+
::placeholder {
|
|
360
395
|
text-align: left !important;
|
|
361
396
|
}
|
|
362
397
|
}
|
|
@@ -475,8 +510,8 @@
|
|
|
475
510
|
background-color: var(--ax-gray-trans-light-color);
|
|
476
511
|
}
|
|
477
512
|
}
|
|
478
|
-
|
|
513
|
+
& > div {
|
|
479
514
|
flex: 1 1 auto;
|
|
480
515
|
}
|
|
481
516
|
}
|
|
482
|
-
}
|
|
517
|
+
}
|
package/scss/master.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@import "./variables.scss";
|
|
2
2
|
:root {
|
|
3
|
-
--ax-border-color: #
|
|
3
|
+
--ax-border-color: #d1d5db;
|
|
4
4
|
--ax-border-dark-color: rgba(34, 36, 38, 0.3);
|
|
5
5
|
// Create Sizes
|
|
6
6
|
@each $name,
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
.ax {
|
|
42
42
|
&.form-control {
|
|
43
43
|
height: 40px;
|
|
44
|
-
padding:
|
|
44
|
+
padding: 5px 15px;
|
|
45
45
|
font-size: 1rem;
|
|
46
46
|
font-weight: 400;
|
|
47
47
|
&.sm {
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
}
|
|
52
52
|
&.md {
|
|
53
53
|
height: 40px;
|
|
54
|
-
padding:
|
|
54
|
+
padding: 5px 15px;
|
|
55
55
|
font-size: 1rem;
|
|
56
|
-
font-weight:
|
|
56
|
+
font-weight: 500;
|
|
57
57
|
}
|
|
58
58
|
&.lg {
|
|
59
59
|
height: 50px;
|
|
@@ -149,11 +149,9 @@ $color in $colors {
|
|
|
149
149
|
}
|
|
150
150
|
&.blank {
|
|
151
151
|
color: var(--ax-#{$name}-#{$color-suffix});
|
|
152
|
-
background-color: var(--ax
|
|
152
|
+
background-color: var(--ax-white-color);
|
|
153
153
|
&.disabled {
|
|
154
154
|
i {
|
|
155
|
-
background: var(--ax-light-light-color) !important;
|
|
156
|
-
border-color: var(--ax-light-light-color) !important;
|
|
157
155
|
color: var(--ax-gray-dark-color) !important;
|
|
158
156
|
&:hover {
|
|
159
157
|
color: var(--ax-gray-dark-color) !important;
|
|
@@ -163,6 +161,10 @@ $color in $colors {
|
|
|
163
161
|
background: var(--ax-light-light-color) !important;
|
|
164
162
|
border-color: var(--ax-light-light-color) !important;
|
|
165
163
|
color: var(--ax-gray-dark-color) !important;
|
|
164
|
+
i{
|
|
165
|
+
color: var(--ax-gray-dark-color) !important;
|
|
166
|
+
|
|
167
|
+
}
|
|
166
168
|
}
|
|
167
169
|
}
|
|
168
170
|
// i {
|
|
@@ -175,7 +177,7 @@ $color in $colors {
|
|
|
175
177
|
// -webkit-border-radius: 4px;
|
|
176
178
|
// }
|
|
177
179
|
&:hover {
|
|
178
|
-
background-color: var(--ax-#{$name}-#{$color-suffix}) !important;
|
|
180
|
+
background-color: var(--ax-#{$name}-light-#{$color-suffix}) !important;
|
|
179
181
|
color: var(--ax-#{$name}-fore-#{$color-suffix}) !important;
|
|
180
182
|
transition: all 0.3s;
|
|
181
183
|
i {
|
|
@@ -190,6 +192,7 @@ $color in $colors {
|
|
|
190
192
|
border-style: solid;
|
|
191
193
|
border-color: var(--ax-#{$name}-#{$color-suffix});
|
|
192
194
|
outline-color:var(--ax-#{$name}-#{$color-suffix});
|
|
195
|
+
font-weight: 500;
|
|
193
196
|
&:hover {
|
|
194
197
|
background-color: var(--ax-#{$name}-light-#{$color-suffix});
|
|
195
198
|
border-color: var(--ax-#{$name}-light-#{$color-suffix});
|
package/scss/menu.scss
CHANGED
|
@@ -10,11 +10,44 @@
|
|
|
10
10
|
display: block;
|
|
11
11
|
position: relative;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
.rtl {
|
|
14
|
+
.ax {
|
|
15
|
+
&.nav-menu {
|
|
16
|
+
li.ax-menu-item {
|
|
17
|
+
&:hover {
|
|
18
|
+
&::after {
|
|
19
|
+
right: 0 !important;
|
|
20
|
+
left: initial !important;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
15
27
|
.ax {
|
|
16
28
|
&.nav-menu {
|
|
17
|
-
|
|
29
|
+
li.tooltip {
|
|
30
|
+
position: relative; /* making the .tooltip span a container for the tooltip text */
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
&::before {
|
|
34
|
+
display: block;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&::before {
|
|
38
|
+
content: attr(data-text);
|
|
39
|
+
position: absolute;
|
|
40
|
+
bottom: -85%;
|
|
41
|
+
left: 0;
|
|
42
|
+
padding: 0.5rem 1rem;
|
|
43
|
+
border-radius: var(--ax-size-border-radius);
|
|
44
|
+
background: var(--ax-dark-color);
|
|
45
|
+
color: var(--ax-dark-fore-color);
|
|
46
|
+
text-align: center;
|
|
47
|
+
display: none; /* hide by default */
|
|
48
|
+
z-index: 1;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
18
51
|
&.rtl {
|
|
19
52
|
ul {
|
|
20
53
|
right: -9999px !important;
|
|
@@ -22,17 +55,23 @@
|
|
|
22
55
|
|
|
23
56
|
li {
|
|
24
57
|
&:hover {
|
|
25
|
-
>ul {
|
|
58
|
+
> ul {
|
|
26
59
|
right: 100% !important;
|
|
27
60
|
left: initial !important;
|
|
28
61
|
}
|
|
29
62
|
}
|
|
63
|
+
.drop-icon {
|
|
64
|
+
position: absolute;
|
|
65
|
+
left: 10px;
|
|
66
|
+
right: initial;
|
|
67
|
+
}
|
|
30
68
|
}
|
|
31
69
|
}
|
|
32
70
|
|
|
33
71
|
li {
|
|
72
|
+
|
|
34
73
|
&:hover {
|
|
35
|
-
>ul {
|
|
74
|
+
> ul {
|
|
36
75
|
right: 0 !important;
|
|
37
76
|
left: initial !important;
|
|
38
77
|
}
|
|
@@ -46,8 +85,8 @@
|
|
|
46
85
|
top: 100%;
|
|
47
86
|
left: -9999px;
|
|
48
87
|
z-index: 50000;
|
|
49
|
-
-webkit-transition: opacity .3s;
|
|
50
|
-
transition: opacity .3s;
|
|
88
|
+
-webkit-transition: opacity 0.3s;
|
|
89
|
+
transition: opacity 0.3s;
|
|
51
90
|
min-width: 12em;
|
|
52
91
|
box-shadow: 0 1px 7px 0 var(--ax-border-color);
|
|
53
92
|
background: #fff;
|
|
@@ -57,13 +96,14 @@
|
|
|
57
96
|
|
|
58
97
|
.drop-icon {
|
|
59
98
|
position: absolute;
|
|
60
|
-
|
|
99
|
+
right: 10px;
|
|
100
|
+
left: initial;
|
|
61
101
|
}
|
|
62
102
|
|
|
63
103
|
&:hover {
|
|
64
104
|
background-color: var(--ax-border-color);
|
|
65
105
|
|
|
66
|
-
>ul {
|
|
106
|
+
> ul {
|
|
67
107
|
top: 0;
|
|
68
108
|
left: 100%;
|
|
69
109
|
}
|
|
@@ -91,12 +131,11 @@
|
|
|
91
131
|
border-color: var(--ax-light-light-color) !important;
|
|
92
132
|
color: var(--ax-gray-dark-color) !important;
|
|
93
133
|
cursor: not-allowed !important;
|
|
94
|
-
|
|
95
134
|
}
|
|
96
135
|
}
|
|
97
136
|
|
|
98
137
|
&:hover {
|
|
99
|
-
>ul {
|
|
138
|
+
> ul {
|
|
100
139
|
left: 0;
|
|
101
140
|
opacity: 1;
|
|
102
141
|
z-index: 1000;
|
|
@@ -126,7 +165,7 @@
|
|
|
126
165
|
}
|
|
127
166
|
|
|
128
167
|
&.nav-center {
|
|
129
|
-
>li {
|
|
168
|
+
> li {
|
|
130
169
|
display: inline-flex;
|
|
131
170
|
}
|
|
132
171
|
}
|
|
@@ -144,20 +183,19 @@
|
|
|
144
183
|
}
|
|
145
184
|
}
|
|
146
185
|
|
|
147
|
-
|
|
148
186
|
li {
|
|
149
187
|
width: 100%;
|
|
150
188
|
float: none;
|
|
151
189
|
}
|
|
152
190
|
}
|
|
153
191
|
|
|
154
|
-
>li {
|
|
155
|
-
|
|
192
|
+
> li {
|
|
193
|
+
> .nav-active {
|
|
156
194
|
background-color: rgba(0, 0, 0, 0.05);
|
|
157
195
|
}
|
|
158
196
|
|
|
159
197
|
:hover {
|
|
160
|
-
>ul {
|
|
198
|
+
> ul {
|
|
161
199
|
left: 100%;
|
|
162
200
|
|
|
163
201
|
[dir="rtl"] & {
|
|
@@ -172,7 +210,8 @@
|
|
|
172
210
|
|
|
173
211
|
.ax.nav-menu span:hover,
|
|
174
212
|
.ax.nav-menu span:focus,
|
|
175
|
-
.ax.nav-menu li:hover span {
|
|
213
|
+
.ax.nav-menu li:hover span {
|
|
214
|
+
}
|
|
176
215
|
|
|
177
216
|
/* 2 */
|
|
178
217
|
.ax.nav-menu li li span,
|
|
@@ -185,22 +224,27 @@
|
|
|
185
224
|
/* 2: hover/persistence */
|
|
186
225
|
.ax.nav-menu li:hover li span:hover,
|
|
187
226
|
.ax.nav-menu li:hover li span:focus,
|
|
188
|
-
.ax.nav-menu li:hover li:hover span {
|
|
227
|
+
.ax.nav-menu li:hover li:hover span {
|
|
228
|
+
}
|
|
189
229
|
|
|
190
230
|
/* 3 */
|
|
191
|
-
.ax.nav-menu li:hover li:hover li span {
|
|
231
|
+
.ax.nav-menu li:hover li:hover li span {
|
|
232
|
+
}
|
|
192
233
|
|
|
193
234
|
/* 3: hover/persistence */
|
|
194
235
|
.ax.nav-menu li:hover li:hover li span:hover,
|
|
195
236
|
.ax.nav-menu li:hover li:hover li span:focus,
|
|
196
|
-
.ax.nav-menu li:hover li:hover li:hover span {
|
|
237
|
+
.ax.nav-menu li:hover li:hover li:hover span {
|
|
238
|
+
}
|
|
197
239
|
|
|
198
240
|
/* 4 */
|
|
199
|
-
.ax.nav-menu li:hover li:hover li:hover li span {
|
|
241
|
+
.ax.nav-menu li:hover li:hover li:hover li span {
|
|
242
|
+
}
|
|
200
243
|
|
|
201
244
|
/* 4: hover */
|
|
202
245
|
.ax.nav-menu li:hover li:hover li:hover li span:hover,
|
|
203
|
-
.ax.nav-menu li:hover li:hover li:hover li span:focus {
|
|
246
|
+
.ax.nav-menu li:hover li:hover li:hover li span:focus {
|
|
247
|
+
}
|
|
204
248
|
|
|
205
249
|
/* vertical */
|
|
206
250
|
// .nav-vertical {
|
|
@@ -275,7 +319,6 @@
|
|
|
275
319
|
|
|
276
320
|
/* root: hover/persistence */
|
|
277
321
|
|
|
278
|
-
|
|
279
322
|
// .ax {
|
|
280
323
|
// &.menu-container {
|
|
281
324
|
// > ul {
|
|
@@ -425,4 +468,4 @@
|
|
|
425
468
|
// }
|
|
426
469
|
// }
|
|
427
470
|
// }
|
|
428
|
-
// }
|
|
471
|
+
// }
|
package/scss/treeview.scss
CHANGED
|
@@ -48,7 +48,7 @@ $left: -($ident);
|
|
|
48
48
|
left: -1em;
|
|
49
49
|
border-left: 1px solid var(--ax-gray-dark-color);
|
|
50
50
|
border-bottom: 1px solid var(--ax-gray-dark-color);
|
|
51
|
-
width:
|
|
51
|
+
width: 1.5em;
|
|
52
52
|
height: 17.8px;
|
|
53
53
|
[dir="rtl"] & {
|
|
54
54
|
right: -1em !important;
|
|
@@ -130,4 +130,4 @@ $left: -($ident);
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
|
-
}
|
|
133
|
+
}
|
package/scss/variables.scss
CHANGED
|
@@ -4,11 +4,103 @@ $white: #fff;
|
|
|
4
4
|
$black: #000;
|
|
5
5
|
$primary: #3b82f6;
|
|
6
6
|
$secondary: #ec4899;
|
|
7
|
-
$gray: #
|
|
7
|
+
$gray: #6b7280;
|
|
8
8
|
$success: #10b981;
|
|
9
9
|
$info: #8b5cf6;
|
|
10
10
|
$warning: #f59e0b;
|
|
11
11
|
$danger: #ef4444;
|
|
12
12
|
$shadow: rgba(0, 0, 0, 0.1);
|
|
13
|
-
$colors: (
|
|
14
|
-
|
|
13
|
+
$colors: (
|
|
14
|
+
"white": $white,
|
|
15
|
+
"black": $black,
|
|
16
|
+
"trans-white": transparentize($white, 0.85),
|
|
17
|
+
"trans-black": transparentize($black, 0.85),
|
|
18
|
+
"primary": (
|
|
19
|
+
"": $primary,
|
|
20
|
+
"fore": $white,
|
|
21
|
+
"light": lighten($primary, 7%),
|
|
22
|
+
"dark": darken($primary, 7%),
|
|
23
|
+
"trans-dark": transparentize($primary, 0.85),
|
|
24
|
+
"trans-light": transparentize($primary, 0.85),
|
|
25
|
+
),
|
|
26
|
+
"secondary": (
|
|
27
|
+
"": $secondary,
|
|
28
|
+
"fore": $white,
|
|
29
|
+
"light": lighten($secondary, 15%),
|
|
30
|
+
"dark": darken($secondary, 7%),
|
|
31
|
+
"trans-dark": transparentize($secondary, 0.85),
|
|
32
|
+
"trans-light": transparentize($secondary, 0.85),
|
|
33
|
+
),
|
|
34
|
+
"info": (
|
|
35
|
+
"": $info,
|
|
36
|
+
"fore": $white,
|
|
37
|
+
"light": lighten($info, 15%),
|
|
38
|
+
"dark": darken($info, 15%),
|
|
39
|
+
"trans-dark": transparentize($info, 0.85),
|
|
40
|
+
"trans-light": transparentize($info, 0.85),
|
|
41
|
+
),
|
|
42
|
+
"success": (
|
|
43
|
+
"": $success,
|
|
44
|
+
"fore": $white,
|
|
45
|
+
"light": lighten($success, 15%),
|
|
46
|
+
"dark": darken($success, 15%),
|
|
47
|
+
"trans-dark": transparentize($success, 0.85),
|
|
48
|
+
"trans-light": transparentize($success, 0.85),
|
|
49
|
+
),
|
|
50
|
+
"warning": (
|
|
51
|
+
"": $warning,
|
|
52
|
+
"fore": $white,
|
|
53
|
+
"light": lighten($warning, 15%),
|
|
54
|
+
"dark": darken($warning, 15%),
|
|
55
|
+
"trans-dark": transparentize($warning, 0.85),
|
|
56
|
+
"trans-light": transparentize($warning, 0.85),
|
|
57
|
+
),
|
|
58
|
+
"danger": (
|
|
59
|
+
"": $danger,
|
|
60
|
+
"fore": $white,
|
|
61
|
+
"light": lighten($danger, 15%),
|
|
62
|
+
"dark": darken($danger, 15%),
|
|
63
|
+
"trans-dark": transparentize($danger, 0.85),
|
|
64
|
+
"trans-light": transparentize($danger, 0.85),
|
|
65
|
+
),
|
|
66
|
+
"gray": (
|
|
67
|
+
"": $gray,
|
|
68
|
+
"fore": $black,
|
|
69
|
+
"light": lighten($gray, 15%),
|
|
70
|
+
"dark": darken($gray, 15%),
|
|
71
|
+
"trans-dark": transparentize($gray, 0.85),
|
|
72
|
+
"trans-light": transparentize($gray, 0.85),
|
|
73
|
+
),
|
|
74
|
+
"light": (
|
|
75
|
+
"": darken($white, 30%),
|
|
76
|
+
"fore": $black,
|
|
77
|
+
"light": darken($white, 10%),
|
|
78
|
+
"dark": darken($white, 40%),
|
|
79
|
+
"trans-dark": transparentize($white, 0.85),
|
|
80
|
+
"trans-light": transparentize($white, 0.85),
|
|
81
|
+
),
|
|
82
|
+
"dark": (
|
|
83
|
+
"": $black,
|
|
84
|
+
"fore": $white,
|
|
85
|
+
"light": lighten($black, 15%),
|
|
86
|
+
"dark": darken($black, 15%),
|
|
87
|
+
"trans-dark": transparentize($black, 0.85),
|
|
88
|
+
"trans-light": transparentize($black, 0.85),
|
|
89
|
+
),
|
|
90
|
+
);
|
|
91
|
+
$sizes: (
|
|
92
|
+
"": (
|
|
93
|
+
xxs: 0.4em,
|
|
94
|
+
xs: 0.6em,
|
|
95
|
+
sm: 0.8em,
|
|
96
|
+
md: 1em,
|
|
97
|
+
lg: 1.2em,
|
|
98
|
+
xl: 1.4em,
|
|
99
|
+
xxl: 1.6em,
|
|
100
|
+
),
|
|
101
|
+
"border": (
|
|
102
|
+
width: 1px,
|
|
103
|
+
radius: 4px,
|
|
104
|
+
circle: 50px,
|
|
105
|
+
),
|
|
106
|
+
);
|