'deploy'

Author: luisDanielRoviraContreras

dist/components/vsCheckBox/main.styl

@@ -22,6 +22,16 @@
     z-index: 200;
     cursor: pointer;
     background: rgb(85, 215, 117);
+    &:disabled
+      cursor: default;
+      pointer-events: none;
+      & + span.checkbox_x
+        opacity $vs-disabled-opacity;
+        cursor: default;
+        pointer-events: none;
+        span._check
+          cursor: default;
+          pointer-events: none;
     &:active:checked
       & + span.checkbox_x
         span._check

dist/components/vsCollapse/main.styl

@@ -9,8 +9,10 @@
     border-bottom: 1px solid rgba(0,0,0,.04)
     transition: all .25s ease
     &.disabledx
-      opacity .5
-      pointer-events: none
+      opacity: $vs-disabled-opacity;
+      cursor: default;
+      pointer-events: none;
+      z-index: 999;
     header
       display: block
       padding: 10px

dist/components/vsDropDown/main.styl

@@ -117,7 +117,8 @@
       user-select: none;
       pointer-events: none !important;
       cursor: default;
-      opacity: .3 !important;
+      opacity: $vs-disabled-opacity !important;
+      color: rgba(0,0,0,$vs-disabled-opacity) !important;
   &.vsDivider
     border-top: 1px solid rgba(0, 0, 0, 0.08)
     margin-top: 5px;

dist/components/vsDropDown/vsDropDownGroup.vue

@@ -12,7 +12,7 @@
       v-if="vsCollapse"
       translate="no"
       class="material-icons icon-group notranslate">
-      keyboard_arrow_right
+      {{ vsIcon }}
     </i>
     <transition
       @before-enter="beforeEnter"
@@ -43,6 +43,10 @@ export default {
     vsCollapse:{
       default:false,
       type:Boolean
+    },
+    vsIcon: {
+      default: 'keyboard_arrow_right',
+      type:String
     }
   },
   data:()=>({

dist/components/vsInput/main.styl

@@ -65,6 +65,14 @@
         + .input-span-placeholder
           padding-left: .4rem;
           padding-right: 28px
+      &:disabled
+        opacity: $vs-disabled-opacity;
+        cursor: default;
+        pointer-events: none;
+        + .input-span-placeholder
+          opacity: $vs-disabled-opacity;
+          cursor: default;
+          pointer-events: none;
     .input-span-placeholder
       transition: all .2s ease
       position: absolute

dist/components/vsInputNumber/main.styl

@@ -43,7 +43,9 @@
     color: rgba(255,255,255,1)
     backface-visibility hidden
     &:disabled
-      opacity: .5 !important
+      opacity: $vs-disabled-opacity;
+      cursor: default;
+      pointer-events: none;
     i
       font-size: .9rem
 
@@ -52,10 +54,30 @@
       transform translate(10px)
       &:active
         transform scale(.9) translate(10px) !important
+      &:disabled
+        opacity: $vs-disabled-opacity;
+        cursor: default;
+        pointer-events: none;
+        background-color: rgba(0,0,0,$vs-disabled-opacity) !important;
+    &.btn-plus.limit
+        opacity: $vs-disabled-opacity;
+        cursor: default;
+        pointer-events: none;
+        background-color: rgba(0,0,0,$vs-disabled-opacity) !important;
     &.btn-less
       transform translate(-10px)
       &:active
         transform scale(.9) translate(-10px) !important
+      &:disabled
+        opacity: $vs-disabled-opacity;
+        cursor: default;
+        pointer-events: none;
+        background-color: rgba(0,0,0,$vs-disabled-opacity) !important;
+    &.btn-less.limit
+        opacity: $vs-disabled-opacity;
+        cursor: default;
+        pointer-events: none;
+        background-color: rgba(0,0,0,$vs-disabled-opacity) !important;
 
   &.vs-input-number-size-medium
     input

dist/components/vsInputNumber/vsInputNumber.vue

@@ -9,9 +9,11 @@
     <button
       v-repeat-click="less"
       :disabled="$attrs.disabled"
+      :class="{
+        limit:value <= min
+      }"
       :style="{
-        background:getColor,
-        opacity:(value == min?.5:1)
+        background:getColor
       }"
       class="btn-less"
       type="button">
@@ -33,9 +35,11 @@
     <button
       v-repeat-click="plus"
       :disabled="$attrs.disabled"
+      :class="{
+        limit:value >= max && max !== null
+      }"
       :style="{
-        background:getColor,
-        opacity:value == max?.5:1
+        background:getColor
       }"
       class="btn-plus"
       type="button">

dist/components/vsPagination/main.styl

@@ -85,8 +85,9 @@
     &.btn-next-pagination
       margin-left: 5px
     &.btn-pagination.disabled
-      color: rgba(0,0,0,.1)
+      color: rgba(0,0,0,$vs-disabled-opacity)
       cursor: default
+      pointer-events: none
     &.btn-pagination.disabled:hover
       background: rgb(240,240,240) !important
     i

dist/components/vsSelect/main.styl

@@ -51,6 +51,10 @@
     padding-left 5px;
     font-size: .85rem
     color $vs-label-color
+  &:disabled
+    opacity $vs-disabled-opacity
+    cursor: default
+    pointer-events: none
 .con-text-validation
   position: relative
   font-size: .65rem
@@ -135,6 +139,8 @@ for colorx, i in $vs-colors
   text-transform: capitalize;
   &.disabledx
     opacity: $vs-disabled-opacity;
+    cursor: default
+    pointer-events: none
   span.searchx
     background: rgba(0, 0, 0, 0.07);
     border-bottom: 1px solid rgba(0, 0, 0, 0.3);

dist/components/vsSwitch/main.styl

@@ -49,7 +49,9 @@
       opacity: 1
       transform: translate(0px);
   &:disabled
-    opacity: .5;
+    opacity $vs-disabled-opacity
+    cursor: default
+    pointer-events: none
   .vs-circle-switch
     display: block;
     width: 18px;