renusify 2.2.5 → 2.3.0

package/components/app/style.scss

@@ -1,6 +1,8 @@
-@import '../../style/style.scss';
+@use '../../style/style';
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
-.#{$prefix}app {
+.#{base.$prefix}app {
   display: flex;
 
   background: var(--color-sheet);
@@ -25,9 +27,9 @@
 }
 
 // Firefox overrides
-@include firefox() {
+@include mixins.firefox() {
   @media print {
-    .#{$prefix}app {
+    .#{base.$prefix}app {
       display: block;
 
       &-wrap {

package/components/app/toast/style.scss

@@ -1,13 +1,14 @@
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
 
-.#{$prefix}toast {
+.#{base.$prefix}toast {
   max-width: 500px;
   width: 95vw;
   position: fixed;
   bottom: 15px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: map-get($z-index, 'veryImportant');
+  z-index: map.get(base.$z-index, 'veryImportant');
 
   .toast-content {
     padding: 15px;

package/components/avatar/style.scss

@@ -1,6 +1,6 @@
-@import "../../style/include";
+@use "../../style/variables/base";
 
-.#{$prefix}avatar {
+.#{base.$prefix}avatar {
   position: relative;
   display: inline-flex;
   justify-content: center;

package/components/bar/bottomNavigationCircle.vue

@@ -31,9 +31,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../style/include";
+@use "sass:map";
+@use "../../style/variables/base";
+@use "../../style/mixins";
 
-.#{$prefix}bottom-navigation-circle {
+.#{base.$prefix}bottom-navigation-circle {
   position: fixed;
   bottom: 0;
   display: flex;
@@ -41,10 +43,10 @@ export default {
   justify-content: center;
   width: 100%;
   height: 56px;
-  z-index: map_get($z-index, "default");
+  z-index: map.get(base.$z-index, "default");
   background-color: var(--color-sheet);
   color: var(--color-on-sheet);
-  @include typography($headings, 'body-3');
+  @include mixins.typography(base.$headings, 'body-3');
 
   .navigation-item {
     width: 100%;
@@ -87,7 +89,7 @@ export default {
       height: 50px;
       border: 3px solid var(--color-on-one);
 
-      .#{$prefix}icon {
+      .#{base.$prefix}icon {
         color: var(--color-on-one);
       }
     }

package/components/bar/scss/bottomNav.scss

@@ -1,30 +1,33 @@
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+@use "../../../style/functions";
+@use "../../../style/mixins";
 
-$bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
+$bottom-nav-btn-font-size: functions.map-metro-get(base.$headings, 'label-1', 'size') !default;
 
-.#{$prefix}bottom-navigation {
+.#{base.$prefix}bottom-navigation {
   bottom: 0;
   display: flex;
   left: 0;
   justify-content: center;
   width: 100%;
-  height: $bottom-nav-height;
+  height: base.$bottom-nav-height;
   background-color: var(--color-sheet-container);
   color: var(--color-on-sheet);
-  @include typography($headings, 'body-3');
+  @include mixins.typography(base.$headings, 'body-3');
 
   .router-link-exact-active {
     color: var(--color-one)
   }
 
-  .#{$prefix}btn {
+  .#{base.$prefix}btn {
     border-radius: 0;
     box-shadow: none;
     flex: 0 1 auto;
     font-size: $bottom-nav-btn-font-size;;
     height: inherit !important;
-    max-width: $bottom-nav-btn-max-width;
-    min-width: $bottom-nav-btn-min-width;
+    max-width: base.$bottom-nav-btn-max-width;
+    min-width: base.$bottom-nav-btn-min-width;
     position: relative;
     text-transform: none;
 
@@ -37,11 +40,11 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
       height: inherit;
     }
 
-    .#{$prefix}icon {
+    .#{base.$prefix}icon {
       margin-bottom: 4px
     }
 
-    > *:not(.#{$prefix}icon) {
+    > *:not(.#{base.$prefix}icon) {
       line-height: 1.2
     }
 
@@ -52,11 +55,11 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
 
   &.bottom-navigation-fixed {
     position: fixed;
-    z-index: map_get($z-index, 'default')
+    z-index: map.get(base.$z-index, 'default')
   }
 
   &.bottom-navigation-grow {
-    .#{$prefix}btn {
+    .#{base.$prefix}btn {
       width: 100%;
       max-width: 100%;
     }

package/components/bar/scss/toolbar.scss

@@ -1,6 +1,8 @@
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}toolbar {
+.#{base.$prefix}toolbar {
   flex: 1 1 auto;
   background-color: var(--color-sheet-container);
   color: var(--color-on-sheet);
@@ -10,11 +12,11 @@
       width: 40px;
       height: 40px;
       position: absolute;
-      transition: 2s all map-get($transition, 'swing');
-      @include rtl() {
+      transition: 2s all map.get(base.$transition, 'swing');
+      @include mixins.rtl() {
         right: -40px;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         left: -40px;
       }
     }
@@ -23,11 +25,11 @@
       height: 100%;
       overflow: auto;
       position: absolute;
-      transition: .5s all map-get($transition, 'swing');
-      @include rtl(){
+      transition: .5s all map.get(base.$transition, 'swing');
+      @include mixins.rtl(){
         right: -300px;
       }
-      @include ltr(){
+      @include mixins.ltr(){
         left: -300px;
       }
     }
@@ -36,14 +38,14 @@
       top: 0;
       width: 0;
       height: 100vh;
-      z-index: map_get($z-index, 'important');
+      z-index: map.get(base.$z-index, 'important');
       background-color: var(--color-overlay);
-      transition: 1s width map-get($transition, 'swing');
+      transition: 1s width map.get(base.$transition, 'swing');
       overflow: hidden;
-      @include rtl() {
+      @include mixins.rtl() {
         right: 0;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         left: 0;
       }
     }
@@ -52,19 +54,19 @@
         width: 100vw;
       }
       .toolbar-side {
-        transition: 2s all map-get($transition, 'swing');
-        @include rtl() {
+        transition: 2s all map.get(base.$transition, 'swing');
+        @include mixins.rtl() {
           right: 0;
         }
-        @include ltr() {
+        @include mixins.ltr() {
           left: 0;
         }
       }
       .toolbar-close{
-        @include rtl() {
+        @include mixins.rtl() {
           right: 300px;
         }
-        @include ltr() {
+        @include mixins.ltr() {
           left: 300px;
         }
       }
@@ -72,12 +74,12 @@
   }
 
   .toolbar-content {
-    height: $toolbar-height;
-    padding: $toolbar-content-padding-y $toolbar-content-padding-x;
+    height: base.$toolbar-height;
+    padding: base.$toolbar-content-padding-y base.$toolbar-content-padding-x;
     align-items: center;
     display: flex;
     position: relative;
-    z-index: map_get($z-index, 'medium');
+    z-index: map.get(base.$z-index, 'medium');
   }
 
   .toolbar-items {
@@ -93,24 +95,24 @@
       content: '-';
       position: absolute;
       color: #9e9e9e;
-      @include rtl() {
+      @include mixins.rtl() {
         right: -8px;
       }
-      @include ltr() {
+      @include mixins.ltr() {
         left: -8px;
       }
     }
   }
 
   .menu-list {
-    transition: 1s map-get($transition, 'swing');
+    transition: 1s map.get(base.$transition, 'swing');
     min-width: 200px;
     max-height: 500px;
     overflow-y: auto;
-    @include rtl() {
+    @include mixins.rtl() {
       border-right: 1px solid #9e9e9e;
     }
-    @include ltr() {
+    @include mixins.ltr() {
       border-left: 1px solid #9e9e9e;
     }
   }
@@ -127,16 +129,16 @@
     position: relative;
 
     .toolbar-childs {
-      transition: 1s map-get($transition, 'swing');
+      transition: 1s map.get(base.$transition, 'swing');
       position: absolute;
       top: 40px;
       max-height: 0;
       overflow: hidden;
-      z-index: map_get($z-index, 'important');
+      z-index: map.get(base.$z-index, 'important');
     }
 
     &:before {
-      transition: $primary-transition;
+      transition: base.$primary-transition;
       content: '';
       width: 0;
       position: absolute;
@@ -161,12 +163,12 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: map_get($z-index, 'medium');
+    z-index: map.get(base.$z-index, 'medium');
   }
 
   &.toolbar-sticky {
     position: sticky;
     top: 0;
-    z-index: map_get($z-index, 'medium');
+    z-index: map.get(base.$z-index, 'medium');
   }
 }

package/components/bar/toolbar/index.vue

@@ -19,10 +19,10 @@
         name: 'r-toolbar',
         components: {
             Laptop: defineAsyncComponent(() =>
-                import("./laptop")
+                import("./laptop.vue")
             ),
             Mobile: defineAsyncComponent(() =>
-                import("./mobile")
+                import("./mobile.vue")
             )
         }
     }

package/components/bar/toolbar/laptop.vue

@@ -22,7 +22,7 @@
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
-import {toolbar} from "./mixin";
+import {toolbar} from "./mixin.js";
 
 export default {
         components: {MenuLaptop:defineAsyncComponent(()=>import('./menuLaptop.vue'))},

package/components/bar/toolbar/mobile.vue

@@ -24,7 +24,7 @@
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
-import {toolbar} from "./mixin";
+import {toolbar} from "./mixin.js";
 
 export default {
         components: {MenuMobile:defineAsyncComponent(()=>import('./menuMob.vue'))},

package/components/breadcrumb/bredcrumbItem.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-    import {roots} from '../../tools/rootable'
+    import {roots} from '../../tools/rootable.js'
 
     export default {
       name: 'rBreadcrumbItem',

package/components/breadcrumb/style.scss

@@ -1,7 +1,7 @@
-@import "../../style/include";
+@use "../../style/variables/base";
+@use "../../style/mixins/container" as mixins;
 
-
-.#{$prefix}breadcrumbs {
+.#{base.$prefix}breadcrumbs {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -15,7 +15,7 @@
     color: var(--color-on-sheet);
   }
 
-  .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
+  .breadcrumb-divider, .breadcrumb-item-disabled, .#{base.$prefix}icon {
     color: var(--color-border)
   }
 
@@ -29,7 +29,7 @@
       padding: 0 12px
     }
 
-    @include media-breakpoint-down('md') {
+    @include mixins.media-breakpoint-down('md') {
       &:nth-child(even) {
         padding: 0 4px
       }
@@ -41,7 +41,7 @@
     align-items: center;
     display: inline-flex;
     text-decoration: none;
-    transition: 0.3s $primary-transition;
+    transition: 0.3s base.$primary-transition;
     cursor: pointer;
 
     &-disabled {

package/components/button/index.vue

@@ -24,7 +24,7 @@
 
 <script>
 import './style.scss'
-import {roots} from '../../tools/rootable'
+import {roots} from '../../tools/rootable.js'
 
 export default {
   name: 'r-btn',

package/components/button/style.scss

@@ -1,7 +1,12 @@
-@import "renusify/style/_include.scss";
+@use "sass:map";
+@use "sass:math";
+@use "../../style/variables/base";
+@use "../../style/mixins";
+@use "../../style/functions";
+
 
 $btn-active-opacity: 0.18 !default;
-$btn-border-radius: map-get($borders, 'sm') !default;
+$btn-border-radius: map.get(base.$borders, 'sm') !default;
 $btn-focus-opacity: 0.24 !default;
 $btn-font-size: .875rem !default;
 $btn-font-weight: 500 !default;
@@ -33,10 +38,10 @@ $fab-icon-sizes: (
         'x-large': 32
 ) !default;
 $btn-transition-duration: 0.28s !default;
-$btn-transition-fn: map-get($transition, 'fast-out-slow-in') !default;
-$btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
+$btn-transition-fn: map.get(base.$transition, 'fast-out-slow-in') !default;
+$btn-transition: opacity 0.2s map.get(base.$transition, 'ease-in-out') !default;
 
-.#{$prefix}btn {
+.#{base.$prefix}btn {
   cursor: pointer;
   align-items: center;
   border-radius: $btn-border-radius;
@@ -68,13 +73,13 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   }
 
 
-  @include states();
+  @include mixins.states();
 
   &.btn-disabled {
-    @include disable-states();
+    @include mixins.disable-states();
 
     &:not(.btn-text):not(.btn-outlined) {
-      background-color: var(--color-#{map-metro-get($states, 'disabled','state','color')}) !important;
+      background-color: var(--color-#{functions.map-metro-get(base.$states, 'disabled','state','color')}) !important;
     }
 
     &.btn-text, &.btn-outlined {
@@ -84,7 +89,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
     }
   }
 
-  @include ltr() {
+  @include mixins.ltr() {
     letter-spacing: $btn-letter-spacing;
   }
 
@@ -110,7 +115,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
   &:not(.btn-round) {
     @each $name, $size in $btn-sizes {
-      $p: div($size, 2.25);
+      $p: math.div($size, 2.25);
       &.size-#{$name} {
         height: #{$size}px;
         min-width: #{round($size * 1.7)}px;
@@ -119,7 +124,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
     }
   }
 
-  > .btn-content .#{$prefix}icon {
+  > .btn-content .#{base.$prefix}icon {
     color: inherit
   }
 
@@ -160,7 +165,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   width: 100%;
 }
 
-.#{$prefix}btn:not(.btn-text):not(.btn-outlined) {
+.#{base.$prefix}btn:not(.btn-text):not(.btn-outlined) {
   &.btn-active:before {
     opacity: $btn-active-opacity
   }
@@ -179,19 +184,19 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   position: absolute;
 
   &.btn-right {
-    right: map-get($grid-gutters, 'lg')
+    right: map.get(base.$grid-gutters, 'lg')
   }
 
   &.btn-left {
-    left: map-get($grid-gutters, 'lg')
+    left: map.get(base.$grid-gutters, 'lg')
   }
 
   &.btn-top {
-    top: map-get($grid-gutters, 'lg')
+    top: map.get(base.$grid-gutters, 'lg')
   }
 
   &.btn-bottom {
-    bottom: map-get($grid-gutters, 'lg')
+    bottom: map.get(base.$grid-gutters, 'lg')
   }
 }
 
@@ -203,14 +208,14 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 }
 
 .btn-contained {
-  @include elevation('sm');
+  @include mixins.elevation('sm');
 
   &:after {
-    @include elevation('md')
+    @include mixins.elevation('md')
   }
 
   &:active {
-    @include elevation('lg')
+    @include mixins.elevation('lg')
   }
 }
 
@@ -225,7 +230,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   padding: 0;
   @each $name, $size in $fab-icon-sizes {
     &.size-#{$name} {
-      .#{$prefix}icon {
+      .#{base.$prefix}icon {
         height: #{$size}px;
         font-size: #{$size}px;
         width: #{$size}px;
@@ -246,14 +251,14 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
 .btn-fab {
   &.btn-contained {
-    @include elevation('md') ;
+    @include mixins.elevation('md') ;
 
     &:after {
-      @include elevation('lg')
+      @include mixins.elevation('lg')
     }
 
     &:active {
-      @include elevation('xl')
+      @include mixins.elevation('xl')
     }
   }
 
@@ -269,11 +274,11 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
       &.btn-absolute {
         &.btn-bottom {
-          bottom: #{div($size,-2)}px
+          bottom: #{math.div($size,-2)}px
         }
 
         &.btn-top {
-          top: #{div($size,-2)}px
+          top: #{math.div($size,-2)}px
         }
       }
 
@@ -308,7 +313,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 .btn-outlined,
 .btn-round {
   .btn-content {
-    .#{$prefix}icon {
+    .#{base.$prefix}icon {
       color: currentColor
     }
   }
@@ -340,11 +345,11 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 }
 
 
-.#{$prefix}button-group {
+.#{base.$prefix}button-group {
   position: relative;
   color: var(--color-on-sheet);
   background-color: var(--color-sheet-container);
-  @include states();
+  @include mixins.states();
 
   .btn-container {
     display: inline-flex;
@@ -367,25 +372,25 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
     vertical-align: middle;
     white-space: nowrap;
 
-    .#{$prefix}btn {
+    .#{base.$prefix}btn {
       border-radius: 0;
     }
 
-    @include rtl() {
-      .#{$prefix}btn:not(:first-child):not(:last-child) {
+    @include mixins.rtl() {
+      .#{base.$prefix}btn:not(:first-child):not(:last-child) {
         border-left: currentColor 1px solid;
       }
 
-      .#{$prefix}btn:first-child {
+      .#{base.$prefix}btn:first-child {
         border-left: currentColor 1px solid;
       }
     }
-    @include ltr() {
-      .#{$prefix}btn:not(:first-child):not(:last-child) {
+    @include mixins.ltr() {
+      .#{base.$prefix}btn:not(:first-child):not(:last-child) {
         border-right: currentColor 1px solid;
       }
 
-      .#{$prefix}btn:first-child {
+      .#{base.$prefix}btn:first-child {
         border-right: currentColor 1px solid;
       }
     }
@@ -395,7 +400,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: map_get($z-index, 'default');
+    z-index: map.get(base.$z-index, 'default');
     height: 300px;
     overflow: auto;
 

package/components/calendar/index.vue

@@ -313,9 +313,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../style/include";
+@use "../../style/variables/base";
+@use "../../style/mixins/container" as mixins;
 
-.#{$prefix}calendar {
+.#{base.$prefix}calendar {
   position: relative;
   display: inline-block;
   font-size: 10px;
@@ -353,7 +354,7 @@ export default {
     position: relative;
     z-index: 1;
     border-collapse: collapse;
-    @include media-breakpoint-up('lg') {
+    @include mixins.media-breakpoint-up('lg') {
       table-layout: fixed;
     }
   }

package/components/card/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import {roots} from '../../tools/rootable';
+import {roots} from '../../tools/rootable.js';
 import './style.scss';
 
 export default {