@appartmint/mint 2.6.3 → 2.6.5

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": "2.6.3",
4
+ "version": "2.6.5",
5
5
  "license": "MIT",
6
6
  "description": "The front-end TS/SCSS framework of App Art Mint",
7
7
  "keywords": [
@@ -345,12 +345,13 @@
345
345
  button {
346
346
  align-items: center;
347
347
  justify-content: center;
348
- font-family: $font-secondary, $font-backups !important;
349
- font-size: 3em;
348
+ width: 100%;
350
349
  padding: 0.5rem;
351
350
  margin: 0.5rem 0;
352
- text-align: center;
353
351
  border-radius: $header-link-border-radius;
352
+ font-family: $font-secondary, $font-backups !important;
353
+ font-size: 3em;
354
+ text-align: center;
354
355
  color: css-var($header-link-fore);
355
356
  background: css-var(trans);
356
357
  transition-property: color, background;
@@ -216,6 +216,64 @@
216
216
  text-align: left;
217
217
  }
218
218
  }
219
+
220
+ &-grid {
221
+ position: relative;
222
+ background: css-var($card-bg-color);
223
+
224
+ &:has(#{class(image)}) {
225
+ #{class(content)} {
226
+ margin-top: 25%;
227
+ padding-top: 25%;
228
+ background: none;
229
+ border: none;
230
+
231
+ &::before {
232
+ opacity: 0;
233
+ }
234
+
235
+ &::after {
236
+ content: '';
237
+ position: absolute;
238
+ top: 0;
239
+ left: 0;
240
+ width: 100%;
241
+ height: 100%;
242
+ opacity: 0.75;
243
+ background: linear-gradient(0deg, black, rgba(0,0,0,70%) 66%, css-var(shadow-0));
244
+ transition: opacity delay(default) ease-in-out;
245
+ z-index: -1;
246
+ }
247
+ }
248
+ }
249
+
250
+ @include states(hover) {
251
+ #{class(content)} {
252
+ &::after {
253
+ opacity: 1;
254
+ }
255
+ }
256
+ }
257
+
258
+ #{class(image)} {
259
+ position: absolute;
260
+ top: 0;
261
+ left: 0;
262
+ width: 100%;
263
+ height: 100%;
264
+ object-fit: cover;
265
+ }
266
+
267
+ #{class(content)} {
268
+ justify-content: flex-end;
269
+ background: css-var(shadow-0);
270
+
271
+ #{class(buttons)} {
272
+ margin-top: 0 !important;
273
+ }
274
+ }
275
+
276
+ }
219
277
  }
220
278
 
221
279
  #{class(grid)}#{class('3')},