@appartmint/mint 0.15.6 → 0.15.8

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@appartmint/mint",
3
3
  "author": "App Art Mint LLC",
4
- "version": "0.15.6",
4
+ "version": "0.15.8",
5
5
  "license": "MIT",
6
6
  "description": "The front-end TS/SCSS framework of App Art Mint",
7
7
  "keywords": [
@@ -4,6 +4,9 @@
4
4
  /// @group Components
5
5
  @charset 'utf-8';
6
6
 
7
+ /// Imports
8
+ @use '../util' as *;
9
+
7
10
  /// Footer Styles
8
11
  app-footer {
9
12
  display: flex;
@@ -17,3 +20,126 @@ app-footer {
17
20
  background: css-var(trans);
18
21
  }
19
22
  }
23
+
24
+ /// Footer styles
25
+ #{class(footer)} {
26
+ display: flex;
27
+ flex-direction: column;
28
+ max-width: 100%;
29
+ background: css-var($footer-back);
30
+ transition: transform 300ms;
31
+ z-index: 999;
32
+ overflow: hidden;
33
+
34
+ @if ($footer-shadow) {
35
+ box-shadow: $footer-shadow css-var($footer-back);
36
+ }
37
+
38
+ &#{class(hide)} {
39
+ transform: translateY(100%);
40
+ }
41
+
42
+ * {
43
+ max-width: 100%;
44
+ }
45
+
46
+ p {
47
+ margin: 0;
48
+ }
49
+
50
+ &-content {
51
+ display: flex;
52
+ flex-direction: column;
53
+ flex-wrap: wrap;
54
+ align-items: center;
55
+ justify-content: space-between;
56
+
57
+ @include break(sm) {
58
+ flex-direction: row;
59
+ align-items: flex-start;
60
+ }
61
+
62
+ &>p {
63
+ margin: 0 auto;
64
+ text-align: center;
65
+
66
+ a {
67
+ display: block;
68
+ }
69
+ }
70
+
71
+ [label="Footer"] {
72
+ width: 100%;
73
+ margin: auto;
74
+
75
+ @include break(sm) {
76
+ width: auto;
77
+ }
78
+
79
+ &>ul {
80
+ flex-direction: column;
81
+ flex-wrap: wrap;
82
+ justify-content: space-around;
83
+ text-align: center;
84
+
85
+ @include break(xs) {
86
+ flex-direction: row;
87
+ }
88
+
89
+ &>ul {
90
+ li:last-child {
91
+ #{class(pill)} {
92
+ margin-bottom: 0;
93
+ }
94
+ }
95
+ }
96
+ }
97
+
98
+ #{class(pill)} {
99
+ margin-bottom: 0.5rem;
100
+ }
101
+ }
102
+ }
103
+
104
+ &-heel {
105
+ display: flex;
106
+ flex-direction: column;
107
+ align-items: center;
108
+ justify-content: space-between;
109
+ padding: 0.4rem 1rem;
110
+ color: css-var($footer-heel-fore);
111
+ background: css-var($footer-heel-back);
112
+ text-align: center;
113
+
114
+ @include break(sm) {
115
+ flex-direction: row;
116
+ }
117
+ }
118
+
119
+ &-message {
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ flex-wrap: wrap;
124
+
125
+ @include break(xs) {
126
+ flex-wrap: nowrap;
127
+ }
128
+
129
+ &>#{class(pill)} {
130
+ margin: 0 0.25rem;
131
+ }
132
+
133
+ &>* {
134
+ margin: 0 0.5rem;
135
+
136
+ &:first-child {
137
+ margin-left: 0;
138
+ }
139
+
140
+ &:last-child {
141
+ margin-right: 0;
142
+ }
143
+ }
144
+ }
145
+ }
@@ -5,3 +5,4 @@
5
5
  @use './footer';
6
6
  @use './header';
7
7
  @use './image';
8
+ @use './recaptcha';
@@ -0,0 +1,17 @@
1
+ /// _recaptcha.scss - Recaptcha styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Components
5
+ @charset 'utf-8';
6
+
7
+ /// Recaptcha styles
8
+
9
+ /// Hide the badge
10
+ /// Requires this on form:
11
+ ///
12
+ /// This site is protected by reCAPTCHA and the Google
13
+ /// <a href="https://policies.google.com/privacy">Privacy Policy</a> and
14
+ /// <a href="https://policies.google.com/terms">Terms of Service</a> apply.
15
+ .grecaptcha-badge {
16
+ visibility: hidden;
17
+ }
@@ -0,0 +1,143 @@
1
+ /// Imports
2
+ @use '../util' as *;
3
+
4
+ /// Grid mixins
5
+ @mixin grid-2 {
6
+ @include break(sm) {
7
+ grid-template-columns: repeat(2, 1fr);
8
+
9
+ & > :last-child:nth-child(odd) {
10
+ #{class(card)} {
11
+ grid-column: span 2;
12
+ width: 50%;
13
+ margin-left: auto;
14
+ margin-right: auto;
15
+ }
16
+ }
17
+ }
18
+ }
19
+
20
+ @mixin grid-3 {
21
+ @include break(lg) {
22
+ grid-template-columns: repeat(3, 1fr);
23
+
24
+ & > :last-child:nth-child(odd) {
25
+ #{class(card)} {
26
+ grid-column: span 1;
27
+ width: 100%;
28
+ }
29
+ }
30
+
31
+ & > :last-child:nth-child(#{'3n+1'}) {
32
+ #{class(card)} {
33
+ grid-column: 2;
34
+ }
35
+ }
36
+
37
+ & > :last-child:nth-child(#{'3n+2'}) {
38
+ #{class(card)} {
39
+ grid-column: 3;
40
+ }
41
+ }
42
+
43
+ & > :nth-last-child(2):nth-child(#{'3n+1'}) {
44
+ #{class(card)} {
45
+ grid-column: 1;
46
+ }
47
+ }
48
+ }
49
+ }
50
+
51
+ @mixin grid-4 {
52
+ @include break(xl) {
53
+ grid-template-columns: repeat(4, 1fr);
54
+
55
+ & > :last-child:nth-child(odd),
56
+ & > :last-child:nth-child(#{'3n+1'}),
57
+ & > :last-child:nth-child(#{'3n+2'}),
58
+ & > :nth-last-child(2):nth-child(#{'3n+1'}) {
59
+ #{class(card)} {
60
+ grid-column: span 1;
61
+ width: 100%;
62
+ }
63
+ }
64
+
65
+ & > :last-child:nth-child(#{'4n+1'}) {
66
+ #{class(card)} {
67
+ grid-column: 2 / span 2;
68
+ width: 50%;
69
+ margin-left: auto;
70
+ margin-right: auto;
71
+ }
72
+ }
73
+
74
+ & > :last-child:nth-child(#{'4n+2'}) {
75
+ #{class(card)} {
76
+ grid-column: 3 / span 2;
77
+ width: 50%;
78
+ margin-left: auto;
79
+ margin-right: auto;
80
+ }
81
+ }
82
+
83
+ & > :nth-last-child(2):nth-child(#{'4n+1'}) {
84
+ #{class(card)} {
85
+ grid-column: 1 / span 2;
86
+ width: 50%;
87
+ margin-left: auto;
88
+ margin-right: auto;
89
+ }
90
+ }
91
+
92
+ & > :last-child:nth-child(#{'4n+3'}) {
93
+ #{class(card)} {
94
+ grid-column: 4;
95
+ }
96
+ }
97
+
98
+ & > :nth-last-child(2):nth-child(#{'4n+2'}) {
99
+ #{class(card)} {
100
+ grid-column: 2 / span 2;
101
+ width: 50%;
102
+ margin-left: auto;
103
+ margin-right: auto;
104
+ }
105
+ }
106
+
107
+ & > :nth-last-child(3):nth-child(#{'4n+1'}) {
108
+ #{class(card)} {
109
+ grid-column: 1;
110
+ }
111
+ }
112
+ }
113
+
114
+ }
115
+
116
+ /// Grid styles
117
+ #{class(grid)} {
118
+ display: grid;
119
+ grid-template-columns: 1fr;
120
+ gap: $grid-gap;
121
+ margin-top: $grid-gap;
122
+ margin-bottom: $grid-gap;
123
+
124
+ &#{class('2')} {
125
+ @include grid-2;
126
+ }
127
+
128
+ &#{class('3')} {
129
+ @include grid-2;
130
+ @include grid-3;
131
+ }
132
+
133
+ &#{class('4')} {
134
+ @include grid-2;
135
+ @include grid-3;
136
+ @include grid-4;
137
+ }
138
+
139
+ #{class(portrait)} {
140
+ grid-row: span 2;
141
+ }
142
+ }
143
+
@@ -1,6 +1,7 @@
1
1
  @use './animations';
2
2
  @use './aspect';
3
3
  @use './global';
4
+ @use './grid';
4
5
  @use './icons';
5
6
  @use './inputs';
6
7
  @use './structure';
@@ -7,17 +7,44 @@
7
7
  /// Imports
8
8
  @use '../util' as *;
9
9
 
10
+ /// Input Styles
11
+ input,
12
+ textarea,
13
+ select {
14
+ width: 100%;
15
+ padding: 0.5rem;
16
+ border: 2px solid #ccc;
17
+ border-radius: $border-radius;
18
+ }
19
+
20
+ select {
21
+ @include break(xs) {
22
+ width: auto;
23
+ }
24
+ }
25
+
26
+ textarea {
27
+ resize: vertical;
28
+ }
29
+
10
30
  /// Checkbox Styles
11
31
  #{class(toggle)} {
12
32
  display: flex;
13
- flex-direction: column;
14
33
  align-items: center;
15
- gap: 0.5rem;
34
+ gap: 1rem;
35
+
36
+ div {
37
+ display: flex;
38
+ flex-direction: column;
39
+ align-items: center;
40
+ gap: 0.5rem;
16
41
 
17
- @include break(xs) {
18
- flex-direction: row;
42
+ @include break(xs) {
43
+ flex-direction: row;
44
+ }
19
45
  }
20
46
  }
47
+
21
48
  #{class(check)} {
22
49
  $padding: 0.25rem;
23
50
  $height: 1.5rem;
@@ -62,6 +89,11 @@
62
89
  transition: filter 300ms, background-color 300ms, left 300ms;
63
90
  }
64
91
  }
92
+
93
+ & + span {
94
+ width: 1.5rem;
95
+ text-align: center;
96
+ }
65
97
  }
66
98
 
67
99
  /// Dropdown Styles
@@ -69,5 +101,20 @@
69
101
  display: flex;
70
102
  align-items: center;
71
103
  flex-wrap: wrap;
72
- gap: 1rem;
104
+
105
+ @include break(xs) {
106
+ gap: 1rem;
107
+ }
108
+ }
109
+
110
+
111
+ /// Label Styles
112
+ #{class(error)} {
113
+ line-height: 0;
114
+ filter: opacity(0);
115
+ transition: filter 0.3s;
116
+
117
+ &.mint-show {
118
+ filter: opacity(1);
119
+ }
73
120
  }
@@ -21,6 +21,10 @@
21
21
  }
22
22
  }
23
23
 
24
+ #{class(hide)} {
25
+ @include break-util(display, initial, none);
26
+ }
27
+
24
28
  #{class(max)} {
25
29
  @each $size in map.keys($break) {
26
30
  &-#{$size} {
@@ -38,40 +42,6 @@
38
42
  }
39
43
  }
40
44
 
41
- section {
42
- width: 100%;
43
-
44
- &#{class(smaller)} {
45
- margin-left: auto;
46
- margin-right: auto;
47
- max-width: break(xs);
48
- }
49
-
50
- &#{class(small)} {
51
- margin-left: auto;
52
- margin-right: auto;
53
- max-width: break(sm);
54
- }
55
-
56
- &#{class(default)} {
57
- margin-left: auto;
58
- margin-right: auto;
59
- max-width: break(md);
60
- }
61
-
62
- &#{class(big)} {
63
- margin-left: auto;
64
- margin-right: auto;
65
- max-width: break(lg);
66
- }
67
-
68
- &#{class(bigger)} {
69
- margin-left: auto;
70
- margin-right: auto;
71
- max-width: break(xl);
72
- }
73
- }
74
-
75
45
  #{class(center)} {
76
46
  align-items: center;
77
47
  justify-content: center;
@@ -88,144 +58,6 @@ section {
88
58
  }
89
59
  }
90
60
 
91
- @mixin grid-2 {
92
- @include break(sm) {
93
- grid-template-columns: repeat(2, 1fr);
94
-
95
- & > :last-child:nth-child(odd) {
96
- #{class(card)} {
97
- grid-column: span 2;
98
- width: 50%;
99
- margin-left: auto;
100
- margin-right: auto;
101
- }
102
- }
103
- }
104
- }
105
-
106
- @mixin grid-3 {
107
- @include break(lg) {
108
- grid-template-columns: repeat(3, 1fr);
109
-
110
- & > :last-child:nth-child(odd) {
111
- #{class(card)} {
112
- grid-column: span 1;
113
- width: 100%;
114
- }
115
- }
116
-
117
- & > :last-child:nth-child(#{'3n+1'}) {
118
- #{class(card)} {
119
- grid-column: 2;
120
- }
121
- }
122
-
123
- & > :last-child:nth-child(#{'3n+2'}) {
124
- #{class(card)} {
125
- grid-column: 3;
126
- }
127
- }
128
-
129
- & > :nth-last-child(2):nth-child(#{'3n+1'}) {
130
- #{class(card)} {
131
- grid-column: 1;
132
- }
133
- }
134
- }
135
- }
136
-
137
- @mixin grid-4 {
138
- @include break(xl) {
139
- grid-template-columns: repeat(4, 1fr);
140
-
141
- & > :last-child:nth-child(odd),
142
- & > :last-child:nth-child(#{'3n+1'}),
143
- & > :last-child:nth-child(#{'3n+2'}),
144
- & > :nth-last-child(2):nth-child(#{'3n+1'}) {
145
- #{class(card)} {
146
- grid-column: span 1;
147
- width: 100%;
148
- }
149
- }
150
-
151
- & > :last-child:nth-child(#{'4n+1'}) {
152
- #{class(card)} {
153
- grid-column: 2 / span 2;
154
- width: 50%;
155
- margin-left: auto;
156
- margin-right: auto;
157
- }
158
- }
159
-
160
- & > :last-child:nth-child(#{'4n+2'}) {
161
- #{class(card)} {
162
- grid-column: 3 / span 2;
163
- width: 50%;
164
- margin-left: auto;
165
- margin-right: auto;
166
- }
167
- }
168
-
169
- & > :nth-last-child(2):nth-child(#{'4n+1'}) {
170
- #{class(card)} {
171
- grid-column: 1 / span 2;
172
- width: 50%;
173
- margin-left: auto;
174
- margin-right: auto;
175
- }
176
- }
177
-
178
- & > :last-child:nth-child(#{'4n+3'}) {
179
- #{class(card)} {
180
- grid-column: 4;
181
- }
182
- }
183
-
184
- & > :nth-last-child(2):nth-child(#{'4n+2'}) {
185
- #{class(card)} {
186
- grid-column: 2 / span 2;
187
- width: 50%;
188
- margin-left: auto;
189
- margin-right: auto;
190
- }
191
- }
192
-
193
- & > :nth-last-child(3):nth-child(#{'4n+1'}) {
194
- #{class(card)} {
195
- grid-column: 1;
196
- }
197
- }
198
- }
199
-
200
- }
201
-
202
- #{class(grid)} {
203
- display: grid;
204
- grid-template-columns: 1fr;
205
- gap: $grid-gap;
206
- margin-top: $grid-gap;
207
- margin-bottom: $grid-gap;
208
-
209
- &#{class('2')} {
210
- @include grid-2;
211
- }
212
-
213
- &#{class('3')} {
214
- @include grid-2;
215
- @include grid-3;
216
- }
217
-
218
- &#{class('4')} {
219
- @include grid-2;
220
- @include grid-3;
221
- @include grid-4;
222
- }
223
-
224
- #{class(portrait)} {
225
- grid-row: span 2;
226
- }
227
- }
228
-
229
61
  #{class(fit)} {
230
62
  width: fit-content;
231
63
  height: fit-content;
@@ -239,4 +71,4 @@ section {
239
71
 
240
72
  #{class(right)} {
241
73
  float: right;
242
- }
74
+ }
@@ -658,6 +658,10 @@ $bootstrap5: false !default;
658
658
  #{$prop}-top: $val * $i;
659
659
  }
660
660
  }
661
+
662
+ &#{50} {
663
+ #{$prop}-top: 50vh;
664
+ }
661
665
  }
662
666
 
663
667
  &-b {
@@ -100,6 +100,11 @@ $header-height: 4rem !default;
100
100
  $header-break: sm !default;
101
101
  $header-link-border-radius: $border-radius !default;
102
102
 
103
+ /// Footer
104
+ $footer-back: back !default;
105
+ $footer-heel-back: brand-6 !default;
106
+ $footer-shadow: null !default;
107
+
103
108
  /// Default Shadows
104
109
  $shadow-color: glow-2 !default;
105
110
  $shadow-size: 0 0 2rem -0.5rem !default;
@@ -195,6 +200,10 @@ $header-link-fore: $header-link-fore-default !default;
195
200
  $header-link-fore-hover-default: back;
196
201
  $header-link-fore-hover: $header-link-fore-hover-default !default;
197
202
 
203
+ /// Footer
204
+ $footer-heel-fore-default: back;
205
+ $footer-heel-fore: $footer-heel-fore-default !default;
206
+
198
207
  /// Dark Theme
199
208
  @if ($theme-default == dark) {
200
209
 
@@ -206,4 +215,7 @@ $header-link-fore-hover: $header-link-fore-hover-default !default;
206
215
  $header-back: if($header-back != $header-back-default, $header-back, brand-4);
207
216
  $header-fore: if($header-fore != $header-fore-default, $header-fore, back);
208
217
  $header-link-back-hover: if($header-link-back-hover != $header-link-back-hover-default, $header-link-back-hover, glow-5);
218
+
219
+ /// Footer
220
+ $footer-heel-fore: if($footer-heel-fore != $footer-heel-fore-default, $footer-heel-fore, fore);
209
221
  }