@acorex/styles 6.5.29 → 6.5.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 +69 -69
  9. package/scss/calendar.scss +143 -143
  10. package/scss/checkbox.scss +46 -46
  11. package/scss/context-menu.scss +74 -74
  12. package/scss/data-grid.scss +117 -117
  13. package/scss/drawer.scss +138 -138
  14. package/scss/fieldset.scss +22 -22
  15. package/scss/forms.scss +515 -515
  16. package/scss/list.scss +47 -47
  17. package/scss/master.scss +329 -329
  18. package/scss/menu.scss +130 -130
  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 +104 -104
  23. package/scss/style.scss +47 -47
  24. package/scss/tab-strip.scss +30 -30
  25. package/scss/tab.scss +36 -36
  26. package/scss/toast.scss +46 -46
  27. package/scss/tooltip.scss +54 -54
  28. package/scss/treeview.scss +151 -151
  29. package/scss/upload.scss +169 -169
  30. package/scss/variables.scss +139 -139
package/scss/menu.scss CHANGED
@@ -1,130 +1,130 @@
1
- .ax {
2
- &.nav-menu {
3
- list-style: none;
4
- margin: 0;
5
- padding: 0;
6
- display: flex;
7
- &.nav-vertical {
8
- background-color: var(--ax-white-color);
9
- flex-direction: column;
10
- ul {
11
- top: 0;
12
- inset-inline-start: -9999px;
13
- }
14
-
15
- li {
16
- width: 100%;
17
- float: none;
18
- text-align: right;
19
- }
20
- }
21
- > li {
22
- text-align: center;
23
- padding: 0.5rem;
24
- min-width: 2.375rem;
25
- margin-inline-end: 0.5rem;
26
- border-radius: var(--ax-size-border-radius);
27
- .ax-menu-item,
28
- .menu-item-start-side,
29
- .menu-item-end-side {
30
- display: flex;
31
- align-items: center;
32
- justify-content: space-between;
33
- }
34
- ul {
35
- opacity: 0;
36
- position: absolute;
37
- top: 100%;
38
- inset-inline-start: -9999px;
39
- z-index: 50000;
40
- -webkit-transition: opacity 0.3s;
41
- transition: opacity 0.3s;
42
- min-width: 12em;
43
- li {
44
- float: none;
45
-
46
- &:hover {
47
- > ul {
48
- top: 0;
49
- inset-inline-start: 100%;
50
- }
51
- }
52
- }
53
- }
54
- :hover {
55
- > ul {
56
- inset-inline-start: 100%;
57
- }
58
- }
59
- }
60
- li {
61
- cursor: pointer;
62
- position: relative;
63
-
64
- .ax-menu-item {
65
- height: 100%;
66
- display: inline-flex;
67
- align-items: center;
68
- justify-content: center;
69
- .menu-item-start-side {
70
- }
71
- .ax-menu-item-text {
72
- margin: 0 0.5rem;
73
- white-space: nowrap;
74
- }
75
-
76
- .menu-item-end-side {
77
- }
78
- }
79
-
80
- ul {
81
- list-style: none;
82
- margin: 0;
83
- padding: 0;
84
- background: #fff;
85
- border: 1px solid var(--ax-border-color);
86
- border-radius: var(--ax-size-border-radius);
87
- }
88
- &:hover {
89
- > ul {
90
- inset-inline-start: 0;
91
- opacity: 1;
92
- z-index: 1000;
93
- }
94
- }
95
- &.tooltip {
96
- position: relative;
97
- &:hover {
98
- &::before {
99
- display: block;
100
- }
101
- }
102
- &::before {
103
- content: attr(data-text);
104
- font-size: 0.875rem;
105
- position: absolute;
106
- bottom: -85%;
107
- inset-inline-start: 0;
108
- padding: 0.5rem 1rem;
109
- border-radius: var(--ax-size-border-radius);
110
- background: var(--ax-dark-color);
111
- color: var(--ax-dark-fore-color);
112
- text-align: center;
113
- display: none;
114
- z-index: 1;
115
- }
116
- }
117
- }
118
- .ax-sub-menu {
119
- display: flex;
120
- flex-direction: column;
121
- li {
122
- padding: 0.5rem;
123
- .ax-menu-item {
124
- display: flex;
125
- justify-content: space-between;
126
- }
127
- }
128
- }
129
- }
130
- }
1
+ .ax {
2
+ &.nav-menu {
3
+ list-style: none;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ &.nav-vertical {
8
+ background-color: var(--ax-white-color);
9
+ flex-direction: column;
10
+ ul {
11
+ top: 0;
12
+ inset-inline-start: -9999px;
13
+ }
14
+
15
+ li {
16
+ width: 100%;
17
+ float: none;
18
+ text-align: right;
19
+ }
20
+ }
21
+ > li {
22
+ text-align: center;
23
+ padding: 0.5rem;
24
+ min-width: 2.375rem;
25
+ margin-inline-end: 0.5rem;
26
+ border-radius: var(--ax-size-border-radius);
27
+ .ax-menu-item,
28
+ .menu-item-start-side,
29
+ .menu-item-end-side {
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ }
34
+ ul {
35
+ opacity: 0;
36
+ position: absolute;
37
+ top: 100%;
38
+ inset-inline-start: -9999px;
39
+ z-index: 50000;
40
+ -webkit-transition: opacity 0.3s;
41
+ transition: opacity 0.3s;
42
+ min-width: 12em;
43
+ li {
44
+ float: none;
45
+
46
+ &:hover {
47
+ > ul {
48
+ top: 0;
49
+ inset-inline-start: 100%;
50
+ }
51
+ }
52
+ }
53
+ }
54
+ :hover {
55
+ > ul {
56
+ inset-inline-start: 100%;
57
+ }
58
+ }
59
+ }
60
+ li {
61
+ cursor: pointer;
62
+ position: relative;
63
+
64
+ .ax-menu-item {
65
+ height: 100%;
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ .menu-item-start-side {
70
+ }
71
+ .ax-menu-item-text {
72
+ margin: 0 0.5rem;
73
+ white-space: nowrap;
74
+ }
75
+
76
+ .menu-item-end-side {
77
+ }
78
+ }
79
+
80
+ ul {
81
+ list-style: none;
82
+ margin: 0;
83
+ padding: 0;
84
+ background: #fff;
85
+ border: 1px solid var(--ax-border-color);
86
+ border-radius: var(--ax-size-border-radius);
87
+ }
88
+ &:hover {
89
+ > ul {
90
+ inset-inline-start: 0;
91
+ opacity: 1;
92
+ z-index: 1000;
93
+ }
94
+ }
95
+ &.tooltip {
96
+ position: relative;
97
+ &:hover {
98
+ &::before {
99
+ display: block;
100
+ }
101
+ }
102
+ &::before {
103
+ content: attr(data-text);
104
+ font-size: 0.875rem;
105
+ position: absolute;
106
+ bottom: -85%;
107
+ inset-inline-start: 0;
108
+ padding: 0.5rem 1rem;
109
+ border-radius: var(--ax-size-border-radius);
110
+ background: var(--ax-dark-color);
111
+ color: var(--ax-dark-fore-color);
112
+ text-align: center;
113
+ display: none;
114
+ z-index: 1;
115
+ }
116
+ }
117
+ }
118
+ .ax-sub-menu {
119
+ display: flex;
120
+ flex-direction: column;
121
+ li {
122
+ padding: 0.5rem;
123
+ .ax-menu-item {
124
+ display: flex;
125
+ justify-content: space-between;
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
package/scss/mixin.scss CHANGED
@@ -1,12 +1,12 @@
1
- @mixin ax-border-radius($size) {
2
- border-radius: $size;
3
- -moz-border-radius: $size;
4
- -webkit-border-radius: $size;
5
- -o-border-radius: $size;
6
- }
7
- @mixin ax-transition-all {
8
- transition: all 0.3s;
9
- -moz-transition: all 0.3s;
10
- -webkit-transition: all 0.3s;
11
- -o-transition: all 0.3s;
1
+ @mixin ax-border-radius($size) {
2
+ border-radius: $size;
3
+ -moz-border-radius: $size;
4
+ -webkit-border-radius: $size;
5
+ -o-border-radius: $size;
6
+ }
7
+ @mixin ax-transition-all {
8
+ transition: all 0.3s;
9
+ -moz-transition: all 0.3s;
10
+ -webkit-transition: all 0.3s;
11
+ -o-transition: all 0.3s;
12
12
  }
package/scss/page.scss CHANGED
@@ -1,54 +1,54 @@
1
- .ax-page-toolbar {
2
- position: sticky;
3
- top: 0;
4
- z-index: 1600;
5
- background: white;
6
- }
7
-
8
- .page-content-wrap {
9
- height: 100%;
10
-
11
- .inner-content {
12
- height: 100%;
13
- max-height: 90vh;
14
- }
15
- }
16
-
17
- .ax-overlay-wrapper {
18
- z-index: 1701;
19
- position: fixed;
20
- left: 0px;
21
- top: 0px;
22
- transform: translate(0px, 0px);
23
- width: 100%;
24
- height: 100%;
25
- }
26
-
27
- .ax-overlay-modal {
28
- width: 100%;
29
- height: 100%;
30
- }
31
-
32
- .ax-loading-host {
33
- display: block;
34
- position: relative;
35
- height: 100%;
36
- }
37
-
38
- .ax-loading-overlay {
39
- position: absolute !important;
40
- background: rgba(255, 255, 255, 0.5);
41
- display: flex;
42
- justify-content: center;
43
- align-content: center;
44
- align-items: center;
45
-
46
- }
47
-
48
- .ax-tab-page-host {
49
- height: 100%;
50
- display: block;
51
- position: relative;
52
- overflow-y: auto;
53
- width: 100%;
1
+ .ax-page-toolbar {
2
+ position: sticky;
3
+ top: 0;
4
+ z-index: 1600;
5
+ background: white;
6
+ }
7
+
8
+ .page-content-wrap {
9
+ height: 100%;
10
+
11
+ .inner-content {
12
+ height: 100%;
13
+ max-height: 90vh;
14
+ }
15
+ }
16
+
17
+ .ax-overlay-wrapper {
18
+ z-index: 1701;
19
+ position: fixed;
20
+ left: 0px;
21
+ top: 0px;
22
+ transform: translate(0px, 0px);
23
+ width: 100%;
24
+ height: 100%;
25
+ }
26
+
27
+ .ax-overlay-modal {
28
+ width: 100%;
29
+ height: 100%;
30
+ }
31
+
32
+ .ax-loading-host {
33
+ display: block;
34
+ position: relative;
35
+ height: 100%;
36
+ }
37
+
38
+ .ax-loading-overlay {
39
+ position: absolute !important;
40
+ background: rgba(255, 255, 255, 0.5);
41
+ display: flex;
42
+ justify-content: center;
43
+ align-content: center;
44
+ align-items: center;
45
+
46
+ }
47
+
48
+ .ax-tab-page-host {
49
+ height: 100%;
50
+ display: block;
51
+ position: relative;
52
+ overflow-y: auto;
53
+ width: 100%;
54
54
  }
package/scss/progress.scss CHANGED
@@ -1,11 +1,11 @@
1
- .ax{
2
- &.progress {
3
- background: var(--ax-light-light-color);
4
- margin: 0.2em 0;
5
- .progress-bar {
6
- background: var(--ax-primary-color);
7
- color: var(--ax-primary-fore-color);
8
- padding: 0.2em 0;
9
- }
10
- }
1
+ .ax{
2
+ &.progress {
3
+ background: var(--ax-light-light-color);
4
+ margin: 0.2em 0;
5
+ .progress-bar {
6
+ background: var(--ax-primary-color);
7
+ color: var(--ax-primary-fore-color);
8
+ padding: 0.2em 0;
9
+ }
10
+ }
11
11
  }
package/scss/selection-list.scss CHANGED
@@ -1,104 +1,104 @@
1
- .ax {
2
- &.selection-list {
3
- display: flex;
4
-
5
- &.vertical {
6
- flex-direction: column;
7
- margin-block-end: 1rem;
8
-
9
- label {
10
- margin-block-end: 1rem;
11
- }
12
- }
13
-
14
- &.horizontal {
15
- flex-direction: row;
16
- margin-block-end: 1rem;
17
-
18
- label {
19
- margin-inline-end: 1rem;
20
- }
21
- }
22
- }
23
- }
24
- .ax {
25
- &.radio {
26
- display: block;
27
- position: relative;
28
- padding-inline-start: 2em;
29
- line-height: 1.5em;
30
- cursor: pointer;
31
- font-size: inherit;
32
- -webkit-user-select: none;
33
- -moz-user-select: none;
34
- -ms-user-select: none;
35
- user-select: none;
36
- &.readonly,
37
- &.disabled {
38
- opacity: 0.7;
39
- }
40
- &.disabled {
41
- cursor: not-allowed;
42
- }
43
-
44
- }
45
-
46
- /* Hide the browser's default radio */
47
- &.radio input {
48
- position: absolute;
49
- opacity: 0;
50
- cursor: pointer;
51
- height: 0;
52
- width: 0;
53
- }
54
-
55
- /* Create a custom radio */
56
- &.radio .checkmark {
57
- position: absolute;
58
- top: 0;
59
- inset-inline-start: 0;
60
- height: 1.5em;
61
- width: 1.5em;
62
- background-color: var(--ax-white-color);
63
- border-style: solid;
64
- border-width: 1px;
65
- border-color: var(--ax-border-color);
66
- -webkit-border-radius: 50%;
67
- -moz-border-radius: 50%;
68
- border-radius: 50%;
69
- }
70
-
71
- /* On mouse-over, add a grey background color */
72
- &.radio:hover input ~ .checkmark {
73
- border-color: var(--ax-border-dark-color);
74
- }
75
-
76
- /* When the radio is checked, add a blue background */
77
- &.radio input:checked ~ .checkmark {
78
- background-color: var(--ax-white-color);
79
- border-color: var(--ax-primary-color);
80
- }
81
-
82
- /* Create the checkmark/indicator (hidden when not checked) */
83
- &.radio .checkmark:after {
84
- content: "";
85
- position: absolute;
86
- display: none;
87
- border-radius: 50%;
88
- }
89
-
90
- /* Show the checkmark when checked */
91
- &.radio input:checked ~ .checkmark:after {
92
- display: block;
93
- }
94
-
95
- /* Style the checkmark/indicator */
96
- &.radio .checkmark:after {
97
- left: 31.5%;
98
- top: 33.3%;
99
- width: 0.5em;
100
- height: 0.5em;
101
- background-color: var(--ax-primary-color);
102
- border-radius: 50%;
103
- }
104
- }
1
+ .ax {
2
+ &.selection-list {
3
+ display: flex;
4
+
5
+ &.vertical {
6
+ flex-direction: column;
7
+ margin-block-end: 1rem;
8
+
9
+ label {
10
+ margin-block-end: 1rem;
11
+ }
12
+ }
13
+
14
+ &.horizontal {
15
+ flex-direction: row;
16
+ margin-block-end: 1rem;
17
+
18
+ label {
19
+ margin-inline-end: 1rem;
20
+ }
21
+ }
22
+ }
23
+ }
24
+ .ax {
25
+ &.radio {
26
+ display: block;
27
+ position: relative;
28
+ padding-inline-start: 2em;
29
+ line-height: 1.5em;
30
+ cursor: pointer;
31
+ font-size: inherit;
32
+ -webkit-user-select: none;
33
+ -moz-user-select: none;
34
+ -ms-user-select: none;
35
+ user-select: none;
36
+ &.readonly,
37
+ &.disabled {
38
+ opacity: 0.7;
39
+ }
40
+ &.disabled {
41
+ cursor: not-allowed;
42
+ }
43
+
44
+ }
45
+
46
+ /* Hide the browser's default radio */
47
+ &.radio input {
48
+ position: absolute;
49
+ opacity: 0;
50
+ cursor: pointer;
51
+ height: 0;
52
+ width: 0;
53
+ }
54
+
55
+ /* Create a custom radio */
56
+ &.radio .checkmark {
57
+ position: absolute;
58
+ top: 0;
59
+ inset-inline-start: 0;
60
+ height: 1.5em;
61
+ width: 1.5em;
62
+ background-color: var(--ax-white-color);
63
+ border-style: solid;
64
+ border-width: 1px;
65
+ border-color: var(--ax-border-color);
66
+ -webkit-border-radius: 50%;
67
+ -moz-border-radius: 50%;
68
+ border-radius: 50%;
69
+ }
70
+
71
+ /* On mouse-over, add a grey background color */
72
+ &.radio:hover input ~ .checkmark {
73
+ border-color: var(--ax-border-dark-color);
74
+ }
75
+
76
+ /* When the radio is checked, add a blue background */
77
+ &.radio input:checked ~ .checkmark {
78
+ background-color: var(--ax-white-color);
79
+ border-color: var(--ax-primary-color);
80
+ }
81
+
82
+ /* Create the checkmark/indicator (hidden when not checked) */
83
+ &.radio .checkmark:after {
84
+ content: "";
85
+ position: absolute;
86
+ display: none;
87
+ border-radius: 50%;
88
+ }
89
+
90
+ /* Show the checkmark when checked */
91
+ &.radio input:checked ~ .checkmark:after {
92
+ display: block;
93
+ }
94
+
95
+ /* Style the checkmark/indicator */
96
+ &.radio .checkmark:after {
97
+ left: 31.5%;
98
+ top: 33.3%;
99
+ width: 0.5em;
100
+ height: 0.5em;
101
+ background-color: var(--ax-primary-color);
102
+ border-radius: 50%;
103
+ }
104
+ }