empower-container 0.1.23 → 0.1.26

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,133 +1,133 @@
-.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;
-          }
-      }
-    } 
-}
-
-.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;
+          }
+      }
+    } 
+}
+
+.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,8 +1,163 @@
-.em-popover {
-    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 {
+    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-datepicker-weekly {
+    .rdrCalendarWrapper {
+        display: flex;
+        flex-direction: column;
+        font-size: $text-sm;
+        box-shadow: $shadow-popover;
+  
+        .rdrMonthAndYearWrapper {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #0f2473;
+            padding: 15px;
+
+        button {
+            border: none;
+            width: 50px;
+            height: 50px;
+            border-radius: 0;
+            background-color: transparent;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: none;
+            transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+            cursor: pointer;
+        }
+        }
+  
+        .rdrMonthAndYearPickers {
+            display: flex;
+            
+            select {
+                min-width: 100px;
+                color: $white;
+                font-size: $text-base;
+                height: 50px;
+                border-radius: 0;
+                border: none;
+                // background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowdown-white.svg")  right center no-repeat;
+                background: transparent;
+                transition: $transition;
+
+                &:focus-visible {
+                    outline: none;
+                }
+    
+                &:hover {
+                    background-color: transparentize(#091336, 0.5);
+                }
+    
+                option {
+                    padding: 10px;
+                    background-color: $white;
+                    color: #4A5568;
+                }
+            }
+        }
+  
+        .rdrNextPrevButton {
+  
+          i {
+            height: 20px;
+            width: 20px;
+            border: 0;
+            margin: 0;
+            transition: $transition;
+          }
+  
+          &.rdrPprevButton {
+            i {
+              background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowleft-white.svg") center center no-repeat;
+            }
+  
+            &:hover {
+              i {
+                transform: translateX(-5px);
+              }
+            }
+          }
+  
+          &.rdrNextButton {
+            i {
+              background: url("https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowright-white.svg") center center no-repeat;
+            }
+  
+            &:hover {
+              i {
+                transform: translateX(5px);
+              }
+            }
+          }
+        }
+        
+        .rdrWeekDays {
+            display: flex;
+            padding: 15px 15px 0;
+        }
+  
+        .rdrWeekDay {
+            font-weight: 700;
+            padding: 1rem 0.25rem;
+            text-transform: uppercase;
+            color: #A0AEC0;
+            font-size: 0.875rem;
+            width: 50px;
+            text-align: center;
+        }
+  
+        .rdrDay {
+            font-size: 0.875rem;
+            width: 50px;
+            text-align: center;
+            border: none;
+            background-color: transparent;
+
+            .rdrDayNumber {
+                span {
+                    width: 50px;
+                    height: 50px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+                    color: $gray-dark;
+
+                    &:hover {
+                        background-color: #EDF2F7;
+                    }
+                }
+            }
+
+            &.rdrDayPassive {
+                .rdrDayNumber > span{
+                    cursor: default;
+                    color: $gray-light3;
+        
+                    &:hover{
+                      background-color: transparent;
+                    }
+                }
+            }
+        }
+  
+        .rdrDays {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 0 15px 15px;
+        }
+      }
+}

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;