@acorex/styles 6.1.5 → 6.1.6
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 +1 -1
- package/src/components/_dialog.scss +24 -5
- package/src/utility/_mixins.scss +29 -0
package/package.json
CHANGED
|
@@ -3,13 +3,32 @@
|
|
|
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
4
|
width: 25vw;
|
|
5
5
|
@include control-states("surface");
|
|
6
|
-
@include screen("mobile"){
|
|
7
|
-
|
|
6
|
+
// @include screen("mobile"){
|
|
7
|
+
// width: calc(var(--ax-overlay-full-width) * 1vw);
|
|
8
|
+
// }
|
|
9
|
+
// @include screen("tablet"){
|
|
10
|
+
// width: 60vw;
|
|
11
|
+
// }
|
|
12
|
+
// @include screen("laptop"){
|
|
13
|
+
// width: 25vw;
|
|
14
|
+
// }
|
|
15
|
+
// @include screen("extraSmall"){
|
|
16
|
+
// width: 95vw;
|
|
17
|
+
// }
|
|
18
|
+
|
|
19
|
+
@include responsive('phone'){
|
|
20
|
+
width: 98vw;
|
|
8
21
|
}
|
|
9
|
-
@include
|
|
10
|
-
width:
|
|
22
|
+
@include responsive('tablet'){
|
|
23
|
+
width: 98vw;
|
|
11
24
|
}
|
|
12
|
-
|
|
25
|
+
@include responsive('desktop'){
|
|
26
|
+
width: 30vw;
|
|
27
|
+
}
|
|
28
|
+
@include responsive('desktop-large'){
|
|
29
|
+
width: 33vw;
|
|
30
|
+
}
|
|
31
|
+
|
|
13
32
|
.ax-dialog-icon-side {
|
|
14
33
|
@apply ax-flex ax-justify-center ax-col-span-2;
|
|
15
34
|
.ax-dialog-icon {
|
package/src/utility/_mixins.scss
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
@mixin screen($breakpoint) {
|
|
2
2
|
// $breakpoint is simply a variable that can have several values
|
|
3
3
|
|
|
4
|
+
@if $breakpoint == extraSmall {
|
|
5
|
+
// Media query for 320px and less
|
|
6
|
+
@media (max-width: 320px) {
|
|
7
|
+
@content;
|
|
8
|
+
}
|
|
9
|
+
@media (min-width: 321px) and (max-width: 480px) {
|
|
10
|
+
@content;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
4
14
|
@if $breakpoint == tablet {
|
|
5
15
|
// here `laptop` is the value of $breakpoint
|
|
6
16
|
// when call laptop, we mean the following piece of code
|
|
@@ -23,6 +33,25 @@
|
|
|
23
33
|
}
|
|
24
34
|
}
|
|
25
35
|
|
|
36
|
+
|
|
37
|
+
@mixin responsive($media){
|
|
38
|
+
@if $media == 'phone'{
|
|
39
|
+
@media (max-width: 599px) { @content; }
|
|
40
|
+
}
|
|
41
|
+
@if $media == 'tablet'{
|
|
42
|
+
@media (min-width: 600px) { @content; }
|
|
43
|
+
}
|
|
44
|
+
@if $media == 'tablet-landscape'{
|
|
45
|
+
@media (min-width: 900px) { @content; }
|
|
46
|
+
}
|
|
47
|
+
@if $media == 'desktop'{
|
|
48
|
+
@media (min-width: 1200px) { @content; }
|
|
49
|
+
}
|
|
50
|
+
@if $media == 'desktop-large'{
|
|
51
|
+
@media (min-width: 1800px) { @content; }
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
26
55
|
@mixin colors($array) {
|
|
27
56
|
@each $name, $color in $array {
|
|
28
57
|
@if (type-of($color) == "map") {
|