@acorex/styles 7.0.17 → 7.0.19

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.17",
3
+ "version": "7.0.19",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
@@ -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
  }
@@ -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
  }
@@ -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 {
@@ -1,134 +1,133 @@
1
- @import "../mixins/index.scss";
1
+ @import '../mixins/index.scss';
2
2
 
3
3
  .ax-list {
4
+ display: flex;
5
+ flex-direction: column;
6
+ overflow: hidden;
7
+ font-size: 0.875rem;
8
+ background-color: rgb(var(--ax-color-surface));
9
+ height: 100%;
10
+ @include media('desktop') {
11
+ max-height: 320px;
12
+ }
13
+
14
+ .ax-header,
15
+ .ax-footer {
4
16
  display: flex;
5
- flex-direction: column;
6
- overflow: hidden;
7
- font-size: 0.875rem;
17
+ justify-content: space-between;
18
+ align-items: center;
8
19
  background-color: rgb(var(--ax-color-surface));
9
- height: 100%;
10
- @include media("desktop") {
11
- max-height: 320px;
12
- }
13
-
14
- .ax-header,
15
- .ax-footer {
16
- display: flex;
17
- justify-content: space-between;
18
- align-items: center;
19
- background-color: rgb(var(--ax-color-surface));
20
- border-color: rgb(var(--ax-color-border-default));
21
- }
22
-
23
- .ax-footer {
24
- border-top: 1px solid;
25
- }
26
-
27
- .ax-content {
28
- flex: 1 1 0%;
29
- overflow-y: auto;
30
- overflow-x: hidden;
31
-
32
- &.ax-list-items-container {
33
- padding-top: 0.5rem;
34
- padding-bottom: 0.5rem;
35
- overflow-y: auto;
36
- height: 100%;
37
-
38
- &.ax-vertical {
39
- display: grid;
40
- grid-template-columns: repeat(1, minmax(0, 1fr));
41
-
42
- &.ax-divide {
43
- border-top: 1px solid;
44
- border-bottom: 1px solid;
45
- }
46
- }
20
+ border-color: rgb(var(--ax-color-border-default));
21
+ }
22
+
23
+ .ax-footer {
24
+ border-top: 1px solid;
25
+ }
26
+
27
+ .ax-content {
28
+ flex: 1 1 0%;
29
+ overflow-y: auto;
30
+ overflow-x: hidden;
31
+
32
+ &.ax-list-items-container {
33
+ padding-top: 0.5rem;
34
+ padding-bottom: 0.5rem;
35
+ overflow-y: auto;
36
+ height: 100%;
37
+
38
+ &.ax-vertical {
39
+ display: grid;
40
+ grid-template-columns: repeat(1, minmax(0, 1fr));
41
+
42
+ &.ax-divide {
43
+ border-top: 1px solid;
44
+ border-bottom: 1px solid;
45
+ }
46
+ }
47
+
48
+ &.ax-default {
49
+ cursor: pointer;
50
+
51
+ .ax-list-item-group {
52
+ & > span {
53
+ font-weight: 500;
54
+ display: flex;
55
+ align-items: center;
56
+ padding: 0.75rem;
57
+ }
58
+
59
+ & > ul {
60
+ padding-left: 0.75rem;
61
+ padding-right: 0.75rem;
62
+ }
63
+ .ax-list-item {
64
+ border-radius: var(--ax-rounded-border-default);
65
+ margin-bottom: 0.2rem;
66
+ }
67
+ }
47
68
 
48
- &.ax-default {
49
- cursor: pointer;
50
-
51
- .ax-list-item-group {
52
- & > span {
53
- font-weight: bold;
54
- display: flex;
55
- align-items: center;
56
- padding: 0.75rem;
57
- }
58
-
59
- & > ul {
60
- padding-left: 0.75rem;
61
- padding-right: 0.75rem;
62
- }
63
- .ax-list-item {
64
- border-radius: var(--ax-rounded-border-default);
65
- margin-bottom: 0.2rem;
66
- }
67
- }
68
-
69
- .ax-list-item {
70
- padding-top: 0.5rem;
71
- padding-bottom: 0.5rem;
72
- padding-inline-start: 0.75rem;
73
- padding-inline-end: 1rem;
74
- position: relative;
75
- &:focus,
76
- &:focus-visible {
77
- outline: 2px solid transparent;
78
- outline-offset: 2px;
79
- }
80
-
81
- &.ax-state-selected {
82
- &:not(&.ax-check-box){
83
- &::after {
84
- position: absolute;
85
- inset-inline-end: 0;
86
- top: 50%;
87
- transform: translate(-50%, -50%);
88
- font-size: 1.5rem;
89
- font-family: "acorex-icons";
90
- content: "\e912";
91
- color: rgb(var(--ax-color-primary));
92
- }
93
- }
94
- }
95
-
96
- // &:not(.ax-check-box) {
97
- // &.ax-state-selected {
98
- // }
99
- // }
100
-
101
- &.ax-state-disabled {
102
- cursor: not-allowed;
103
- opacity: 0.5;
104
- }
105
-
106
- &:focus,
107
- &:focus-within,
108
- &:hover {
109
- background-color: rgba(var(--ax-color-ghost), 0.05);
110
- }
111
- &.ax-state-focus {
112
- background-color: rgba(var(--ax-color-ghost), 0.05);
113
- }
114
- }
69
+ .ax-list-item {
70
+ padding-inline-start: 0.75rem;
71
+ padding-inline-end: 1rem;
72
+ position: relative;
73
+ height: var(--ax-size-default);
74
+ display: flex;
75
+ justify-content: space-between;
76
+ align-items: center;
77
+ user-select: none;
78
+ &:focus,
79
+ &:focus-visible {
80
+ outline: 2px solid transparent;
81
+ outline-offset: 2px;
82
+ }
83
+ &.ax-state-checkbox {
84
+ .ax-checkbox-label {
85
+ margin-inline-start: 0.5rem;
115
86
  }
116
-
117
- .ax-list-loading-container {
118
- display: flex;
119
- justify-content: center;
120
- padding: 0.5rem;
87
+ }
88
+ &.ax-state-selected {
89
+ .ax-selected-icon {
90
+ color: rgb(var(--ax-color-primary));
91
+ font-size: 1.5rem;
121
92
  }
93
+ }
94
+
95
+ // &:not(.ax-check-box) {
96
+ // &.ax-state-selected {
97
+ // }
98
+ // }
99
+
100
+ &.ax-state-disabled {
101
+ cursor: not-allowed;
102
+ opacity: 0.5;
103
+ }
104
+
105
+ &:focus,
106
+ &:focus-within,
107
+ &:hover {
108
+ background-color: rgba(var(--ax-color-ghost), 0.05);
109
+ }
110
+ &.ax-state-focus {
111
+ background-color: rgba(var(--ax-color-ghost), 0.05);
112
+ }
122
113
  }
123
- }
114
+ }
124
115
 
125
- .ax-search-box-container {
116
+ .ax-list-loading-container {
117
+ display: flex;
118
+ justify-content: center;
126
119
  padding: 0.5rem;
127
-
128
- &.ax-state-hidden {
129
- display: none;
130
- }
120
+ }
131
121
  }
132
- .ax-footer {
122
+ }
123
+
124
+ .ax-search-box-container {
125
+ padding: 0.5rem;
126
+
127
+ &.ax-state-hidden {
128
+ display: none;
133
129
  }
130
+ }
131
+ .ax-footer {
132
+ }
134
133
  }
@@ -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
  }
@@ -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
+ }
@@ -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
  }