toggle-components-library 1.33.0-beta.10 → 1.33.0-beta.12

package/src/sass/includes/_as_inputs.scss

@@ -1,15 +1,15 @@
 
 .toggle-input,
 .toggle-input-label,
-.toggle-input-counter, 
+.toggle-input-counter,
 .toggle-input-label-error,
-.toggle-input-radio-label, 
+.toggle-input-radio-label,
 .toggle-input-checkbox-label,
 .toggle-input-search-options,
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
-} 
+}
 
 .toggle-input-counter{
     font-size: $toggle-font-size-small;
@@ -110,7 +110,7 @@
 
         padding         : 0.8rem 1.2rem 1.4rem 1.2rem;
         background-color: $toggle-off-white;
-        border-radius   : 9px; 
+        border-radius   : 9px;
         box-sizing      : border-box;
         border          : 1px solid $toggle-off-white;
         position        : relative;
@@ -122,7 +122,7 @@
         &.margin-bottom-0{
             padding-bottom:0;
         }
-    
+
 }
 
 // When inputs are inside input groups or modals, they look a bit different
@@ -227,9 +227,13 @@
     }
 }
 
-.calendar-icon-disabled {
+.toggle-date-input-calendar-icon-disabled {
     cursor: default;
-    opacity: 0.5;
+    opacity: 0.4;
+}
+
+.toggle-date-input-disabled {
+    opacity: 0.7 !important;
 }
 
 .toggle-input-select-container{
@@ -241,18 +245,18 @@
     clear: both;
     width: 100%;
     &:after{
-        content: '';
-        width: 1.5rem;
-        height: 1.5rem;
-        background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
-        position: absolute;
-        right: 1rem;
-        top: 0.7rem;
-        pointer-events: none;
+       content: '';
+       width: 1.5rem;
+       height: 1.5rem;
+       background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
+       position: absolute;
+       right: 1rem;
+       top: 0.7rem;
+       pointer-events: none;
     }
 }
 
- 
+
 .toggle-input-select{
 
     padding           : 0.5rem 2.5rem 0.5rem 1rem;
@@ -334,7 +338,7 @@
     .toggle-input-radio{
         clear:both;
         float: left;
-        margin-left:2.2rem;         
+        margin-left:2.2rem;
     }
 
 }
@@ -368,8 +372,8 @@
         display  : flex;
         align-items: center;
     }
-  
-    
+
+
     input[type="radio"], input[type="checkbox"]{
         display: none;
     }
@@ -396,7 +400,7 @@
         }
     }
 
-    
+
 
     > input:disabled:checked + div{
         .toggle-input-radio-check-element {
@@ -435,6 +439,10 @@
     }
 }
 
+.toggle-input-is-readonly:focus {
+    outline: none;
+}
+
 .toggle-input-radio-label, .toggle-input-checkbox-label{
     display  : inline-block;
     font-size: $toggle-font-size-large;
@@ -486,7 +494,7 @@
 }
 
 .toggle-input-checkbox-check-element {
-    background: url('../assets/icons/checkbox_blank.svg') no-repeat; 
+    background: url('../assets/icons/checkbox_blank.svg') no-repeat;
 }
 
 // image input
@@ -513,8 +521,8 @@ $iconWidth:20px;
             .toggle-dark-grey {
                 border:7px solid inherit;
             }
-            .toggle-draggable-group-item { 
-                position: relative; 
+            .toggle-draggable-group-item {
+                position: relative;
                 list-style: none;
                 margin:5px 10px 5px 0px;
                 .toggle-item-img {
@@ -539,7 +547,7 @@ $iconWidth:20px;
                     background: url('../assets/icons/draggable.svg') no-repeat center center;
                     cursor: move;
                 }
-              
+
             }
             .toggle-button-container{
                 border:0px solid transparent!important;
@@ -548,7 +556,7 @@ $iconWidth:20px;
                     height:$iconWidth;
                 }
             }
-           
+
 
             li:first-child div:first-child{
                 border:4px solid #189ED1;
@@ -557,8 +565,8 @@ $iconWidth:20px;
         }
     }
 
-  
-    
+
+
 }
 
 .toggle-dropzone-container{
@@ -587,7 +595,7 @@ $iconWidth:20px;
             height:0.5vw;
         }
     }
-  
+
 
     .vue-dropzone {
         border: 0;
@@ -611,7 +619,7 @@ $iconWidth:20px;
                 background-color: $toggle-light-blue;
             }
         }
-       
+
     }
 
     .dropzone{
@@ -645,7 +653,7 @@ $iconWidth:20px;
     .dropzone > .dz-preview {
         width: 40%;
     }
-   
+
 }
 
 .toggle-dropzone-file-container {
@@ -670,7 +678,7 @@ $iconWidth:20px;
     cursor: pointer;
     float:left;
     height: 2rem;
-    width: 2rem;   
+    width: 2rem;
     border-radius: 0% 50% 50% 0%;
     margin-left: -5px;
 }
@@ -686,7 +694,7 @@ $iconWidth:20px;
 
 
 // input crud buttons
-// 
+//
 .toggle-input-crud-container{
     padding:1rem 3.5rem 1rem 1rem;;
     height:auto;
@@ -705,7 +713,7 @@ $iconWidth:20px;
         cursor: pointer;
     }
 
-    
+
 
     .toggle-input-crud-container-description{
         text-align: center;
@@ -845,24 +853,24 @@ $iconWidth:20px;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
-    
+
     @mixin toggle-input-border-base {
         border: 1px solid #ccc;
     }
-    
+
     @mixin toggle-input-border {
         @include toggle-input-border-base;
         border-radius: 4px;
         box-sizing: border-box;
     }
-    
+
     @mixin toggle-input-border-country-left {
         @include toggle-input-border-base;
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
         border-right: none;
     }
-    
+
     @mixin toggle-input-border-country-right {
         @include toggle-input-border-base;
         border-top-right-radius: 4px;
@@ -879,7 +887,7 @@ $iconWidth:20px;
         width: 130px;
         margin: 5px 0px;
         @include toggle-input-border-country-left;
-    
+
         select{
             position: relative;
             opacity: 0;
@@ -888,32 +896,32 @@ $iconWidth:20px;
             cursor: pointer;
             height: 100%;
         }
-    
+
         .toggle-selected-wraper {
             top:20%;
             font-size: 0.9em;
             position: absolute;
             padding: 3px;
             left: 5px;
-    
+
             &:before{
                 float:left;
                 content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 317 275'><path id='Arrow_downw' data-name='Arrow_Down' d='M158.5,0,317,275H0Z' transform='translate(317 275) rotate(180)' fill='gray'/></svg>");
                 margin-top:1px;
                 margin-right: 2px;
             }
-    
+
             div {
                 float:left;
             }
-    
+
             .toggle-selected-country-emoji {
                 margin-left: 5px;
                 margin-top: 2px;
             }
         }
-    
-    
+
+
     }
 
     .toggle-input-label-error  {
@@ -924,16 +932,16 @@ $iconWidth:20px;
     .toggle-input-select-country {
         padding: 3px 10px 22px 10px;
         margin: 5px 0px 5px 0px;
-    
+
         &.toggle-number {
-            
+
             position: relative;
             font-size:0.9em;
             padding:10px;
             @include toggle-input-border-country-right;
             width: 80%;
         }
-        
+
     }
     .toggle-invalid-number {
         border:1px solid #ED7B7C !important;

package/src/sass/main.scss

@@ -21,6 +21,5 @@
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
 @import "./includes/_as_boosters.scss";
-@import "./includes/_as_statusbar.scss";
 @import "./includes/_as_cards.scss";
 @import "./includes/_as_carousels.scss";

package/src/components/statusbar/ToggleStatusBar.vue

@@ -1,73 +0,0 @@
-<template>
-    <div :class="['toggle-status-bar-container', statusColours, statusSize]">
-        <label class="toggle-status-bar-label">
-            <span class="toggle-status-bar-dot blinking" v-if="showDot">&#9679;</span>
-            {{ statusName }}
-        </label>
-        
-        <div class="toggle-status-bar-tooltip-container" v-if="showToolTip && toolTipText.length">
-            <div class="toggle-status-bar-tooltip">
-                ?
-                <span class="toggle-status-bar-tooltip-text">{{ toolTipText }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'StatusBar',
-    props: {
-        status: {
-            type: String,
-            required: true,
-            validator: function (value) {
-                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted', 'failed'].indexOf(value) !== -1;
-            }
-        },
-        size: {
-            type: String,
-            required: false,
-            validator: function (value) {
-                return ['small'].indexOf(value) !== -1;
-            }
-        },
-        toolTipOptions: {
-            type: Object,
-            required: false
-        }
-    },
-    computed: {
-        // Capitalise the first letter of the status
-        statusName() {
-            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
-        },
-        // Add the status to the class name
-        statusColours() {
-            return 'toggle-status-bar-' + this.status;
-        },
-        // Add the size to the class name
-        statusSize() {
-            return 'toggle-status-bar-' + this.size;
-        },
-        // Show the dot if the status is active or processing
-        showDot() {
-            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
-        },
-        showToolTip() {
-            return this.size !== 'small';
-        },
-        toolTipText() {
-            if (!this.toolTipOptions) {
-                return '';
-            }
-
-            if (this.toolTipOptions[this.status]) {
-                return this.toolTipOptions[this.status];
-            } else {
-                return '';
-            }
-        }
-    }
-}
-</script>

package/src/sass/includes/_as_statusbar.scss

@@ -1,179 +0,0 @@
-.toggle-status-bar-container {
-    font-family: $toggle-font-family;
-    font-size: 16px !important;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 50px;
-    width: 100%;
-    border-radius: 7px;
-}
-
-.toggle-status-bar-small {
-    height: 35px;
-}
-
-// Tooltip
-.toggle-status-bar-tooltip-container{
-    position: absolute;
-    display: flex;
-    justify-content: right;
-    width: 100%;
-    right: 32px;
-    cursor: default;
-
-    .toggle-status-bar-tooltip {
-        position: relative;
-        display: inline-block;
-        width: 20px;
-        text-align: center;
-        border: 1px solid hotpink;
-        border-radius: 50px;
-    }
-    
-    // Tooltip text
-    .toggle-status-bar-tooltip .toggle-status-bar-tooltip-text {
-        visibility: hidden;
-        width: 200px;
-        background-color: rgba(0, 0, 0, .8);
-        color: #fff;
-        text-align: center;
-        padding: 10px;
-        border-radius: 6px;
-        position: absolute;
-        z-index: 1;
-        top: -5px;
-        right: 105%;
-    }
-    
-    .toggle-status-bar-tooltip:hover .toggle-status-bar-tooltip-text {
-        visibility: visible;
-    }
-}
-
-
-// Draft colours
-.toggle-status-bar-draft {
-    background-color: #FFB88D;
-
-    .toggle-status-bar-label {
-        color: #A34308;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #A34308;
-        border: 1px solid #A34308;
-    }
-}
-
-// Processing colours
-.toggle-status-bar-processing {
-    background-color: #D7E9F2;
-
-    .toggle-status-bar-label {
-        color: #269BE3;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #269BE3;
-        border: 1px solid #269BE3;
-    }
-}
-
-// Complete colours
-.toggle-status-bar-complete {
-    background-color: #B3E49F;
-
-    .toggle-status-bar-label {
-        color: #3BB40B;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #3BB40B;
-        border: 1px solid #3BB40B;
-    }
-}
-
-// Inactive colours
-.toggle-status-bar-inactive {
-    background-color: #D7E9F2;
-
-    .toggle-status-bar-label {
-        color: #269BE3;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #269BE3;
-        border: 1px solid #269BE3;
-    }
-}
-
-// Active colours
-.toggle-status-bar-active {
-    background-color: #D7E9F2;
-    border: 1px solid #FF4848;
-
-    .toggle-status-bar-label {
-        color: #FF4848;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #FF4848;
-        border: 1px solid #FF4848;
-    }
-}
-
-// Submitted colours
-.toggle-status-bar-submitted {
-    background-color: #D7E9F2;
-    
-    .toggle-status-bar-label {
-        color: #269BE3;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #269BE3;
-        border: 1px solid #269BE3;
-    }
-
-}
-
-// Failed colours
-.toggle-status-bar-failed {
-    background-color: #F2E3E3;
-    border: 1px solid #ED7B7C;
-    
-    .toggle-status-bar-label {
-        color: #ED7B7C;
-    }
-
-    .toggle-status-bar-tooltip {
-        color: #ED7B7C;
-        border: 1px solid #ED7B7C;
-    }
-}
-
-.toggle-status-bar-dot {
-    font-size: 20px;
-    margin: 0 3px 0 0;
-    float: none !important;
-    padding: 0 !important;
-}
-
-// Dot blinking animation
-
-.blinking {
-    animation: 2s blink ease infinite;
-}
-
-@keyframes blink {
-
-    from,
-    to {
-        opacity: 0;
-    }
-
-    50% {
-        opacity: 1;
-    }
-}