toggle-components-library 1.28.5 → 1.28.6-beta.0

package/src/sass/includes/_as_inputs.scss

@@ -6,7 +6,8 @@
 .toggle-input-radio-label, 
 .toggle-input-checkbox-label,
 .toggle-input-search-options,
-.toggle-input-select{
+.toggle-input-select,
+.toggle-contact-search-container{
     @include toggle-global-font-config;
 } 
 
@@ -417,7 +418,7 @@
     .toggle-input-radio-label, .toggle-input-checkbox-label{
         opacity: 0.5;
     }
-    .toggle-input-label, .toggle-input{
+    .toggle-input-label, .toggle-input, .toggle-contact-search-container{
         opacity: 0.5;
     }
     .toggle-input-select-container{
@@ -936,4 +937,241 @@ $iconWidth:20px;
         top: 50%;
         transform: translate(0, -50%);
     }
+}
+
+//
+// Contact Search Styles
+//
+
+.toggle-contact-search-input-container {
+    width: 100%;
+    height: 40px;
+    background-color: $toggle-white;
+    border-radius: 8px;
+    min-width: 550px;
+}
+
+.toggle-contact-search-input-container-active {
+    border-radius: 8px 8px 0 0;
+}
+
+.toggle-contact-search-icon-input-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.toggle-contact-search-dropdown-container {
+    min-width: 550px;
+    background-color: $toggle-white;
+    border-radius: 0 0 8px 8px;
+    overflow: hidden;
+    position: absolute;
+    z-index: 1;
+}
+
+.toggle-contact-search-input {
+    width: 100%;
+    border: 0;
+    border-radius: 0px;
+    height: 30px;
+    margin: 4px 5px 0px 14px;
+    color: #3A4A62;
+    font-weight: 700;
+    font-size: 16px;
+    background-color: #FFFFFF;
+}
+
+.toggle-contact-search-input::placeholder,
+.toggle-contact-search-input:-ms-input-placeholder,
+.toggle-contact-search-input::-ms-input-placeholder {
+    color: #C5CED8;
+    opacity: 1;
+}
+
+.toggle-contact-search-icon {
+    max-width: 20px;
+    max-height: 20px;
+    margin: 10px 16px 0 0;
+    transition: transform .2s ease-in-out;
+    width: 25px;
+    height: 25px;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.toggle-contact-search-icon-email {
+    background-image: url('../assets/icons/email-icon.svg');
+}
+
+.toggle-contact-search-icon-mobile {
+    background-image: url('../assets/icons/mobile-icon.svg');
+}
+
+.toggle-contact-search-icon-arrow-container:hover {
+    .toggle-contact-search-icon {
+        transform: scale(1.1);
+    }
+}
+
+.toggle-contact-search-icon-arrow-container {
+    display: flex;
+    width: 100px;
+    min-width: 60px;
+    flex-direction: row;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.toggle-contact-search-icon-arrow-container-disabled {
+    cursor: default !important;
+    opacity: 0.5;
+}
+
+.toggle-contact-search-magnifying-glass-icon {
+    cursor: pointer;
+    margin: 10px 15px 0 3px;
+    width: 25px;
+    height: 25px;
+    background-image: url('../assets/icons/magnifying-glass-icon.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    transition: transform .2s ease-in-out;
+}
+
+.toggle-contact-search-magnifying-glass-icon:hover {
+    transform: scale(1.1);
+}
+
+.toggle-contact-search-magnifying-glass-icon-disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.toggle-contact-search-arrow {
+    margin: 17px 0px  0px;
+    width: 10px;
+    height: 10px;
+    background-image: url('../assets/icons/arrow-icon.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.toggle-contact-search-arrow-active {
+    transition: all .2s ease;
+    transform: rotate(-3.1416rad) translateY(5px);
+}
+
+.toggle-contact-search-divider {
+    height: 28px;
+    margin: 7px 0 0 0;
+    border-right: 2px solid #D9D9D9;
+}
+
+.toggle-contact-search-dropdown-item {
+    margin: 5px 5px 5px 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    padding: 5px;
+}
+
+.toggle-contact-search-dropdown-item-label {
+    cursor: pointer;
+    font-weight: 700;
+    color: #3A4A62;
+}
+
+.toggle-contact-search-dropwdown-item-highlighted {
+    color: #547DEE;
+}
+
+.toggle-contact-search-dropdown-item:hover {
+    background-color: #F5F5F5;
+    color: #3A4A62;
+
+    .toggle-contact-search-icon-dropdown {
+        transform: scale(1.1);
+    }
+
+    .toggle-contact-search-dropdown-item-label {
+        color: #3A4A62;
+    }
+}
+
+.toggle-contact-search-icon-dropdown {
+    width: 25px;
+    height: 25px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    max-width: 20px;
+    max-height: 20px;
+    margin: 2px 14px 0 0;
+    transition: transform .2s ease-in-out;
+}
+
+.toggle-contact-search-error {
+    height: 16.8px;
+    text-align: right;
+    color: #FF6F6F;
+    font-size: 12px;
+    margin: 0 0 10px 0;
+}
+
+.toggle-contact-search-input-disabled {
+    color: #D3D9DF !important;
+}
+
+.toggle-contact-search-input-disabled::placeholder,
+.toggle-contact-search-input-disabled:-ms-input-placeholder,
+.toggle-contact-search-input-disabled::-ms-input-placeholder {
+    color: #D3D9DF !important;
+    opacity: 1;
+}
+
+.toggle-contact-search-spinner-container {
+    margin: 2px 25px 0 0;
+    max-width: 18px;
+    max-height: 20px;
+}
+//
+//  Contact Search Transition Styles
+//
+
+.drop-down-enter-active {
+    -moz-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in;
+    -webkit-transition-timing-function: ease-in;
+    -o-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+}
+
+.drop-down-leave-active {
+    -moz-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.drop-down-enter-to,
+.drop-down-leave {
+    max-height: 100px;
+    overflow: hidden;
+}
+
+.drop-down-enter,
+.drop-down-leave-to {
+    overflow: hidden;
+    max-height: 0;
 }

package/src/sass/includes/_as_loaders.scss

@@ -41,4 +41,19 @@
     margin-left:-1rem;
     width: 2rem;
     height: 2rem;
+  }
+
+  .toggle-inline-loader-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .toggle-inline-loader {
+    border-radius: 50%;
+    border: .25rem solid $toggle-button-disabled;
+    border-top-color: $toggle-white;
+    animation: spin 1s infinite linear;
+    width: 1rem;
+    height: 1rem;
+    margin: 8px 12px 0 0;
   }

package/src/sass/includes/_as_variables.scss

@@ -46,6 +46,18 @@ $booster-loyalty-colour-light:#aacc00;
 $booster-loyalty-colour-med:#97b500;
 $booster-loyalty-colour-dark:#7da400;
 
+$booster-champions-colour-light:#ffffff;
+$booster-champions-colour-med:#D89A02;
+$booster-champions-colour-dark: black;
+
+$booster-fulfilment-colour-light:#ffffff;
+$booster-fulfilment-colour-med:#3180FF;
+$booster-fulfilment-colour-dark:black;
+
+$booster-tickets-colour-light:#ffffff;
+$booster-tickets-colour-med:#3180FF;
+$booster-tickets-colour-dark:black;
+
 $booster-test-colour-light:#02add3;
 $booster-test-colour-med:#0098ac;
 $booster-test-colour-dark:#008ba4;