empower-container 0.1.30 → 0.1.32

package/dist/scss/components/_modal.scss

@@ -1,66 +1,66 @@
-/* Modal */
-.em-modal{
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9000;
-    width: 100vw;
-    height: 100vh;
-    padding: 30px 15px;
-    display: flex;
-    justify-content: center;
-    overflow: auto; 
-    
-    &:before{
-        content: '';
-        width: 100vw;
-        height: 100vh;
-        z-index: 9000;
-        position: fixed;
-        top: 0;
-        left: 0;
-        opacity: 0.9;
-        background: linear-gradient(to bottom, rgba(13,14,28,0.9), rgba(8,19,117,0.9));
-    }
-}
-
-.em-modal-container{
-    position: relative;
-    z-index: 9001;
-    margin: auto;
-    display: flex;
-    height: initial;
-
-    > div{
-        margin: auto;
-    }
-}
-
-.em-card {
-    background-color: $white;
-    padding: 5px;
-    box-shadow: $shadow-card;
-    border-radius: 10px;
-
-    &.modal-sm{
-        width: 100vw;
-        max-width: 400px;
-        margin: 0 auto;
-    }
-
-    &.modal-md{
-        width: 100vw;
-        max-width: 600px;
-        margin: 0 auto;
-    }
-
-    &.modal-lg{
-        width: 100vw;
-        max-width: 960px;
-        margin: 0 auto;
-    } 
-}
-
-.em-card-content {
-    padding: 15px;   
-}
+/* Modal */
+.em-modal{
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9000;
+    width: 100vw;
+    height: 100vh;
+    padding: 30px 15px;
+    display: flex;
+    justify-content: center;
+    overflow: auto; 
+    
+    &:before{
+        content: '';
+        width: 100vw;
+        height: 100vh;
+        z-index: 9000;
+        position: fixed;
+        top: 0;
+        left: 0;
+        opacity: 0.9;
+        background: linear-gradient(to bottom, rgba(13,14,28,0.9), rgba(8,19,117,0.9));
+    }
+}
+
+.em-modal-container{
+    position: relative;
+    z-index: 9001;
+    margin: auto;
+    display: flex;
+    height: initial;
+
+    > div{
+        margin: auto;
+    }
+}
+
+.em-card {
+    background-color: $white;
+    padding: 5px;
+    box-shadow: $shadow-card;
+    border-radius: 10px;
+
+    &.modal-sm{
+        width: 100vw;
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    &.modal-md{
+        width: 100vw;
+        max-width: 600px;
+        margin: 0 auto;
+    }
+
+    &.modal-lg{
+        width: 100vw;
+        max-width: 960px;
+        margin: 0 auto;
+    } 
+}
+
+.em-card-content {
+    padding: 15px;   
+}

package/dist/scss/elements/_button.scss

@@ -1,143 +1,143 @@
-.em-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  background-color: $green;
-  font-family: $font-body;
-  font-weight: 700;
-  font-size: 0.875rem;
-  border: 0;
-  padding: 15px 30px;
-  height: 50px;
-  cursor: pointer;
-  transition: $transition;
-  border-radius: 10px;
-  text-transform: none;
-  text-decoration: none;
-  margin-right: 10px;
-
-  span{
-      color: $white;
-      transition: $transition;
-  }
-
-  svg{
-      transition: $transition;
-      margin-right: 10px;
-
-      path{
-          fill: $white;
-      }
-  }
-
-  .belt-icon {
-      display: flex;
-  }
-
-  &:hover{
-      background-color: $green-dark;
-      color: $green-dark;
-      box-shadow: inset 0 0 0 5px $green-dark;
-
-      span{
-          color: $white;
-      }
-  }
-
-  &:active{
-      transform: scale(0.95);
-  }
-
-  &:focus{
-      outline: none;
-  }
-
-  &.disabled, &:disabled{
-      background-color: $gray-light1;
-      color: $gray-light4;
-      box-shadow: none;
-      cursor: default;
-
-      span{
-          color: $gray-light3;
-      }
-
-      svg path{
-          fill: $gray-light3;
-      }
-
-      &:hover{
-          background-color: $gray-light1;
-          color: $gray-light4;
-      }
-
-      &:focus, &:active, &:disabled:focus, &:disabled:active{
-          transform: scale(1);
-      }
-  }
-
-  &.outline{
-      background-color: transparent;
-      color: $green-dark;
-      box-shadow: inset 0 0 0 1px $green;
-
-      svg{
-        margin-right: 10px;
-
-        path, rect, circle {
-          transition: $transition;
-          fill: $green;;
-        }
-      }
-
-      span{
-        color: $gray-light4;
-      }
-
-      &:hover{
-          background-color: $blue-light1;
-          box-shadow: none;
-
-          span{
-              color: $gray;
-          }
-      }
-    } 
-
-    &.delete {
-        color: $red;
-        box-shadow: inset 0 0 0 1px $red;
-        padding: 15px;
-
-        &:hover {
-            background-color: $red;
-        }
-    }
-}
-
-.em-text-link {
-    display: inline-flex;
-    align-items: center;
-
-    span {
-      color: $green-dark;
-      font-weight: $font-bold;
-      font-size: $text-sm;
-    }
-
-    svg{
-        margin-left: 5px;
-        transition: $transition;
-
-        path, rect{
-          fill: $green;
-        }
-    }
-
-    &:hover{
-        svg{
-            transform: translateX(3px);
-        }
-    }
+.em-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  background-color: $green;
+  font-family: $font-body;
+  font-weight: 700;
+  font-size: 0.875rem;
+  border: 0;
+  padding: 15px 30px;
+  height: 50px;
+  cursor: pointer;
+  transition: $transition;
+  border-radius: 10px;
+  text-transform: none;
+  text-decoration: none;
+  margin-right: 10px;
+
+  span{
+      color: $white;
+      transition: $transition;
+  }
+
+  svg{
+      transition: $transition;
+      margin-right: 10px;
+
+      path{
+          fill: $white;
+      }
+  }
+
+  .belt-icon {
+      display: flex;
+  }
+
+  &:hover{
+      background-color: $green-dark;
+      color: $green-dark;
+      box-shadow: inset 0 0 0 5px $green-dark;
+
+      span{
+          color: $white;
+      }
+  }
+
+  &:active{
+      transform: scale(0.95);
+  }
+
+  &:focus{
+      outline: none;
+  }
+
+  &.disabled, &:disabled{
+      background-color: $gray-light1;
+      color: $gray-light4;
+      box-shadow: none;
+      cursor: default;
+
+      span{
+          color: $gray-light3;
+      }
+
+      svg path{
+          fill: $gray-light3;
+      }
+
+      &:hover{
+          background-color: $gray-light1;
+          color: $gray-light4;
+      }
+
+      &:focus, &:active, &:disabled:focus, &:disabled:active{
+          transform: scale(1);
+      }
+  }
+
+  &.outline{
+      background-color: transparent;
+      color: $green-dark;
+      box-shadow: inset 0 0 0 1px $green;
+
+      svg{
+        margin-right: 10px;
+
+        path, rect, circle {
+          transition: $transition;
+          fill: $green;;
+        }
+      }
+
+      span{
+        color: $gray-light4;
+      }
+
+      &:hover{
+          background-color: $blue-light1;
+          box-shadow: none;
+
+          span{
+              color: $gray;
+          }
+      }
+    } 
+
+    &.delete {
+        color: $red;
+        box-shadow: inset 0 0 0 1px $red;
+        padding: 15px;
+
+        &:hover {
+            background-color: $red;
+        }
+    }
+}
+
+.em-text-link {
+    display: inline-flex;
+    align-items: center;
+
+    span {
+      color: $green-dark;
+      font-weight: $font-bold;
+      font-size: $text-sm;
+    }
+
+    svg{
+        margin-left: 5px;
+        transition: $transition;
+
+        path, rect{
+          fill: $green;
+        }
+    }
+
+    &:hover{
+        svg{
+            transform: translateX(3px);
+        }
+    }
 }

package/dist/scss/elements/_index.scss

@@ -1,2 +1,2 @@
-@forward 'button';
+@forward 'button';
 @forward 'popover';

package/dist/scss/elements/_popover.scss

@@ -1,16 +1,16 @@
-.em-popover {
-    position: absolute;
-    top: 50px;
-    margin-top: -2px;
-    font-size: 0.875rem;
-    color: $gray-dark;
-    z-index: 100; 
-    display: flex;
-    width: 100%;
-    background-color: $white;
-    border-top: 5px solid $blue-light4;
-    border-bottom-left-radius: $border-radius-md;
-    border-bottom-right-radius: $border-radius-md;
-    box-shadow: $shadow-popover;
-    max-width: 650px;
-}
+.em-popover {
+    position: absolute;
+    top: 50px;
+    margin-top: -2px;
+    font-size: 0.875rem;
+    color: $gray-dark;
+    z-index: 100; 
+    display: flex;
+    width: 100%;
+    background-color: $white;
+    border-top: 5px solid $blue-light4;
+    border-bottom-left-radius: $border-radius-md;
+    border-bottom-right-radius: $border-radius-md;
+    box-shadow: $shadow-popover;
+    max-width: 650px;
+}

package/dist/scss/foundation/_colors.scss

@@ -1,60 +1,60 @@
-// Gray
-$gray: #515977;
-$gray-light: #F4F5F7;
-$gray-light1: #E0E3E9;
-$gray-light2: #C0C5D1;
-$gray-light3: #9FA5B7;
-$gray-light4: #788098;
-$gray-dark: #393F5A;
-$gray-dark1: #262942;
-$gray-dark2: #15172C;
-$gray-dark3: #0D0E1C;
-$white: #FFF;
-
-// Green
-$green: #53C01E;
-$green-light: #F5FEED;
-$green-light1: #D9F5BF;
-$green-light2: #B7E991;
-$green-light3: #95DB67;
-$green-light4: #73CD40;
-$green-dark: #399A10;
-$green-dark1: #237506;
-$green-dark2: #145002;
-$green-dark3: #092A01;
-
-// Blue
-$blue: #3356E6;
-$blue-light: #F0F5FE;
-$blue-light1: #D7E4FE;
-$blue-light2: #AFC7FD;
-$blue-light3: #88A6FC;
-$blue-light4: #5C7FF3;
-$blue-dark: #213CC0;
-$blue-dark1: #13259A;
-$blue-dark2: #081375;
-$blue-dark3: #050A50;
-
-// Red
-$red: #F02731;
-$red-light: #FEF1F0;
-$red-light1: #FDCDC8;
-$red-light2: #FCA5A0;
-$red-light3: #FC7B78;
-$red-light4: #FB5153;
-$red-dark: #CA1725;
-$red-dark1: #A40B1D;
-$red-dark2: #7F0316;
-$red-dark3: #5A0212;
-
-// Yellow
-$yellow: #FADA15;
-$yellow-light: #FEFFE5;
-$yellow-light1: #FFFFB7;
-$yellow-light2: #FFFB8E;
-$yellow-light3: #FFF567;
-$yellow-light4: #FFEB3E;
-$yellow-dark: #D3B006;
-$yellow-dark1: #AC8B00;
-$yellow-dark2: #876900;
+// Gray
+$gray: #515977;
+$gray-light: #F4F5F7;
+$gray-light1: #E0E3E9;
+$gray-light2: #C0C5D1;
+$gray-light3: #9FA5B7;
+$gray-light4: #788098;
+$gray-dark: #393F5A;
+$gray-dark1: #262942;
+$gray-dark2: #15172C;
+$gray-dark3: #0D0E1C;
+$white: #FFF;
+
+// Green
+$green: #53C01E;
+$green-light: #F5FEED;
+$green-light1: #D9F5BF;
+$green-light2: #B7E991;
+$green-light3: #95DB67;
+$green-light4: #73CD40;
+$green-dark: #399A10;
+$green-dark1: #237506;
+$green-dark2: #145002;
+$green-dark3: #092A01;
+
+// Blue
+$blue: #3356E6;
+$blue-light: #F0F5FE;
+$blue-light1: #D7E4FE;
+$blue-light2: #AFC7FD;
+$blue-light3: #88A6FC;
+$blue-light4: #5C7FF3;
+$blue-dark: #213CC0;
+$blue-dark1: #13259A;
+$blue-dark2: #081375;
+$blue-dark3: #050A50;
+
+// Red
+$red: #F02731;
+$red-light: #FEF1F0;
+$red-light1: #FDCDC8;
+$red-light2: #FCA5A0;
+$red-light3: #FC7B78;
+$red-light4: #FB5153;
+$red-dark: #CA1725;
+$red-dark1: #A40B1D;
+$red-dark2: #7F0316;
+$red-dark3: #5A0212;
+
+// Yellow
+$yellow: #FADA15;
+$yellow-light: #FEFFE5;
+$yellow-light1: #FFFFB7;
+$yellow-light2: #FFFB8E;
+$yellow-light3: #FFF567;
+$yellow-light4: #FFEB3E;
+$yellow-dark: #D3B006;
+$yellow-dark1: #AC8B00;
+$yellow-dark2: #876900;
 $yellow-dark3: #624800;

package/dist/scss/foundation/_mixins.scss

@@ -1,41 +1,41 @@
-// Breakpoint: Smaller devices
-@mixin xs {
-    @media (min-width: #{$screen-xs-min}) {
-        @content;
-    }
-  }
-  
-  // Breakpoint: Small devices
-  @mixin sm {
-     @media (min-width: #{$screen-sm-min}) {
-         @content;
-     }
-  }
-  
-  // Breakpoint: Medium devices
-  @mixin md {
-     @media (min-width: #{$screen-md-min}) {
-         @content;
-     }
-  }
-  
-  // Breakpoint: Large devices
-  @mixin lg {
-     @media (min-width: #{$screen-lg-min}) {
-         @content;
-     }
-  }
-  
-  // Breakpoint: Extra large devices
-  @mixin xl {
-     @media (min-width: #{$screen-xl-min}) {
-         @content;
-     }
-  }
-  
-  // Breakpoint: Extra large devices
-  @mixin xxl {
-     @media (min-width: #{$screen-xxl-min}) {
-         @content;
-     }
+// Breakpoint: Smaller devices
+@mixin xs {
+    @media (min-width: #{$screen-xs-min}) {
+        @content;
+    }
+  }
+  
+  // Breakpoint: Small devices
+  @mixin sm {
+     @media (min-width: #{$screen-sm-min}) {
+         @content;
+     }
+  }
+  
+  // Breakpoint: Medium devices
+  @mixin md {
+     @media (min-width: #{$screen-md-min}) {
+         @content;
+     }
+  }
+  
+  // Breakpoint: Large devices
+  @mixin lg {
+     @media (min-width: #{$screen-lg-min}) {
+         @content;
+     }
+  }
+  
+  // Breakpoint: Extra large devices
+  @mixin xl {
+     @media (min-width: #{$screen-xl-min}) {
+         @content;
+     }
+  }
+  
+  // Breakpoint: Extra large devices
+  @mixin xxl {
+     @media (min-width: #{$screen-xxl-min}) {
+         @content;
+     }
   }