renusify 1.0.6 → 1.0.8

package/style/app.scss

@@ -41,8 +41,8 @@ body {
   background: rgba(100, 100, 100, 0.6);
 }
 
-$color: var(--color-two-light);
-$color-text: var(--color-two-text-light);
+$color: var(--color-two);
+$color-text: var(--color-two-text);
 
 ::-moz-selection {
   color: $color-text;
@@ -54,33 +54,6 @@ $color-text: var(--color-two-text-light);
   background: $color;
 }
 
-.app-dark {
-  ::-webkit-scrollbar-track:hover {
-    border: 1px solid rgba(255, 255, 255, 0.4);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.4);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.8);
-  }
-
-  $color: var(--color-two-dark);
-  $color-text: var(--color-two-text-dark);
-
-  ::-moz-selection {
-    color: $color-text;
-    background: $color;
-  }
-
-  ::selection {
-    color: $color-text;
-    background: $color;
-  }
-}
-
 .#{$prefix}app {
   font-family: $body-font-family;
   line-height: $line-height-root;
@@ -109,12 +82,7 @@ $color-text: var(--color-two-text-light);
 }
 
 .router-link-exact-active {
-  @include dark() {
-    color: var(--color-link-dark);
-  }
-  @include light() {
-    color: var(--color-link-light)
-  }
+  color: var(--color-link)
 }
 
 //curser
@@ -214,13 +182,7 @@ $color-text: var(--color-two-text-light);
 }
 
 .subtitle-1, .subtitle-2, .body-2, .caption, .overline {
-  @include light() {
-    @include text-color(var(--color-text-secondary-light));
-  }
-
-  @include dark() {
-    @include text-color(var(--color-text-secondary-dark));
-  }
+  @include text-color(var(--color-text-secondary));
 }
 
 //width
@@ -292,18 +254,9 @@ $color-text: var(--color-two-text-light);
     margin: 0 15px;
   }
 
-  @include light() {
-    $color: var(--color-one-light);
     pre {
-      border-left: 5px solid $color;
+      border-left: 5px solid var(--color-one);
     }
-  }
-  @include dark() {
-    $color: var(--color-one-dark);
-    pre {
-      border-left: 5px solid $color;
-    }
-  }
 
   pre {
     direction: ltr;
@@ -333,36 +286,19 @@ $color-text: var(--color-two-text-light);
     color: white;
   }
 
-  @include light() {
     $background: #e2ece2;
     blockquote {
       background-color: $background;
-      border: 5px solid var(--color-one-light);
-
-      &::before {
-        background-color: $background;
-      }
-
-      &::after {
-        color: var(--color-one-light);
-      }
-    }
-  }
-  @include dark() {
-    $background: #3a3e3a;
-    blockquote {
-      background-color: $background;
-      border: 5px solid var(--color-one-dark);
+      border: 5px solid var(--color-one);
 
       &::before {
         background-color: $background;
       }
 
       &::after {
-        color: var(--color-one-dark);
+        color: var(--color-one);
       }
     }
-  }
 
   blockquote {
     font-family: Georgia, Times, "Times New Roman", serif;

package/style/colors.scss

@@ -1,42 +1,37 @@
 @import "./_include";
 
 $colorsList: (
-        'one': ( l: #00acc1, d: #028595 ),
-          'one_l': ( l: #5ddef4, d: #03a7c2 ),
-          'one_d': ( l: #007c91, d: #015866 ),
-          'two': ( l: #e8098f, d: #b80671 ),
-        'three':('l':#43cea2, 'd':#06553c),
-        'error':('l':#D50000, 'd':#9e0404),
-        'info':('l':#0878f6, 'd':#0a50a1),
-        'warning':('l':#fbc02d, 'd':#d29806),
-        'success':('l':#04c40d, 'd':#049e0b),
-        'link':('l':#4f98ec, 'd':#3773b8),
-        'background-one':('l':#fafafa, 'd':#303030),
-        'background-two':('l':#e0e0e0, 'd':#505050),
-        'divider':('l':rgba(#444, 0.2), 'd':rgba(#fff, 0.2)),
-        'text-primary':('l':#515151, 'd':#fff),
-        'text-secondary':('l':#888, 'd':#ddd),
-        'text-disabled':('l':rgba(#000, 0.26), 'd':rgba(#fff, 0.3)),
-        'disabled':('l':rgba(#000, 0.26), 'd':rgba(#fff, 0.3)),
-        'focused':('l':rgba(#000, 0.12), 'd':rgba(#fff, 0.12)),
-        'pressed':('l':rgba(#999, 0.4), 'd':rgba(#ccc, 0.25)),
-        'border': ('l':rgba(#000, 0.24), 'd':rgba(#fff, 0.3)),
-        'border-hover': ('l':rgba(#000, 0.86), 'd':rgba(#fff, 0.86)),
-        'cards': ('l':#fff, 'd':#424242),
-        'chips': ('l':#e0e0e0, 'd':#555),
-        'table-active': ('l':#f5f5f5, 'd':#505050),
-        'table-hover': ('l':#eeeeee, 'd':#616161),
-        'overlay': ('l':rgba(225, 225, 225, 0.5), 'd':rgba(80, 80, 80, 0.5)),
+        'one': #00acc1,
+        'one_l': #5ddef4,
+        'one_d': #007c91,
+        'two': #e8098f,
+        'error':#D50000,
+        'info':#0878f6,
+        'warning':#fbc02d,
+        'success':#04c40d,
+        'link':#4f98ec,
+        'background-one':#fafafa,
+        'background-two':#e0e0e0,
+        'divider':rgba(#444, 0.2),
+        'text-primary':#515151,
+        'text-secondary':#888,
+        'text-disabled':rgba(#000, 0.26),
+        'disabled':rgba(#000, 0.26),
+        'focused':rgba(#000, 0.12),
+        'pressed':rgba(#999, 0.4),
+        'border': rgba(#000, 0.24),
+        'sheet': #fff,
+        'table-active': #f5f5f5,
+        'table-hover': #eeeeee,
+        'overlay': rgba(225, 225, 225, 0.5)
 ) !default;
 
 :root {
   @each $color_name, $color_value in $colorsList {
-    --color-#{$color_name}-light: #{map_get($color_value, 'l')};
-    --color-#{$color_name}-dark: #{map_get($color_value, 'd')}
+    --color-#{$color_name}: #{$color_value};
   }
   @each $color_name, $color_value in $colorMain {
-    --color-#{$color_name}-text-light: #{map_get($color_value, 'l')};
-    --color-#{$color_name}-text-dark: #{map_get($color_value, 'd')};
+    --color-#{$color_name}-text: #{$color_value};
   }
 }
 
@@ -76,60 +71,41 @@ $colorsList: (
 }
 
 @each $color_name, $color_value in $colorMain {
-  .app-light .color-#{$color_name} {
-    @include background-color(var(--color-#{$color_name}-light), true);
-    @include text-color(var(--color-#{$color_name}-text-light));
+  .color-#{$color_name} {
+    @include background-color(var(--color-#{$color_name}), true);
+    @include text-color(var(--color-#{$color_name}-text));
   }
-  .app-light .color-#{$color_name}-text {
-    @include text-color(var(--color-#{$color_name}-light), true);
+  .color-#{$color_name}-text {
+    @include text-color(var(--color-#{$color_name}), true);
   }
-  .app-dark .color-#{$color_name} {
-    @include background-color(var(--color-#{$color_name}-dark), true);
-    @include text-color(var(--color-#{$color_name}-text-dark));
-  }
-  .app-dark .color-#{$color_name}-text {
-    @include text-color(var(--color-#{$color_name}-dark), true);
-  }
-}
-.shadow-info{
-    --box-shadow: rgba(10, 150, 250, 0.2)
-}
-.shadow-success{
-    --box-shadow: rgba(50, 250, 10, 0.2)
 }
-.shadow-error{
-    --box-shadow: rgba(255, 10, 30, 0.2)
-}
-.shadow-warning{
-    --box-shadow: rgba(250, 150, 10, 0.2)
+
+.shadow-info {
+  --box-shadow: rgba(10, 150, 250, 0.2)
 }
 
-.app-light {
-  .color-primary-text {
-    @include text-color(var(--color-text-primary-light), true);
-  }
+.shadow-success {
+  --box-shadow: rgba(50, 250, 10, 0.2)
+}
 
-  .color-secondary-text {
-    @include text-color(var(--color-text-secondary-light), true);
-  }
+.shadow-error {
+  --box-shadow: rgba(255, 10, 30, 0.2)
+}
 
-  .color-disabled-text {
-    @include text-color(var(--color-text-disabled-light), true);
-  }
+.shadow-warning {
+  --box-shadow: rgba(250, 150, 10, 0.2)
 }
 
-.app-dark {
-  .color-primary-text {
-    @include text-color(var(--color-text-primary-dark), true);
-  }
+.color-primary-text {
+  @include text-color(var(--color-text-primary), true);
+}
 
-  .color-secondary-text {
-    @include text-color(var(--color-text-secondary-dark), true);
-  }
+.color-secondary-text {
+  @include text-color(var(--color-text-secondary), true);
+}
 
-  .color-disabled-text {
-    @include text-color(var(--color-text-disabled-dark), true);
-  }
+.color-disabled-text {
+  @include text-color(var(--color-text-disabled), true);
 }
 
 

package/style/mixins/index.scss

@@ -1,18 +1,6 @@
 @import "utilities";
 @import 'container';
 
-@mixin light() {
-  .app-light & {
-      @content
-    }
-}
-
-@mixin dark() {
-  .app-dark & {
-      @content
-    }
-}
-
 @mixin rtl() {
   .app-rtl & {
     @content

package/style/variables/color.scss

@@ -5,15 +5,14 @@ $gradient: (
         'three': ('0':#e91e63,'1':#ec743d)
 ) !default;
 $colorMain: (
-        'one':('l':#fff,'d':#fff),
-        'one_l':('l':#fff,'d':#fff),
-        'one_d':('l':#fff,'d':#fff),
-        'two':('l':#fff,'d':#fff),
-        'three':('l':#fff,'d':#fff),
-        'error':('l':#fff,'d':#fff),
-        'info':('l':#fff,'d':#fff),
-        'warning':('l':#fff,'d':#fff),
-        'success':('l':#fff,'d':#fff)
+        'one':#fff,
+        'one_l':#fff,
+        'one_d':#fff,
+        'two':#fff,
+        'error':#fff,
+        'info':#fff,
+        'warning':#fff,
+        'success':#fff
 ) !default;
 
 $shades: (

package/tools/helper.js

@@ -345,14 +345,28 @@ export function trim(s, c) {
     return s.replace(new RegExp("^[" + c + "]+|[" + c + "]+$", "g"), "");
 }
 
-export function download(url, fileName = 'download') {
+export function download(url, fileName = 'download', headers = null, percent = null) {
     const f = url.split(".");
     if (f[1]) {
         fileName += '.' + f[1]
     }
+
+    function updateProgress(evt) {
+        if (evt.lengthComputable) {
+            percent((evt.loaded / evt.total) * 100);
+        }
+    }
+
     let xhr = new XMLHttpRequest();
     xhr.open("GET", url, true);
+    xhr.onprogress = updateProgress;
     xhr.responseType = "blob";
+    if (headers) {
+        Object.keys(headers).forEach(function (key) {
+            xhr.setRequestHeader(key, headers[key]);
+        });
+    }
+
     xhr.onload = function () {
         const urlCreator = window.URL || window.webkitURL;
         const imageUrl = urlCreator.createObjectURL(this.response);

package/components/skeletonLoader/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <div :class="$r.prefix + 'skeleton-loader'" :style="{width:width,height:height}"></div>
-</template>
-
-<script>
-export default {
-  name: "r-skeletonLoader",
-  props:{
-    width:String,
-    height:String,
-  }
-};
-</script>
-
-<style lang="scss">
-@import "~renusify/style/include";
-.#{$prefix}skeleton-loader {
-  background: rgba(0, 0, 0, 0.12);
-  &:after {
-    animation: loading 1.5s infinite;
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(-100%);
-    z-index: 1;
-    background: linear-gradient(
-      90deg,
-      hsla(0, 0%, 100%, 0),
-      hsla(0, 0%, 100%, 0.3),
-      hsla(0, 0%, 100%, 0)
-    );
-  }
-  @keyframes loading {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-</style>