@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/treeview.scss CHANGED
@@ -1,152 +1,152 @@
1
- $ident: 1.5rem;
2
- $left: -($ident);
3
-
4
- .treeview {
5
- padding: 0 1.2rem;
6
- font-size: 0.875rem;
7
-
8
- &.sm {
9
- .child {
10
- padding-inline-start: 1.5em;
11
- }
12
-
13
- .bordered {
14
- &::before {
15
- width: 1.5em;
16
- }
17
-
18
- &::after {
19
- width: 1.5em;
20
- }
21
- }
22
-
23
- .check-box {
24
- margin-top: -1rem;
25
- }
26
- }
27
-
28
- .disabled {
29
- background: var(--ax-gray-light-color) !important;
30
- color: var(--ax-gray-fore-color);
31
- cursor: not-allowed !important;
32
- }
33
-
34
- li {
35
- list-style-type: none;
36
- position: relative;
37
- cursor: pointer;
38
-
39
- .ax-checkbox-container {
40
- span {
41
- display: none;
42
- }
43
- }
44
-
45
- &.node {
46
- padding-inline-start: 1rem;
47
-
48
- // .start-side {
49
- // display: none;
50
- // }
51
- .check-box {
52
- margin-inline-start: -2em;
53
- z-index: 1;
54
- }
55
- }
56
-
57
- &.selected {
58
- background-color: var(--ax-primary-trans-dark-color);
59
- }
60
-
61
- &.bordered {
62
- &:before {
63
- content: "";
64
- position: absolute;
65
- top: 0.12rem;
66
- inset-inline-start: -1rem;
67
- border-inline-start: 1px solid var(--ax-gray-dark-color);
68
- border-bottom: 1px solid var(--ax-gray-dark-color);
69
- width: 1.5em;
70
- height: 17.8px;
71
- }
72
-
73
- &:after {
74
- position: absolute;
75
- content: "";
76
- top: 1.2rem;
77
- inset-inline-start: -1rem;
78
- border-inline-start: 1px solid var(--ax-gray-dark-color);
79
- border-top: 1px solid var(--ax-gray-dark-color);
80
- width: $ident;
81
- height: 100%;
82
- }
83
-
84
- &:last-child:after {
85
- display: none;
86
- }
87
- }
88
-
89
- [dir="rtl"] & {
90
- .fas {
91
- -webkit-transform: scaleX(-1);
92
- transform: scaleX(-1);
93
- }
94
- }
95
-
96
- .start-side {
97
- display: flex;
98
- align-items: center;
99
-
100
- .collapse-icon {
101
- display: flex;
102
- align-items: center;
103
- justify-content: center;
104
- width: 1rem;
105
- height: 1rem;
106
- border: 1px solid var(--ax-gray-dark-color);
107
- background: var(--ax-white-color);
108
- z-index: 1;
109
-
110
- i {
111
- font-size: 0.875rem;
112
- text-align: center;
113
-
114
- :not(.fa-spin) {
115
- font-size: initial !important;
116
- }
117
- }
118
- }
119
-
120
- .ax-checkbox-container {
121
- margin-inline-start: 0.5rem;
122
- }
123
- }
124
-
125
- .check-box {
126
- margin-top: -1.5em;
127
- }
128
-
129
- .text-list {
130
- flex: 1;
131
- display: flex;
132
- margin-inline-start: 0.5rem;
133
-
134
- }
135
-
136
- >div {
137
- padding: 0.5em 0;
138
-
139
- &:hover {
140
- background-color: var(--ax-gray-trans-light-color);
141
- }
142
- }
143
-
144
- .child {
145
- li:not(.node) {
146
- .text-list {
147
- margin-inline-start: 0.5rem;
148
- }
149
- }
150
- }
151
- }
1
+ $ident: 1.5rem;
2
+ $left: -($ident);
3
+
4
+ .treeview {
5
+ padding: 0 1.2rem;
6
+ font-size: 0.875rem;
7
+
8
+ &.sm {
9
+ .child {
10
+ padding-inline-start: 1.5em;
11
+ }
12
+
13
+ .bordered {
14
+ &::before {
15
+ width: 1.5em;
16
+ }
17
+
18
+ &::after {
19
+ width: 1.5em;
20
+ }
21
+ }
22
+
23
+ .check-box {
24
+ margin-top: -1rem;
25
+ }
26
+ }
27
+
28
+ .disabled {
29
+ background: var(--ax-gray-light-color) !important;
30
+ color: var(--ax-gray-fore-color);
31
+ cursor: not-allowed !important;
32
+ }
33
+
34
+ li {
35
+ list-style-type: none;
36
+ position: relative;
37
+ cursor: pointer;
38
+
39
+ .ax-checkbox-container {
40
+ span {
41
+ display: none;
42
+ }
43
+ }
44
+
45
+ &.node {
46
+ padding-inline-start: 1rem;
47
+
48
+ // .start-side {
49
+ // display: none;
50
+ // }
51
+ .check-box {
52
+ margin-inline-start: -2em;
53
+ z-index: 1;
54
+ }
55
+ }
56
+
57
+ &.selected {
58
+ background-color: var(--ax-primary-trans-dark-color);
59
+ }
60
+
61
+ &.bordered {
62
+ &:before {
63
+ content: "";
64
+ position: absolute;
65
+ top: 0.12rem;
66
+ inset-inline-start: -1rem;
67
+ border-inline-start: 1px solid var(--ax-gray-dark-color);
68
+ border-bottom: 1px solid var(--ax-gray-dark-color);
69
+ width: 1.5em;
70
+ height: 17.8px;
71
+ }
72
+
73
+ &:after {
74
+ position: absolute;
75
+ content: "";
76
+ top: 1.2rem;
77
+ inset-inline-start: -1rem;
78
+ border-inline-start: 1px solid var(--ax-gray-dark-color);
79
+ border-top: 1px solid var(--ax-gray-dark-color);
80
+ width: $ident;
81
+ height: 100%;
82
+ }
83
+
84
+ &:last-child:after {
85
+ display: none;
86
+ }
87
+ }
88
+
89
+ [dir="rtl"] & {
90
+ .fas {
91
+ -webkit-transform: scaleX(-1);
92
+ transform: scaleX(-1);
93
+ }
94
+ }
95
+
96
+ .start-side {
97
+ display: flex;
98
+ align-items: center;
99
+
100
+ .collapse-icon {
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ width: 1rem;
105
+ height: 1rem;
106
+ border: 1px solid var(--ax-gray-dark-color);
107
+ background: var(--ax-white-color);
108
+ z-index: 1;
109
+
110
+ i {
111
+ font-size: 0.875rem;
112
+ text-align: center;
113
+
114
+ :not(.fa-spin) {
115
+ font-size: initial !important;
116
+ }
117
+ }
118
+ }
119
+
120
+ .ax-checkbox-container {
121
+ margin-inline-start: 0.5rem;
122
+ }
123
+ }
124
+
125
+ .check-box {
126
+ margin-top: -1.5em;
127
+ }
128
+
129
+ .text-list {
130
+ flex: 1;
131
+ display: flex;
132
+ margin-inline-start: 0.5rem;
133
+
134
+ }
135
+
136
+ >div {
137
+ padding: 0.5em 0;
138
+
139
+ &:hover {
140
+ background-color: var(--ax-gray-trans-light-color);
141
+ }
142
+ }
143
+
144
+ .child {
145
+ li:not(.node) {
146
+ .text-list {
147
+ margin-inline-start: 0.5rem;
148
+ }
149
+ }
150
+ }
151
+ }
152
152
  }
package/scss/upload.scss CHANGED
@@ -1,170 +1,170 @@
1
- .ax {
2
- &.upload-file-box {
3
- display: flex;
4
- background: var(--ax-white-color);
5
- flex-direction: column;
6
- justify-content: center;
7
- align-items: center;
8
- padding: 0.5em 0;
9
- border-width: 2px;
10
- border-style: dashed;
11
- border-color: var(--ax-border-dark-color);
12
- min-height: 200px;
13
- cursor: pointer;
14
- position: relative;
15
-
16
- &:hover {
17
- border-color: var(--ax-primary-color);
18
- border-style: solid;
19
- transition: all 0.3s;
20
-
21
- .upload-content {
22
- color: var(--ax-primary-color);
23
- }
24
-
25
- .action-container {
26
- display: flex !important;
27
- }
28
- }
29
-
30
- .upload-content {
31
- text-align: center;
32
- color: var(--ax-border-color);
33
-
34
- i {
35
- font-size: 30px;
36
- }
37
-
38
- p {
39
- padding-top: var(--sp-md-size);
40
-
41
- }
42
- }
43
-
44
- .preview {
45
- background-position: center !important;
46
- background-size: contain !important;
47
- background-repeat: no-repeat !important;
48
- width: 100%;
49
- display: flex;
50
- flex-direction: column;
51
- justify-content: center;
52
- align-items: center;
53
- min-height: 200px;
54
- }
55
-
56
- .action-container {
57
- background: rgba(var(--ax-secondary-color), 0.5);
58
- min-height: 195px;
59
- display: none;
60
- flex-direction: row;
61
- justify-content: center;
62
- align-items: center;
63
- width: 100%;
64
- position: absolute;
65
- top: 0;
66
- bottom: 0;
67
- left: 0;
68
- right: 0;
69
- }
70
-
71
- }
72
-
73
- .ax-upload-drop-over {
74
- position: relative;
75
-
76
- .overlay {
77
- pointer-events: none;
78
- z-index: 1;
79
- display: none;
80
- position: absolute;
81
- align-items: center;
82
- text-align: center;
83
- justify-content: center;
84
- width: 100%;
85
- height: 100%;
86
- top: 0px;
87
- left: 0px;
88
- right: 0px;
89
- bottom: 0px;
90
- background-color: var(--ax-white-color);
91
- outline: 2px dashed var(--ax-primary-color);
92
- outline-offset: 0;
93
- opacity: 0;
94
- transition: display 0s, opacity 0.15s linear, outline-offset 0.15s linear;
95
-
96
- &.show {
97
- display: flex;
98
- opacity: 0.95;
99
- outline-offset: calc(-1 * 0.5em);
100
- }
101
-
102
- .icon-wrapper {
103
- display: flex;
104
- flex-direction: column;
105
- justify-content: center;
106
- align-items: center;
107
-
108
- i {
109
- margin-bottom: 10px;
110
- color: var(--ax-primary-color);
111
- -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
112
- animation: pulsate-fwd 0.5s ease-in-out infinite both;
113
- }
114
-
115
- span {
116
- color: var(--ax-secondary-light-color);
117
- }
118
- }
119
-
120
- @-webkit-keyframes pulsate-fwd {
121
- 0% {
122
- -webkit-transform: scale(1);
123
- transform: scale(1);
124
- }
125
-
126
- 50% {
127
- -webkit-transform: scale(1.1);
128
- transform: scale(1.1);
129
- }
130
-
131
- 100% {
132
- -webkit-transform: scale(1);
133
- transform: scale(1);
134
- }
135
- }
136
-
137
- @keyframes pulsate-fwd {
138
- 0% {
139
- -webkit-transform: scale(1);
140
- transform: scale(1);
141
- }
142
-
143
- 50% {
144
- -webkit-transform: scale(1.1);
145
- transform: scale(1.1);
146
- }
147
-
148
- 100% {
149
- -webkit-transform: scale(1);
150
- transform: scale(1);
151
- }
152
- }
153
-
154
- }
155
- }
156
-
157
- .ax-upload-progress-panel {
158
- padding: 0.5em;
159
- background-color: var(--ax-white-color);
160
-
161
- small {
162
- display: block;
163
- margin: 0.5em 0 0 0;
164
- white-space: nowrap;
165
- overflow: hidden;
166
- text-overflow: ellipsis;
167
- }
168
- }
169
-
1
+ .ax {
2
+ &.upload-file-box {
3
+ display: flex;
4
+ background: var(--ax-white-color);
5
+ flex-direction: column;
6
+ justify-content: center;
7
+ align-items: center;
8
+ padding: 0.5em 0;
9
+ border-width: 2px;
10
+ border-style: dashed;
11
+ border-color: var(--ax-border-dark-color);
12
+ min-height: 200px;
13
+ cursor: pointer;
14
+ position: relative;
15
+
16
+ &:hover {
17
+ border-color: var(--ax-primary-color);
18
+ border-style: solid;
19
+ transition: all 0.3s;
20
+
21
+ .upload-content {
22
+ color: var(--ax-primary-color);
23
+ }
24
+
25
+ .action-container {
26
+ display: flex !important;
27
+ }
28
+ }
29
+
30
+ .upload-content {
31
+ text-align: center;
32
+ color: var(--ax-border-color);
33
+
34
+ i {
35
+ font-size: 30px;
36
+ }
37
+
38
+ p {
39
+ padding-top: var(--sp-md-size);
40
+
41
+ }
42
+ }
43
+
44
+ .preview {
45
+ background-position: center !important;
46
+ background-size: contain !important;
47
+ background-repeat: no-repeat !important;
48
+ width: 100%;
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ align-items: center;
53
+ min-height: 200px;
54
+ }
55
+
56
+ .action-container {
57
+ background: rgba(var(--ax-secondary-color), 0.5);
58
+ min-height: 195px;
59
+ display: none;
60
+ flex-direction: row;
61
+ justify-content: center;
62
+ align-items: center;
63
+ width: 100%;
64
+ position: absolute;
65
+ top: 0;
66
+ bottom: 0;
67
+ left: 0;
68
+ right: 0;
69
+ }
70
+
71
+ }
72
+
73
+ .ax-upload-drop-over {
74
+ position: relative;
75
+
76
+ .overlay {
77
+ pointer-events: none;
78
+ z-index: 1;
79
+ display: none;
80
+ position: absolute;
81
+ align-items: center;
82
+ text-align: center;
83
+ justify-content: center;
84
+ width: 100%;
85
+ height: 100%;
86
+ top: 0px;
87
+ left: 0px;
88
+ right: 0px;
89
+ bottom: 0px;
90
+ background-color: var(--ax-white-color);
91
+ outline: 2px dashed var(--ax-primary-color);
92
+ outline-offset: 0;
93
+ opacity: 0;
94
+ transition: display 0s, opacity 0.15s linear, outline-offset 0.15s linear;
95
+
96
+ &.show {
97
+ display: flex;
98
+ opacity: 0.95;
99
+ outline-offset: calc(-1 * 0.5em);
100
+ }
101
+
102
+ .icon-wrapper {
103
+ display: flex;
104
+ flex-direction: column;
105
+ justify-content: center;
106
+ align-items: center;
107
+
108
+ i {
109
+ margin-bottom: 10px;
110
+ color: var(--ax-primary-color);
111
+ -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
112
+ animation: pulsate-fwd 0.5s ease-in-out infinite both;
113
+ }
114
+
115
+ span {
116
+ color: var(--ax-secondary-light-color);
117
+ }
118
+ }
119
+
120
+ @-webkit-keyframes pulsate-fwd {
121
+ 0% {
122
+ -webkit-transform: scale(1);
123
+ transform: scale(1);
124
+ }
125
+
126
+ 50% {
127
+ -webkit-transform: scale(1.1);
128
+ transform: scale(1.1);
129
+ }
130
+
131
+ 100% {
132
+ -webkit-transform: scale(1);
133
+ transform: scale(1);
134
+ }
135
+ }
136
+
137
+ @keyframes pulsate-fwd {
138
+ 0% {
139
+ -webkit-transform: scale(1);
140
+ transform: scale(1);
141
+ }
142
+
143
+ 50% {
144
+ -webkit-transform: scale(1.1);
145
+ transform: scale(1.1);
146
+ }
147
+
148
+ 100% {
149
+ -webkit-transform: scale(1);
150
+ transform: scale(1);
151
+ }
152
+ }
153
+
154
+ }
155
+ }
156
+
157
+ .ax-upload-progress-panel {
158
+ padding: 0.5em;
159
+ background-color: var(--ax-white-color);
160
+
161
+ small {
162
+ display: block;
163
+ margin: 0.5em 0 0 0;
164
+ white-space: nowrap;
165
+ overflow: hidden;
166
+ text-overflow: ellipsis;
167
+ }
168
+ }
169
+
170
170
  }