@acorex/styles 5.0.50 → 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 (11) 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 +3 -3
  9. package/src/components/_treeview.scss +2 -2
  10. package/src/components/index.scss +1 -0
  11. 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.50",
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
@@ -39,13 +39,13 @@
39
39
  }
40
40
  }
41
41
  }
42
- .ax-boxed-style {
42
+ .ax-card-style {
43
43
  .ax-selection-list {
44
44
  &.ax-vertical {
45
45
  & > div {
46
- @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md;
46
+ @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md ax-shadow-sm;
47
47
  &.ax-state-selected {
48
- @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500;
48
+ @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500;
49
49
  }
50
50
  }
51
51
  }
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
  }