@acorex/styles 7.0.17 → 7.0.18

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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/base/_theme.scss +14 -15
  3. package/src/icons/Read Me.txt +7 -7
  4. package/src/icons/demo-files/demo.css +152 -152
  5. package/src/icons/demo-files/demo.js +30 -30
  6. package/src/shared/_check-box.scss +38 -39
  7. package/src/shared/_editor-container.scss +2 -2
  8. package/src/shared/_radio.scss +31 -31
  9. package/src/shared/_skeleton.scss +27 -22
  10. package/src/shared/_table.scss +99 -105
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.17",
3
+ "version": "7.0.18",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/base/_theme.scss CHANGED
@@ -1,19 +1,18 @@
1
1
  @mixin light-variables() {
2
- --ax-color-border-default: 0, 0, 0, 0.12;
3
- --ax-color-background-default: 250, 250, 250;
4
- --ax-color-text-default: 18, 18, 18;
5
- --ax-color-surface: 255, 255, 255;
6
- --ax-color-on-surface: 242, 242, 242;
7
- --ax-color-ghost: 0, 0, 0;
8
- --ax-color-ghost-fore: 255, 255, 255;
2
+ --ax-color-border-default: 30, 41, 59, 0.12;
3
+ --ax-color-background-default: 250, 250, 250;
4
+ --ax-color-text-default: 18, 18, 18;
5
+ --ax-color-surface: 255, 255, 255;
6
+ --ax-color-on-surface: 242, 242, 242;
7
+ --ax-color-ghost: 30, 41, 59;
8
+ --ax-color-ghost-fore: 255, 255, 255;
9
9
  }
10
10
  @mixin dark-variables() {
11
- --ax-color-background-default: 21, 27, 36;
12
- --ax-color-text-default: 224, 224, 224;
13
- --ax-color-border-default: 255, 255, 255, 0.12;
14
- --ax-color-surface: 23, 31, 45;
15
- --ax-color-on-surface: 25, 36, 54;
16
- --ax-color-ghost: 255, 255, 255;
17
- --ax-color-ghost-fore: 0, 0, 0;
18
-
11
+ --ax-color-background-default: 21, 27, 36;
12
+ --ax-color-text-default: 224, 224, 224;
13
+ --ax-color-border-default: 255, 255, 255, 0.12;
14
+ --ax-color-surface: 23, 31, 45;
15
+ --ax-color-on-surface: 25, 36, 54;
16
+ --ax-color-ghost: 255, 255, 255;
17
+ --ax-color-ghost-fore: 0, 0, 0;
19
18
  }
package/src/icons/Read Me.txt CHANGED
@@ -1,7 +1,7 @@
1
- Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2
-
3
- To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
4
-
5
- You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
6
-
7
- You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
1
+ Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2
+
3
+ To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
4
+
5
+ You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
6
+
7
+ You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
package/src/icons/demo-files/demo.css CHANGED
@@ -1,152 +1,152 @@
1
- body {
2
- padding: 0;
3
- margin: 0;
4
- font-family: sans-serif;
5
- font-size: 1em;
6
- line-height: 1.5;
7
- color: #555;
8
- background: #fff;
9
- }
10
- h1 {
11
- font-size: 1.5em;
12
- font-weight: normal;
13
- }
14
- small {
15
- font-size: .66666667em;
16
- }
17
- a {
18
- color: #e74c3c;
19
- text-decoration: none;
20
- }
21
- a:hover, a:focus {
22
- box-shadow: 0 1px #e74c3c;
23
- }
24
- .bshadow0, input {
25
- box-shadow: inset 0 -2px #e7e7e7;
26
- }
27
- input:hover {
28
- box-shadow: inset 0 -2px #ccc;
29
- }
30
- input, fieldset {
31
- font-family: sans-serif;
32
- font-size: 1em;
33
- margin: 0;
34
- padding: 0;
35
- border: 0;
36
- }
37
- input {
38
- color: inherit;
39
- line-height: 1.5;
40
- height: 1.5em;
41
- padding: .25em 0;
42
- }
43
- input:focus {
44
- outline: none;
45
- box-shadow: inset 0 -2px #449fdb;
46
- }
47
- .glyph {
48
- font-size: 16px;
49
- width: 15em;
50
- padding-bottom: 1em;
51
- margin-right: 4em;
52
- margin-bottom: 1em;
53
- float: left;
54
- overflow: hidden;
55
- }
56
- .liga {
57
- width: 80%;
58
- width: calc(100% - 2.5em);
59
- }
60
- .talign-right {
61
- text-align: right;
62
- }
63
- .talign-center {
64
- text-align: center;
65
- }
66
- .bgc1 {
67
- background: #f1f1f1;
68
- }
69
- .fgc1 {
70
- color: #999;
71
- }
72
- .fgc0 {
73
- color: #000;
74
- }
75
- p {
76
- margin-top: 1em;
77
- margin-bottom: 1em;
78
- }
79
- .mvm {
80
- margin-top: .75em;
81
- margin-bottom: .75em;
82
- }
83
- .mtn {
84
- margin-top: 0;
85
- }
86
- .mtl, .mal {
87
- margin-top: 1.5em;
88
- }
89
- .mbl, .mal {
90
- margin-bottom: 1.5em;
91
- }
92
- .mal, .mhl {
93
- margin-left: 1.5em;
94
- margin-right: 1.5em;
95
- }
96
- .mhmm {
97
- margin-left: 1em;
98
- margin-right: 1em;
99
- }
100
- .mls {
101
- margin-left: .25em;
102
- }
103
- .ptl {
104
- padding-top: 1.5em;
105
- }
106
- .pbs, .pvs {
107
- padding-bottom: .25em;
108
- }
109
- .pvs, .pts {
110
- padding-top: .25em;
111
- }
112
- .unit {
113
- float: left;
114
- }
115
- .unitRight {
116
- float: right;
117
- }
118
- .size1of2 {
119
- width: 50%;
120
- }
121
- .size1of1 {
122
- width: 100%;
123
- }
124
- .clearfix:before, .clearfix:after {
125
- content: " ";
126
- display: table;
127
- }
128
- .clearfix:after {
129
- clear: both;
130
- }
131
- .hidden-true {
132
- display: none;
133
- }
134
- .textbox0 {
135
- width: 3em;
136
- background: #f1f1f1;
137
- padding: .25em .5em;
138
- line-height: 1.5;
139
- height: 1.5em;
140
- }
141
- #testDrive {
142
- display: block;
143
- padding-top: 24px;
144
- line-height: 1.5;
145
- }
146
- .fs0 {
147
- font-size: 16px;
148
- }
149
- .fs1 {
150
- font-size: 32px;
151
- }
152
-
1
+ body {
2
+ padding: 0;
3
+ margin: 0;
4
+ font-family: sans-serif;
5
+ font-size: 1em;
6
+ line-height: 1.5;
7
+ color: #555;
8
+ background: #fff;
9
+ }
10
+ h1 {
11
+ font-size: 1.5em;
12
+ font-weight: normal;
13
+ }
14
+ small {
15
+ font-size: .66666667em;
16
+ }
17
+ a {
18
+ color: #e74c3c;
19
+ text-decoration: none;
20
+ }
21
+ a:hover, a:focus {
22
+ box-shadow: 0 1px #e74c3c;
23
+ }
24
+ .bshadow0, input {
25
+ box-shadow: inset 0 -2px #e7e7e7;
26
+ }
27
+ input:hover {
28
+ box-shadow: inset 0 -2px #ccc;
29
+ }
30
+ input, fieldset {
31
+ font-family: sans-serif;
32
+ font-size: 1em;
33
+ margin: 0;
34
+ padding: 0;
35
+ border: 0;
36
+ }
37
+ input {
38
+ color: inherit;
39
+ line-height: 1.5;
40
+ height: 1.5em;
41
+ padding: .25em 0;
42
+ }
43
+ input:focus {
44
+ outline: none;
45
+ box-shadow: inset 0 -2px #449fdb;
46
+ }
47
+ .glyph {
48
+ font-size: 16px;
49
+ width: 15em;
50
+ padding-bottom: 1em;
51
+ margin-right: 4em;
52
+ margin-bottom: 1em;
53
+ float: left;
54
+ overflow: hidden;
55
+ }
56
+ .liga {
57
+ width: 80%;
58
+ width: calc(100% - 2.5em);
59
+ }
60
+ .talign-right {
61
+ text-align: right;
62
+ }
63
+ .talign-center {
64
+ text-align: center;
65
+ }
66
+ .bgc1 {
67
+ background: #f1f1f1;
68
+ }
69
+ .fgc1 {
70
+ color: #999;
71
+ }
72
+ .fgc0 {
73
+ color: #000;
74
+ }
75
+ p {
76
+ margin-top: 1em;
77
+ margin-bottom: 1em;
78
+ }
79
+ .mvm {
80
+ margin-top: .75em;
81
+ margin-bottom: .75em;
82
+ }
83
+ .mtn {
84
+ margin-top: 0;
85
+ }
86
+ .mtl, .mal {
87
+ margin-top: 1.5em;
88
+ }
89
+ .mbl, .mal {
90
+ margin-bottom: 1.5em;
91
+ }
92
+ .mal, .mhl {
93
+ margin-left: 1.5em;
94
+ margin-right: 1.5em;
95
+ }
96
+ .mhmm {
97
+ margin-left: 1em;
98
+ margin-right: 1em;
99
+ }
100
+ .mls {
101
+ margin-left: .25em;
102
+ }
103
+ .ptl {
104
+ padding-top: 1.5em;
105
+ }
106
+ .pbs, .pvs {
107
+ padding-bottom: .25em;
108
+ }
109
+ .pvs, .pts {
110
+ padding-top: .25em;
111
+ }
112
+ .unit {
113
+ float: left;
114
+ }
115
+ .unitRight {
116
+ float: right;
117
+ }
118
+ .size1of2 {
119
+ width: 50%;
120
+ }
121
+ .size1of1 {
122
+ width: 100%;
123
+ }
124
+ .clearfix:before, .clearfix:after {
125
+ content: " ";
126
+ display: table;
127
+ }
128
+ .clearfix:after {
129
+ clear: both;
130
+ }
131
+ .hidden-true {
132
+ display: none;
133
+ }
134
+ .textbox0 {
135
+ width: 3em;
136
+ background: #f1f1f1;
137
+ padding: .25em .5em;
138
+ line-height: 1.5;
139
+ height: 1.5em;
140
+ }
141
+ #testDrive {
142
+ display: block;
143
+ padding-top: 24px;
144
+ line-height: 1.5;
145
+ }
146
+ .fs0 {
147
+ font-size: 16px;
148
+ }
149
+ .fs1 {
150
+ font-size: 32px;
151
+ }
152
+
package/src/icons/demo-files/demo.js CHANGED
@@ -1,30 +1,30 @@
1
- if (!('boxShadow' in document.body.style)) {
2
- document.body.setAttribute('class', 'noBoxShadow');
3
- }
4
-
5
- document.body.addEventListener("click", function(e) {
6
- var target = e.target;
7
- if (target.tagName === "INPUT" &&
8
- target.getAttribute('class').indexOf('liga') === -1) {
9
- target.select();
10
- }
11
- });
12
-
13
- (function() {
14
- var fontSize = document.getElementById('fontSize'),
15
- testDrive = document.getElementById('testDrive'),
16
- testText = document.getElementById('testText');
17
- function updateTest() {
18
- testDrive.innerHTML = testText.value || String.fromCharCode(160);
19
- if (window.icomoonLiga) {
20
- window.icomoonLiga(testDrive);
21
- }
22
- }
23
- function updateSize() {
24
- testDrive.style.fontSize = fontSize.value + 'px';
25
- }
26
- fontSize.addEventListener('change', updateSize, false);
27
- testText.addEventListener('input', updateTest, false);
28
- testText.addEventListener('change', updateTest, false);
29
- updateSize();
30
- }());
1
+ if (!('boxShadow' in document.body.style)) {
2
+ document.body.setAttribute('class', 'noBoxShadow');
3
+ }
4
+
5
+ document.body.addEventListener("click", function(e) {
6
+ var target = e.target;
7
+ if (target.tagName === "INPUT" &&
8
+ target.getAttribute('class').indexOf('liga') === -1) {
9
+ target.select();
10
+ }
11
+ });
12
+
13
+ (function() {
14
+ var fontSize = document.getElementById('fontSize'),
15
+ testDrive = document.getElementById('testDrive'),
16
+ testText = document.getElementById('testText');
17
+ function updateTest() {
18
+ testDrive.innerHTML = testText.value || String.fromCharCode(160);
19
+ if (window.icomoonLiga) {
20
+ window.icomoonLiga(testDrive);
21
+ }
22
+ }
23
+ function updateSize() {
24
+ testDrive.style.fontSize = fontSize.value + 'px';
25
+ }
26
+ fontSize.addEventListener('change', updateSize, false);
27
+ testText.addEventListener('input', updateTest, false);
28
+ testText.addEventListener('change', updateTest, false);
29
+ updateSize();
30
+ }());
package/src/shared/_check-box.scss CHANGED
@@ -1,48 +1,47 @@
1
- @import "../mixins/index.scss";
1
+ @import '../mixins/index.scss';
2
2
 
3
- @include darkMode(){
4
- .ax-checkbox {
5
- background-color: rgba(var(--ax-color-ghost), 0.05);
6
-
7
- }
3
+ @include darkMode() {
4
+ .ax-checkbox {
5
+ background-color: rgba(var(--ax-color-ghost), 0.05);
6
+ }
8
7
  }
9
8
  .ax-checkbox {
10
- width: 1rem;
11
- height: 1rem;
12
- border: 1px solid;
13
- border-color: rgba(var(--ax-color-border-default));
14
- background-color: rgb(var(--ax-color-surface));
15
- border-radius: 0.2rem;
16
- margin: 0;
17
- outline: none;
18
- vertical-align: middle;
19
- appearance: none;
9
+ width: 1rem;
10
+ height: 1rem;
11
+ border: 1px solid;
12
+ border-color: rgba(var(--ax-color-ghost), 0.3);
13
+ background-color: rgb(var(--ax-color-surface));
14
+ border-radius: 0.2rem;
15
+ margin: 0;
16
+ outline: none;
17
+ vertical-align: middle;
18
+ appearance: none;
20
19
 
21
- &:checked,
22
- &:indeterminate {
23
- border-color: rgba(var(--ax-color-primary)) !important;
24
- background-color: rgba(var(--ax-color-primary)) !important;
25
- background-repeat: no-repeat;
26
- background-size: contain;
27
- }
20
+ &:checked,
21
+ &:indeterminate {
22
+ border-color: rgba(var(--ax-color-primary)) !important;
23
+ background-color: rgba(var(--ax-color-primary)) !important;
24
+ background-repeat: no-repeat;
25
+ background-size: contain;
26
+ }
28
27
 
29
- &:checked {
30
- 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");
31
- }
28
+ &:checked {
29
+ 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");
30
+ }
32
31
 
33
- &:indeterminate {
34
- background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
35
- }
32
+ &:indeterminate {
33
+ background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
34
+ }
36
35
 
37
- &:focus-visible {
38
- outline-offset: 2px;
39
- outline-width: 2px;
40
- outline-style: solid;
41
- outline-color: rgba(var(--ax-color-primary));
42
- }
36
+ &:focus-visible {
37
+ outline-offset: 2px;
38
+ outline-width: 2px;
39
+ outline-style: solid;
40
+ outline-color: rgba(var(--ax-color-primary));
41
+ }
43
42
 
44
- &:disabled {
45
- cursor: not-allowed;
46
- opacity: 0.5;
47
- }
43
+ &:disabled {
44
+ cursor: not-allowed;
45
+ opacity: 0.5;
46
+ }
48
47
  }
package/src/shared/_editor-container.scss CHANGED
@@ -133,7 +133,7 @@
133
133
  &.ax-state-error {
134
134
  border-color: rgb(var(--ax-color-danger-500));
135
135
  &:focus-within {
136
- outline-color: rgb(var(--ax-color-danger-500));
136
+ box-shadow: 0px 0 0px 1px rgb(var(--ax-color-danger-500));
137
137
  }
138
138
  .ax-input {
139
139
  &::placeholder {
@@ -146,7 +146,7 @@
146
146
  outline-color: rgb(var(--ax-color-success-500));
147
147
  border-color: rgb(var(--ax-color-success-500));
148
148
  &:focus-within {
149
- outline-color: rgb(var(--ax-color-success-500));
149
+ box-shadow: 0px 0 0px 1px rgb(var(--ax-color-success-500));
150
150
  }
151
151
  .ax-input {
152
152
  &::placeholder {
package/src/shared/_radio.scss CHANGED
@@ -1,38 +1,38 @@
1
- @import "../mixins/index.scss";
1
+ @import '../mixins/index.scss';
2
2
  @include darkMode() {
3
- .ax-radio {
4
- background-color: rgba(var(--ax-color-ghost), 0.05);
5
- }
3
+ .ax-radio {
4
+ background-color: rgba(var(--ax-color-ghost), 0.05);
5
+ }
6
6
  }
7
7
  .ax-radio {
8
- width: 1rem;
9
- height: 1rem;
10
- border: 1px solid;
11
- border-color: rgb(var(--ax-color-border-default));
12
- border-radius: 999rem;
13
- background-color: rgb(var(--ax-color-surface));
14
- outline: 2px solid transparent;
15
- outline-offset: 2px;
16
- vertical-align: middle;
17
- appearance: none;
8
+ width: 1rem;
9
+ height: 1rem;
10
+ border: 1px solid;
11
+ border-color: rgba(var(--ax-color-ghost), 0.3);
12
+ border-radius: 999rem;
13
+ background-color: rgb(var(--ax-color-surface));
14
+ outline: 2px solid transparent;
15
+ outline-offset: 2px;
16
+ vertical-align: middle;
17
+ appearance: none;
18
18
 
19
- &:checked {
20
- border-color: rgb(var(--ax-color-primary));
21
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
22
- background-color: rgb(var(--ax-color-primary));
23
- background-repeat: no-repeat;
24
- background-size: contain;
25
- }
19
+ &:checked {
20
+ border-color: rgb(var(--ax-color-primary));
21
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
22
+ background-color: rgb(var(--ax-color-primary));
23
+ background-repeat: no-repeat;
24
+ background-size: contain;
25
+ }
26
26
 
27
- &:focus-visible {
28
- outline-offset: 2px;
29
- outline-width: 2px;
30
- outline-style: solid;
31
- outline-color: rgba(var(--ax-color-primary));
32
- }
27
+ &:focus-visible {
28
+ outline-offset: 2px;
29
+ outline-width: 2px;
30
+ outline-style: solid;
31
+ outline-color: rgba(var(--ax-color-primary));
32
+ }
33
33
 
34
- &:disabled {
35
- opacity: 0.5;
36
- cursor: not-allowed;
37
- }
34
+ &:disabled {
35
+ opacity: 0.5;
36
+ cursor: not-allowed;
37
+ }
38
38
  }
package/src/shared/_skeleton.scss CHANGED
@@ -1,26 +1,31 @@
1
1
  .ax-skeleton {
2
- position: relative;
3
- overflow: hidden;
4
- background-color: rgba(var(--ax-color-ghost),0.05);
5
- &.ax-skeleton-animate {
6
- &::before {
7
- content: "";
8
- display: block;
9
- position: absolute;
10
- top: 0;
11
- height: 100%;
12
- width: 14rem;
13
- left: -200px;
14
- background: linear-gradient(to right, transparent 0%, rgba(var(--ax-color-ghost),0.03) 50%, transparent 100%);
15
- animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
16
- }
2
+ position: relative;
3
+ overflow: hidden;
4
+ background-color: rgba(var(--ax-color-ghost), 0.15);
5
+ &.ax-skeleton-animate {
6
+ &::before {
7
+ content: '';
8
+ display: block;
9
+ position: absolute;
10
+ top: 0;
11
+ height: 100%;
12
+ width: 14rem;
13
+ left: -200px;
14
+ background: linear-gradient(
15
+ to right,
16
+ transparent 0%,
17
+ rgba(var(--ax-color-ghost), 0.03) 50%,
18
+ transparent 100%
19
+ );
20
+ animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
17
21
  }
22
+ }
18
23
  }
19
24
  @keyframes load {
20
- from {
21
- left: -200px;
22
- }
23
- to {
24
- left: 100%;
25
- }
26
- }
25
+ from {
26
+ left: -200px;
27
+ }
28
+ to {
29
+ left: 100%;
30
+ }
31
+ }
package/src/shared/_table.scss CHANGED
@@ -1,116 +1,110 @@
1
1
  @layer components {
2
- .ax-table {
3
- width: 100%;
4
- border-radius: var(--ax-rounded-border-default);
5
- border-collapse: collapse;
6
- border: 1px solid;
7
- border-color: rgb(var(--ax-color-border-default));
8
- overflow: hidden;
9
- font-size: 0.875rem;
10
- td {
11
- border-bottom: 1px solid;
12
- border-color: rgb(var(--ax-color-border-default));
13
- padding: 1rem 1.5rem;
14
- }
15
- thead {
16
- background-color: rgb(var(--ax-color-ghost), 0.05);
17
- box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
18
- border-bottom: 1px solid;
19
- border-color: rgb(var(--ax-color-border-default));
20
- th {
21
- font-weight: bold;
22
- text-align: start;
23
- padding: 1rem 1.5rem;
24
-
25
- }
2
+ .ax-table {
3
+ width: 100%;
4
+ border-radius: var(--ax-rounded-border-default);
5
+ border-spacing: 0px;
6
+ border-collapse: separate;
7
+ border: 1px solid;
8
+ border-color: rgb(var(--ax-color-border-default));
9
+ overflow: hidden;
10
+ font-size: 0.875rem;
11
+ td {
12
+ border-bottom: 1px solid;
13
+ border-color: rgb(var(--ax-color-border-default));
14
+ padding: 1rem;
15
+ }
16
+ thead {
17
+ background-color: rgb(var(--ax-color-ghost), 0.05);
18
+ border-bottom: 1px solid;
19
+ border-color: rgb(var(--ax-color-border-default));
20
+ th {
21
+ font-weight: 500;
22
+ text-align: start;
23
+ padding: 1rem;
24
+ }
25
+ }
26
+ &.ax-table-alternate {
27
+ tbody {
28
+ tr {
29
+ &:nth-child(even) {
30
+ background-color: rgb(var(--ax-color-ghost), 0.03);
31
+ }
26
32
  }
27
- &.ax-table-alternate {
28
- tbody {
29
- tr {
30
- &:nth-child(even) {
31
- background-color: rgb(var(--ax-color-ghost), 0.03);
32
- }
33
- }
34
- }
33
+ }
34
+ }
35
+ &.ax-table-bordered {
36
+ thead {
37
+ th {
38
+ border-top: 0 !important;
35
39
  }
36
- &.ax-table-bordered {
37
- thead {
38
- th {
39
- border-top: 0 !important;
40
- }
40
+ }
41
+ tbody {
42
+ tr {
43
+ &:last-child {
44
+ td {
45
+ border-bottom: 0 !important;
41
46
  }
42
- tbody {
43
- tr {
44
- &:last-child {
45
- td {
46
- border-bottom: 0 !important;
47
- }
48
- }
49
- td {
50
- &:last-child {
51
- border-bottom: 0 !important;
52
-
53
- }
54
- }
55
- }
56
- }
57
-
58
- td,
59
- th {
60
- border: 1px solid;
61
- border-color: rgb(var(--ax-color-border-default));
62
- &:first-child {
63
- border-inline-start-width: 0px;
64
-
65
- }
66
- &:last-child {
67
- border-inline-end-width: 0px;
68
-
69
- }
47
+ }
48
+ td {
49
+ &:last-child {
50
+ border-bottom: 0 !important;
70
51
  }
52
+ }
71
53
  }
72
- @media screen and (max-width: 601px) {
73
- &.ax-table-responsive {
74
- overflow-wrap: break-word;
75
- display: block;
76
- border: 0px;
77
- thead {
78
- position: absolute;
79
- inset-inline-start: -100%;
80
- top: -100%;
54
+ }
81
55
 
82
- }
56
+ td,
57
+ th {
58
+ border: 1px solid;
59
+ border-color: rgb(var(--ax-color-border-default));
60
+ &:first-child {
61
+ border-inline-start-width: 0px;
62
+ }
63
+ &:last-child {
64
+ border-inline-end-width: 0px;
65
+ }
66
+ }
67
+ }
68
+ @media screen and (max-width: 601px) {
69
+ &.ax-table-responsive {
70
+ overflow-wrap: break-word;
71
+ display: block;
72
+ border: 0px;
73
+ thead {
74
+ position: absolute;
75
+ inset-inline-start: -100%;
76
+ top: -100%;
77
+ }
83
78
 
84
- td {
85
-
86
- display: block;
87
- float: inline-start;
88
- width: 100%;
89
- clear: both;
90
- background: rgb(var(--ax-color-surface));
91
- padding: 0.375rem 0.625rem;
92
- box-sizing: border-box;
93
- &:last-child{
94
- border: 0;
95
- }
96
- &:before {
97
- content: attr(data-label);
98
- display: block;
99
- font-weight: bold;
100
- }
101
- }
102
- tr {
103
- border: 1px solid;
104
- border-color: rgb(var(--ax-color-border-default));
105
- }
106
- tr,
107
- tbody {
108
- display: block;
109
- width: 100%;
110
- float: inline-start;
111
- margin-bottom: 0.625rem;
112
- }
113
- }
79
+ td {
80
+ display: block;
81
+ float: inline-start;
82
+ width: 100%;
83
+ clear: both;
84
+ background: rgb(var(--ax-color-surface));
85
+ padding: 0.375rem 0.625rem;
86
+ box-sizing: border-box;
87
+ &:last-child {
88
+ border: 0;
89
+ }
90
+ &:before {
91
+ content: attr(data-label);
92
+ display: block;
93
+ font-weight: bold;
94
+ }
95
+ }
96
+ tr {
97
+ border: 1px solid;
98
+ border-color: rgb(var(--ax-color-border-default));
99
+ }
100
+ tr,
101
+ tbody {
102
+ display: block;
103
+ width: 100%;
104
+ float: inline-start;
105
+ margin-bottom: 0.625rem;
114
106
  }
107
+ }
115
108
  }
109
+ }
116
110
  }