@appartmint/mint 4.0.8 → 4.0.10

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 (7) hide show
  1. package/dist/css/mint.css +67 -71
  2. package/dist/css/mint.css.map +1 -1
  3. package/dist/css/mint.min.css +1 -1
  4. package/dist/css/mint.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/imports/components/section/_grid.scss +64 -44
  7. package/src/scss/imports/util/_vars.scss +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@appartmint/mint",
3
3
  "author": "App Art Mint LLC",
4
- "version": "4.0.8",
4
+ "version": "4.0.10",
5
5
  "license": "MIT",
6
6
  "description": "The front-end TS/SCSS framework of App Art Mint",
7
7
  "keywords": [
package/src/scss/imports/components/section/_grid.scss CHANGED
@@ -4,88 +4,113 @@
4
4
  /// Grid mixins
5
5
  @mixin grid-2 {
6
6
  @include break(sm) {
7
- grid-template-columns: repeat(12, 1fr);
8
-
9
- & > * {
10
- grid-column: span 6;
11
- }
7
+ grid-template-columns: repeat(2, 1fr);
12
8
 
13
9
  & > :last-child:nth-child(odd) {
14
- grid-column: span 12;
15
- width: 50%;
16
- margin-left: auto;
17
- margin-right: auto;
10
+ #{class(card)} {
11
+ grid-column: span 2;
12
+ width: 50%;
13
+ margin-left: auto;
14
+ margin-right: auto;
15
+ }
18
16
  }
19
17
  }
20
18
  }
21
19
 
22
20
  @mixin grid-3 {
23
21
  @include break(lg) {
24
- grid-template-columns: repeat(12, 1fr);
25
-
26
- & > * {
27
- grid-column: span 4;
28
- }
22
+ grid-template-columns: repeat(3, 1fr);
29
23
 
30
24
  & > :last-child:nth-child(odd) {
31
- grid-column: span 4;
32
- width: 100%;
25
+ #{class(card)} {
26
+ grid-column: span 1;
27
+ width: 100%;
28
+ }
33
29
  }
34
30
 
35
31
  & > :last-child:nth-child(#{'3n+1'}) {
36
- grid-column: 4 / span 6;
32
+ #{class(card)} {
33
+ grid-column: 2;
34
+ }
37
35
  }
38
36
 
39
37
  & > :last-child:nth-child(#{'3n+2'}) {
40
- grid-column: 7 / span 6;
38
+ #{class(card)} {
39
+ grid-column: 3;
40
+ }
41
41
  }
42
42
 
43
43
  & > :nth-last-child(2):nth-child(#{'3n+1'}) {
44
- grid-column: 1 / span 6;
44
+ #{class(card)} {
45
+ grid-column: 1;
46
+ }
45
47
  }
46
48
  }
47
49
  }
48
50
 
49
51
  @mixin grid-4 {
50
52
  @include break(xl) {
51
- grid-template-columns: repeat(12, 1fr);
52
-
53
- & > * {
54
- grid-column: span 3;
55
- }
53
+ grid-template-columns: repeat(4, 1fr);
56
54
 
57
55
  & > :last-child:nth-child(odd),
58
56
  & > :last-child:nth-child(#{'3n+1'}),
59
57
  & > :last-child:nth-child(#{'3n+2'}),
60
58
  & > :nth-last-child(2):nth-child(#{'3n+1'}) {
61
- grid-column: span 3;
62
- width: 100%;
59
+ #{class(card)} {
60
+ grid-column: span 1;
61
+ width: 100%;
62
+ }
63
63
  }
64
64
 
65
65
  & > :last-child:nth-child(#{'4n+1'}) {
66
- grid-column: 4 / span 6;
66
+ #{class(card)} {
67
+ grid-column: 2 / span 2;
68
+ width: 50%;
69
+ margin-left: auto;
70
+ margin-right: auto;
71
+ }
67
72
  }
68
73
 
69
74
  & > :last-child:nth-child(#{'4n+2'}) {
70
- grid-column: 7 / span 6;
75
+ #{class(card)} {
76
+ grid-column: 3 / span 2;
77
+ width: 50%;
78
+ margin-left: auto;
79
+ margin-right: auto;
80
+ }
71
81
  }
72
82
 
73
83
  & > :nth-last-child(2):nth-child(#{'4n+1'}) {
74
- grid-column: 1 / span 6;
84
+ #{class(card)} {
85
+ grid-column: 1 / span 2;
86
+ width: 50%;
87
+ margin-left: auto;
88
+ margin-right: auto;
89
+ }
75
90
  }
76
91
 
77
92
  & > :last-child:nth-child(#{'4n+3'}) {
78
- grid-column: 9 / span 4;
93
+ #{class(card)} {
94
+ grid-column: 4;
95
+ }
79
96
  }
80
97
 
81
98
  & > :nth-last-child(2):nth-child(#{'4n+2'}) {
82
- grid-column: 5 / span 4;
99
+ #{class(card)} {
100
+ grid-column: 2 / span 2;
101
+ width: 50%;
102
+ margin-left: auto;
103
+ margin-right: auto;
104
+ }
83
105
  }
84
106
 
85
107
  & > :nth-last-child(3):nth-child(#{'4n+1'}) {
86
- grid-column: 1 / span 4;
108
+ #{class(card)} {
109
+ grid-column: 1;
110
+ }
87
111
  }
88
112
  }
113
+
89
114
  }
90
115
 
91
116
  /// Grid styles
@@ -97,12 +122,6 @@
97
122
  margin-top: $grid-gap;
98
123
  margin-bottom: $grid-gap;
99
124
 
100
- &#{class('1')} {
101
- & > * {
102
- grid-column: span 1 !important;
103
- }
104
- }
105
-
106
125
  &#{class('2')} {
107
126
  @include grid-2;
108
127
  }
@@ -118,15 +137,16 @@
118
137
  @include grid-4;
119
138
  }
120
139
 
121
- #{class(portrait)},
122
- & > :has(#{class(portrait)}) {
140
+ #{class(portrait)} {
123
141
  grid-row: span 2;
124
142
  }
125
143
 
126
- #{class(landscape)},
127
- & > :has(#{class(landscape)}) {
144
+ #{class(landscape)} {
128
145
  @include break(sm) {
129
- grid-column: span 12;
146
+ grid-column: span 2;
147
+ }
148
+ @include break(lg) {
149
+ grid-column: span 3;
130
150
  }
131
151
  }
132
- }
152
+ }
package/src/scss/imports/util/_vars.scss CHANGED
@@ -91,7 +91,7 @@ $pad-min: 0.25rem !default;
91
91
  $pad-max: 2rem !default;
92
92
  $pad-val: 1vw !default;
93
93
  $pad-clamp: clamp($pad-min, $pad-val, $pad-max) !default;
94
- $pad-exit: clamp($pad-min * -1, $pad-val * -1, $pad-max * -1) !default;
94
+ $pad-exit: clamp($pad-max * -1, $pad-val * -1, $pad-min * -1) !default;
95
95
  $pad-exit-width: clamp(calc(100% + $pad-min * 2), calc(100% + $pad-val * 2), calc(100% + $pad-max * 2)) !default;
96
96
 
97
97
  /// Outline width