toggle-components-library 1.10.1

package/src/sass/includes/_as_loader.scss

@@ -0,0 +1,37 @@
+$loader-segment-colour: rgb(255,255,255);
+$loader-segment-background: rgba(0,0,0, 0.1);
+$spin-duration: 1s;
+
+  .toggle-loader-holder{
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    background:#FFF;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  // loading
+
+  .toggle-loader {
+    position: absolute;
+    top:50%;
+    left:50%;
+    margin-left:-12px;
+    margin-top:-12px;
+    border-radius: 50%;
+    border: .25rem solid $loader-segment-background;
+    border-top-color: $loader-segment-colour;
+    animation: spin $spin-duration infinite linear;
+    width: 24px;
+    height: 24px;
+  }

package/src/sass/includes/_as_loaders.scss

@@ -0,0 +1,41 @@
+
+  .toggle-fill-loader-container{
+    position:absolute;
+    top:0;
+    left:0;
+    height:100%;
+    width:100%;
+    z-index:10;
+    background: white;
+  }
+  .toggle-fill-loader-container-background{
+
+    	&:after{
+	    	content:'';
+	    	position:absolute;
+	    	top:0;
+	    	left:0;
+	    	height:100%;
+	    	width:100%;
+	    	opacity: 0.2;
+		    background:$toggle-button-disabled;
+		    z-index: 0;
+	    }
+
+    }
+
+  // loading
+
+  .toggle-fill-loader {
+  	position:absolute;
+  	top:50%;
+  	left:50%;
+    border-radius: 50%;
+     border: .25rem solid $toggle-button-disabled;
+    border-top-color: $toggle-white;
+    animation: spin 1s infinite linear;
+    margin-top:-1rem;
+    margin-left:-1rem;
+    width: 2rem;
+    height: 2rem;
+  }

package/src/sass/includes/_as_modals.scss

@@ -0,0 +1,83 @@
+.toggle-modal-mask {
+	top: 0;
+	left:0;
+	position:fixed;
+	overflow:scroll;
+
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	transition: opacity 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 1;
+	transition: opacity .3s;
+  z-index:10;
+}
+
+.toggle-modal-wrapper {
+    margin: auto;
+    width:100%;
+    max-height: 80%;
+
+}
+
+.toggle-modal-container {
+  width: 50%;
+  min-width: 300px;
+  margin: 0px auto;
+  padding: 1rem;
+  background-color: $toggle-off-white;
+  border-radius   : 9px; 
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  overflow: initial;
+  position: relative;
+  display: flow-root;
+}
+
+.toggle-modal-close-button{
+  position:absolute;
+	width:1.5rem;
+	height:1.5rem;
+	right:1rem;
+	cursor: pointer;
+    opacity   : 0.5;
+    &:hover{
+    	opacity: 1;
+    }
+
+    background-image: url("../assets/icons/delete-grey.svg");
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.toggle-modal-enter {
+	opacity: 0;
+}
+
+.toggle-modal-leave-active {
+  opacity: 0;
+}
+
+
+
+.toggle-modal-leave-active .toggle-modal-container  {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+
+
+}
+
+.toggle-modal-enter .toggle-modal-container
+{
+    -webkit-transform: scale(0.8);
+}

package/src/sass/includes/_as_navs.scss

@@ -0,0 +1,120 @@
+.toggle-sidenav-container {
+  font-size: $toggle-font-size-regular;
+  width: 25%;
+  float: left;
+  max-width: 280px;
+  min-height: 100vh;
+
+  .toggle-sidenav-logo {
+    // 125px converted to rem
+    // assuming browser base 16px
+    max-width: 7.8125rem;
+    margin: 2rem 0 0 0;
+  }
+
+  .toggle-sidenav-title {
+    margin: 2rem 0;
+  }
+
+  .toggle-sidenav-ul {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+
+    .toggle-sidenav-item {
+      list-style: none;
+      font-family: $toggle-font-family;
+      font-size: $toggle-font-size-regular;
+      font-weight: bold;
+      padding-bottom: 0.25rem;
+
+      &.active {
+        > a {
+          background: #FFF;
+          color: $toggle-blue;
+        }
+      }
+
+      .toggle-sidenav-item{
+        a{
+          &::before{
+            display: none;
+          }
+        }
+      }
+
+      &.toggle-icon{
+
+          a{
+            &::before{
+              content:'';
+              position: static;
+              padding-left: 0.5rem;
+              width: $toggle-font-size-regular;
+              height: $toggle-font-size-regular;
+              margin-right: 1rem;
+              background-position: center;
+              background-size: contain;
+              background-repeat: no-repeat;
+            }
+          }
+
+
+        
+          &.toggle-graph-icon a::before {
+            background-image: url("../assets/icons/graph.svg");
+          }
+
+          &.toggle-orders-icon a::before {
+            background-image: url("../assets/icons/orders.svg");
+          }
+
+          &.toggle-card-icon a::before {
+            background-image: url("../assets/icons/card.svg");
+          }
+
+          &.toggle-megaphone-icon a::before {
+            background-image: url("../assets/icons/megaphone.svg");
+          }
+
+          &.toggle-email-icon a::before {
+            background-image: url("../assets/icons/email.svg");
+          }
+        
+
+      }
+
+     
+
+      a {
+        color: $toggle-dark-blue;
+        display: flex;
+        align-items: center;
+        padding-left: 0.5rem;
+        height: 2rem;
+        border-radius: 0.5rem;
+
+
+
+        
+
+        &:hover {
+          background: $toggle-white;
+          color: $toggle-blue;
+        }
+      }
+    }
+  }
+
+  .toggle-sidenav-sub-ul {
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-left: 2.5rem;
+    li {
+      a {
+        font-weight: normal;
+      }
+    }
+  }
+}

package/src/sass/includes/_as_notifications.scss

@@ -0,0 +1,30 @@
+.toggle-notifications-messagebox {
+  z-index: 999 !important;
+  position: fixed;
+  top: -34px;
+  width: 100%;
+  text-align: center;
+  height: 34px;
+  overflow: hidden;
+  transition: top 1s;
+
+  .message {
+    font-family: $toggle-font-family;
+    display: inline-block;
+    background-color: #71BE37;
+    color: #FFF;
+    font-size: 12px;
+    padding: 8px 25px;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  &.active {
+    top: 0;
+  }
+}
+
+
+.error .message {
+  background-color: red;
+}

package/src/sass/includes/_as_sizes.scss

@@ -0,0 +1,4 @@
+//sizes
+.toggle-is-full-width {
+    min-width: 100%;
+}

package/src/sass/includes/_as_table.scss

@@ -0,0 +1,276 @@
+
+
+table.toggle-table {
+
+  table-layout:fixed;
+
+  width: 100%;
+  margin: 25px 0;
+  font-size: 12px;
+  border-collapse: collapse;
+  color: #354B64;
+
+  .toggle-date-container, .toggle-input-container{
+
+    padding:0;
+    background-color:transparent;
+    border-radius:0;
+    border:none;
+    .toggle-input-label{
+        display: none;
+    }
+    .toggle-date-input-container{
+        .toggle-date-input-calendar-icon{
+           .toggle-input{
+                background:transparent;
+                padding:0rem 1rem 1rem 0rem;
+                margin-top: 0;
+           }
+        }
+        .toggle-clear{
+            display: none;
+        }
+    }
+
+  }
+
+  thead {
+    th.toggle-table-th {
+      padding: 0 10px 20px 0;
+      border: none;
+      text-align: left;
+     @include toggle-global-font-config;
+     font-weight: bold;
+        font-size: $toggle-font-size-small;
+
+      &:hover {
+        .search {
+          opacity: 1;
+        }
+      }
+
+      
+    }
+
+
+
+    th.toggle-tablee-th:first-child {
+      padding: 0 0 20px 10px;
+    }
+
+    select {
+      border: none;
+      background-color: #FFF;
+      font-size: 11.5px;
+      font-weight: bold;
+      color: #575757;
+
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      text-indent: 1px;
+      text-overflow: '';
+
+      background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
+      background-size: 15px;
+      width: 100px;
+      padding           : 0.5rem 0rem 0.5rem 1rem;
+    }
+  }
+
+  tbody {
+    tr.toggle-tablee-tr:nth-child(odd) {
+      background-color: #FAFBFB;
+
+      &:hover {
+        background-color: #FFF;
+      }
+    }
+
+    tr.toggle-tablee-tr:nth-child(even) {
+      &:hover {
+        background-color: #E7EEF0;
+      }
+    }
+
+    td.toggle-tablee-td {
+        @include toggle-global-font-config;
+ 
+        font-size: $toggle-font-size-small;
+        padding: 1rem 0;
+        padding-left:1rem;
+
+        cursor: pointer;
+        vertical-align: middle;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 80px;
+        border: none;
+        text-align: left;
+    }
+
+
+    tr.toggle-tablee-tr {
+
+        &:hover {
+            background-color: #FFF;
+            .arrow-order {
+                display: block;
+            }
+        }
+        td.toggle-tablee-td:first-child {
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+        }
+
+        td.toggle-tablee-td:last-child {
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+
+    }
+
+   
+  }
+}
+
+
+
+
+.toggle-table-any-search-active {
+    .toggle-table-th-inner {
+        height:74px;
+    }
+}
+.toggle-table-th-inner {
+    line-height: 1em;
+    position: relative;
+    display: block;
+    height: 20px;
+    margin: 0 4px 8px 4px;
+    padding: 10px;
+    border:1px solid transparent;
+    border-radius: 4px;
+    box-sizing:border-box;
+    transition: height .5s;
+
+    .toggle-table-search-active & {
+        z-index: 25;
+        //overflow: hidden;
+        background-color: white;
+        border:1px solid #FFA300;
+        input {
+            cursor: text;
+            pointer-events: auto;
+        }
+        .toggle-table-close-search {
+            display: inline-block;
+        }
+    }
+    .toggle-table-searchable & {
+        .toggle-table-th-title {
+            position: relative;
+            display: inline-block;
+            &:after {
+                display: block;
+                content:'';
+                position: absolute;
+                right: -15px;
+                top: 3px;
+                background: url(../assets/icons/search.svg) no-repeat;
+                width: 10px;
+                height: 10px;
+                opacity: 0.3;
+            }
+        }
+        &:hover .toggle-table-th-title:after {
+            opacity: 1;
+        }
+    }
+    .toggle-table-searchable.toggle-table-search-active & {
+        .toggle-table-th-title:after {
+            display: none;
+        }
+    }
+}
+
+
+.toggle-table-close-search {
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    display: block;
+    opacity: 0.3;
+    cursor:pointer;
+}
+.toggle-table-close-search {
+    background: url(../assets/icons/grey_cross.svg) no-repeat;
+    width: 12px;
+    height: 12px;
+    display: none;
+    float: right;
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.arrow-order {
+    background: url(/img/icons/arrow-right-blue-small.svg);
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+    right: 15px;
+    width: 20px;
+    height: 20px;
+    display: none;
+}
+
+
+
+.toggle-pagination {
+
+    ul, li {
+        list-style: none;
+    }
+    ul {
+        margin: 0;
+        padding: 0;
+        li {
+            float: left;
+
+            button {
+                border: none;
+                cursor: pointer;
+                padding: 0 10px;
+                color: #354B64;
+                background-color: transparent;
+                &:disabled {
+                    color: rgba(24, 158, 209, 0.7);
+                    font-weight: bold;
+                }
+            }
+
+            .toggle-pagination-prev, .toggle-pagination-next {
+                text-indent: -99999px;
+                width: 25px;
+                height: 25px;
+            }
+
+            .toggle-pagination-prev{
+                background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
+                margin-right: 10px;
+
+                &:hover {
+                    background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
+                }
+            }
+
+            .toggle-pagination-next{
+                background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
+                margin-left: 10px;
+                &:hover {
+                    background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
+                }
+            }
+        }
+    }
+}

package/src/sass/includes/_as_text.scss

@@ -0,0 +1,73 @@
+.toggle-helper-text {
+  @include toggle-global-font-config;
+  float: left;
+}
+
+.toggle-helper-text-small{
+  font-size:12px;
+  color: #202C38;
+  font-family: "Lato", sans-serif;
+  line-height: 1.4; 
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: normal;
+  float: left;
+}
+
+a {
+  text-decoration: none;
+}
+
+.toggle-h2-header {
+  @include toggle-global-font-config;
+  font-size: $toggle-font-size-large;
+  font-weight: 700;
+  color: $toggle-header-colour;
+}
+
+.toggle-copy-text {
+  @include toggle-global-font-config;
+
+  p, a {
+    color: $toggle-dark-blue;
+    margin: 0.25rem 0;
+  }
+  a {
+   font-weight: bold;
+    &::after{
+      background-image: url("../assets/icons/clipboard.svg");
+      content:'';
+      position: static;
+      padding-right: 1.5rem;
+      width: $toggle-font-size-regular;
+      height: $toggle-font-size-regular;
+      margin-right: 1rem;
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+      cursor:pointer;
+    }
+  }
+}
+
+.toggle-info-text{
+  font-size: 0.85rem;
+  font-family: "Lato", sans-serif;
+
+  color:$toggle-dark-blue;
+  display: inline-block;
+  position: relative;
+  padding-left: 1.25rem;
+  margin-top: 5px;
+  font-weight: normal;
+  line-height: 1.5;
+
+  &::before{
+      content: url('../assets/icons/info.svg');
+      width: 1rem;
+      position: absolute;
+      margin-left:-1.25rem;
+      margin-top: 2px;
+    }
+    
+  }

package/src/sass/includes/_as_variables.scss

@@ -0,0 +1,49 @@
+/* colors */
+$toggle-error-red: #ED7B7C;
+$toggle-dark-blue: #354b64;
+$toggle-red: #ed6f76;
+$toggle-green: green;
+$toggle-blue: #3180FF;
+$toggle-light-blue: #38ABFF;
+$toggle-white: #FFFFFF;
+$toggle-off-white: #FAFBFB;
+$toggle-dark-grey: #F4F6F7;
+$toggle-placeholder-grey: #abb7c5;
+
+$toggle-black: #202C38;
+$toggle-success-green: #71BE37;
+$toggle-inactive-grey: #B3CBE0;
+
+/* breakpoints */
+$toggle-breakpoint-smallest: 320px;
+$toggle-breakpoint-phone: 480px;
+$toggle-breakpoint-tablet: 768px;
+$toggle-breakpoint-desktop: 992px;
+$toggle-breakpoint-large-desktop: 1200px;
+
+/* Fonts */
+$toggle-font-size-small: 0.7rem;
+$toggle-font-size-regular: 1rem;
+$toggle-font-size-large: 1.2rem;
+$toggle-font-size-extra-large: 1.4rem;
+
+$toggle-font-family: 'Lato', sans-serif;
+$toggle-font-family-secondary: "DIN-2014",'Lato',sans-serif;
+$toggle-input-colour: $toggle-dark-blue;
+
+$toggle-header-colour: $toggle-dark-blue;
+
+
+/* Button Colours */
+$toggle-button-success:$toggle-success-green;
+$toggle-button-abort:$toggle-error-red;
+$toggle-button-neutral:$toggle-light-blue;
+$toggle-button-disabled:#d6d6d6;
+
+:export {
+	toggleblue     : $toggle-blue;
+	togglelightblue: $toggle-light-blue;
+	togglewhite    : $toggle-white;
+	toggleinputcolour : $toggle-input-colour;
+
+}