renusify 1.0.5 → 1.0.8

package/components/form/checkbox.vue

@@ -16,141 +16,135 @@
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-                <span class="ms-2 color-primary-text" @click="emit">
+        <span class="ms-2 color-primary-text" @click="emit">
                 <span class="color-error-text" v-if="isRequired">*</span>
-                {{label}}
+                {{ label }}
             </span>
-            </div>
-        </template>
-    </r-input>
+      </div>
+    </template>
+  </r-input>
 </template>
 <script>
-    export default {
-        name: 'r-checkbox',
-        props: {
-          label: String,
-          readonly: Boolean,
-          rounded: Boolean,
-          modelValue: Boolean,
-          size: {
-            type: String,
-            default: 'default',
-            validator: function (value) {
-              return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
-            }
-          },
-        },
-
-        data() {
-            return {
-                lazyValue: this.modelValue
-            }
-        },
-        watch: {
-            modelValue() {
-                this.lazyValue = this.modelValue
-            }
-        },
-        methods: {
-            emit() {
-                if (this.readonly) {
-                    return
-                }
-
-              this.lazyValue = (!this.lazyValue) ? !this.lazyValue : false
-              this.$emit('update:modelValue', this.lazyValue)
-            }
-        }
+export default {
+  name: 'r-checkbox',
+  props: {
+    label: String,
+    readonly: Boolean,
+    rounded: Boolean,
+    modelValue: Boolean,
+    size: {
+      type: String,
+      default: 'default',
+      validator: function (value) {
+        return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
+      }
+    },
+  },
+
+  data() {
+    return {
+      lazyValue: this.modelValue
+    }
+  },
+  watch: {
+    modelValue() {
+      this.lazyValue = this.modelValue
     }
+  },
+  methods: {
+    emit() {
+      if (this.readonly) {
+        return
+      }
+
+      this.lazyValue = (!this.lazyValue) ? !this.lazyValue : false
+      this.$emit('update:modelValue', this.lazyValue)
+    }
+  }
+}
 
 </script>
 <style lang="scss">
-    @import "../../style/include";
-
-    .#{$prefix}checkbox {
-        width: 100%;
-        cursor: pointer;
-        @include light() {
-            .checkbox-input {
-              border: 1px solid var(--color-border-light)
-            }
-        }
-      @include dark() {
-        .checkbox-input {
-          border: 1px solid var(--color-border-dark)
-        }
+@import "../../style/include";
+
+.#{$prefix}checkbox {
+  width: 100%;
+  cursor: pointer;
+
+  .checkbox-input {
+    border: 1px solid var(--color-border)
+  }
+
+  .#{$prefix}icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .checkbox-input {
+    text-align: center;
+    border-radius: 4px;
+    transition: .3s all ease-in-out;
+
+    &.x-small {
+      width: 17px;
+      height: 17px;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    &.small {
+      width: 20px;
+      height: 20px;
+
+      svg {
+        width: 15px;
+        height: 15px;
       }
+    }
+
+    &.default {
+      width: 22px;
+      height: 22px;
 
-      .#{$prefix}icon {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      svg {
+        width: 17px;
+        height: 17px;
       }
+    }
+
+    &.large {
+      width: 25px;
+      height: 25px;
 
-      .checkbox-input {
-        text-align: center;
-        border-radius: 4px;
-        transition: .3s all ease-in-out;
-
-        &.x-small {
-          width: 17px;
-          height: 17px;
-
-          svg {
-            width: 12px;
-            height: 12px;
-          }
-        }
-
-        &.small {
-          width: 20px;
-          height: 20px;
-
-          svg {
-            width: 15px;
-            height: 15px;
-          }
-        }
-
-        &.default {
-          width: 22px;
-          height: 22px;
-
-          svg {
-            width: 17px;
-            height: 17px;
-          }
-        }
-
-        &.large {
-          width: 25px;
-          height: 25px;
-
-          svg {
-            width: 20px;
-            height: 20px;
-          }
-        }
-
-        &.x-large {
-          width: 30px;
-          height: 30px;
-
-          svg {
-            width: 25px;
-            height: 25px;
-          }
-        }
+      svg {
+        width: 20px;
+        height: 20px;
       }
+    }
 
-        &.checkbox-readonly {
-            pointer-events: none;
-        }
+    &.x-large {
+      width: 30px;
+      height: 30px;
 
-        .checkbox-select {
-            background-color: currentColor;
-        }
+      svg {
+        width: 25px;
+        height: 25px;
+      }
     }
+  }
+
+  &.checkbox-readonly {
+    pointer-events: none;
+  }
+
+  .checkbox-select {
+    background-color: currentColor;
+  }
+}
 </style>

package/components/form/colorPicker/picker.vue

@@ -168,13 +168,8 @@ export default {
   border-radius: 4px;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
-  @include light() {
-    background: #f7f8f9;
-  }
 
-  @include dark() {
-    background: #1d2024;
-  }
+  background: #f7f8f9;
 
   canvas {
     vertical-align: top;
@@ -214,25 +209,15 @@ export default {
       direction: ltr;
     }
 
-    @include light() {
-      .name {
-        color: #999;
-        background: #e7e8e9;
-      }
-      .value {
-        color: #666;
-        background: #eceef0;
-      }
+
+    .name {
+      color: #999;
+      background: #e7e8e9;
     }
-    @include dark() {
-      .name {
-        color: #999;
-        background: #252930;
-      }
-      .value {
-        color: #fff;
-        background: #2e333a;
-      }
+
+    .value {
+      color: #666;
+      background: #eceef0;
     }
   }
 }

package/components/form/datePicker/index.vue

@@ -376,53 +376,20 @@ export default {
         font-size: 10px;
         color: #303030;
 
-        @include dark {
-            $Color: var(--color-one-dark);
             .cell {
                 &.today {
-                    color: $Color;
+                  color: var(--color-one);
 
-                    .cellContent {
-                        border: solid 1px $Color;
-                    }
+                  .cellContent {
+                    border: solid 1px var(--color-one);
+                  }
                 }
 
                 &.selected {
-                    .cellContent {
-                        color: #fff;
-                        background: $Color;
-
-                    }
-                }
-
-                &.selectable:hover {
                     .cellContent {
 
-                        color: #fff;
-                        background: $Color;
-
-                    }
-                }
-
-            }
-        }
-
-        @include light {
-            $Color: var(--color-one-light);
-            .cell {
-                &.today {
-                    color: $Color;
-
-                    .cellContent {
-                        border: solid 1px $Color;
-                    }
-                }
-
-                &.selected {
-                    .cellContent {
-
-                        color: #fff;
-                        background: $Color;
+                      color: #fff;
+                      background: var(--color-one);
 
                     }
                 }
@@ -430,14 +397,14 @@ export default {
                 &.selectable:hover {
                     .cellContent {
 
-                        color: #fff;
-                        background: $Color;
+                      color: #fff;
+                      background: var(--color-one);
 
                     }
                 }
 
             }
-        }
+
 
         .table {