toggle-components-library 1.33.0-beta.3 → 1.33.0-beta.5

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,36 +227,35 @@
     }
 }
 
-.toggle-date-input-calendar-icon-disabled {
+.calendar-icon-disabled {
     cursor: default;
     opacity: 0.5;
 }
 
 .toggle-input-select-container{
     position:relative;
-    //background-color: $toggle-dark-grey;
+    background-color: $toggle-dark-grey;
     border-radius:5px;
     overflow: auto;
     float: left;
     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;
-    //}
+    &: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;
+    }
 }
 
-
+ 
 .toggle-input-select{
 
-    //padding           : 0.5rem 2.5rem 0.5rem 1rem;
-    padding: 0.5rem;
+    padding           : 0.5rem 2.5rem 0.5rem 1rem;
     cursor            : pointer;
 
     -webkit-appearance: none;
@@ -335,7 +334,7 @@
     .toggle-input-radio{
         clear:both;
         float: left;
-        margin-left:2.2rem;
+        margin-left:2.2rem;         
     }
 
 }
@@ -369,8 +368,8 @@
         display  : flex;
         align-items: center;
     }
-
-
+  
+    
     input[type="radio"], input[type="checkbox"]{
         display: none;
     }
@@ -397,7 +396,7 @@
         }
     }
 
-
+    
 
     > input:disabled:checked + div{
         .toggle-input-radio-check-element {
@@ -436,10 +435,6 @@
     }
 }
 
-.toggle-input-is-readonly:focus {
-    outline: none;
-}
-
 .toggle-input-radio-label, .toggle-input-checkbox-label{
     display  : inline-block;
     font-size: $toggle-font-size-large;
@@ -491,7 +486,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
@@ -518,8 +513,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 {
@@ -544,7 +539,7 @@ $iconWidth:20px;
                     background: url('../assets/icons/draggable.svg') no-repeat center center;
                     cursor: move;
                 }
-
+              
             }
             .toggle-button-container{
                 border:0px solid transparent!important;
@@ -553,7 +548,7 @@ $iconWidth:20px;
                     height:$iconWidth;
                 }
             }
-
+           
 
             li:first-child div:first-child{
                 border:4px solid #189ED1;
@@ -562,8 +557,8 @@ $iconWidth:20px;
         }
     }
 
-
-
+  
+    
 }
 
 .toggle-dropzone-container{
@@ -592,7 +587,7 @@ $iconWidth:20px;
             height:0.5vw;
         }
     }
-
+  
 
     .vue-dropzone {
         border: 0;
@@ -616,7 +611,7 @@ $iconWidth:20px;
                 background-color: $toggle-light-blue;
             }
         }
-
+       
     }
 
     .dropzone{
@@ -650,7 +645,7 @@ $iconWidth:20px;
     .dropzone > .dz-preview {
         width: 40%;
     }
-
+   
 }
 
 .toggle-dropzone-file-container {
@@ -675,7 +670,7 @@ $iconWidth:20px;
     cursor: pointer;
     float:left;
     height: 2rem;
-    width: 2rem;
+    width: 2rem;   
     border-radius: 0% 50% 50% 0%;
     margin-left: -5px;
 }
@@ -691,7 +686,7 @@ $iconWidth:20px;
 
 
 // input crud buttons
-//
+// 
 .toggle-input-crud-container{
     padding:1rem 3.5rem 1rem 1rem;;
     height:auto;
@@ -710,7 +705,7 @@ $iconWidth:20px;
         cursor: pointer;
     }
 
-
+    
 
     .toggle-input-crud-container-description{
         text-align: center;
@@ -850,24 +845,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;
@@ -884,7 +879,7 @@ $iconWidth:20px;
         width: 130px;
         margin: 5px 0px;
         @include toggle-input-border-country-left;
-
+    
         select{
             position: relative;
             opacity: 0;
@@ -893,32 +888,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  {
@@ -929,16 +924,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/includes/_as_statusbar.scss

@@ -13,6 +13,45 @@
     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;
@@ -20,6 +59,11 @@
     .toggle-status-bar-label {
         color: #A34308;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #A34308;
+        border: 1px solid #A34308;
+    }
 }
 
 // Processing colours
@@ -29,6 +73,11 @@
     .toggle-status-bar-label {
         color: #269BE3;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
 }
 
 // Complete colours
@@ -38,6 +87,11 @@
     .toggle-status-bar-label {
         color: #3BB40B;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #3BB40B;
+        border: 1px solid #3BB40B;
+    }
 }
 
 // Inactive colours
@@ -47,6 +101,11 @@
     .toggle-status-bar-label {
         color: #269BE3;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
 }
 
 // Active colours
@@ -57,6 +116,26 @@
     .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;
+    }
+
 }
 
 .toggle-status-bar-dot {
@@ -64,4 +143,22 @@
     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;
+    }
 }

package/src/sass/includes/_as_table.scss

@@ -41,8 +41,7 @@ table.toggle-table {
 
   thead {
     th.toggle-table-th {
-      //padding: 0 10px 20px 0;
-      padding: 0;
+      padding: 0 10px 20px 0;
       border: none;
       text-align: left;
      @include toggle-global-font-config;
@@ -55,7 +54,7 @@ table.toggle-table {
         }
       }
 
-
+      
     }
 
 
@@ -76,7 +75,7 @@ table.toggle-table {
       text-indent: 1px;
       text-overflow: '';
 
-      //background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
+      background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
       background-size: 15px;
       padding           : 0.5rem 0rem 0.5rem 1rem;
     }
@@ -99,7 +98,7 @@ table.toggle-table {
 
     td.toggle-tablee-td {
         @include toggle-global-font-config;
-
+ 
         font-size: $toggle-font-size-small;
         padding: 1rem 0;
         padding-left:1rem;
@@ -147,19 +146,19 @@ table.toggle-table {
 
 
     }
-
+   
   }
 
   .toggle-date-input-calendar-icon{
     &:after{
         content: '';
-    }
+    } 
     .toggle-input{
         font-size: 12px;
         padding-right:0px !important;
     }
- }
-
+ }    
+ 
 }
 
 
@@ -174,7 +173,7 @@ table.toggle-table {
     line-height: 1em;
     position: relative;
     display: block;
-    height: 50px;
+    height: 20px;
     margin: 0 4px 8px 4px;
     padding: 10px;
     border:1px solid transparent;
@@ -196,7 +195,6 @@ table.toggle-table {
         }
     }
     .toggle-table-searchable & {
-        cursor: pointer;
         .toggle-table-th-title {
             position: relative;
             display: inline-block;