@acorex/styles 5.0.47 → 5.0.50

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/_selection-list.scss +22 -0
  3. package/src/components/_table.scss +27 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.47",
3
+ "version": "5.0.50",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_selection-list.scss CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  &.ax-vertical {
6
6
  @apply ax-flex-col;
7
+
7
8
  .ax-checkbox-container,
8
9
  .ax-radio-container {
9
10
  @apply ax-mb-4;
@@ -29,4 +30,25 @@
29
30
  }
30
31
  }
31
32
  }
33
+ .ax-separate-style {
34
+ .ax-selection-list {
35
+ &.ax-vertical {
36
+ & > div {
37
+ @apply ax-pb-3.5 ax-border-b ax-border-light-300 last:ax-border-0;
38
+ }
39
+ }
40
+ }
41
+ }
42
+ .ax-boxed-style {
43
+ .ax-selection-list {
44
+ &.ax-vertical {
45
+ & > div {
46
+ @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md;
47
+ &.ax-state-selected {
48
+ @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500;
49
+ }
50
+ }
51
+ }
52
+ }
53
+ }
32
54
  }
package/src/components/_table.scss CHANGED
@@ -1,52 +1,47 @@
1
1
  @layer components {
2
2
  .ax-table {
3
- @apply ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-dark-400;
4
- th {
5
- @apply ax-py-3 ax-px-6 ax-bg-light-200 dark:ax-bg-dark-400/50 ax-text-start ax-font-normal ax-text-sm;
6
- }
7
-
8
- tr,
9
- th,
3
+ @apply ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-dark-400;
10
4
  td {
11
5
  @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400 ax-px-6 ax-py-4 ax-text-sm;
12
6
  }
13
- &.ax-table-alternate {
7
+ thead {
8
+ th {
9
+ @apply ax-text-sm ax-font-bold ax-text-start ax-py-4 ax-px-6;
10
+ }
14
11
  tr {
15
- &:nth-child(even) {
16
- @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
17
- }
12
+ @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400;
18
13
  }
19
14
  }
20
- &.ax-table-responsive {
21
- @media screen and (max-width: 640px) {
22
- @apply ax-border-none #{!important};
23
- thead tr {
24
- @apply ax-absolute ax-top-[-9999em] ax-left-[-9999em];
25
- }
26
-
15
+ &.ax-table-alternate {
16
+ tbody {
27
17
  tr {
28
- @apply ax-block ax-border ax-border-light-200 dark:ax-border-dark-400 ax-p-0;
18
+ &:nth-child(odd) {
19
+ @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
20
+ }
29
21
  }
30
-
31
- tr + tr {
32
- @apply ax-mt-6;
22
+ }
23
+ }
24
+ @media screen and (max-width: 601px) {
25
+ &.ax-table-responsive {
26
+ @apply ax-break-words ax-block ax-border-0;
27
+ thead {
28
+ @apply ax-absolute -ax-left-full -ax-top-full;
33
29
  }
34
- /* Get table cells to act like rows */
35
30
 
36
31
  td {
37
- padding-inline-start: 50%;
38
- @apply ax-relative ax-flex ax-justify-start ax-items-center ax-border-b ax-border-light-200 dark:ax-border-dark-400 last:ax-border-0;
32
+ @apply ax-block ax-float-left ax-w-full ax-clear-both ax-bg-white ax-px-1.5 ax-py-2.5 ax-box-border last:ax-border-0;
39
33
  &:before {
40
- @apply ax-font-normal ax-text-sm ax-inline-block ax-w-full ax-relative ax-z-10 ax-truncate;
41
34
  content: attr(data-label);
42
- margin-left: -100%;
43
- }
44
-
45
- &:after {
46
- @apply ax-bg-light-200 ax-absolute ax-start-0 ax-top-0 ax-z-0 ax-w-[45%] ax-h-full ax-border-b ax-border-white;
47
- content: "";
35
+ @apply ax-block;
48
36
  }
49
37
  }
38
+ tr {
39
+ @apply ax-border ax-border-light-200 dark:ax-border-dark-400;
40
+ }
41
+ tr,
42
+ tbody {
43
+ @apply ax-block ax-float-left ax-w-full ax-mb-2.5;
44
+ }
50
45
  }
51
46
  }
52
47
  }