Merge pull request #311 from Jacrys/fix-disabled-behaviour

Fix: Standardize Disabled behaviour for several components
lusaxweb · Oct 18, 2018 · d728958 · d728958
2 parents 0ed12fa + 606f21b
commit d728958
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 16 deletions.
diff --git a/docs/components/dropDown.md b/docs/components/dropDown.md
@@ -464,9 +464,9 @@ export default {
 
 <box>
 
-## Buttom
+## Button
 
-You can customize the component or element that initialize the dropdown in this case is a Buttom that is the most common
+You can customize the component or element that initialize the dropdown in this case, it is a Button that is the most common
 
 :::tip
   The component or element that initializes the dropdown is the one inside it with the possibility of total customization and flexibility in the required use
@@ -484,7 +484,7 @@ You can customize the component or element that initialize the dropdown in this
 
 <vuecode md>
 <div slot="demo">
-  <Demos-DropDown-Buttom />
+  <Demos-DropDown-Button />
 </div>
 <div slot="code">
 
@@ -591,7 +591,7 @@ export default {
   align-items: center;
   justify-content: center;
   button
-    margin: 0px !important
+    margin: 0px !important;
     &.btnx
       margin-left: 10px !important;
       border-radius: 5px 0px 0px 5px;

diff --git a/src/components/vsCheckBox/main.styl b/src/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

diff --git a/src/components/vsCollapse/main.styl b/src/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

diff --git a/src/components/vsDropDown/main.styl b/src/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;

diff --git a/src/components/vsInput/main.styl b/src/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

diff --git a/src/components/vsInputNumber/main.styl b/src/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

diff --git a/src/components/vsInputNumber/vsInputNumber.vue b/src/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">

diff --git a/src/components/vsPagination/main.styl b/src/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

diff --git a/src/components/vsSelect/main.styl b/src/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);

diff --git a/src/components/vsSwitch/main.styl b/src/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;

diff --git a/src/components/vsUpload/main.styl b/src/components/vsUpload/main.styl
@@ -15,9 +15,9 @@
   &:hover
     border: 1px dashed alpha($vs-colors[primary],.5)
   &.disabled-upload
-    opacity .5
+    opacity: $vs-disabled-opacity
     pointer-events: none
-    user-select none
+    user-select: none
   input
     position: absolute
     width: 100%;