feat: VUE-9 Use style variables in CSS root

Keiwen · Jan 10, 2025 · d28794a · d28794a
1 parent 2c3923e
commit d28794a
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -155,8 +155,24 @@ Checkbox is replaced by 2 switching labels, for on and off states
 As a classic simple checkbox, model bound to check state: true or false
 
 ## Override style
-### Color usecase
-You can define your own check color by adding a specific style
+### Base variable override usecase
+You can override base CSS variable used, like colors or icons.
+After importing this library style, override CSS variable in root.
+For example, the following CSS will:
+- use star icons instead of checkmarks for checkboxes
+- set primary color to fuchsia and primary borders to rosybrown
+```
+:root {
+  --enhanced-check-icon-checkbox: '\2606';
+  --enhanced-check-color-primary: fuchsia;
+  --enhanced-check-color-dark-primary: rosybrown;
+}
+```
+Refer to `src/styles/variables.css` for the full list of variable used
+in this library that you can override.
+
+### New style usecase
+You can also define your own check class by adding specific style
 
 For example, let's define a 'custom' sub class.
 ```
@@ -195,25 +211,6 @@ Full less sample:
   }
 }
 ```
-Of course, you can replace class `.enhancedCheck-custom` by `.enhancedCheck-primary`
-in previous example to just override primary color,
-instead of create a custom class.
-
-### Icon usecase
-You can also override icon used.
-For example, the following CSS will use start icons instead of checkmarks
-```
-.enhancedCheck {
-  input[type="checkbox"] {
-    &:not(:checked) + label:hover:before {
-      content: '\2606';
-    }
-    &:checked + label:before {
-      content: '\2606';
-    }
-  }
-}
-```
 
 ## Contribution
 This library is managed with vue-CLI

diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -1,4 +1,4 @@
-@use './variables.scss' as *;
+@use './variables';
 @use './mixins.scss' as *;
 
 .enhancedCheck-inline {
@@ -16,16 +16,16 @@
     margin-right: 5px;
   }
   label {
-    @include labelBorderRadius($radiusDefault 0 0 $radiusDefault);
+    @include labelBorderRadius(var(--enhanced-check-radius-default) 0 0 var(--enhanced-check-radius-default));
   }
   input[type="radio"], input[type="checkbox"] {
     display: none;
     & + label {
-      @include colorLabel($colorDefault, $colorLdefault);
-      border: 1px solid $colorDefault;
+      @include colorLabel(var(--enhanced-check-color-default), var(--enhanced-check-color-light-default));
+      border: 1px solid var(--enhanced-check-color-default);
       color: inherit;
       position: relative;
-      padding: $paddingVertical $paddingHorizontal $paddingVertical ($iconWidth + $paddingHorizontal);
+      padding: var(--enhanced-check-padding-vertical) var(--enhanced-check-padding-horizontal) var(--enhanced-check-padding-vertical) calc(var(--enhanced-check-icon-width) + var(--enhanced-check-padding-horizontal));
       cursor: pointer;
       display: inline-block;
       &:before {
@@ -35,8 +35,8 @@
         bottom: 0;
         left: 0;
         content: '';
-        width: $iconWidth;
-        background: $colorLdefault;
+        width: var(--enhanced-check-icon-width);
+        background: var(--enhanced-check-color-light-default);
         text-align: center;
         line-height: 200%;
       }
@@ -48,9 +48,9 @@
     &:not(:checked) {
       & + label {
         &:hover {
-          color: $colorDdefault;
+          color: var(--enhanced-check-color-dark-default);
           &:before {
-            color: $colorDefault;
+            color: var(--enhanced-check-color-default);
           }
         }
       }
@@ -60,66 +60,66 @@
   }
   input[type="checkbox"] {
     &:not(:checked) + label:hover:before {
-      content: $iconCheckbox;
+      content: var(--enhanced-check-icon-checkbox);
     }
     &:checked + label:before {
-      content: $iconCheckbox;
+      content: var(--enhanced-check-icon-checkbox);
     }
   }
   input[type="radio"] {
     &:not(:checked) + label:hover:before {
-      content: $iconRadio;
+      content: var(--enhanced-check-icon-radio);
     }
     &:checked + label:before {
-      content: $iconRadio;
+      content: var(--enhanced-check-icon-radio);
     }
   }
   &.enhancedCheck-combine {
     input[type="checkbox"] {
       &:not(:checked) + label:hover:before {
-        content: $iconCombine;
+        content: var(--enhanced-check-icon-combine);
       }
       &:checked + label:before {
-        content: $iconCombine;
+        content: var(--enhanced-check-icon-combine);
       }
     }
   }
 
   &.enhancedCheck-primary {
     input[type="radio"], input[type="checkbox"] {
-      @include colorLabel($colorPrimary, $colorDprimary);
+      @include colorLabel(var(--enhanced-check-color-primary), var(--enhanced-check-color-dark-primary));
     }
   }
   &.enhancedCheck-success {
     input[type="radio"], input[type="checkbox"] {
-      @include colorLabel($colorSuccess, $colorDsuccess);
+      @include colorLabel(var(--enhanced-check-color-success), var(--enhanced-check-color-dark-success));
     }
   }
   &.enhancedCheck-warning {
     input[type="radio"], input[type="checkbox"] {
-      @include colorLabel($colorWarning, $colorDwarning);
+      @include colorLabel(var(--enhanced-check-color-warning), var(--enhanced-check-color-dark-warning));
     }
   }
   &.enhancedCheck-danger {
     input[type="radio"], input[type="checkbox"] {
-      @include colorLabel($colorDanger, $colorDdanger);
+      @include colorLabel(var(--enhanced-check-color-danger), var(--enhanced-check-color-dark-danger));
     }
   }
 
   &.enhancedCheck-animate {
     label {
-      transition: color $transitionTime ease;
-      -webkit-transition: color $transitionTime ease;
+      transition: color var(--enhanced-check-transition-time) ease;
+      -webkit-transition: color var(--enhanced-check-transition-time) ease;
       &:before {
-        transition: background-color $transitionTime ease;
-        -webkit-transition: background-color $transitionTime ease;
+        transition: background-color var(--enhanced-check-transition-time) ease;
+        -webkit-transition: background-color var(--enhanced-check-transition-time) ease;
       }
     }
   }
 
   &.enhancedCheck-rounded {
     label {
-      @include labelBorderRadius($radiusRound);
+      @include labelBorderRadius(var(--enhanced-check-radius-round));
     }
   }
 
@@ -133,14 +133,14 @@
   user-select: none;
   cursor: pointer;
   height: 2em;
-  @include colorToggle($colorDefault, $colorDdefault);
-  border: 1px solid $colorBorder;
-  border-radius: $radiusDefault;
+  @include colorToggle(var(--enhanced-check-color-default), var(--enhanced-check-color-dark-default));
+  border: 1px solid var(--enhanced-check-color-border);
+  border-radius: var(--enhanced-check-radius-default);
   margin-top: 5px;
   margin-bottom: 5px;
 
   &.enhancedCheck-rounded {
-    border-radius: $radiusRound;
+    border-radius: var(--enhanced-check-radius-round);
   }
 
   label {
@@ -149,8 +149,8 @@
     bottom: 0;
     left: -100%;
     width: 200%;
-    transition: left $transitionTimeToggle;
-    -webkit-transition: left $transitionTimeToggle;
+    transition: left var(--enhanced-check-transition-time-toggle);
+    -webkit-transition: left var(--enhanced-check-transition-time-toggle);
   }
 
   &.enhancedCheck-checked label {
@@ -162,38 +162,38 @@
   }
 
   &.enhancedCheck-primary {
-    @include colorToggle($colorPrimary, $colorDprimary);
+    @include colorToggle(var(--enhanced-check-color-primary), var(--enhanced-check-color-dark-primary));
   }
   &.enhancedCheck-success {
-    @include colorToggle($colorSuccess, $colorDsuccess);
+    @include colorToggle(var(--enhanced-check-color-success), var(--enhanced-check-color-dark-success));
   }
   &.enhancedCheck-warning {
-    @include colorToggle($colorWarning, $colorDwarning);
+    @include colorToggle(var(--enhanced-check-color-warning), var(--enhanced-check-color-dark-warning));
   }
   &.enhancedCheck-danger {
-    @include colorToggle($colorDanger, $colorDdanger);
+    @include colorToggle(var(--enhanced-check-color-danger), var(--enhanced-check-color-dark-danger));
   }
 
   .enhancedToggle-label {
-    padding: $paddingVertical $paddingHorizontal;
-    transition: background $transitionTimeToggle;
-    -webkit-transition: background $transitionTimeToggle;
+    padding: var(--enhanced-check-padding-vertical) var(--enhanced-check-padding-horizontal);
+    transition: background var(--enhanced-check-transition-time-toggle);
+    -webkit-transition: background var(--enhanced-check-transition-time-toggle);
 
     position: absolute;
     top: 0;
     bottom: 0;
-    border-radius: $radiusDefault;
+    border-radius: var(--enhanced-check-radius-default);
     color: inherit;
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     text-align: center;
 
     &.labelOn {
       left: 0;
-      padding-right: $paddingHorizontal + 30px;
+      padding-right: calc(var(--enhanced-check-padding-horizontal) + 30px);
     }
     &.labelOff {
       right: 0;
-      padding-left: $paddingHorizontal + 30px;
+      padding-left: calc(var(--enhanced-check-padding-horizontal) + 30px);
     }
   }
 
@@ -202,16 +202,16 @@
     top: 0;
     bottom: 0;
     left: 50px;
-    border: 1px solid $colorBorder;
-    border-radius: $radiusDefault;
+    border: 1px solid var(--enhanced-check-color-border);
+    border-radius: var(--enhanced-check-radius-default);
     width: 20px;
     z-index: 20;
     background: white;
   }
 
   &.enhancedCheck-rounded {
     .enhancedToggle-label,.enhancedToggle-switch {
-      border-radius: $radiusRound;
+      border-radius: var(--enhanced-check-radius-round);
     }
   }
 

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -0,0 +1,25 @@
+:root {
+  --enhanced-check-color-border: #51626f;
+  --enhanced-check-color-default: #aaaaaa;
+  --enhanced-check-color-light-default: #dddddd;
+  --enhanced-check-color-dark-default: #777777;
+  --enhanced-check-color-primary: #337ab7;
+  --enhanced-check-color-dark-primary: rgba(51,122,183,0.5);
+  --enhanced-check-color-success: #5cb85c;
+  --enhanced-check-color-dark-success: rgba(92,184,92,0.5);
+  --enhanced-check-color-danger: #d9534f;
+  --enhanced-check-color-dark-danger: rgba(217,83,79,0.5);
+  --enhanced-check-color-warning: #f0ad4e;
+  --enhanced-check-color-dark-warning: rgba(240,173,78,0.5);
+  --enhanced-check-radius-default: 3px;
+  --enhanced-check-radius-round: 25px;
+  --enhanced-check-icon-width: 30px;
+  --enhanced-check-padding-vertical: 5px;
+  --enhanced-check-padding-horizontal: 5px;
+  --enhanced-check-padding-horizontal-toggle: 10px;
+  --enhanced-check-icon-checkbox: '\2714';
+  --enhanced-check-icon-combine: '\271A';
+  --enhanced-check-icon-radio: '\2B24';
+  --enhanced-check-transition-time: 1s;
+  --enhanced-check-transition-time-toggle: 0.5s;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss