@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/package.json CHANGED
@@ -1,11 +1,11 @@
1
- {
2
- "name": "@acorex/styles",
3
- "version": "3.0.27",
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": "3.0.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,64 +1,64 @@
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: inherit;
10
-
11
- vertical-align: baseline;
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
- font-weight: 500;
32
- text-align: center;
33
- text-decoration: none;
34
- overflow: hidden;
35
-
36
- .button-inner-content {
37
- display: flex;
38
- flex-direction: row;
39
- justify-content: center;
40
- align-items: center;
41
- white-space: nowrap;
42
-
43
- .icon {
44
- margin-inline-end: 0.5rem;
45
- margin-inline-start: 0.5rem;
46
- }
47
- }
48
-
49
- * {
50
- pointer-events: none;
51
- }
52
-
53
- @include ax-border-radius(var(--ax-size-border-radius));
54
- -webkit-tap-highlight-color: transparent;
55
-
56
- &:hover {
57
- @include ax-transition-all();
58
- }
59
-
60
- &:focus {
61
- @include ax-transition-all();
62
- }
63
- }
64
- }
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: inherit;
10
+
11
+ vertical-align: baseline;
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
+ font-weight: 500;
32
+ text-align: center;
33
+ text-decoration: none;
34
+ overflow: hidden;
35
+
36
+ .button-inner-content {
37
+ display: flex;
38
+ flex-direction: row;
39
+ justify-content: center;
40
+ align-items: center;
41
+ white-space: nowrap;
42
+
43
+ .icon {
44
+ margin-inline-end: 0.5rem;
45
+ margin-inline-start: 0.5rem;
46
+ }
47
+ }
48
+
49
+ * {
50
+ pointer-events: none;
51
+ }
52
+
53
+ @include ax-border-radius(var(--ax-size-border-radius));
54
+ -webkit-tap-highlight-color: transparent;
55
+
56
+ &:hover {
57
+ @include ax-transition-all();
58
+ }
59
+
60
+ &:focus {
61
+ @include ax-transition-all();
62
+ }
63
+ }
64
+ }
package/scss/calendar.scss CHANGED
@@ -1,130 +1,130 @@
1
- .ax-calendar-container {
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
- }
21
- }
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;
37
- display: flex;
38
- align-items: center;
39
- justify-content: center;
40
- cursor: pointer;
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: 50%;
48
- float: left;
49
- }
50
- &::after {
51
- content: "";
52
- display: block;
53
- clear: both;
54
- }
55
- }
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;
64
- display: flex;
65
- align-items: center;
66
- justify-content: center;
67
- cursor: text;
68
- margin: 0.125rem;
69
- }
70
- }
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;
87
- }
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;
100
- }
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
- color: var(--ax-primary-fore-color);
111
- }
112
- }
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
-
123
- }
124
- }
125
- }
126
- }
127
- .ax-calendar-footer {
128
- padding: 0.5rem;
129
- }
1
+ .ax-calendar-container {
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
+ }
21
+ }
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;
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ cursor: pointer;
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: 50%;
48
+ float: left;
49
+ }
50
+ &::after {
51
+ content: "";
52
+ display: block;
53
+ clear: both;
54
+ }
55
+ }
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;
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ cursor: text;
68
+ margin: 0.125rem;
69
+ }
70
+ }
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;
87
+ }
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;
100
+ }
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
+ color: var(--ax-primary-fore-color);
111
+ }
112
+ }
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
+
123
+ }
124
+ }
125
+ }
126
+ }
127
+ .ax-calendar-footer {
128
+ padding: 0.5rem;
129
+ }
130
130
  }
package/scss/checkbox.scss CHANGED
@@ -1,37 +1,37 @@
1
- .ax-checkbox-container {
2
- display: flex;
3
- align-items: center;
4
- span {
5
- margin-inline-start: 0.5rem;
6
- }
7
- .ax-checkbox {
8
- width: 16px;
9
- height: 16px;
10
- border: 1px solid var(--ax-border-color);
11
- border-radius: 4px;
12
- background-color: var(--ax-white-color);
13
- margin: 0;
14
- appearance: none;
15
- vertical-align: middle;
16
- outline: 2px solid transparent;
17
- outline-offset: 2px;
18
- color: var(--ax-primary-color);
19
- &:checked {
20
- border-color: var(--ax-primary-color);
21
- background-repeat: no-repeat;
22
- background-color: currentColor;
23
- background-size: contain;
24
- 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");
25
- }
26
- &.indeterminate {
27
- border-color: var(--ax-primary-color);
28
- background-repeat: no-repeat;
29
- background-color: currentColor;
30
- background-size: contain;
31
- background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
32
- }
33
- &:focus {
34
- border-color: var(--ax-primary-color);
35
- }
36
- }
1
+ .ax-checkbox-container {
2
+ display: flex;
3
+ align-items: center;
4
+ span {
5
+ margin-inline-start: 0.5rem;
6
+ }
7
+ .ax-checkbox {
8
+ width: 16px;
9
+ height: 16px;
10
+ border: 1px solid var(--ax-border-color);
11
+ border-radius: 4px;
12
+ background-color: var(--ax-white-color);
13
+ margin: 0;
14
+ appearance: none;
15
+ vertical-align: middle;
16
+ outline: 2px solid transparent;
17
+ outline-offset: 2px;
18
+ color: var(--ax-primary-color);
19
+ &:checked {
20
+ border-color: var(--ax-primary-color);
21
+ background-repeat: no-repeat;
22
+ background-color: currentColor;
23
+ background-size: contain;
24
+ 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");
25
+ }
26
+ &.indeterminate {
27
+ border-color: var(--ax-primary-color);
28
+ background-repeat: no-repeat;
29
+ background-color: currentColor;
30
+ background-size: contain;
31
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
32
+ }
33
+ &:focus {
34
+ border-color: var(--ax-primary-color);
35
+ }
36
+ }
37
37
  }
package/scss/context-menu.scss CHANGED
@@ -1,81 +1,81 @@
1
- .ax {
2
- &.context-menu-container {
3
- position: fixed;
4
-
5
- .context-menu {
6
- background-color: var(--ax-white-color);
7
- width: fit-content;
8
- max-width: 300px;
9
- -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
10
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
11
- transition: all 0.3s;
12
- padding: 0;
13
- margin: 0;
14
-
15
- .context-menu-item {
16
- display: flex;
17
- padding: 1em;
18
- justify-content: space-between;
19
- cursor: pointer;
20
- user-select: none;
21
- color: var(--ax-gray-dark-color);
22
- position: relative;
23
- min-width: fit-content;
24
- &:hover {
25
- background-color: var(--ax-light-light-color);
26
- & > .child {
27
- left: 100%;
28
- visibility: visible;
29
- opacity: 1;
30
- transform: translateX(0px);
31
- [dir="rtl"] &{
32
- left: initial;
33
- right: 100%;
34
- }
35
- }
36
- }
37
- &.disabled {
38
- color: var(--ax-gray-light-color) !important;
39
- cursor: not-allowed;
40
- }
41
- &.divider {
42
- border-bottom: 1px solid var(--ax-border-color);
43
- }
44
- .startIcon {
45
- padding-inline-end: 0.5em;
46
- }
47
- span {
48
- white-space: nowrap;
49
- overflow: hidden;
50
- text-overflow: ellipsis;
51
- flex: 1;
52
- }
53
- .endIcon {
54
- padding-inline-start: 0.5em;
55
- > i {
56
- padding-inline-start: 0.5em;
57
- }
58
- }
59
-
60
- .child {
61
- position: absolute;
62
- left: 0%;
63
- top: 0;
64
- visibility: hidden;
65
- opacity: 0;
66
- transition: transform 0.2s;
67
- transform: translateX(50px);
68
- [dir="rtl"] &{
69
- left: initial;
70
- right: 0%;
71
- }
72
- }
73
- }
74
- }
75
- }
76
- }
77
-
78
- @keyframes show {
79
- from {display: none;}
80
- to {display: block;opacity: 1;}
1
+ .ax {
2
+ &.context-menu-container {
3
+ position: fixed;
4
+
5
+ .context-menu {
6
+ background-color: var(--ax-white-color);
7
+ width: fit-content;
8
+ max-width: 300px;
9
+ -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
10
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
11
+ transition: all 0.3s;
12
+ padding: 0;
13
+ margin: 0;
14
+
15
+ .context-menu-item {
16
+ display: flex;
17
+ padding: 1em;
18
+ justify-content: space-between;
19
+ cursor: pointer;
20
+ user-select: none;
21
+ color: var(--ax-gray-dark-color);
22
+ position: relative;
23
+ min-width: fit-content;
24
+ &:hover {
25
+ background-color: var(--ax-light-light-color);
26
+ & > .child {
27
+ left: 100%;
28
+ visibility: visible;
29
+ opacity: 1;
30
+ transform: translateX(0px);
31
+ [dir="rtl"] &{
32
+ left: initial;
33
+ right: 100%;
34
+ }
35
+ }
36
+ }
37
+ &.disabled {
38
+ color: var(--ax-gray-light-color) !important;
39
+ cursor: not-allowed;
40
+ }
41
+ &.divider {
42
+ border-bottom: 1px solid var(--ax-border-color);
43
+ }
44
+ .startIcon {
45
+ padding-inline-end: 0.5em;
46
+ }
47
+ span {
48
+ white-space: nowrap;
49
+ overflow: hidden;
50
+ text-overflow: ellipsis;
51
+ flex: 1;
52
+ }
53
+ .endIcon {
54
+ padding-inline-start: 0.5em;
55
+ > i {
56
+ padding-inline-start: 0.5em;
57
+ }
58
+ }
59
+
60
+ .child {
61
+ position: absolute;
62
+ left: 0%;
63
+ top: 0;
64
+ visibility: hidden;
65
+ opacity: 0;
66
+ transition: transform 0.2s;
67
+ transform: translateX(50px);
68
+ [dir="rtl"] &{
69
+ left: initial;
70
+ right: 0%;
71
+ }
72
+ }
73
+ }
74
+ }
75
+ }
76
+ }
77
+
78
+ @keyframes show {
79
+ from {display: none;}
80
+ to {display: block;opacity: 1;}
81
81
  }