@posiwise/core-styles 1.0.11 → 1.0.13

package/scss/custom-bootstrap/_forms.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:map';
 form {
     .form-text {
         display: block;
@@ -24,21 +26,21 @@ form {
         color: rgb(128 128 128);
 
         /* &::input-placeholder {
-            color: darken($body-bg, 20%);
+            color: color.adjust($body-bg, $lightness: -20%);
         } */
 
         &:placeholder {
             /* Firefox 18- */
-            color: darken($body-bg, 20%);
+            color: color.adjust($body-bg, $lightness: -20%);
         }
 
         &::placeholder {
             /* Firefox 19+ */
-            color: darken($body-bg, 20%);
+            color: color.adjust($body-bg, $lightness: -20%);
         }
 
         /* &:input-placeholder {
-            color: darken($body-bg, 20%);
+            color: color.adjust($body-bg, $lightness: -20%);
         } */
 
         &:focus {
@@ -77,8 +79,8 @@ form {
     }
 
     .form-section {
-        border-bottom: 1px solid map-get($brown, base);
-        color: map-get($brown, base);
+        border-bottom: 1px solid map.get($brown, base);
+        color: map.get($brown, base);
         font-size: 1.2rem;
         font-weight: 400;
         letter-spacing: 0.5px;
@@ -93,7 +95,7 @@ form {
     }
 
     .form-actions {
-        border-top: 1px solid darken($body-bg, 10%);
+        border-top: 1px solid color.adjust($body-bg, $lightness: -10%);
         margin-top: 20px;
         padding: 20px 0;
 
@@ -117,7 +119,7 @@ form {
         }
 
         &.top {
-            border-bottom: 1px solid darken($body-bg, 10%);
+            border-bottom: 1px solid color.adjust($body-bg, $lightness: -10%);
             border-top: 0;
             margin-bottom: 20px;
             margin-top: 0;
@@ -136,7 +138,7 @@ form {
 
     &.row-separator {
         .mb-3 {
-            border-bottom: 1px solid darken($body-bg, 3%);
+            border-bottom: 1px solid color.adjust($body-bg, $lightness: -3%);
             margin: 0;
 
             .label-control {
@@ -156,7 +158,7 @@ form {
 
     &.form-bordered {
         .mb-3 {
-            border-bottom: 1px solid darken($body-bg, 3%);
+            border-bottom: 1px solid color.adjust($body-bg, $lightness: -3%);
             margin: 0;
 
             .label-control {
@@ -164,7 +166,7 @@ form {
             }
 
             > div {
-                border-left: 1px solid darken($body-bg, 3%);
+                border-left: 1px solid color.adjust($body-bg, $lightness: -3%);
                 padding: 1.2rem;
                 padding-right: 0;
             }
@@ -225,7 +227,7 @@ form {
 // Form Control
 .form-control {
     &:focus {
-        border-color: map-get($primary, base) !important;
+        border-color: map.get($primary, base) !important;
     }
 }
 
@@ -312,7 +314,7 @@ select.form-control-xl:not([size]):not([multiple]) {
 textarea.ng-touched.ng-invalid,
 input.ng-touched.ng-invalid,
 select.ng-touched.ng-invalid {
-    border-color: map-get($danger, base);
+    border-color: map.get($danger, base);
 }
 
 .form-control:focus::placeholder {

package/scss/custom-bootstrap/_popover.scss

@@ -1,10 +1,11 @@
+@use 'sass:map';
 .popover {
     border-color: rgb(0 157 160 / 20%);
     padding: 0;
 
     .popover-header {
-        background-color: map-get($primary, base);
-        border-color: map-get($primary, base);
+        background-color: map.get($primary, base);
+        border-color: map.get($primary, base);
         color: rgb(255 255 255);
     }
 }

package/scss/custom-bootstrap/_reboot.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:map';
 html {
     font-size: $font-size-root;
 }
@@ -67,18 +69,18 @@ h6,
 }
 
 a {
-    color: map-get($primary, base);
+    color: map.get($primary, base);
 
     &:hover,
     &:focus {
-        color: darken(map-get($primary, base), 5%);
+        color: color.adjust(map.get($primary, base), $lightness: -5%);
         text-decoration: none;
     }
 
     &.text-info {
         &:hover,
         &:focus {
-            color: darken(map-get($info, base), 5%);
+            color: color.adjust(map.get($info, base), $lightness: -5%);
         }
     }
 }

package/scss/custom-bootstrap/_type.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 h1,
 .h1 {
     font-size: 38px;
@@ -84,27 +85,27 @@ blockquote.float-end {
 }
 
 .text-warning {
-    color: map-get($warning, base) !important;
+    color: map.get($warning, base) !important;
 }
 
 .text-default {
-    color: map-get($default, base) !important;
+    color: map.get($default, base) !important;
 }
 
 .text-primary {
-    color: map-get($primary, base) !important;
+    color: map.get($primary, base) !important;
 }
 
 .text-danger {
-    color: map-get($danger, base) !important;
+    color: map.get($danger, base) !important;
 }
 
 .text-success {
-    color: map-get($success, base) !important;
+    color: map.get($success, base) !important;
 }
 
 .text-info {
-    color: map-get($info, base) !important;
+    color: map.get($info, base) !important;
 }
 
 .required-icon {

package/scss/dashboard/_bootstrap-social.scss

@@ -1,9 +1,13 @@
-@import '../dashboard/mixins/buttons';
+@use 'sass:color';
+@use 'sass:math';
+@use '../dashboard/mixins/buttons' as *;
 
 $bs-height-base: ($line-height-computed + $padding-base-vertical * 2) !default;
-$bs-height-lg: (floor($font-size-lg * $line-height-base) + $padding-large-vertical * 2) !default;
-$bs-height-sm: (floor($font-size-sm * 1.5) + $padding-small-vertical * 2) !default;
-$bs-height-xs: (floor($font-size-sm * 1.2) + $padding-small-vertical + 1) !default;
+$bs-height-lg: (
+    math.floor($font-size-lg * $line-height-base) + $padding-large-vertical * 2
+) !default;
+$bs-height-sm: (math.floor($font-size-sm * 1.5) + $padding-small-vertical * 2) !default;
+$bs-height-xs: (math.floor($font-size-sm * 1.2) + $padding-small-vertical + 1) !default;
 
 .btn-social {
     color: rgb(255 255 255);
@@ -110,7 +114,7 @@ $bs-height-xs: (floor($font-size-sm * 1.2) + $padding-small-vertical + 1) !defau
 
     &:hover {
         background-color: transparent !important;
-        color: darken($color, 25%) !important;
+        color: color.adjust($color, $lightness: -25%) !important;
     }
 }
 
@@ -123,8 +127,8 @@ $bs-height-xs: (floor($font-size-sm * 1.2) + $padding-small-vertical + 1) !defau
 // Social Outline Button Hover Mixin
 @mixin btn-hover-outline($color-bg) {
     background-color: transparent !important;
-    border: 1px solid darken($color-bg, 20%) !important;
-    color: darken($color-bg, 20%);
+    border: 1px solid color.adjust($color-bg, $lightness: -20%) !important;
+    color: color.adjust($color-bg, $lightness: -20%);
 }
 
 // Flat Social Button Hover Mixin

package/scss/dashboard/_chat.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:map';
 .chat-application {
     overflow: hidden;
 
@@ -118,7 +120,7 @@
             overflow: hidden;
 
             .chat-content {
-                background-color: map-get($primary, base);
+                background-color: map.get($primary, base);
                 border-radius: 4px;
                 clear: both;
                 color: rgb(255 255 255);
@@ -137,7 +139,7 @@
 
                 &::before {
                     border: 5px solid transparent;
-                    border-left-color: map-get($primary, base);
+                    border-left-color: map.get($primary, base);
                     content: '';
                     height: 0;
                     position: absolute;
@@ -199,7 +201,7 @@
 
             .chat-content {
                 background-color: $body-bg;
-                color: map-get($brown, base);
+                color: map.get($brown, base);
                 float: left;
                 margin: 0 100px 10px 20px;
                 text-align: left;
@@ -210,7 +212,7 @@
 
                 &::before {
                     border-left-color: transparent;
-                    border-right-color: lighten($body-bg, 18%);
+                    border-right-color: color.adjust($body-bg, $lightness: 18%);
                     left: -10px;
                     right: auto;
                 }

package/scss/dashboard/_components.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 //.media-list {
 //    &.media-bordered {
 //        .media {
@@ -44,24 +45,24 @@
 // Calendar
 
 .ngb-dp-weekday {
-    color: map-get($primary, base) !important;
+    color: map.get($primary, base) !important;
 }
 
 // Switch
 
 .switch.checked {
-    background: map-get($primary, base) !important;
+    background: map.get($primary, base) !important;
 }
 
 // Sweet Alert
 
 .swal2-modal {
     .swal2-confirm {
-        background-color: map-get($primary, base) !important;
+        background-color: map.get($primary, base) !important;
     }
 
     .swal2-cancel {
-        background-color: map-get($default, base) !important;
+        background-color: map.get($default, base) !important;
     }
 }
 
@@ -70,26 +71,26 @@
 }
 
 .swal2-icon.swal2-warning {
-    border-color: map-get($default, base) !important;
-    color: map-get($default, base) !important;
+    border-color: map.get($default, base) !important;
+    color: map.get($default, base) !important;
 }
 
 // Toast
 
 .toast-success {
-    background-color: map-get($success, base) !important;
+    background-color: map.get($success, base) !important;
 }
 
 .toast-warning {
-    background-color: map-get($warning, base) !important;
+    background-color: map.get($warning, base) !important;
 }
 
 .toast-danger {
-    background-color: map-get($danger, base) !important;
+    background-color: map.get($danger, base) !important;
 }
 
 .toast-info {
-    background-color: map-get($info, base) !important;
+    background-color: map.get($info, base) !important;
 }
 
 // Accordion
@@ -141,13 +142,13 @@ ngb-accordion {
 // hopscotch
 
 div.hopscotch-bubble .hopscotch-nav-button.next {
-    background-color: map-get($primary, base) !important;
+    background-color: map.get($primary, base) !important;
     background-image: linear-gradient(
         to bottom,
-        map-get($primary, base) 0%,
-        map-get($primary, base) 100%
+        map.get($primary, base) 0%,
+        map.get($primary, base) 100%
     ) !important;
-    border-color: map-get($primary, base) !important;
+    border-color: map.get($primary, base) !important;
     color: rgb(255 255 255);
     margin: 0 0 0 10px;
 }

package/scss/dashboard/_horizontal-timeline.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:map';
 @import 'partials/variables'; // colors, fonts etc...
 @import 'partials/mixins'; // custom mixins
 @import 'partials/layout'; // responsive grid and media queries
@@ -69,7 +71,7 @@
     }
 
     .events {
-        background: darken($color-4, 10%);
+        background: color.adjust($color-4, $lightness: -10%);
         height: 2px;
         left: 0;
         position: absolute;
@@ -83,7 +85,7 @@
     }
 
     .filling-line {
-        background-color: map-get($primary, base);
+        background-color: map.get($primary, base);
         height: 100%;
         left: 0;
         position: absolute;
@@ -120,26 +122,28 @@
             position: absolute;
 
             /* this is used to create the event spot */
-            transition: background-color 0.3s, border-color 0.3s; /* Safari */
+            transition:
+                background-color 0.3s,
+                border-color 0.3s; /* Safari */
             width: 12px;
         }
 
         .no-touch &:hover::after {
-            background-color: map-get($primary, base);
-            border-color: map-get($primary, base);
+            background-color: map.get($primary, base);
+            border-color: map.get($primary, base);
         }
 
         &.selected {
             pointer-events: none;
 
             &::after {
-                background-color: map-get($primary, base);
-                border-color: map-get($primary, base);
+                background-color: map.get($primary, base);
+                border-color: map.get($primary, base);
             }
         }
 
         &.older-event::after {
-            border-color: map-get($primary, base);
+            border-color: map.get($primary, base);
         }
     }
 }
@@ -147,7 +151,7 @@
 .cd-timeline-navigation a {
     @include center(y);
 
-    border: 2px solid darken($color-4, 10%);
+    border: 2px solid color.adjust($color-4, $lightness: -10%);
     border-radius: 50%;
     color: transparent;
     height: 34px;
@@ -186,7 +190,7 @@
     }
 
     .no-touch &:hover {
-        border-color: map-get($primary, base);
+        border-color: map.get($primary, base);
     }
 
     &.inactive {
@@ -197,7 +201,7 @@
         }
 
         .no-touch &:hover {
-            border-color: darken($color-4, 10%);
+            border-color: color.adjust($color-4, $lightness: -10%);
         }
     }
 }

package/scss/dashboard/_icons.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 // Main branding colors
 
 .add-icon {
@@ -94,7 +95,7 @@
 
     &:hover {
         i {
-            color: map-get($primary, base);
+            color: map.get($primary, base);
             font-size: 2.9rem;
             transform: scale(1.3);
         }

package/scss/dashboard/_misc.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 // Lines
 
 hr {
@@ -32,8 +33,8 @@ ul.list-inline {
     &.active,
     &.active:focus,
     &.active:hover {
-        background-color: map-get($primary, base);
-        border-color: map-get($primary, base);
+        background-color: map.get($primary, base);
+        border-color: map.get($primary, base);
     }
 }
 
@@ -75,15 +76,15 @@ ul.list-inline {
 @keyframes color {
     100%,
     0% {
-        stroke: map-get($primary, base);
+        stroke: map.get($primary, base);
     }
 
     50% {
-        stroke: map-get($warning, base);
+        stroke: map.get($warning, base);
     }
 
     100% {
-        stroke: map-get($primary, base);
+        stroke: map.get($primary, base);
     }
 }
 
@@ -123,7 +124,7 @@ input[type='file'] > input[type='button']::-moz-focus-inner {
 
 // Checkbox css
 .form-check-input:active ~ .custom-control-indicator {
-    background-color: map-get($primary, base);
+    background-color: map.get($primary, base);
 }
 
 // Drag and drop
@@ -175,11 +176,11 @@ a {
 
 // Header
 .m-subheader {
-    border-bottom: 4px solid map-get($primary, base);
+    border-bottom: 4px solid map.get($primary, base);
     padding: 0;
 
     .m-section__sub {
-        background-color: map-get($primary, base);
+        background-color: map.get($primary, base);
         color: rgb(255 255 255);
         font-size: 16px;
         margin: 0;
@@ -195,11 +196,11 @@ a {
 
     .active {
         a {
-            background-color: map-get($primary, base);
+            background-color: map.get($primary, base);
 
             &:focus,
             &:hover {
-                background-color: map-get($primary, base);
+                background-color: map.get($primary, base);
             }
         }
     }

package/scss/dashboard/_palette.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+@use 'sass:map';
 // ================================================================================================
 //   File Name: pallette
 //   Description: Custom color system styles, includes background, border and text colors
@@ -5,28 +7,26 @@
 //  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
 //  ================================================================================================
 
-@import '../dashboard/mixins/colors';
+@use '../dashboard/mixins/colors' as *;
+@use '../variables/app-colors-variables' as appColors;
 
 // usage: color("name_of_color", "type_of_color")
-// to avoid to repeating map-get($colors, ...)
+// to avoid to repeating map.get($colors, ...)
 @function color-function($color, $type) {
-    @if map-has-key($colors, $color) {
-        $curr_color: map-get($colors, $color);
+    @if map.has-key(appColors.$colors, $color) {
+        $curr_color: map.get(appColors.$colors, $color);
 
-        @if map-has-key($curr_color, $type) {
-            @return map-get($curr_color, $type);
+        @if map.has-key($curr_color, $type) {
+            @return map.get($curr_color, $type);
         }
     }
 
     @return null;
 }
 
-// Color palettes
-@import '../variables/app-colors-variables';
-
-@each $gcolor_name, $gcolor in $gradient-colors {
-    $end-color: map-get($gcolor, end-color);
-    $start-color: map-get($gcolor, start-color);
+@each $gcolor_name, $gcolor in appColors.$gradient-colors {
+    $end-color: map.get($gcolor, end-color);
+    $start-color: map.get($gcolor, start-color);
     .#{$gcolor_name} {
         @include gradient-directional($start-color, $end-color);
     }
@@ -39,7 +39,7 @@
     }
 }
 
-@each $color_name, $color_value in $branding-colors {
+@each $color_name, $color_value in appColors.$branding-colors {
     .bg-#{$color_name} {
         background-color: $color_value !important;
 
@@ -203,7 +203,7 @@
     }
 }
 
-@each $color_name, $color in $colors {
+@each $color_name, $color in appColors.$colors {
     @each $color_type, $color_value in $color {
         @if $color_type== 'base' {
             .#{$color_name} {
@@ -220,12 +220,12 @@
                     }
                 }
                 .alert-#{$color_name} {
-                    background-color: lighten($color_value, 7%) !important;
+                    background-color: color.adjust($color_value, $lightness: 7%) !important;
                     border-color: $color_value !important;
-                    color: darken($color_value, 35%) !important;
+                    color: color.adjust($color_value, $lightness: -35%) !important;
 
                     .alert-link {
-                        color: darken($color_value, 43%) !important;
+                        color: color.adjust($color_value, $lightness: -43%) !important;
                     }
                 }
                 .border-#{$color_name} {
@@ -252,7 +252,7 @@
                     border-color: $color_value;
 
                     .panel-heading {
-                        background-color: lighten($color_value, 5%);
+                        background-color: color.adjust($color_value, $lightness: 5%);
                         border-color: $color_value;
                         color: rgb(255 255 255);
                     }
@@ -271,7 +271,7 @@
                     color: rgb(255 255 255) !important;
 
                     &:focus {
-                        background-color: darken($color_value, 5%) !important;
+                        background-color: color.adjust($color_value, $lightness: -5%) !important;
                         box-shadow: transparent !important;
                         color: rgb(255 255 255) !important;
                     }
@@ -282,7 +282,7 @@
                     }
 
                     &:hover {
-                        background-color: darken($color_value, 5%) !important;
+                        background-color: color.adjust($color_value, $lightness: -5%) !important;
                         color: rgb(255 255 255) !important;
                     }
                 }
@@ -303,8 +303,11 @@
                         color: rgb(255 255 255) !important;
 
                         &.active {
-                            background-color: darken($color_value, 7%) !important;
-                            border-color: darken($color_value, 7%) !important;
+                            background-color: color.adjust(
+                                $color_value,
+                                $lightness: -7%
+                            ) !important;
+                            border-color: color.adjust($color_value, $lightness: -7%) !important;
                         }
                     }
                 }
@@ -335,7 +338,7 @@
                     }
 
                     &:hover {
-                        background-color: darken($color_value, 3%) !important;
+                        background-color: color.adjust($color_value, $lightness: -3%) !important;
                         color: rgb(255 255 255) !important;
                     }
                 }
@@ -359,7 +362,10 @@
                         }
 
                         &:hover {
-                            background-color: darken($color_value, 3%) !important;
+                            background-color: color.adjust(
+                                $color_value,
+                                $lightness: -3%
+                            ) !important;
                             color: rgb(255 255 255) !important;
                         }
                     }
@@ -395,7 +401,9 @@
             }
 
             input:focus ~ .bg-#{$color_name} {
-                box-shadow: 0 0 0 0.075rem rgb(255 255 255), 0 0 0 0.21rem $color_value !important;
+                box-shadow:
+                    0 0 0 0.075rem rgb(255 255 255),
+                    0 0 0 0.21rem $color_value !important;
             }
         } @else {
             .#{$color_name}.#{$color_type} {
@@ -436,7 +444,9 @@
             }
 
             input:focus ~ .bg-#{$color_name} {
-                box-shadow: 0 0 0 0.075rem rgb(255 255 255), 0 0 0 0.21rem $color_value !important;
+                box-shadow:
+                    0 0 0 0.075rem rgb(255 255 255),
+                    0 0 0 0.21rem $color_value !important;
             }
 
             .border-#{$color_name}.border-#{$color_type} {