empower-container 0.1.5 → 0.1.6

package/dist/scss/foundation/_mixins.scss

@@ -0,0 +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;
+     }
+  }

package/dist/scss/foundation/_normalize.scss

@@ -0,0 +1,204 @@
+html {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow-x: hidden;
+  }
+  
+  *, *:before, *:after {
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+  }
+  
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  body {
+    margin: 0;
+  }
+  
+  main {
+    display: block;
+  }
+  
+  h1 {
+    font-size: 2em;
+    margin: 0 0 0.67em;
+  }
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  a {
+    background-color: transparent;
+  }
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  small {
+    font-size: 80%;
+  }
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  img {
+    border-style: none;
+  }
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+  }
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  details {
+    display: block;
+  }
+  
+  summary {
+    display: list-item;
+  }
+  
+  template {
+    display: none;
+  }
+  
+  [hidden] {
+    display: none;
+  }
+  
+  input{
+    &:focus{
+      outline: none;
+    }
+  }
+  
+  li{
+    list-style: none;
+    padding-top: 3px;
+  }
+  

package/dist/scss/foundation/_settings.scss

@@ -0,0 +1,36 @@
+// Breakpoints
+$screen-xs-min: 400px; // Small smartphones
+$screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
+$screen-md-min: 768px; // Small tablets (portrait view)
+$screen-lg-min: 992px; // Tablets and small desktopsw
+$screen-xl-min: 1200px; // Large tablets and desktops
+$screen-xxl-min: 1500px; // Large tablets and desktops
+
+// Container max width
+$container-width: 1024px;
+
+// Transition easing
+$transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+
+// Shadow
+$shadow-card: 0px 10px 20px 0px rgba(19, 37, 154, 0.05);
+$shadow-popover: 0px 15px 30px 0px rgba(19, 37, 154, 0.15);
+$shadow-modal: 0 30px 60px rgba(0,0,0,0.2);
+
+// Border Radius
+$border-radius-sm: 5px;
+$border-radius-md: 10px;
+$border-radius-lg: 20px;
+
+// Grid
+$grid-margin: -7.5px;
+$grid-gutter: 7.5px;
+
+// Typography
+$font-body: "Roboto", sans-serif;
+$font-heading: "Quicksand", sans-serif;
+$font-regular: 400;
+$font-bold: 700;
+$text-lg: 2rem;
+$text-base: 1rem;
+$text-sm: 0.875rem;

package/dist/scss/foundation/_typography.scss

@@ -0,0 +1,95 @@
+body {
+    font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6{
+    margin: 0 0 1rem;
+    color: $gray-dark;
+    font-family: 'Quicksand', sans-serif;
+
+    &:last-of-type{
+        margin-bottom: 0;
+    }
+}
+
+h1{
+    font-size: 2.25rem;
+
+    @include md{
+        font-size: 2.625rem;
+    }
+}
+
+h2{
+    font-size: 1.875rem;
+
+    @include md{
+        font-size: 2.25rem;
+    }
+}
+
+h3{
+    font-size: 1.5rem;
+
+    @include md{
+        font-size: 1.875rem;
+    }
+}
+
+h4{
+    font-size: 1.25rem;
+
+    @include md{
+        font-size: 1.5rem;
+    }
+}
+
+h5{
+    font-size: 1rem;
+
+    @include md{
+        font-size: 1.25rem;
+    }
+}
+
+h6{
+    font-size: 0.875rem;
+}
+
+label{
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: $gray-light3;
+    text-transform: capitalize;
+    display: inline-block;
+    margin: 0 0 0.25rem;
+}
+
+p{
+    color: $gray-dark;
+    line-height: 1.5;
+    margin: 0 0 1rem;
+
+    &:last-of-type{
+        margin-bottom: 0;
+    }
+}
+
+a{
+    color: $green-dark;
+    font-weight: 700;
+    font-size: 0.875rem;
+    text-decoration: none;
+    transition: $transition;
+
+    &:hover{
+        color: $green-dark1;
+    }
+}
+
+.sub-text{
+    font-size: $text-sm;
+    color: $gray-light4;
+    display: block;
+    line-height: 20px;
+}

package/dist/scss/library/_information.scss

@@ -0,0 +1,68 @@
+.em-belt-info {
+    position: relative;
+
+    .em-info-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        width: 40px;
+        border-radius: $border-radius-md;
+
+        &:hover {
+            background-color: $blue-light;
+    
+            svg {
+                path {
+                    stroke: #5C7FF3;
+                }
+
+                circle {
+                    fill: #5C7FF3;
+                }
+            }
+        }
+    }
+}
+
+.em-popover-i {      
+    background-color: $white;  
+    width: 650px;
+    border-bottom-left-radius: $border-radius-md;
+    border-bottom-right-radius: $border-radius-md;
+
+    .em-popover-i-content {
+        > div {
+            max-height: calc(75vh - 120px);
+            overflow-y: auto;
+            border-bottom: 1px solid $gray-light1;
+            padding: 15px;
+
+            &:last-of-type {
+                border: none;
+                border-bottom-left-radius: $border-radius-md;
+                border-bottom-right-radius: $border-radius-md;
+            }
+        }
+
+        .em-popover-i-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .em-popover-i-category {
+            display: flex;
+            justify-content: space-between;
+
+            &:hover {
+                cursor: pointer;
+                background-color: $gray-light;
+            }
+        }
+
+        .em-popover-i-close {
+            cursor: pointer;
+        }
+    }
+}

package/dist/scss/library/_input.scss

@@ -0,0 +1,37 @@
+.em-input {
+    position: relative;
+    width: 100%;
+
+    .em-input-field {
+        min-height: 50px;
+        width: 100%;
+        background-color: $blue-light;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        box-shadow: inset 0 -2px 0 0 $blue-light1;
+        border: none;
+        font-size: 0.875rem;
+        color: $gray-dark;
+        padding: 10px 15px;
+        margin-bottom: 15px;
+        transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+
+        &:focus {
+            background-color: $blue-light;
+            color: $gray-dark;
+            border: none;
+            outline: none;
+            box-shadow: inset 0 -2px 0 0 $blue-light4;
+        }
+    }
+
+    .em-noresult {
+        padding: 20px;
+    }
+}
+
+.is-invalid .em-input .em-input-field {
+    box-shadow: 0 2px 0 0 $red;
+}

package/dist/scss/library/_menubar.scss

@@ -0,0 +1,225 @@
+.em-card-belt {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 40px;
+    padding: 20px 15px;
+
+    .em-belt-left {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .belt-info {
+            margin-left: 10px;
+        }
+    }
+
+    .em-beltleft-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 20px;
+
+        > .belt-icon {
+            margin-right: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            svg {
+                path, rect {
+                    fill: $blue-light4;
+                }
+            }
+        }
+
+        .icon-back {
+            height: 40px;
+            width: 40px;
+            min-width: 40px;
+            margin-right: 10px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all .5s cubic-bezier(.19,1,.22,1);
+            box-shadow: none;
+
+            &:hover {
+                svg {
+                    transition: all .5s cubic-bezier(.19,1,.22,1);
+                    transform: translateX(-2px);
+                }
+            }
+        }
+
+        .belt-icon-check {
+            margin-right: 10px;
+
+            > div {
+                display: flex;
+            }
+        }
+
+        .belt-title {
+            margin-block: 10px;
+            flex: none;
+
+            h6 {
+                text-transform: uppercase;
+                font-size: .875rem;
+                color: $gray-dark;
+                margin: 0;
+            }
+        }
+    }
+
+    .em-beltleft-cta {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 20px;
+
+        a {
+            margin-right: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-height: 40px;
+            padding: 10px 20px;
+        }  
+    }
+
+    .em-belt-right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+
+        > a, > div {
+            margin-left: 10px;
+        }
+
+        .em-dropdown {
+            position: relative;
+        }
+
+        .pagination-summary, .belt-dropdown {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 40px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 10px;
+            box-shadow: inset 0 0 0 1px $blue-light2;
+            color: $gray-dark;
+            text-decoration: none;
+            font-size: .875rem;
+            transition: all .5s cubic-bezier(.19,1,.22,1);
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px $blue-light4;
+            }
+        }
+
+        .pagination-summary {
+            font-weight: $font-regular;
+        }
+
+        .belt-dropdown {
+            span {
+                font-size: .875rem;
+                font-weight: 700;
+                color: $gray-light4;
+            }
+
+            .icon-arrowdown {
+                height: 20px;
+                width: 20px;
+                margin-left: 15px;
+                transition: all .5s cubic-bezier(.19,1,.22,1);
+            }
+
+            .icon-add  {
+                display: flex;
+                align-items: center;
+                margin-right: 10px;
+
+                svg path  {
+                    fill: $gray-light4;
+                } 
+            }
+
+            &:hover{
+                span {
+                    color: $gray-dark;
+                }
+
+                .icon-arrowdown {
+                    transform: translateY(2px);
+
+                    svg path {
+                        fill: $gray-light4;
+                    }
+                }
+            }
+        }
+
+        .belt-prev, .belt-next {
+            padding: 10px;
+            height: 40px;
+            width: 40px;
+            min-width: 40px;
+            box-shadow: inset 0 0 0 1px $blue-light2;
+            border-radius: 10px;
+            transition: all .5s cubic-bezier(.19,1,.22,1);
+
+            .belt-icon {
+                height: 20px;
+                width: 20px;
+                background: 50% no-repeat;
+                transition: all .5s cubic-bezier(.19,1,.22,1);
+            }
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px $blue-light4;
+
+                .belt-icon {
+                    svg path {
+                        fill: $gray-light4;
+                    }
+                }
+            }
+        }
+
+        .belt-prev {
+            &:hover .belt-icon {
+                transform: translateX(-2px);
+            }
+        }
+
+        .belt-next {
+            &:hover .belt-icon {
+                transform: translateX(2px);
+            }
+        }
+
+        .modal-close {
+            height: 40px;
+            width: 40px;
+            min-width: 40px;
+            padding: 10px;
+            box-shadow: none;
+            border-radius: 10px;
+            transition: all .5s cubic-bezier(.19,1,.22,1);
+
+            &:hover {
+                background-color: $blue-light1;
+                box-shadow: inset 0 0 0 5px $blue-light1;
+            }
+        }
+    }
+} 
+