toggle-components-library 1.10.1

package/src/sass/includes/_as_inputs.scss

@@ -0,0 +1,900 @@
+
+.toggle-input,
+.toggle-input-label,
+.toggle-input-counter, 
+.toggle-input-label-error,
+.toggle-input-radio-label, 
+.toggle-input-checkbox-label,
+.toggle-input-search-options,
+.toggle-input-select{
+    @include toggle-global-font-config;
+} 
+
+.toggle-input-counter{
+    font-size: $toggle-font-size-small;
+    display  : inline-block;
+    float    : right;
+}
+
+.toggle-input, .toggle-input-select, .toggle-input-crud-container{
+    font-size       : $toggle-font-size-large;
+    color           : $toggle-input-colour;
+    width           : 100%;
+    background-color: transparent;
+    background: none;
+    border          : none;
+    font-weight     : bold;
+    border-radius   : 5px;
+    padding         : 0 0 1rem 0;
+    box-sizing      : border-box;
+    padding: 0rem 3.5rem 1rem 0rem;
+    position          : relative;
+    box-shadow        : none;
+    z-index           : 1;
+    background-color  : transparent;
+    background-image  : none;
+    height: 2.8rem;
+    clear: both;
+    float: left;
+    margin: 0;
+
+    &.height-medium {
+        height: 6rem;
+    }
+
+    &.height-large {
+        height: 10rem;
+    }
+
+    &.height-extra-large {
+        height: 15rem;
+    }
+
+}
+
+.toggle-input-search-options-container{
+    position:relative;
+    float:left;
+    clear: both;
+    width: 100%;
+}
+
+
+.toggle-input-search-options{
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+    float:left;
+    clear: both;
+    background: $toggle-white;
+    margin:0;
+    width:100%;
+    padding: 0;
+    position:absolute;
+    list-style: none;
+    max-height: 10rem;
+    overflow: scroll;
+    z-index: 10;
+
+    li{
+        padding:0.5rem 0.5rem 0 0.5rem;
+        cursor: pointer;
+        opacity: 0.8;
+
+        &:hover{
+            opacity: 1;
+        }
+        &:last-child{
+            padding:0.5rem;
+        }
+    }
+}
+
+ // placeholders
+::-webkit-input-placeholder { /* Edge */
+    color:$toggle-placeholder-grey;
+}
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color:$toggle-placeholder-grey;
+}
+::placeholder {
+    color:$toggle-placeholder-grey;
+}
+
+.toggle-input-is-invalid{
+    border:1px solid $toggle-error-red !important;
+}
+
+
+
+.toggle-input-container, .toggle-date-container, .toggle-input-group{
+
+        padding         : 0.8rem 1.2rem 1.4rem 1.2rem;
+        background-color: $toggle-off-white;
+        border-radius   : 9px; 
+        box-sizing      : border-box;
+        border          : 1px solid $toggle-off-white;
+        position        : relative;
+        float           : left;
+        width           : 100%;
+        &:hover {
+            background-color: $toggle-white;
+        }
+        &.margin-bottom-0{
+            padding-bottom:0;
+        }
+    
+}
+
+// When inputs are inside input groups or modals, they look a bit different
+.toggle-input-group, .toggle-modal-container, .toggle-input-radio-group-container{
+    .toggle-input-is-invalid{
+        border:none !important;
+    }
+
+    .toggle-input-container, .toggle-date-container{
+        padding: 0 0 1.4rem 0 ;
+        background:none;
+        border:none;
+    }
+    .toggle-input{
+        background:$toggle-dark-grey;
+        padding           : 0.5rem 2.5rem 0.5rem 1rem;
+    }
+}
+
+
+.toggle-input-label {
+    display  : inline-block;
+    font-size: 1rem;
+    color    : $toggle-input-colour;
+    margin-bottom: 0.5rem;
+    float: left;
+}
+
+.toggle-input-label-error  {
+    font-size: $toggle-font-size-small;
+    color    : $toggle-error-red !important;
+    display  : block;
+    position : absolute;
+    bottom   : 0.3rem;
+}
+
+
+
+// date picker
+
+.toggle-date-container{
+
+    *{
+        font-family: $toggle-font-family;
+        color      : $toggle-input-colour;
+    }
+
+    .toggle-input{
+        padding:0.5rem 3.5rem 0.5rem 1rem;
+        background-color: $toggle-dark-grey;
+    }
+}
+
+
+
+.toggle-clear{
+    background       : transparent;
+    background-image : url('../assets/icons/delete.svg');
+    background-repeat: no-repeat;
+    cursor           : pointer;
+    margin-left      : 1rem;
+    height           : 1.5rem;
+    width            : 1.5rem;
+    border           : none;
+}
+
+.toggle-clear-dates {
+    position  : absolute;
+    top       : 1rem;
+    right     : 1rem;
+    background: url("../assets/icons/grey_cross.svg") no-repeat;
+    width     : 1rem;
+    height    : 1rem;
+    opacity   : 0.5;
+    cursor    : pointer;
+    &:hover {
+        opacity: 1;
+    }
+}
+
+
+
+.toggle-date-input-container {
+    display: flex;
+    align-items: center;
+    width:100%;
+    clear: both;
+    float:left;
+}
+
+.toggle-date-input-calendar-icon{
+    position:relative;
+    width: 100%;
+    &:after{
+        cursor: pointer;
+        content: url("../assets/icons/calendar.svg");
+        width: 1.5rem;
+        height: 1.5rem;
+        position: absolute;
+        right: 1rem;
+        top: 0.7rem;
+        pointer-events: none;
+        z-index: 2;
+    }
+}
+
+.toggle-input-select-container{
+    position:relative;
+    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;
+    }
+}
+
+
+ 
+.toggle-input-select{
+
+    padding           : 0.5rem 2.5rem 0.5rem 1rem;
+
+    -webkit-appearance: none;
+    -moz-appearance   : none;
+    appearance        : none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+// radio
+
+.toggle-input-radio-container{
+
+    display  : flex;
+    flex-wrap: wrap;
+    padding-bottom:0.4rem;
+    width:100%;
+    clear: both;
+    float: left;
+    .toggle-input-radio,.toggle-input-checkbox, .toggle-input-checkbox-inline{
+        background-color: $toggle-dark-grey;
+    }
+
+    .toggle-input-radio-button-img{
+        margin-left: 1rem;
+    }
+
+}
+
+.toggle-input-radio-group-container{
+
+    padding-bottom:0.4rem;
+    clear: both;
+    float: left;
+
+    .toggle-input-container{
+        padding-bottom:0;
+
+    }
+
+    .toggle-input-checkbox, .toggle-input-checkbox-inline{
+        background-color: $toggle-dark-grey;
+    }
+
+    .toggle-input-radio{
+        clear:both;
+        float: left;
+        margin-left:2.2rem;         
+    }
+
+}
+
+
+
+
+.toggle-input-radio, .toggle-input-checkbox, .toggle-input-checkbox-inline{
+    cursor          : pointer;
+    align-items     : center;
+    float           : left;
+    display         : inline-block;
+    padding         : 0 1rem;
+    background-color: $toggle-off-white;
+    border-radius   : 6px;
+    margin-right    : 1rem;
+    margin-bottom   : 1rem;
+    &:hover {
+        background-color: $toggle-off-white;
+    }
+    span {
+        float: left;
+        display: inline-block;
+    }
+    min-height: 2.8rem;;
+    box-sizing:border-box;
+    display: flex;
+    align-items: center;
+
+    div{
+        display  : flex;
+        align-items: center;
+    }
+  
+    
+    input[type="radio"], input[type="checkbox"]{
+        display: none;
+    }
+
+    &:hover > input + div {
+        .toggle-input-radio-check-element{
+            background: #D1D1D1;
+            border-radius: 25px;
+        }
+        .toggle-input-checkbox-check-element{
+            background: url('../assets/icons/checkbox_hover.svg') no-repeat;
+        }
+    }
+
+    > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
+        .toggle-input-radio-check-element {
+            background: url('../assets/icons/tick_circle.svg') no-repeat;
+        }
+    }
+
+    > input:checked + div{ /* (RADIO CHECKED) IMAGE STYLES */
+        .toggle-input-checkbox-check-element {
+            background: url('../assets/icons/checkbox_checked.svg') no-repeat;
+        }
+    }
+
+    
+
+    > input:disabled:checked + div{
+        .toggle-input-radio-check-element {
+            background: url('../assets/icons/tick_circle_grey.svg') no-repeat !important;
+        }
+
+    }
+
+    > input:disabled:checked + div{
+        .toggle-input-checkbox-check-element {
+            background: url('../assets/icons/checkbox_inactive.svg') no-repeat !important;
+        }
+
+    }
+
+}
+
+.toggle-input-is-disabled{
+    .toggle-input-radio, .toggle-input-checkbox, .toggle-input-checkbox-inline{
+        &:hover > input + div {
+            .toggle-input-radio-check-element{
+                background: url('../assets/icons/circle_blank.svg') no-repeat;
+            }
+        }
+    }
+    .toggle-input-radio-label, .toggle-input-checkbox-label{
+        opacity: 0.5;
+    }
+    .toggle-input-label, .toggle-input{
+        opacity: 0.5;
+    }
+}
+
+.toggle-input-radio-label, .toggle-input-checkbox-label{
+    display  : inline-block;
+    font-size: $toggle-font-size-large;
+    color    : $toggle-input-colour;
+    border-radius: 3px;
+    font-weight: bold;
+    padding: 0.3rem 0;
+    display: inline-block;
+    text-align: left;
+
+    &.active{
+        padding: 0.25rem 1rem;
+        text-align: center;
+        color: white;
+        background-color: $toggle-success-green;
+    }
+
+    &.inactive {
+        padding: 0.25rem 1rem;
+        text-align: center;
+        color: white;
+        background-color: $toggle-inactive-grey;
+    }
+}
+
+.toggle-input-radio-check-element, .toggle-input-checkbox-check-element {
+    background: url('../assets/icons/circle_blank.svg') no-repeat;
+    background-size: 100%;
+    margin: 0px 1rem 0 0;
+    vertical-align: text-top;
+    display: inline-block;
+    float: none;
+    height: 1.2rem;
+    min-width: 1.2rem;
+    float: left;
+}
+
+.toggle-input-checkbox-inline{
+    padding: 0;
+    min-height:0;
+    display: inline-block;
+    float: none;
+    margin:0;
+
+    .toggle-input-checkbox-check-element{
+        margin: 0;
+    }
+
+}
+
+.toggle-input-checkbox-check-element {
+    background: url('../assets/icons/checkbox_blank.svg') no-repeat; 
+}
+
+// image input
+
+
+$thumbnailWidth:80px;
+$iconWidth:20px;
+
+.toggle-helper-text {
+    font-size: 12px;
+}
+
+.toggle-dropzone-image-holder {
+    display:flex;
+    justify-content: left;
+    align-items: center;
+    width:100%;
+    .toggle-draggable-group {
+        min-height: 20px;
+        padding:0%;
+        span {
+            display: flex;
+            align-items: center;
+            .toggle-dark-grey {
+                border:7px solid inherit;
+            }
+            .toggle-draggable-group-item { 
+                position: relative; 
+                list-style: none;
+                margin:5px 10px 5px 0px;
+                .toggle-item-img {
+                    margin:2px;
+                    height:$thumbnailWidth;
+                    width:$thumbnailWidth;
+                    background-size: cover !important;
+                    background-position: center;
+                    border-radius:4px;
+                    cursor: move;
+                }
+                .toggle-item-img::after{
+                    position: absolute;
+                    content:'';
+                    height: 100%;
+                    width: 100%;
+                    background: url('../assets/icons/draggable.svg') no-repeat center center;
+                    background-size: $iconWidth;
+                }
+                .toggle-center {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+              
+            }
+            .toggle-button-container{
+                border:0px solid transparent!important;
+                .toggle-button{
+                    width:$iconWidth;
+                    height:$iconWidth;
+                }
+            }
+           
+
+            li:first-child div:first-child{
+                border:4px solid #189ED1;
+                margin:0px !important;
+            }
+        }
+    }
+
+  
+    
+}
+
+.toggle-dropzone-container{
+    margin:0px 5px 30px 0px;
+    margin-bottom:42px;
+    background: $toggle-dark-grey;
+    background-size: auto 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 4px;
+    display: block;
+    position:relative;
+    background: #F4F6F7 url('../assets/icons/upload.svg') no-repeat center center;
+    background-size: $iconWidth;
+
+    .toggle-fill-loader-container-background {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height:100%;
+        width:100%;
+        .toggle-fill-loader {
+            position:static;
+            margin:0px;
+            width:0.5vw;
+            height:0.5vw;
+        }
+    }
+  
+
+    .vue-dropzone {
+        border: 0;
+        border-radius: 4px;
+        padding: 0;
+        background: none transparent;
+        height: 100%;
+        position:relative;
+        &:after{
+            content: '';
+            top:0;
+            left:0;
+            height:100%;
+            width: 100%;
+            position:absolute;
+            z-index: 0;
+            opacity: 0.2;
+        }
+        &:hover{
+            &:after{
+                background-color: $toggle-light-blue;
+            }
+        }
+       
+    }
+
+    .dropzone{
+        min-height: 33px;
+        .dz-preview {
+            display:none !important;
+        }
+    }
+
+    .dropzone > .dz-message {
+        margin: 0;
+        display: block !important;
+        position:absolute;
+        left: 0;
+        height: 100%;
+        width:100%;
+        //padding: 10rem 0 0 0;
+        background-size: 2.61rem;
+        font-size: $toggle-font-size-small;
+        font-weight: bold;
+        color: #354B64;
+        z-index: 1;
+        span{
+            position: absolute;
+            bottom: 0;
+            width:100%;
+            left:0;
+        }
+    }
+
+    .dropzone > .dz-preview {
+        width: 40%;
+    }
+   
+}
+
+.toggle-dropzone-file-container {
+    height: 15vw;
+    width: 15vw;
+}
+
+//Colour picker
+
+.toggle-chrome-picker {
+    position: absolute;
+    z-index: 99;
+}
+
+
+.toggle-color-picker-current-color {
+    box-shadow: 0px 0px 1px $toggle-placeholder-grey;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-color: #000;
+    cursor: pointer;
+    float:left;
+    height: 2rem;
+    width: 2rem;   
+    border-radius: 0% 50% 50% 0%;
+}
+.toggle-input-colour-picker {
+    box-shadow: 0px 0px 1px $toggle-placeholder-grey;
+    height: 2rem;
+    width: 7rem;
+    float: left;
+    outline: 1px solid ;
+    outline-offset: -1px;
+    padding: 0 0 0 1rem;
+}
+
+
+// input crud buttons
+// 
+.toggle-input-crud-container{
+    padding:1rem 3.5rem 1rem 1rem;;
+    height:auto;
+    background: $toggle-white;
+    padding-left:2rem;
+    width: 100%;
+    position:relative;
+}
+
+.toggle-input-crud-container-empty{
+    opacity: 0.5;
+    padding-left:3.5rem;
+
+    cursor: pointer;
+    *{
+        cursor: pointer;
+    }
+
+    
+
+    .toggle-input-crud-container-description{
+        text-align: center;
+        width:100%;
+    }
+
+    .toggle-input-crud-container-label{
+        width: 100%;
+        padding:0;
+        text-align: center;
+        background: transparent;
+        border:none;
+        cursor: pointer;
+        outline: none;
+        &.toggle-input-crud-container-label-vertical-center{
+            position:relative;
+            top:0.5rem;
+        }
+    }
+}
+
+.toggle-input-crud-container-buttons{
+    .toggle-button-container{
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+    display: block;
+    right:0;
+    height:100%;
+    box-sizing:border-box;
+    padding:1rem 0;
+    top:0;
+    position: absolute;
+    width:2rem;
+}
+
+
+
+.toggle-input-crud-container-label{
+    @include toggle-global-font-config;
+    float:left;
+    font-size: $toggle-font-size-regular;
+    color: $toggle-header-colour;
+    font-weight: bold;
+}
+
+.toggle-input-crud-container-description{
+    @include toggle-global-font-config;
+    float:left;
+    clear: both;
+    font-size: $toggle-font-size-small;
+    color: $toggle-header-colour;
+}
+.toggle-input-protocol {
+    width: 100px;
+    float: left;
+    clear: left;
+    padding: 0.5rem 0 0.5rem 0;
+}
+
+.toggle-input-website {
+    width: 80%;
+    float: left;
+    padding: 1rem;
+    clear: right;
+}
+
+.toggle-input-file-background {
+    background-size: 5rem;
+    background-image : url('../assets/icons/file.svg');
+}
+
+.toggle-input-integration-container {
+    @include toggle-global-font-config;
+    display: grid;
+    align-items: center;
+    grid-template-columns: 4fr 4fr 1fr;
+    padding: 0.5rem 1.2rem;
+    background: $toggle-off-white;
+    border-radius: 9px;
+    border: 1px solid $toggle-off-white;
+    &:hover{
+        background: $toggle-white;
+    }
+
+    .toggle-input-is-invalid {
+        padding-bottom: 1rem !important;
+        .toggle-input-label-error{
+            z-index: 1;
+        }
+    }
+
+    .toggle-input-container,
+    .toggle-input {
+      background: $toggle-dark-grey;
+      padding-bottom: 0;
+      padding-top: 0;
+      border-radius: 9px;
+    }
+
+    p {
+        margin: 0;
+    };
+
+    .toggle-input-integration-unit {
+        grid-column-start: 1;
+    }
+    .toggle-input-integration-input-container {
+        grid-column-start: 2;
+    }
+
+    .toggle-input-integration-delete-button-container {
+        display: flex;
+        justify-self: flex-end;
+        grid-column-start: 3;
+    }
+
+}
+
+.toggle-country-wrapper {
+    display: inline-flex;
+    height:57px;
+    position: relative;
+
+
+    @mixin toggle-input-country-font-config {
+        color: black;
+        font-size: 12px;
+        line-height: 1.4;
+        -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;
+        border-bottom-right-radius: 4px;
+    }
+
+    input, select, .toggle-selected-wraper{
+        @include toggle-input-country-font-config;
+    }
+
+    .toggle-country-selector {
+        position: relative;
+        display: inline-block;
+        width: 130px;
+        margin: 5px 0px;
+        @include toggle-input-border-country-left;
+    
+        select{
+            position: relative;
+            opacity: 0;
+            width: 100% !important;
+            z-index: 2;
+            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  {
+        position: absolute;
+        bottom:-17px;
+    }
+
+    .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;
+    }
+
+}
+
+
+
+