@appartmint/mint 0.15.7 → 0.15.9

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.7",
4
+ "version": "0.15.9",
5
5
  "license": "MIT",
6
6
  "description": "The front-end TS/SCSS framework of App Art Mint",
7
7
  "keywords": [
@@ -9,10 +9,30 @@
9
9
 
10
10
  /// Background Styles
11
11
  #{class(bg)} {
12
- display: block;
13
- opacity: 0;
14
- height: 0;
15
- width: 0;
16
- z-index: -1;
17
- transform: none !important;
12
+ display: block;
13
+ opacity: 0;
14
+ height: 0;
15
+ width: 0;
16
+ z-index: -1;
17
+ transform: none !important;
18
+ }
19
+
20
+ #{class(background)} {
21
+ position: fixed;
22
+ left: 0;
23
+ top: 0;
24
+ width: 100vw;
25
+ height: 100vh;
26
+ object-fit: cover;
27
+ background-size: cover;
28
+ background-position: center;
29
+ background-repeat: no-repeat;
30
+ z-index: 0;
31
+ filter: opacity(0) blur(10vw);
32
+ transition: filter 1000ms ease-out;
33
+
34
+ &.active {
35
+ opacity: 1;
36
+ filter: opacity(1) blur($back-bg-blur);
37
+ }
18
38
  }
@@ -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';
@@ -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;
@@ -166,6 +171,9 @@ $texture-border-image: null !default;
166
171
  $texture-border-slice: 42 42 !default;
167
172
  $texture-border-repeat: round !default;
168
173
 
174
+ /// Backgrounds
175
+ $back-bg-blur: 0.15vw !default;
176
+
169
177
 
170
178
  /// Themes
171
179
  $theme-default: light !default;
@@ -195,6 +203,10 @@ $header-link-fore: $header-link-fore-default !default;
195
203
  $header-link-fore-hover-default: back;
196
204
  $header-link-fore-hover: $header-link-fore-hover-default !default;
197
205
 
206
+ /// Footer
207
+ $footer-heel-fore-default: back;
208
+ $footer-heel-fore: $footer-heel-fore-default !default;
209
+
198
210
  /// Dark Theme
199
211
  @if ($theme-default == dark) {
200
212
 
@@ -206,4 +218,7 @@ $header-link-fore-hover: $header-link-fore-hover-default !default;
206
218
  $header-back: if($header-back != $header-back-default, $header-back, brand-4);
207
219
  $header-fore: if($header-fore != $header-fore-default, $header-fore, back);
208
220
  $header-link-back-hover: if($header-link-back-hover != $header-link-back-hover-default, $header-link-back-hover, glow-5);
221
+
222
+ /// Footer
223
+ $footer-heel-fore: if($footer-heel-fore != $footer-heel-fore-default, $footer-heel-fore, fore);
209
224
  }