@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.
package/scss/style.scss CHANGED
@@ -1,47 +1,47 @@
1
- @import "./buttons.scss";
2
- @import "./calendar.scss";
3
- @import "./checkbox.scss";
4
- @import "./context-menu.scss";
5
- @import "./drawer.scss";
6
- @import "./data-grid.scss";
7
- @import "./fieldset.scss";
8
- @import "./list.scss";
9
- @import "./menu.scss";
10
- @import "./progress.scss";
11
- @import "./selection-list.scss";
12
- @import "./forms.scss";
13
- @import "./tooltip.scss";
14
- @import "./tab.scss";
15
- @import "./tab-strip.scss";
16
- @import "./toast.scss";
17
- @import "./treeview.scss";
18
- @import "./upload.scss";
19
- @import "./master.scss";
20
- @import "./page.scss";
21
- @import "~animate.css/animate.min.css";
22
- * {
23
- box-sizing: border-box;
24
- outline-color: transparent;
25
- &:focus {
26
- outline: none;
27
- }
28
- }
29
-
30
- html,
31
- body {
32
- -webkit-overflow-scrolling: touch;
33
- scroll-behavior: smooth;
34
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
35
- font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
36
- }
37
-
38
- .rtl {
39
- direction: rtl;
40
- text-align: right;
41
- }
42
-
43
- .ltr {
44
- direction: ltr;
45
- text-align: left;
46
- }
47
-
1
+ @import "./buttons.scss";
2
+ @import "./calendar.scss";
3
+ @import "./checkbox.scss";
4
+ @import "./context-menu.scss";
5
+ @import "./drawer.scss";
6
+ @import "./data-grid.scss";
7
+ @import "./fieldset.scss";
8
+ @import "./list.scss";
9
+ @import "./menu.scss";
10
+ @import "./progress.scss";
11
+ @import "./selection-list.scss";
12
+ @import "./forms.scss";
13
+ @import "./tooltip.scss";
14
+ @import "./tab.scss";
15
+ @import "./tab-strip.scss";
16
+ @import "./toast.scss";
17
+ @import "./treeview.scss";
18
+ @import "./upload.scss";
19
+ @import "./master.scss";
20
+ @import "./page.scss";
21
+ @import "~animate.css/animate.min.css";
22
+ * {
23
+ box-sizing: border-box;
24
+ outline-color: transparent;
25
+ &:focus {
26
+ outline: none;
27
+ }
28
+ }
29
+
30
+ html,
31
+ body {
32
+ -webkit-overflow-scrolling: touch;
33
+ scroll-behavior: smooth;
34
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
35
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
36
+ }
37
+
38
+ .rtl {
39
+ direction: rtl;
40
+ text-align: right;
41
+ }
42
+
43
+ .ltr {
44
+ direction: ltr;
45
+ text-align: left;
46
+ }
47
+
@@ -1,31 +1,31 @@
1
- .tab-strip-container {
2
- padding: 0;
3
- margin: 0;
4
- display: flex;
5
- align-items: center;
6
- font-size: 0.875rem;
7
-
8
- li {
9
- display: inline;
10
- padding: 0.5em;
11
- border-bottom: 1px solid;
12
- border-color: var(--ax-gray-color);
13
- margin-inline-end: 0.3em;
14
- cursor: pointer;
15
- background-color: var(--ax-white-color);
16
-
17
- &.active {
18
- border-color: var(--ax-primary-color) !important;
19
- }
20
- &.disabled {
21
- // border-color: var(--ax-gray-color) !important;
22
- // background-color: var(--ax-gray-color) !important;
23
- // opacity: 0.6;
24
- cursor: not-allowed !important;
25
- }
26
- &:hover{
27
- background-color: var(--ax-light-light-color);
28
- border-color: transparent;
29
- }
30
- }
1
+ .tab-strip-container {
2
+ padding: 0;
3
+ margin: 0;
4
+ display: flex;
5
+ align-items: center;
6
+ font-size: 0.875rem;
7
+
8
+ li {
9
+ display: inline;
10
+ padding: 0.5em;
11
+ border-bottom: 1px solid;
12
+ border-color: var(--ax-gray-color);
13
+ margin-inline-end: 0.3em;
14
+ cursor: pointer;
15
+ background-color: var(--ax-white-color);
16
+
17
+ &.active {
18
+ border-color: var(--ax-primary-color) !important;
19
+ }
20
+ &.disabled {
21
+ // border-color: var(--ax-gray-color) !important;
22
+ // background-color: var(--ax-gray-color) !important;
23
+ // opacity: 0.6;
24
+ cursor: not-allowed !important;
25
+ }
26
+ &:hover{
27
+ background-color: var(--ax-light-light-color);
28
+ border-color: transparent;
29
+ }
30
+ }
31
31
  }
package/scss/tab.scss CHANGED
@@ -1,36 +1,36 @@
1
- .ax {
2
- &.nav-tabs {
3
- display: flex;
4
- list-style: none;
5
- margin: 0;
6
- padding: 0;
7
- padding: 0;
8
- border-bottom: 1px solid var(--ax-border-color);
9
- li {
10
- font-size: 0.875rem;
11
- margin-inline-end: 0.5em;
12
- padding: 0.5rem 1rem;
13
- background: var(--ax-gray-color);
14
- cursor: pointer;
15
- -webkit-border-top-left-radius: var(--ax-size-border-radius);
16
- -webkit-border-top-right-radius: var(--ax-size-border-radius);
17
- -moz-border-radius-topleft: var(--ax-size-border-radius);
18
- -moz-border-radius-topright: var(--ax-size-border-radius);
19
- border-top-left-radius: var(--ax-size-border-radius);
20
- border-top-right-radius: var(--ax-size-border-radius);
21
- i {
22
- margin-inline-end: 0.5em;
23
- }
24
- &:hover {
25
- background: var(--ax-primary-color);
26
- color: var(--ax-primary-fore-color);
27
- transition: all 0.3s;
28
- }
29
-
30
- &.active {
31
- background: var(--ax-primary-color);
32
- color: var(--ax-primary-fore-color);
33
- }
34
- }
35
- }
36
- }
1
+ .ax {
2
+ &.nav-tabs {
3
+ display: flex;
4
+ list-style: none;
5
+ margin: 0;
6
+ padding: 0;
7
+ padding: 0;
8
+ border-bottom: 1px solid var(--ax-border-color);
9
+ li {
10
+ font-size: 0.875rem;
11
+ margin-inline-end: 0.5em;
12
+ padding: 0.5rem 1rem;
13
+ background: var(--ax-gray-color);
14
+ cursor: pointer;
15
+ -webkit-border-top-left-radius: var(--ax-size-border-radius);
16
+ -webkit-border-top-right-radius: var(--ax-size-border-radius);
17
+ -moz-border-radius-topleft: var(--ax-size-border-radius);
18
+ -moz-border-radius-topright: var(--ax-size-border-radius);
19
+ border-top-left-radius: var(--ax-size-border-radius);
20
+ border-top-right-radius: var(--ax-size-border-radius);
21
+ i {
22
+ margin-inline-end: 0.5em;
23
+ }
24
+ &:hover {
25
+ background: var(--ax-primary-color);
26
+ color: var(--ax-primary-fore-color);
27
+ transition: all 0.3s;
28
+ }
29
+
30
+ &.active {
31
+ background: var(--ax-primary-color);
32
+ color: var(--ax-primary-fore-color);
33
+ }
34
+ }
35
+ }
36
+ }
package/scss/toast.scss CHANGED
@@ -1,46 +1,46 @@
1
- @import "./variables.scss";
2
- .ax {
3
- &.toast {
4
- font-size: 0.875rem;
5
-
6
- &.info {
7
- background-color: var(--ax-info-color);
8
- color: var(--ax-info-fore-color);
9
- &:hover,
10
- &:active,
11
- &:focus {
12
- background-color: var(--ax-info-color);
13
- color: var(--ax-info-fore-color);
14
- }
15
- }
16
-
17
- &.success {
18
- &:hover,
19
- &:active,
20
- &:focus {
21
- background-color: var(--ax-success-color);
22
- color: var(--ax-success-fore-color);
23
- }
24
- }
25
-
26
- &.warning {
27
- &:hover,
28
- &:active,
29
- &:focus {
30
- background-color: var(--ax-warning-color);
31
- color: var(--ax-warning-fore-color);
32
- }
33
- }
34
-
35
- &.error {
36
- background-color: var(--ax-danger-color);
37
- color: var(--ax-danger-fore-color);
38
- &:hover,
39
- &:active,
40
- &:focus {
41
- background-color: var(--ax-danger-color);
42
- color: var(--ax-danger-fore-color);
43
- }
44
- }
45
- }
46
- }
1
+ @import "./variables.scss";
2
+ .ax {
3
+ &.toast {
4
+ font-size: 0.875rem;
5
+
6
+ &.info {
7
+ background-color: var(--ax-info-color);
8
+ color: var(--ax-info-fore-color);
9
+ &:hover,
10
+ &:active,
11
+ &:focus {
12
+ background-color: var(--ax-info-color);
13
+ color: var(--ax-info-fore-color);
14
+ }
15
+ }
16
+
17
+ &.success {
18
+ &:hover,
19
+ &:active,
20
+ &:focus {
21
+ background-color: var(--ax-success-color);
22
+ color: var(--ax-success-fore-color);
23
+ }
24
+ }
25
+
26
+ &.warning {
27
+ &:hover,
28
+ &:active,
29
+ &:focus {
30
+ background-color: var(--ax-warning-color);
31
+ color: var(--ax-warning-fore-color);
32
+ }
33
+ }
34
+
35
+ &.error {
36
+ background-color: var(--ax-danger-color);
37
+ color: var(--ax-danger-fore-color);
38
+ &:hover,
39
+ &:active,
40
+ &:focus {
41
+ background-color: var(--ax-danger-color);
42
+ color: var(--ax-danger-fore-color);
43
+ }
44
+ }
45
+ }
46
+ }
package/scss/tooltip.scss CHANGED
@@ -1,55 +1,55 @@
1
- .ax-tooltip {
2
- position: absolute;
3
- font-size: 0.875rem;
4
- min-width: fit-content;
5
- max-width: 150px;
6
- text-align: center;
7
- color: var(--ax-dark-fore-color);
8
- padding: 0.5rem 0.7rem;
9
- background: var(--ax-dark-color);
10
- border-radius: var(--ax-size-border-radius);
11
- z-index: 20000;
12
- opacity: 0;
13
-
14
- &:after {
15
- content: "";
16
- position: absolute;
17
- border-style: solid;
18
- }
19
-
20
- &.ax-tooltip-top:after {
21
- top: 100%;
22
- inset-inline-start: 50%;
23
- margin-inline-start: -5px;
24
- border-width: 5px;
25
- border-color: var(--ax-dark-color) transparent transparent transparent;
26
- }
27
-
28
- &.ax-tooltip-bottom:after {
29
- bottom: 100%;
30
- inset-inline-start: 50%;
31
- margin-inline-start: -5px;
32
- border-width: 5px;
33
- border-color: transparent transparent var(--ax-dark-color) transparent;
34
- }
35
-
36
- &.ax-tooltip-left:after {
37
- top: 50%;
38
- inset-inline-end: 100%;
39
- margin-top: -5px;
40
- border-width: 5px;
41
- border-color: transparent transparent transparent var(--ax-dark-color);
42
- }
43
-
44
- &.ax-tooltip-right:after {
45
- top: 50%;
46
- inset-inline-start: 100%;
47
- margin-top: -5px;
48
- border-width: 5px;
49
- border-color: transparent var(--ax-dark-color) transparent transparent;
50
- }
51
-
52
- &.ax-tooltip-show {
53
- opacity: 1;
54
- }
1
+ .ax-tooltip {
2
+ position: absolute;
3
+ font-size: 0.875rem;
4
+ min-width: fit-content;
5
+ max-width: 150px;
6
+ text-align: center;
7
+ color: var(--ax-dark-fore-color);
8
+ padding: 0.5rem 0.7rem;
9
+ background: var(--ax-dark-color);
10
+ border-radius: var(--ax-size-border-radius);
11
+ z-index: 20000;
12
+ opacity: 0;
13
+
14
+ &:after {
15
+ content: "";
16
+ position: absolute;
17
+ border-style: solid;
18
+ }
19
+
20
+ &.ax-tooltip-top:after {
21
+ top: 100%;
22
+ inset-inline-start: 50%;
23
+ margin-inline-start: -5px;
24
+ border-width: 5px;
25
+ border-color: var(--ax-dark-color) transparent transparent transparent;
26
+ }
27
+
28
+ &.ax-tooltip-bottom:after {
29
+ bottom: 100%;
30
+ inset-inline-start: 50%;
31
+ margin-inline-start: -5px;
32
+ border-width: 5px;
33
+ border-color: transparent transparent var(--ax-dark-color) transparent;
34
+ }
35
+
36
+ &.ax-tooltip-left:after {
37
+ top: 50%;
38
+ inset-inline-end: 100%;
39
+ margin-top: -5px;
40
+ border-width: 5px;
41
+ border-color: transparent transparent transparent var(--ax-dark-color);
42
+ }
43
+
44
+ &.ax-tooltip-right:after {
45
+ top: 50%;
46
+ inset-inline-start: 100%;
47
+ margin-top: -5px;
48
+ border-width: 5px;
49
+ border-color: transparent var(--ax-dark-color) transparent transparent;
50
+ }
51
+
52
+ &.ax-tooltip-show {
53
+ opacity: 1;
54
+ }
55
55
  }