@acorex/styles 5.0.48 → 5.0.51

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 (12) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +2 -2
  3. package/src/components/_calendar.scss +8 -8
  4. package/src/components/_dialog.scss +9 -7
  5. package/src/components/_drawer.scss +4 -4
  6. package/src/components/_popup.scss +5 -42
  7. package/src/components/_progress.scss +62 -0
  8. package/src/components/_selection-list.scss +22 -0
  9. package/src/components/_table.scss +27 -32
  10. package/src/components/_treeview.scss +2 -2
  11. package/src/components/index.scss +1 -0
  12. package/src/utility/_mixins.scss +9 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.48",
3
+ "version": "5.0.51",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -6,11 +6,12 @@
6
6
  }
7
7
 
8
8
  :root {
9
- --ax-base:8px;
9
+ --ax-base: 8px;
10
10
  --ax-base-size: 8px;
11
11
  --ax-base-ratio: 6;
12
12
  --ax-color-default-background: 255, 255, 255;
13
13
  --ax-color-default-color: 107, 114, 128;
14
+ --ax-overlay-full-width: 93;
14
15
  @include colors($theme-colors);
15
16
  }
16
17
 
@@ -22,7 +23,6 @@ body {
22
23
  font-size: 16px;
23
24
  }
24
25
 
25
-
26
26
  html.ax-dark,
27
27
  html.ax-dark * {
28
28
  --tw-ring-offset-color: #151b24;
package/src/components/_calendar.scss CHANGED
@@ -9,16 +9,16 @@
9
9
  }
10
10
 
11
11
  .ax-calendar-header {
12
- @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
12
+ @apply ax-flex ax-justify-between ax-py-1 ax-px-2 ax-border-b ax-border-light-300 ax-border-solid dark:ax-border-transparent;
13
13
 
14
- .ax-nav-button {
15
- @apply ax-col-span-8 ax-justify-start;
16
- }
14
+ // .ax-nav-button {
15
+ // @apply ax-col-span-8 ax-justify-start;
16
+ // }
17
17
 
18
- .ax-prev-button,
19
- .ax-next-button {
20
- @apply ax-col-span-2 ax-justify-center ax-ms-1;
21
- }
18
+ // .ax-prev-button,
19
+ // .ax-next-button {
20
+ // @apply ax-col-span-2 ax-justify-center ax-ms-1;
21
+ // }
22
22
  }
23
23
 
24
24
  .ax-calendar-body {
package/src/components/_dialog.scss CHANGED
@@ -1,13 +1,15 @@
1
1
  @layer components {
2
2
  .ax-dialog {
3
3
  @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
4
- @include control-states('surface');
5
- @screen sm {
6
- width: 98vw;
4
+ width: 25vw;
5
+ @include control-states("surface");
6
+ @include screen("mobile"){
7
+ width: calc(var(--ax-overlay-full-width) * 1vw);
7
8
  }
8
- @screen md {
9
- width: 25vw;
9
+ @include screen("tablet"){
10
+ width: 60vw;
10
11
  }
12
+
11
13
  .ax-dialog-icon-side {
12
14
  @apply ax-flex ax-justify-center ax-col-span-2;
13
15
  .ax-dialog-icon {
@@ -56,6 +58,6 @@
56
58
  @apply ax-text-info-500 ax-bg-info-50;
57
59
  }
58
60
  }
59
-
60
61
  }
61
- }
62
+
63
+ }
package/src/components/_drawer.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  &.ax-collapsed {
38
- margin-inline-start: calc(-1 * var(--attr-width));
38
+ margin-inline-start: calc(-2 * var(--attr-width));
39
39
  }
40
40
 
41
41
  &.ax-expanded {
@@ -51,17 +51,17 @@
51
51
 
52
52
  &.ax-drawer-overlay {
53
53
  &.ax-collapsed {
54
- right: calc(-1 * var(--attr-width));
54
+ right: calc(-2 * var(--attr-width));
55
55
  }
56
56
 
57
57
  &.ax-expanded {
58
- right: calc(-1 * var(--attr-diff));
58
+ right: calc(-2 * var(--attr-diff));
59
59
  }
60
60
  }
61
61
 
62
62
  &.ax-drawer-push {
63
63
  &.ax-collapsed {
64
- margin-inline-end: calc(-1 * var(--attr-width));
64
+ margin-inline-end: calc(-2 * var(--attr-width));
65
65
  }
66
66
 
67
67
  &.ax-expanded {
package/src/components/_popup.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .ax-popup {
24
- @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit;
24
+ @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
25
25
  @include control-states("surface");
26
26
 
27
27
  .ax-popup-header {
@@ -42,14 +42,12 @@
42
42
  .ax-popup-main-container {
43
43
  @apply ax-overflow-auto ax-flex-1;
44
44
  }
45
- .ax-popup-footer-container{
46
-
45
+ .ax-popup-footer-container {
47
46
  }
48
47
  &.ax-popup-full {
49
48
  @apply ax-w-screen;
50
49
  height: calc(100 * var(--ax-vh));
51
50
  max-height: calc(100 * var(--ax-vh));
52
-
53
51
  }
54
52
 
55
53
  &.ax-fit {
@@ -89,18 +87,9 @@
89
87
  }
90
88
 
91
89
  @media all and (min-width: 768px) and (max-width: 1023px) {
92
- &.ax-popup-sm {
93
- width: 100vw;
94
- max-height: calc(100 * var(--ax-vh));
95
- .ax-popup-main {
96
- @apply ax-h-screen;
97
- }
98
- }
99
-
100
90
  &.ax-popup-md {
101
91
  width: 500px !important;
102
92
  }
103
-
104
93
  &.ax-popup-lg {
105
94
  width: 700px !important;
106
95
  }
@@ -123,12 +112,11 @@
123
112
  }
124
113
 
125
114
  @media all and (min-width: 0px) and (max-width: 424px) {
126
- &.ax-popup-sm,
127
115
  &.ax-popup-md,
128
116
  &.ax-popup-lg {
129
- width: 100vw;
130
- height: calc(100 * var(--ax-vh));
131
- max-height: calc(100 * var(--ax-vh));
117
+ width: calc(var(--ax-overlay-full-width) * 1vw);
118
+ height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
119
+ max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
132
120
  .ax-popup-main {
133
121
  @apply ax-h-screen;
134
122
  }
@@ -136,28 +124,3 @@
136
124
  }
137
125
  }
138
126
  }
139
-
140
- // @layer components {
141
- // ax-popup {
142
- // @apply ax-bg-white ax-rounded-md;
143
- // // ax-page-footer,
144
- // // ax-page-header {
145
- // // @apply ax-grid ax-grid-cols-12 ax-gap-2 ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
146
-
147
- // // ax-prefix {
148
- // // @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
149
- // // }
150
-
151
- // // ax-suffix {
152
- // // @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
153
- // // }
154
- // // }
155
- // // ax-page-footer {
156
- // // @apply ax-border-t;
157
- // // }
158
-
159
- // // ax-page-header {
160
- // // @apply ax-border-b;
161
- // // }
162
- // }
163
- // }
package/src/components/_progress.scss ADDED
@@ -0,0 +1,62 @@
1
+ @layer components {
2
+ ax-progress-bar,
3
+ .ax-progress-bar {
4
+ @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
5
+ @include control-states("editor");
6
+ ax-prefix{
7
+ @apply ax-pe-2;
8
+ }
9
+ ax-suffix{
10
+ @apply ax-ps-2;
11
+ }
12
+ .ax-progress-bar-container {
13
+ @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 ax-flex ax-rounded-full;
14
+ .ax-progress-bar-rise {
15
+ max-width: 100%;
16
+ transition: width 1s;
17
+ @apply ax-bg-primary-500 ax-h-full ax-absolute ax-start-0 ax-rounded-full;
18
+ }
19
+ }
20
+
21
+ &.ax-primary-default {
22
+ .ax-progress-bar-rise {
23
+ @apply ax-bg-primary-500;
24
+ }
25
+ }
26
+ &.ax-secondary-default {
27
+ .ax-progress-bar-rise {
28
+ @apply ax-bg-secondary-500;
29
+ }
30
+ }
31
+ &.ax-success-default {
32
+ .ax-progress-bar-rise {
33
+ @apply ax-bg-success-500;
34
+ }
35
+ }
36
+ &.ax-warning-default {
37
+ .ax-progress-bar-rise {
38
+ @apply ax-bg-warning-500;
39
+ }
40
+ }
41
+ &.ax-danger-default {
42
+ .ax-progress-bar-rise {
43
+ @apply ax-bg-danger-500;
44
+ }
45
+ }
46
+ &.ax-info-default {
47
+ .ax-progress-bar-rise {
48
+ @apply ax-bg-info-500;
49
+ }
50
+ }
51
+ &.ax-light-default {
52
+ .ax-progress-bar-rise {
53
+ @apply ax-bg-light-300;
54
+ }
55
+ }
56
+ &.ax-dark-default {
57
+ .ax-progress-bar-rise {
58
+ @apply ax-bg-dark-500 dark:ax-bg-dark-300;
59
+ }
60
+ }
61
+ }
62
+ }
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-card-style {
43
+ .ax-selection-list {
44
+ &.ax-vertical {
45
+ & > div {
46
+ @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md ax-shadow-sm;
47
+ &.ax-state-selected {
48
+ @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-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
  }
package/src/components/_treeview.scss CHANGED
@@ -32,14 +32,14 @@
32
32
  right: 12px;
33
33
  bottom: -4px;
34
34
  margin-left: -1px;
35
- border-right: 1px solid #d9d9d9;
35
+ // border-right: 1px solid #d9d9d9;
36
36
  content: " ";
37
37
  }
38
38
  &::after {
39
39
  position: absolute;
40
40
  width: 10px;
41
41
  height: 14px;
42
- border-bottom: 1px solid #d9d9d9;
42
+ // border-bottom: 1px solid #d9d9d9;
43
43
  content: " ";
44
44
  }
45
45
  }
package/src/components/index.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  @import "./loading";
20
20
  @import "./menu";
21
21
  @import "./popup";
22
+ @import "./progress";
22
23
  @import "./radio";
23
24
  @import "./range-slider";
24
25
  @import "./selectbox";
package/src/utility/_mixins.scss CHANGED
@@ -1,17 +1,23 @@
1
- @mixin respond($breakpoint) {
1
+ @mixin screen($breakpoint) {
2
2
  // $breakpoint is simply a variable that can have several values
3
3
 
4
4
  @if $breakpoint == tablet {
5
5
  // here `laptop` is the value of $breakpoint
6
6
  // when call laptop, we mean the following piece of code
7
7
 
8
- @media only screen and (max-width: 600px) {
8
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
9
9
  @content;
10
10
  }
11
11
  }
12
12
 
13
13
  @if $breakpoint == mobile {
14
- @media only screen and (max-width: 480px) {
14
+ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
15
+ @content;
16
+ }
17
+ }
18
+
19
+ @if $breakpoint == laptop {
20
+ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
15
21
  @content;
16
22
  }
17
23
  }