@fishawack/lab-velocity 1.11.1 → 2.0.0-beta.10

package/components/_basic.scss

@@ -8,9 +8,10 @@
     }
 
     .el-input__inner {
-        --el-input-inner-height:46px
+        --el-input-inner-height: 46px;
     }
-    .el-input-group__append, .el-input-group__prepend {
+    .el-input-group__append,
+    .el-input-group__prepend {
         padding: 0 2 * $spacing;
     }
 }
@@ -49,6 +50,6 @@
         width: 24px;
         min-width: 24px;
         padding: 0px !important;
-        fill: #cfd8dd !important
+        fill: #cfd8dd !important;
     }
-}
+}

package/components/_breadcrumbs.scss

@@ -1,31 +1,30 @@
 @import "element-plus/theme-chalk/el-breadcrumb";
 @import "element-plus/theme-chalk/el-breadcrumb-item";
 .vel-breadcrumb {
-
     .el-breadcrumb__separator {
         display: none;
-        margin:0px $spacing;
+        margin: 0px $spacing;
     }
-    
+
     .el-breadcrumb__separator,
     .el-breadcrumb__inner {
         font-size: get-ratio(16px);
         line-height: get-ratio(24px);
     }
-    
+
     .el-breadcrumb__inner {
         &.is-link {
             text-decoration: underline;
             font-weight: 500;
             color: $color2;
             text-transform: capitalize;
-    
+
             &:hover {
-                color:$color12;
+                color: $color12;
             }
         }
     }
-    
+
     .el-breadcrumb__item {
         &:last-child {
             .el-breadcrumb__inner {
@@ -37,4 +36,4 @@
             }
         }
     }
-}
+}

package/components/_button.scss

@@ -231,10 +231,11 @@
 
     // shapes
 
-    &.is-circle, &.is-square  {
+    &.is-circle,
+    &.is-square {
         width: auto;
-        & [class*=el-icon] + span {
-           margin-left: 0;
+        & [class*="el-icon"] + span {
+            margin-left: 0;
         }
         &.el-button--default,
         &.el-button--primary,
@@ -252,11 +253,9 @@
         &.el-button--small {
             padding: get-ratio(5px);
         }
-
     }
     // Fix for improper spacing
     .el-icon.is-loading {
-
         + span:empty {
             margin-left: 0px;
         }
@@ -269,14 +268,14 @@
     }
 
     &--iconRight {
-            .el-icon {
-                order: 2;
-            }
+        .el-icon {
+            order: 2;
+        }
 
-            > span {
-                order: 1;
-                margin: 0 0.5rem 0 0;
-            }
+        > span {
+            order: 1;
+            margin: 0 0.5rem 0 0;
+        }
     }
 
     &--iconOnly1 {

package/components/_cascader.scss

@@ -9,4 +9,4 @@
 .el-cascader-node {
     line-height: get-ratio(40px);
     height: get-ratio(40px);
-}
+}

package/components/_checkbox.scss

@@ -1,40 +1,41 @@
 @import "element-plus/theme-chalk/el-checkbox";
 @import "element-plus/theme-chalk/el-checkbox-button";
 
-.vel-checkbox, .el-checkbox {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: $spacing * .5;
-        flex-wrap: wrap ;
-        align-items: baseline;
-        
-        &__label{
-            order: 2;
-        }
-        &__checkbox {
-            order: 1;
-            .el-checkbox__input {
-                &.is-checked {
-                    .el-checkbox__inner {
-                        background-color: black;
-                    }
+.vel-checkbox,
+.el-checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $spacing * 0.5;
+    flex-wrap: wrap;
+    align-items: baseline;
+
+    &__label {
+        order: 2;
+    }
+    &__checkbox {
+        order: 1;
+        .el-checkbox__input {
+            &.is-checked {
+                .el-checkbox__inner {
+                    background-color: black;
                 }
             }
         }
-        &__error {
-           order: 3;
-           flex-basis: 100%;
-           color: $colorAlert;
-        }        
+    }
+    &__error {
+        order: 3;
+        flex-basis: 100%;
+        color: $colorAlert;
+    }
 }
 
-.vel-checkbox-group, .vel-checkbox {
+.vel-checkbox-group,
+.vel-checkbox {
     &--vertical {
         .vel-checkbox-group__wrapper {
             display: flex;
             flex-direction: column;
         }
     }
-
-}
+}

package/components/_chip.scss

@@ -0,0 +1,24 @@
+.chip {
+    border: solid 1px currentColor;
+    border-radius: 4px;
+    background-color: #f0f9eb;
+    padding: get-ratio(2px) get-ratio(10px);
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
+    box-sizing: border-box;
+
+    &.deactive,
+    &--inherited {
+        color: #909399 !important;
+        border-color: #dedfe0 !important;
+        background-color: #f4f4f5 !important;
+    }
+}
+
+.chip--round {
+    display: inline-block;
+    text-indent: -100000px;
+    width: get-ratio(22px);
+    height: get-ratio(22px);
+    border-radius: 100%;
+}

package/components/_collapse.scss

@@ -1,10 +1,9 @@
-
 @import "element-plus/theme-chalk/el-collapse";
 @import "element-plus/theme-chalk/el-collapse-item";
 
 .el-collapse-item__header {
     align-items: center;
-    --el-collapse-header-font-size:get-ratio(16px);
+    --el-collapse-header-font-size: get-ratio(16px);
     .vel-icon {
         vertical-align: middle;
         width: 13px;
@@ -22,4 +21,4 @@
     --el-collapse-header-bg-color: transparent;
     --el-collapse-content-bg-color: transparent;
     --el-collapse-border-color: transparent;
-}
+}

package/components/_datepicker.scss

@@ -4,7 +4,7 @@
     // --el-input-height:38px;
 
     // &.el-input--large {
-        --el-input-height:46px;
+    --el-input-height: 46px;
     // }
 
     &__error {
@@ -13,16 +13,16 @@
 }
 
 .vel-popper {
-    @include breakpoint (max-width $mobileMax) {
+    @include breakpoint(max-width $mobileMax) {
         min-width: 280px;
         max-width: 325px;
         width: auto;
-        .el-date-range-picker{
+        .el-date-range-picker {
             width: 100%;
             .el-picker-panel__body {
                 width: 100%;
                 min-width: 100%;
-                &>div {
+                & > div {
                     width: auto;
                     min-width: auto;
                     border: none;
@@ -32,7 +32,8 @@
     }
 }
 
-.vel-date-picker, .el-date-picker {
+.vel-date-picker,
+.el-date-picker {
     &.has-sidebar {
         width: auto;
 
@@ -48,4 +49,4 @@
         margin-left: 0px;
         position: relative !important;
     }
-}
+}

package/components/_footer.scss

@@ -25,7 +25,7 @@
     flex-basis: 100%;
     justify-content: space-between;
     margin-top: 3.5 * $spacing;
-    
+
     > * {
         max-width: 50%;
         flex-basis: 50%;

package/components/_form.scss

@@ -7,16 +7,18 @@
     }
 
     &:not(:last-child) {
-        margin-bottom:  2.5 * $spacing;
+        margin-bottom: 2.5 * $spacing;
     }
 }
 
 .form__group--error {
-
-    .el-select__wrapper, .el-select__wrapper:hover, .el-input__wrapper, .el-input__wrapper:hover {
+    .el-select__wrapper,
+    .el-select__wrapper:hover,
+    .el-input__wrapper,
+    .el-input__wrapper:hover {
         box-shadow: 0 0 0 1px $colorAlert inset;
         .el-select__icon {
             color: $colorAlert;
         }
     }
-}
+}

package/components/_header.scss

@@ -15,7 +15,6 @@
         max-width: 50%;
         flex-basis: 50%;
         justify-content: flex-end !important;
-
     }
 
     .icon {
@@ -23,7 +22,7 @@
         max-width: $spacing * 2.5;
         width: $spacing * 2.5;
         height: $spacing * 2.5;
-        margin-right: .5 * $spacing;
+        margin-right: 0.5 * $spacing;
     }
 }
 
@@ -43,13 +42,13 @@
             position: relative;
             &::after {
                 position: absolute;
-                content:"";
+                content: "";
                 border-right: solid get-ratio(1px) $color4;
                 height: 75%;
                 transform: translateY(-50%);
                 top: 50%;
-                right:0px;
+                right: 0px;
             }
         }
     }
-}
+}

package/components/_icon.scss

@@ -1,8 +1,9 @@
 // @import "@fishawack/lab-ui/_icon.scss";
 
 .vel-icon {
-
-    .vel-link &, .vel-button &, .vel-basic & {
+    .vel-link &,
+    .vel-button &,
+    .vel-basic & {
         width: get-ratio(16px);
         min-width: get-ratio(16px);
         max-height: get-ratio(16px);
@@ -21,4 +22,4 @@
         padding-bottom: 0px;
         line-height: 0px;
     }
-}
+}

package/components/_inputNumber.scss

@@ -9,13 +9,14 @@
     }
 
     .el-input__inner {
-        --el-input-inner-height:38px
+        --el-input-inner-height: 38px;
     }
-    .el-input-group__append, .el-input-group__prepend {
+    .el-input-group__append,
+    .el-input-group__prepend {
         padding: 0 2 * $spacing;
     }
 
     &__error {
         color: $colorAlert;
     }
-}
+}

package/components/_link.scss

@@ -1,9 +1,9 @@
 @import "element-plus/theme-chalk/el-link";
 
 .vel-link.el-link--default {
-    &:hover{
-        color:currentColor;
-        &:after{
+    &:hover {
+        color: currentColor;
+        &:after {
             border-color: currentColor;
         }
     }
@@ -19,9 +19,9 @@
         right: 0;
         border-color: currentColor;
     }
-    &:hover{
-        color:currentColor;
-        &:after{
+    &:hover {
+        color: currentColor;
+        &:after {
             border-color: currentColor;
         }
     }
@@ -41,4 +41,4 @@
 
 .vel-link--xsmall {
     font-size: get-ratio(12px);
-}
+}

package/components/_loader.scss

@@ -5,7 +5,7 @@
     height: 6rem;
     border-radius: 50%;
     background-color: inherit;
-    
+
     svg {
         .circle {
             animation: 2s spinning cubic-bezier(0.41, 0.26, 0.2, 0.62) infinite;
@@ -22,7 +22,7 @@
         border-width: 0.6rem;
     }
 
-    @include breakpoint (max-width $mobileMax) {
+    @include breakpoint(max-width $mobileMax) {
         width: 6rem;
         height: 6rem;
 
@@ -32,7 +32,6 @@
     }
 }
 
-
 @keyframes spinning {
     from {
         transform: rotate(0);
@@ -41,4 +40,4 @@
     to {
         transform: rotate(2turn);
     }
-}
+}

package/components/_menu.scss

@@ -1,15 +1,17 @@
-@import 'element-plus/theme-chalk/el-menu';
-@import 'element-plus/theme-chalk/el-menu-item';
-@import 'element-plus/theme-chalk/el-sub-menu';
+@import "element-plus/theme-chalk/el-menu";
+@import "element-plus/theme-chalk/el-menu-item";
+@import "element-plus/theme-chalk/el-sub-menu";
 
-ul.vel-menu  {
+ul.vel-menu {
     li {
-        --el-menu-level-padding : 0;
+        --el-menu-level-padding: 0;
         padding-right: 0px;
     }
-    .el-sub-menu__title, a, .el-menu-item > *  {
+    .el-sub-menu__title,
+    a,
+    .el-menu-item > * {
         font-size: get-ratio(18px);
-        border-left: solid .5 * $spacing transparent;
+        border-left: solid 0.5 * $spacing transparent;
         padding: 0 2.5 * $spacing;
         width: 100%;
         display: flex;
@@ -20,12 +22,11 @@ ul.vel-menu  {
             width: 2.5 * $spacing;
             min-width: 2.5 * $spacing;
             fill: currentColor;
-            margin-right: .5 * $spacing;
+            margin-right: 0.5 * $spacing;
             * {
                 vertical-align: middle;
             }
         }
-
     }
 
     .el-sub-menu__title {
@@ -35,27 +36,28 @@ ul.vel-menu  {
     a {
         height: 100%;
         box-sizing: border-box;
-        border-left: solid .5 * $spacing $color8;
+        border-left: solid 0.5 * $spacing $color8;
         .vel-icon {
             width: 2.5 * $spacing;
             max-width: 2.5 * $spacing;
             min-width: 2.5 * $spacing;
             padding-bottom: 0px;
         }
-        &.active{
+        &.active {
             border-left-color: $color1;
         }
-
     }
-    
-    span, .el-sub-menu__icon-arrow {
+
+    span,
+    .el-sub-menu__icon-arrow {
         opacity: 0;
-        transition: .2s ease-in-out opacity;
-        margin-left: .5 * $spacing;
+        transition: 0.2s ease-in-out opacity;
+        margin-left: 0.5 * $spacing;
     }
 
     .active & {
-        span,.el-sub-menu__icon-arrow {
+        span,
+        .el-sub-menu__icon-arrow {
             opacity: 1;
         }
     }
@@ -66,11 +68,10 @@ ul.vel-menu  {
     }
 }
 
-
-
 .vel-sub-menu {
     --el-menu-level-padding: 0;
-    .el-menu-item, .vel-sub-menu {
+    .el-menu-item,
+    .vel-sub-menu {
         padding-left: 5 * $spacing !important;
     }
     .el-sub-menu__title {
@@ -98,13 +99,12 @@ ul.vel-menu  {
     }
 
     .el-sub-menu {
-
         .vel-menu-item {
             a.active {
                 border-left-color: transparent;
             }
         }
-        .vel-menu-item a{
+        .vel-menu-item a {
             padding-left: 0px;
             padding-right: 0px;
         }

package/{modules → components}/_modal.scss

@@ -5,8 +5,8 @@
 
     transition: all 500ms ease-in-out;
 
-    &::before{
-        content: '';
+    &::before {
+        content: "";
         pointer-events: none;
         z-index: 0 !important;
         position: fixed;
@@ -21,4 +21,4 @@
 }
 .AuthModule__form.modal__box {
     position: absolute;
-}
+}

package/components/_pageTitle.scss

@@ -1,8 +1,8 @@
 .vel-page-title {
     padding: 3 * $spacing 6 * $spacing;
     background-color: $color0;
-    border-bottom: .5 * $spacing solid;
-    border-image: linear-gradient(90deg, #FF558F 0%, #856DF6 100%) 1;
-    box-shadow: .5 * $spacing .5 * $spacing $spacing 0px #00000040;
+    border-bottom: 0.5 * $spacing solid;
+    border-image: linear-gradient(90deg, #ff558f 0%, #856df6 100%) 1;
+    box-shadow: 0.5 * $spacing 0.5 * $spacing $spacing 0px #00000040;
     margin-bottom: 2.5 * $spacing;
 }

package/components/_permissionLegend.scss

@@ -0,0 +1,18 @@
+.permission-legend {
+    background-color: #f2f2f2;
+    border: 1px solid #e6e6e6;
+    padding: $spacing * 2;
+}
+
+.permission-legend__list {
+    list-style: none;
+    padding-left: 0;
+
+    & > li {
+        margin-bottom: $spacing;
+    }
+}
+
+.permission-legend__description {
+    padding-left: $spacing;
+}

package/components/_select.scss

@@ -5,12 +5,13 @@
 @import "element-plus/theme-chalk/el-popper";
 @import "element-plus/theme-chalk/el-select";
 
-.vel-select {   
+.vel-select {
     .el-select__wrapper {
         font-size: get-ratio(16px);
         padding: get-ratio(17px) get-ratio(16px);
     }
-    .el-select__input, .el-select__selected-item {
+    .el-select__input,
+    .el-select__selected-item {
         line-height: get-ratio(16px);
         height: get-ratio(16px);
     }

package/components/_sidebar.scss

@@ -2,11 +2,11 @@
     flex-basis: $spacing * 7.5;
     display: flex;
     flex-direction: column;
-    box-shadow: 0px $spacing * .5 $spacing * .5 0px hsla(0, 0%, 0%, 0.251);
+    box-shadow: 0px $spacing * 0.5 $spacing * 0.5 0px hsla(0, 0%, 0%, 0.251);
     min-height: 10vh;
     max-height: 100vh;
     overflow: hidden;
-    transition: flex-basis .3s ease-in-out;
+    transition: flex-basis 0.3s ease-in-out;
     background-color: $color0;
 
     position: sticky;
@@ -15,10 +15,9 @@
     min-width: get-ratio(64px);
     flex-basis: get-ratio(64px);
 
-
     > div {
         &:first-child {
-            flex-grow: .80;
+            flex-grow: 0.8;
         }
         &:last-child {
             margin-bottom: 5.5vh;
@@ -48,10 +47,10 @@
 .vel-side-bar__bottom {
     display: flex;
     justify-content: flex-end;
-    border-top: solid 1px #E6E6E6;
+    border-top: solid 1px #e6e6e6;
     padding: $spacing $spacing * 1.5;
 }
 
 main {
     overflow: hidden;
-}
+}

package/components/_switch.scss

@@ -9,6 +9,6 @@
         height: auto;
     }
     .vel-switch__label {
-        margin-right: .5rem;
+        margin-right: 0.5rem;
     }
-}
+}

package/components/_table.scss

@@ -4,8 +4,8 @@
 
 .el-table {
     padding: get-ratio(8px);
-    thead tr .el-table__cell{
-        background-color: #F7F7F7;
+    thead tr .el-table__cell {
+        background-color: #f7f7f7;
     }
     .el-table__cell {
         padding: get-ratio(8px) get-ratio(12px);
@@ -17,4 +17,4 @@
     display: flex;
     width: 100%;
     max-width: 100%;
-  }
+}