toggle-components-library 1.37.0-beta.10 → 1.37.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.37.0-beta.10",
+    "version": "1.37.0-beta.11",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/forms/ToggleInputRadioButtonMini.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="toggle-input-radio-button-mini-switch-wrapper">
         <label :class="['toggle-input-radio-button-mini-switch', {'toggle-input-radio-button-mini-switch-disabled': disabled}]">
             <input type="checkbox" :value="value" v-model="value" :disabled="disabled">
             <span :class="['toggle-input-radio-button-mini-slider', {'toggle-input-radio-button-mini-slider-disabled': disabled}]">

package/src/sass/includes/_as_inputs.scss

@@ -1221,80 +1221,84 @@ $iconWidth:20px;
 }
 
 // Radio button mini
-
-.toggle-input-radio-button-mini-switch {
-    position: relative;
-    display: inline-block;
-    width: 52px;
-    height: 28px;
-  }
-  
-  .toggle-input-radio-button-mini-switch input { 
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  .toggle-input-radio-button-mini-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
+.toggle-input-radio-button-mini-switch-wrapper{
     display: flex;
     align-items: center;
-    border-radius: 34px;
-  }
-  
-  .toggle-input-radio-button-mini-slider:before {
-    position: absolute;
-    content: "";
-    height: 22px;
-    width: 22px;
-    left: 4px;
-    bottom: 3px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-    border-radius: 50%;
-  }
-  
-  input:checked + .toggle-input-radio-button-mini-slider {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .toggle-input-radio-button-mini-slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .toggle-input-radio-button-mini-slider:before {
-    -webkit-transform: translateX(22px);
-    -ms-transform: translateX(22px);
-    transform: translateX(22px);
-  }
-
-  .toggle-input-radio-button-mini-text-on {
-    font-family: $toggle-font-family;
-    font-size: 12px;
-    color: #ffffff;
-    margin-left: 7px;
-  }
-  .toggle-input-radio-button-mini-text-off {
-    font-family: $toggle-font-family;
-    font-size: 12px;
-    color: #3A4A62;
-    margin-left: 6px;
-  }
-.toggle-input-radio-button-mini-switch-disabled {
-    cursor: default !important;
-    opacity: 0.5;
-}
 
-.toggle-input-radio-button-mini-slider-disabled {
-    cursor: default !important;
-    opacity: 0.5;
+    .toggle-input-radio-button-mini-switch {
+        position: relative;
+        display: inline-block;
+        width: 52px;
+        height: 28px;
+    }
+
+    .toggle-input-radio-button-mini-switch input { 
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .toggle-input-radio-button-mini-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+        display: flex;
+        align-items: center;
+        border-radius: 34px;
+    }
+
+    .toggle-input-radio-button-mini-slider:before {
+        position: absolute;
+        content: "";
+        height: 22px;
+        width: 22px;
+        left: 4px;
+        bottom: 3px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .toggle-input-radio-button-mini-slider {
+        background-color: #2196F3;
+    }
+
+    input:focus + .toggle-input-radio-button-mini-slider {
+        box-shadow: 0 0 1px #2196F3;
+    }
+
+    input:checked + .toggle-input-radio-button-mini-slider:before {
+        -webkit-transform: translateX(22px);
+        -ms-transform: translateX(22px);
+        transform: translateX(22px);
+    }
+
+    .toggle-input-radio-button-mini-text-on {
+        font-family: $toggle-font-family;
+        font-size: 12px;
+        color: #ffffff;
+        margin-left: 7px;
+    }
+    .toggle-input-radio-button-mini-text-off {
+        font-family: $toggle-font-family;
+        font-size: 12px;
+        color: #3A4A62;
+        margin-left: 6px;
+    }
+    .toggle-input-radio-button-mini-switch-disabled {
+        cursor: default !important;
+        opacity: 0.5;
+    }
+
+    .toggle-input-radio-button-mini-slider-disabled {
+        cursor: default !important;
+        opacity: 0.5;
+    }
 }