@appartmint/mint 0.8.13 → 0.9.1

package/src/scss/imports/global/_animations.scss

@@ -6,8 +6,43 @@
 
 /// Imports
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
 @use '../util' as *;
 
+/// Variables
+$animations: (());
+$transitions: (());
+
+/// Mixins
+/// Register an animation
+@mixin animation($animation) {
+    $animations: map-merge($animations, (&: map-merge(map.get($animations, &), $animation)));
+    $this: map.get($animations, &);
+    $animation: '';
+
+    & {
+        @each $item in $this {
+            @if (list.index($this, $item) != 1) {
+                $animation: #{$animation},;
+            }
+            $animation: #{$animation}#{$item};
+        }
+        animation: $animation;
+
+        @each $name, $items in $animations {
+            &#{class($name)} {
+                animation: $animation;
+            }
+        }
+    }
+}
+
+/// Register a transition
+@mixin transition($transition) {
+    $transitions: map-merge($transitions, ($name: $transition));
+}
+
 /// Animations
 /// Cycle through instagram colors
 @keyframes instafade {
@@ -32,7 +67,7 @@
 #{class(fall-in)} {
     opacity: 0;
     transform: translateY(-100px);
-    transition: all delay(slow), box-shadow delay(slow) delay(med-slow) !important;
+    transition: all delay(slow) ease-out, box-shadow delay(slow) delay(med-slow) ease-out !important;
     pointer-events: none;
 
     &#{class(show)}#{neg(class(loading))} {
@@ -70,6 +105,6 @@
         height: 100%;
         transform: translate(-100%, 100%);
         background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
-        transition: transform delay(med-fast) ease-in;
+        transition: transform delay(med-fast) ease-out;
     }
 }

package/src/scss/imports/global/_global.scss

@@ -47,9 +47,13 @@ nav {
 }
 
 a {
-    &[href^='tel:'], &[href^='mailto:'] {
+    &[href^='mailto:'], &[href^='tel:'], &[href^='sms:'] {
         white-space: nowrap;
     }
+
+    i:last-child {
+        margin-left: 0.25rem;
+    }
 }
 
 button, a[routerLink] {

package/src/scss/imports/global/_text.scss

@@ -42,9 +42,14 @@ html, body {
     }
 }
 
+p {
+    line-height: 1.75;
+}
+
 @for $i from 1 through 6 {
     h#{$i}, #{class(h#{$i})} {
         font-family: $font-secondary, $font-backups;
+        line-height: 1;
     }
 }
 

package/src/scss/imports/global/_themes.scss

@@ -6,7 +6,6 @@
 
 /// Imports
 @use '../util' as *;
-@use '../vars' as *;
 
 /// Global theme
 :root {

package/src/scss/imports/{_mint.scss → util/_index.scss}

@@ -1,4 +1,4 @@
-/// _mint.scss - Front-end library of App/Art Mint LLC
+/// _index.scss - SCSS Utilities
 /// @author App Art Mint LLC
 /// 
 /// @group Mint