@acorex/styles 6.5.28 → 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/package.json CHANGED
@@ -1,11 +1,11 @@
1
- {
2
- "name": "@acorex/styles",
3
- "version": "6.5.28",
4
- "description": "",
5
- "main": "index.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
9
- "author": "",
10
- "license": "ISC"
11
- }
1
+ {
2
+ "name": "@acorex/styles",
3
+ "version": "6.5.31",
4
+ "description": "",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1"
8
+ },
9
+ "author": "",
10
+ "license": "ISC"
11
+ }
package/scss/buttons.scss CHANGED
@@ -1,69 +1,69 @@
1
- @import "./variables.scss";
2
- @import "./mixin.scss";
3
-
4
- .ax {
5
- &.buttons {
6
- display: inline-flex;
7
- flex-direction: row;
8
- font-family: inherit;
9
- font-size: 0.875rem;
10
- vertical-align: baseline;
11
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
12
-
13
- .button {
14
- margin: 0 !important;
15
- border-radius: 0 !important;
16
- font-size: inherit !important;
17
- margin-inline-start: 0.25em;
18
- }
19
- }
20
-
21
- &.button {
22
- position: relative;
23
- cursor: pointer;
24
- display: inline-block;
25
- border: none;
26
- vertical-align: baseline;
27
- text-transform: none;
28
- text-shadow: none;
29
- font-family: inherit;
30
- font-size: inherit;
31
- text-align: center;
32
- text-decoration: none;
33
- overflow: hidden;
34
- padding: 0 1rem;
35
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
36
- &.ax-button-icon {
37
- width: calc(var(--ax-base-size) * var(--ax-base-ratio));
38
- height: calc(var(--ax-base-size) * var(--ax-base-ratio));
39
- padding: 0;
40
- }
41
- .button-inner-content {
42
- display: flex;
43
- flex-direction: row;
44
- justify-content: center;
45
- align-items: center;
46
- white-space: nowrap;
47
-
48
- .icon {
49
- margin-inline-end: 0.5rem;
50
- margin-inline-start: 0.5rem;
51
- }
52
- }
53
-
54
- * {
55
- pointer-events: none;
56
- }
57
-
58
- @include ax-border-radius(var(--ax-size-border-radius));
59
- -webkit-tap-highlight-color: transparent;
60
-
61
- &:hover {
62
- @include ax-transition-all();
63
- }
64
-
65
- &:focus {
66
- @include ax-transition-all();
67
- }
68
- }
69
- }
1
+ @import "./variables.scss";
2
+ @import "./mixin.scss";
3
+
4
+ .ax {
5
+ &.buttons {
6
+ display: inline-flex;
7
+ flex-direction: row;
8
+ font-family: inherit;
9
+ font-size: 0.875rem;
10
+ vertical-align: baseline;
11
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
12
+
13
+ .button {
14
+ margin: 0 !important;
15
+ border-radius: 0 !important;
16
+ font-size: inherit !important;
17
+ margin-inline-start: 0.25em;
18
+ }
19
+ }
20
+
21
+ &.button {
22
+ position: relative;
23
+ cursor: pointer;
24
+ display: inline-block;
25
+ border: none;
26
+ vertical-align: baseline;
27
+ text-transform: none;
28
+ text-shadow: none;
29
+ font-family: inherit;
30
+ font-size: inherit;
31
+ text-align: center;
32
+ text-decoration: none;
33
+ overflow: hidden;
34
+ padding: 0 1rem;
35
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
36
+ &.ax-button-icon {
37
+ width: calc(var(--ax-base-size) * var(--ax-base-ratio));
38
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio));
39
+ padding: 0;
40
+ }
41
+ .button-inner-content {
42
+ display: flex;
43
+ flex-direction: row;
44
+ justify-content: center;
45
+ align-items: center;
46
+ white-space: nowrap;
47
+
48
+ .icon {
49
+ margin-inline-end: 0.5rem;
50
+ margin-inline-start: 0.5rem;
51
+ }
52
+ }
53
+
54
+ * {
55
+ pointer-events: none;
56
+ }
57
+
58
+ @include ax-border-radius(var(--ax-size-border-radius));
59
+ -webkit-tap-highlight-color: transparent;
60
+
61
+ &:hover {
62
+ @include ax-transition-all();
63
+ }
64
+
65
+ &:focus {
66
+ @include ax-transition-all();
67
+ }
68
+ }
69
+ }
package/scss/calendar.scss CHANGED
@@ -1,144 +1,144 @@
1
- .ax-calendar-container {
2
- border: 1px solid var(--ax-border-color);
3
- border-radius: var(--ax-size-border-radius);
4
-
5
- .ax-calendar-header {
6
- direction: ltr;
7
- display: flex;
8
- justify-content: space-between;
9
- padding-top: 0.5rem;
10
- padding-bottom: 0.5rem;
11
- padding-left: 0.5rem;
12
- padding-right: 0.5rem;
13
- border-bottom: 1px solid var(--ax-border-color);
14
-
15
- .ax-nav-button,
16
- .ax-controll-button {
17
- padding: 0 0.5rem;
18
- }
19
- }
20
-
21
- .ax-calendar-body {
22
- padding: 0.5rem;
23
-
24
- .ax-month-items,
25
- .ax-day-items {
26
- display: grid;
27
- grid-template-columns: repeat(7, minmax(0, 1fr));
28
- }
29
-
30
- .ax-month-container,
31
- .ax-year-container {
32
- display: grid;
33
- grid-template-columns: repeat(3, minmax(0, 1fr));
34
-
35
- >div {
36
- font-size: 0.875rem;
37
- line-height: 1.25rem;
38
- position: relative;
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
- cursor: pointer;
43
- margin: 0.125rem;
44
- border-radius: 0.25rem;
45
- background-color: var(--ax-light-light-color);
46
-
47
- &::before {
48
- content: "";
49
- padding-top: 50%;
50
- float: left;
51
- }
52
-
53
- &::after {
54
- content: "";
55
- display: block;
56
- clear: both;
57
- }
58
- }
59
- }
60
-
61
- .ax-month-items {
62
- margin: 0.5rem 0;
63
-
64
- .ax-month-item {
65
- font-size: 1rem;
66
- line-height: 1.25rem;
67
- text-align: center;
68
- position: relative;
69
- display: flex;
70
- align-items: center;
71
- justify-content: center;
72
- cursor: text;
73
- margin: 0.125rem;
74
- }
75
- }
76
-
77
- .ax-day-items {
78
- .ax-day-item {
79
- font-size: 0.875rem;
80
- line-height: 1.25rem;
81
- position: relative;
82
- display: flex;
83
- align-items: center;
84
- justify-content: center;
85
- cursor: pointer;
86
- margin: 0.125rem;
87
- border-radius: 0.25rem;
88
-
89
- &::before {
90
- content: "";
91
- padding-top: 100%;
92
- float: left;
93
- }
94
-
95
- &::after {
96
- content: "";
97
- display: block;
98
- clear: both;
99
- }
100
-
101
- &:hover {
102
- background-color: var(--ax-light-light-color);
103
- }
104
-
105
- &.holiday {
106
- color: var(--ax-danger-color);
107
-
108
- &:hover {
109
- color: #000;
110
- }
111
- }
112
-
113
- &.today {
114
- background-color: var(--ax-primary-trans-dark-color) !important;
115
- color: var(--ax-primary-color) !important;
116
- }
117
-
118
- &.selected {
119
- background-color: var(--ax-success-color);
120
- color: var(--ax-success-fore-color);
121
-
122
- &:hover {
123
- color: var(--ax-success-fore-color);
124
- }
125
- }
126
-
127
- &.next-month {
128
- opacity: 0.5;
129
- }
130
-
131
- &.unselect {
132
- cursor: not-allowed;
133
- position: relative;
134
- background-color: rgb(245, 138, 138, 30%);
135
- color: var(--ax-danger-color);
136
- }
137
- }
138
- }
139
- }
140
-
141
- .ax-calendar-footer {
142
- padding: 0.5rem;
143
- }
1
+ .ax-calendar-container {
2
+ border: 1px solid var(--ax-border-color);
3
+ border-radius: var(--ax-size-border-radius);
4
+
5
+ .ax-calendar-header {
6
+ direction: ltr;
7
+ display: flex;
8
+ justify-content: space-between;
9
+ padding-top: 0.5rem;
10
+ padding-bottom: 0.5rem;
11
+ padding-left: 0.5rem;
12
+ padding-right: 0.5rem;
13
+ border-bottom: 1px solid var(--ax-border-color);
14
+
15
+ .ax-nav-button,
16
+ .ax-controll-button {
17
+ padding: 0 0.5rem;
18
+ }
19
+ }
20
+
21
+ .ax-calendar-body {
22
+ padding: 0.5rem;
23
+
24
+ .ax-month-items,
25
+ .ax-day-items {
26
+ display: grid;
27
+ grid-template-columns: repeat(7, minmax(0, 1fr));
28
+ }
29
+
30
+ .ax-month-container,
31
+ .ax-year-container {
32
+ display: grid;
33
+ grid-template-columns: repeat(3, minmax(0, 1fr));
34
+
35
+ >div {
36
+ font-size: 0.875rem;
37
+ line-height: 1.25rem;
38
+ position: relative;
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: center;
42
+ cursor: pointer;
43
+ margin: 0.125rem;
44
+ border-radius: 0.25rem;
45
+ background-color: var(--ax-light-light-color);
46
+
47
+ &::before {
48
+ content: "";
49
+ padding-top: 50%;
50
+ float: left;
51
+ }
52
+
53
+ &::after {
54
+ content: "";
55
+ display: block;
56
+ clear: both;
57
+ }
58
+ }
59
+ }
60
+
61
+ .ax-month-items {
62
+ margin: 0.5rem 0;
63
+
64
+ .ax-month-item {
65
+ font-size: 1rem;
66
+ line-height: 1.25rem;
67
+ text-align: center;
68
+ position: relative;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ cursor: text;
73
+ margin: 0.125rem;
74
+ }
75
+ }
76
+
77
+ .ax-day-items {
78
+ .ax-day-item {
79
+ font-size: 0.875rem;
80
+ line-height: 1.25rem;
81
+ position: relative;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ cursor: pointer;
86
+ margin: 0.125rem;
87
+ border-radius: 0.25rem;
88
+
89
+ &::before {
90
+ content: "";
91
+ padding-top: 100%;
92
+ float: left;
93
+ }
94
+
95
+ &::after {
96
+ content: "";
97
+ display: block;
98
+ clear: both;
99
+ }
100
+
101
+ &:hover {
102
+ background-color: var(--ax-light-light-color);
103
+ }
104
+
105
+ &.holiday {
106
+ color: var(--ax-danger-color);
107
+
108
+ &:hover {
109
+ color: #000;
110
+ }
111
+ }
112
+
113
+ &.today {
114
+ background-color: var(--ax-primary-trans-dark-color) !important;
115
+ color: var(--ax-primary-color) !important;
116
+ }
117
+
118
+ &.selected {
119
+ background-color: var(--ax-success-color);
120
+ color: var(--ax-success-fore-color);
121
+
122
+ &:hover {
123
+ color: var(--ax-success-fore-color);
124
+ }
125
+ }
126
+
127
+ &.next-month {
128
+ opacity: 0.5;
129
+ }
130
+
131
+ &.unselect {
132
+ cursor: not-allowed;
133
+ position: relative;
134
+ background-color: rgb(245, 138, 138, 30%);
135
+ color: var(--ax-danger-color);
136
+ }
137
+ }
138
+ }
139
+ }
140
+
141
+ .ax-calendar-footer {
142
+ padding: 0.5rem;
143
+ }
144
144
  }
package/scss/checkbox.scss CHANGED
@@ -1,46 +1,46 @@
1
- .ax-checkbox-container {
2
- display: flex;
3
- align-items: center;
4
- font-size: 0.875rem;
5
- span {
6
- margin-inline-start: 0.5rem;
7
- }
8
- &.readonly,
9
- &.disabled {
10
- opacity: 0.7;
11
- }
12
- &.disabled {
13
- cursor: not-allowed;
14
- }
15
- .ax-checkbox {
16
- width: 16px;
17
- height: 16px;
18
- border: 1px solid var(--ax-border-color);
19
- border-radius: 4px;
20
- background-color: var(--ax-white-color);
21
- margin: 0;
22
- appearance: none;
23
- vertical-align: middle;
24
- outline: 2px solid transparent;
25
- outline-offset: 2px;
26
- color: var(--ax-primary-color);
27
- &.checked {
28
- border-color: var(--ax-primary-color);
29
- background-repeat: no-repeat;
30
- background-color: currentColor;
31
- background-size: contain;
32
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
33
- }
34
-
35
- &.indeterminate {
36
- border-color: var(--ax-primary-color);
37
- background-repeat: no-repeat;
38
- background-color: currentColor;
39
- background-size: contain;
40
- background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
41
- }
42
- &:focus {
43
- border-color: var(--ax-primary-color);
44
- }
45
- }
46
- }
1
+ .ax-checkbox-container {
2
+ display: flex;
3
+ align-items: center;
4
+ font-size: 0.875rem;
5
+ span {
6
+ margin-inline-start: 0.5rem;
7
+ }
8
+ &.readonly,
9
+ &.disabled {
10
+ opacity: 0.7;
11
+ }
12
+ &.disabled {
13
+ cursor: not-allowed;
14
+ }
15
+ .ax-checkbox {
16
+ width: 16px;
17
+ height: 16px;
18
+ border: 1px solid var(--ax-border-color);
19
+ border-radius: 4px;
20
+ background-color: var(--ax-white-color);
21
+ margin: 0;
22
+ appearance: none;
23
+ vertical-align: middle;
24
+ outline: 2px solid transparent;
25
+ outline-offset: 2px;
26
+ color: var(--ax-primary-color);
27
+ &.checked {
28
+ border-color: var(--ax-primary-color);
29
+ background-repeat: no-repeat;
30
+ background-color: currentColor;
31
+ background-size: contain;
32
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
33
+ }
34
+
35
+ &.indeterminate {
36
+ border-color: var(--ax-primary-color);
37
+ background-repeat: no-repeat;
38
+ background-color: currentColor;
39
+ background-size: contain;
40
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
41
+ }
42
+ &:focus {
43
+ border-color: var(--ax-primary-color);
44
+ }
45
+ }
46
+ }