@agorapulse/ui-theme 20.1.4 → 20.1.6

package/assets/style/components-custom-style/_mat-button.scss

@@ -1,14 +1,15 @@
-@import '../variables';
+@use '../variables' as vars;
+@use 'sass:map';
 
 %ap-button {
-    color: map_get($colors-grey, 80);
+    color: map.get(vars.$colors-grey, 80);
     font-weight: bold;
     min-width: 100px;
     line-height: 16px;
-    padding: 10px $padding-m;
+    padding: 10px vars.$padding-m;
     height: 36px;
     &.active {
-        color: map_get($colors-electric-blue, 100);
+        color: map.get(vars.$colors-electric-blue, 100);
     }
 
     .mat-button-wrapper {
@@ -18,10 +19,10 @@
         ap-symbol {
             display: inline-block;
             &.left-symbol {
-                margin-right: $padding-s;
+                margin-right: vars.$padding-s;
             }
             &.right-symbol {
-                margin-left: $padding-s;
+                margin-left: vars.$padding-s;
             }
             height: 16px;
             width: 16px;
@@ -51,15 +52,15 @@
         font-size: 12px;
         line-height: 12px;
         height: 28px;
-        padding: $padding-s;
+        padding: vars.$padding-s;
         ap-symbol {
             height: 12px;
             width: 12px;
             &.left-symbol {
-                margin-right: $padding-sl;
+                margin-right: vars.$padding-sl;
             }
             &.right-symbol {
-                margin-left: $padding-sl;
+                margin-left: vars.$padding-sl;
             }
         }
     }
@@ -67,7 +68,7 @@
         font-size: 14px;
         line-height: 14px;
         height: 32px;
-        padding: 9px $padding-ml;
+        padding: 9px vars.$padding-ml;
         ap-symbol {
             height: 14px;
             width: 14px;
@@ -83,15 +84,15 @@
         font-size: 16px;
         line-height: 16px;
         height: 44px;
-        padding: 14px $padding-l;
+        padding: 14px vars.$padding-l;
         ap-symbol {
             height: 16px;
             width: 16px;
             &.left-symbol {
-                margin-right: $padding-s;
+                margin-right: vars.$padding-s;
             }
             &.right-symbol {
-                margin-left: $padding-s;
+                margin-left: vars.$padding-s;
             }
         }
     }
@@ -117,17 +118,17 @@
         }
         &.active {
             ap-symbol {
-                color: map_get($colors-electric-blue, 100);
+                color: map.get(vars.$colors-electric-blue, 100);
             }
         }
         &:not(.mat-accent):not(.mat-primary):not(.mat-success):not(.mat-warn):not(.mat-secondary):not(.mat-facebook):not(
                 .mat-instagram
             ):not(.mat-linkedin):not(.mat-twitter):not(.mat-youtube):not(.active):not(.locked) {
             ap-symbol {
-                color: map_get($colors-grey, 60);
+                color: map.get(vars.$colors-grey, 60);
             }
             &.animated ap-symbol {
-                color: map_get($colors-electric-blue, 100);
+                color: map.get(vars.$colors-electric-blue, 100);
             }
         }
     }
@@ -168,8 +169,8 @@
                 height: 16px;
                 box-sizing: border-box;
                 border-radius: 50%;
-                border-top: 2px solid map_get($colors-electric-blue, 100);
-                border-right: 2px solid map_get($colors-electric-blue, 100);
+                border-top: 2px solid map.get(vars.$colors-electric-blue, 100);
+                border-right: 2px solid map.get(vars.$colors-electric-blue, 100);
                 animation:
                     spin 1s linear infinite,
                     fadein 0.4s linear 1 forwards;
@@ -191,7 +192,7 @@
         &:not(.circle):not(.square) .animation {
             position: absolute;
             bottom: 0;
-            background-color: map_get($colors-orange, 100);
+            background-color: map.get(vars.$colors-orange, 100);
             height: 5px;
             width: 50%;
             border-radius: 6px;
@@ -272,21 +273,21 @@ button.mat-flat-button {
     background-color: transparent;
     &:not([disabled]):hover,
     &.force-hover {
-        background-color: map_get($colors-grey, 5);
+        background-color: map.get(vars.$colors-grey, 5);
         &.active {
-            background-color: map_get($colors-electric-blue, 10);
+            background-color: map.get(vars.$colors-electric-blue, 10);
         }
     }
     &:not([disabled]):active {
-        background-color: map_get($colors-grey, 10);
+        background-color: map.get(vars.$colors-grey, 10);
         &.active {
-            background-color: map_get($colors-electric-blue, 20);
+            background-color: map.get(vars.$colors-electric-blue, 20);
         }
     }
     &[disabled],
     &[disabled][disabled] {
         background: none;
-        color: map_get($colors-grey, 20);
+        color: map.get(vars.$colors-grey, 20);
     }
     &.mat-accent[disabled],
     &.mat-primary[disabled],
@@ -299,43 +300,43 @@ button.mat-flat-button {
     &.mat-twitter[disabled],
     &.mat-youtube[disabled],
     &.mat-google[disabled] {
-        background-color: map_get($colors-grey, 20);
+        background-color: map.get(vars.$colors-grey, 20);
         color: #fff;
     }
     &.mat-accent {
         @include flat-button-color(
-            map_get($colors-electric-blue, 100),
-            map_get($colors-electric-blue, 85),
-            map_get($colors-electric-blue, 60)
+            map.get(vars.$colors-electric-blue, 100),
+            map.get(vars.$colors-electric-blue, 85),
+            map.get(vars.$colors-electric-blue, 60)
         );
     }
     &.mat-primary {
-        @include flat-button-color(map_get($colors-orange, 100), map_get($colors-orange, 85), map_get($colors-orange, 60));
+        @include flat-button-color(map.get(vars.$colors-orange, 100), map.get(vars.$colors-orange, 85), map.get(vars.$colors-orange, 60));
     }
     &.mat-success {
-        @include flat-button-color(map_get($colors-green, 100), map_get($colors-green, 85), map_get($colors-green, 60));
+        @include flat-button-color(map.get(vars.$colors-green, 100), map.get(vars.$colors-green, 85), map.get(vars.$colors-green, 60));
     }
     &.mat-warn {
-        @include flat-button-color(map_get($colors-red, 100), map_get($colors-red, 85), map_get($colors-red, 60));
+        @include flat-button-color(map.get(vars.$colors-red, 100), map.get(vars.$colors-red, 85), map.get(vars.$colors-red, 60));
     }
     // Social networks
     &.mat-facebook {
-        @include flat-button-color($color-facebook, $color-facebook, $color-facebook);
+        @include flat-button-color(vars.$color-facebook, vars.$color-facebook, vars.$color-facebook);
     }
     &.mat-instagram {
-        @include flat-button-color($color-instagram, $color-instagram, $color-instagram);
+        @include flat-button-color(vars.$color-instagram, vars.$color-instagram, vars.$color-instagram);
     }
     &.mat-linkedin {
-        @include flat-button-color($color-linkedin, $color-linkedin, $color-linkedin);
+        @include flat-button-color(vars.$color-linkedin, vars.$color-linkedin, vars.$color-linkedin);
     }
     &.mat-twitter {
-        @include flat-button-color($color-twitter, $color-twitter, $color-twitter);
+        @include flat-button-color(vars.$color-twitter, vars.$color-twitter, vars.$color-twitter);
     }
     &.mat-youtube {
-        @include flat-button-color($color-youtube, $color-youtube, $color-youtube);
+        @include flat-button-color(vars.$color-youtube, vars.$color-youtube, vars.$color-youtube);
     }
     &.mat-google {
-        @include flat-button-color($color-google, $color-google, $color-google);
+        @include flat-button-color(vars.$color-google, vars.$color-google, vars.$color-google);
     }
 }
 
@@ -393,26 +394,26 @@ button.mat-flat-button {
 button.mat-stroked-button {
     &.ghost {
         border: none;
-        color: map_get($colors-grey, 80);
+        color: map.get(vars.$colors-grey, 80);
         ap-symbol {
-            color: map_get($colors-grey, 60);
+            color: map.get(vars.$colors-grey, 60);
         }
         &:hover,
         &.force-hover {
-            background-color: map_get($colors-grey, 10);
+            background-color: map.get(vars.$colors-grey, 10);
         }
         &:active {
-            background-color: map_get($colors-grey, 20);
+            background-color: map.get(vars.$colors-grey, 20);
         }
         &[disabled] {
             background-color: transparent;
-            color: map_get($colors-grey, 20);
+            color: map.get(vars.$colors-grey, 20);
         }
     }
     &.locked {
-        background-color: map_get($colors-purple, 10);
-        border: 1px solid map_get($colors-purple, 20);
-        color: map_get($colors-purple, 100);
+        background-color: map.get(vars.$colors-purple, 10);
+        border: 1px solid map.get(vars.$colors-purple, 20);
+        color: map.get(vars.$colors-purple, 100);
         position: relative;
 
         &:after {
@@ -427,132 +428,132 @@ button.mat-stroked-button {
             content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0a12 12 0 1 0 12 12A12.015 12.014 0 0 0 12 0Zm5.34 17.693a.912.912 0 0 1-1.297 1.14l-3.852-2.168a.386.387 0 0 0-.38 0L7.96 18.833a.911.911 0 0 1-1.298-1.14l1.567-3.603a.384.384 0 0 0-.083-.43l-2.83-2.787a.85.84 0 0 1 .598-1.487h3.232a.385.385 0 0 0 .351-.223l1.685-3.628a.92.92 0 0 1 1.637 0l1.684 3.628a.386.386 0 0 0 .352.223h3.23a.851.851 0 0 1 .602 1.487l-2.829 2.787a.384.384 0 0 0-.084.43l1.567 3.603Z' fill='%236554C0'/></svg>");
         }
         &:hover {
-            background-color: map_get($colors-purple, 20);
-            border: 1px solid map_get($colors-purple, 40);
+            background-color: map.get(vars.$colors-purple, 20);
+            border: 1px solid map.get(vars.$colors-purple, 40);
         }
         &:focus-visible {
-            background-color: map_get($colors-purple, 20);
-            border: 1px solid map_get($colors-purple, 20);
+            background-color: map.get(vars.$colors-purple, 20);
+            border: 1px solid map.get(vars.$colors-purple, 20);
             box-shadow:
-                0 0 0 1px $color-white,
-                0 0 0 3px map_get($colors-electric-blue, 100);
+                0 0 0 1px vars.$color-white,
+                0 0 0 3px map.get(vars.$colors-electric-blue, 100);
         }
         &:active {
-            background: map_get($colors-purple, 40);
-            border: 1px solid map_get($colors-purple, 60);
+            background: map.get(vars.$colors-purple, 40);
+            border: 1px solid map.get(vars.$colors-purple, 60);
         }
     }
 
     @extend %ap-button;
     &.background-grey {
-        background-color: $color-grey-background;
+        background-color: vars.$color-grey-background;
     }
     &.background-white {
-        background-color: $color-white;
+        background-color: vars.$color-white;
     }
     &:not([disabled]),
     &:not(.locked) {
-        border-color: map_get($colors-grey, 20);
+        border-color: map.get(vars.$colors-grey, 20);
         &.active {
-            border-color: map_get($colors-electric-blue, 100);
+            border-color: map.get(vars.$colors-electric-blue, 100);
         }
     }
     &:not([disabled]):hover,
     &.force-hover {
-        border-color: map_get($colors-grey, 40);
+        border-color: map.get(vars.$colors-grey, 40);
         &.active {
-            border-color: map_get($colors-electric-blue, 85);
+            border-color: map.get(vars.$colors-electric-blue, 85);
         }
     }
     &:not([disabled]):active {
-        border-color: map_get($colors-grey, 60);
+        border-color: map.get(vars.$colors-grey, 60);
         &.active {
-            border-color: map_get($colors-electric-blue, 100);
+            border-color: map.get(vars.$colors-electric-blue, 100);
         }
     }
     &[disabled],
     &[disabled][disabled] {
-        border-color: map_get($colors-grey, 20);
-        color: map_get($colors-grey, 20);
+        border-color: map.get(vars.$colors-grey, 20);
+        color: map.get(vars.$colors-grey, 20);
     }
 
     &.mat-accent {
         @include stroked-button-color(
-            map_get($colors-electric-blue, 100),
-            map_get($colors-electric-blue, 60),
-            map_get($colors-electric-blue, 85)
+            map.get(vars.$colors-electric-blue, 100),
+            map.get(vars.$colors-electric-blue, 60),
+            map.get(vars.$colors-electric-blue, 85)
         );
     }
     &.mat-primary {
-        @include stroked-button-color(map_get($colors-orange, 100), map_get($colors-orange, 60), map_get($colors-orange, 85));
+        @include stroked-button-color(map.get(vars.$colors-orange, 100), map.get(vars.$colors-orange, 60), map.get(vars.$colors-orange, 85));
     }
     &.mat-success {
-        @include stroked-button-color(map_get($colors-green, 100), map_get($colors-green, 60), map_get($colors-green, 85));
+        @include stroked-button-color(map.get(vars.$colors-green, 100), map.get(vars.$colors-green, 60), map.get(vars.$colors-green, 85));
     }
     &.mat-warn {
-        @include stroked-button-color(map_get($colors-red, 100), map_get($colors-red, 60), map_get($colors-red, 85));
+        @include stroked-button-color(map.get(vars.$colors-red, 100), map.get(vars.$colors-red, 60), map.get(vars.$colors-red, 85));
     }
     &.mat-warn.ghost {
-        @include ghost-button-color(map_get($colors-red, 100), map_get($colors-red, 10), map_get($colors-red, 20));
+        @include ghost-button-color(map.get(vars.$colors-red, 100), map.get(vars.$colors-red, 10), map.get(vars.$colors-red, 20));
         &[disabled] {
             background-color: transparent;
-            color: map_get($colors-red, 20);
+            color: map.get(vars.$colors-red, 20);
             ap-symbol {
-                color: map_get($colors-red, 20);
+                color: map.get(vars.$colors-red, 20);
             }
         }
     }
     &.mat-primary.ghost {
-        @include ghost-button-color(map_get($colors-orange, 100), map_get($colors-orange, 60), map_get($colors-orange, 85));
+        @include ghost-button-color(map.get(vars.$colors-orange, 100), map.get(vars.$colors-orange, 60), map.get(vars.$colors-orange, 85));
         &[disabled] {
             background-color: transparent;
-            color: map_get($colors-orange, 85);
+            color: map.get(vars.$colors-orange, 85);
             ap-symbol {
-                color: map_get($colors-orange, 85);
+                color: map.get(vars.$colors-orange, 85);
             }
         }
     }
     &.mat-accent.ghost {
         @include ghost-button-color(
-            map_get($colors-electric-blue, 100),
-            map_get($colors-electric-blue, 60),
-            map_get($colors-electric-blue, 85)
+            map.get(vars.$colors-electric-blue, 100),
+            map.get(vars.$colors-electric-blue, 60),
+            map.get(vars.$colors-electric-blue, 85)
         );
         &[disabled] {
             background-color: transparent;
-            color: map_get($colors-electric-blue, 85);
+            color: map.get(vars.$colors-electric-blue, 85);
             ap-symbol {
-                color: map_get($colors-electric-blue, 85);
+                color: map.get(vars.$colors-electric-blue, 85);
             }
         }
     }
     &.mat-success.ghost {
-        @include ghost-button-color(map_get($colors-green, 100), map_get($colors-green, 60), map_get($colors-green, 85));
+        @include ghost-button-color(map.get(vars.$colors-green, 100), map.get(vars.$colors-green, 60), map.get(vars.$colors-green, 85));
         &[disabled] {
             background-color: transparent;
-            color: map_get($colors-green, 85);
+            color: map.get(vars.$colors-green, 85);
             ap-symbol {
-                color: map_get($colors-green, 85);
+                color: map.get(vars.$colors-green, 85);
             }
         }
     }
     &.mat-facebook {
-        @include stroked-button-color($color-facebook, $color-facebook, 'none');
+        @include stroked-button-color(vars.$color-facebook, vars.$color-facebook, 'none');
     }
     &.mat-instagram {
-        @include stroked-button-color($color-instagram, $color-instagram, 'none');
+        @include stroked-button-color(vars.$color-instagram, vars.$color-instagram, 'none');
     }
     &.mat-linkedin {
-        @include stroked-button-color($color-linkedin, $color-linkedin, 'none');
+        @include stroked-button-color(vars.$color-linkedin, vars.$color-linkedin, 'none');
     }
     &.mat-twitter {
-        @include stroked-button-color($color-twitter, $color-twitter, 'none');
+        @include stroked-button-color(vars.$color-twitter, vars.$color-twitter, 'none');
     }
     &.mat-youtube {
-        @include stroked-button-color($color-youtube, $color-youtube, 'none');
+        @include stroked-button-color(vars.$color-youtube, vars.$color-youtube, 'none');
     }
     &.mat-google {
-        @include stroked-button-color($color-google, $color-google, 'none');
+        @include stroked-button-color(vars.$color-google, vars.$color-google, 'none');
     }
 }
 
@@ -576,11 +577,11 @@ button.mat-stroked-button {
     background-color: $background-color;
     color: $text-color;
     border: none;
-    border-radius: $border-radius;
+    border-radius: vars.$border-radius;
     padding: 10px 16px;
-    font-family: $font-family;
-    font-size: $font-size;
-    font-weight: $font-weight-bold;
+    font-family: vars.$font-family;
+    font-size: vars.$font-size;
+    font-weight: vars.$font-weight-bold;
 
     ap-symbol {
         color: $text-color !important;
@@ -603,10 +604,10 @@ button.mat-stroked-button {
 
 button.ap-button-secondary-orange {
     @include flat-secondary-button-color(
-        map_get($colors-orange, 100),
-        map_get($colors-orange, 10),
-        map_get($colors-orange, 20),
-        map_get($colors-orange, 40)
+        map.get(vars.$colors-orange, 100),
+        map.get(vars.$colors-orange, 10),
+        map.get(vars.$colors-orange, 20),
+        map.get(vars.$colors-orange, 40)
     );
 
     &.ap-one-line {
@@ -616,10 +617,10 @@ button.ap-button-secondary-orange {
 
 button.ap-button-secondary-blue {
     @include flat-secondary-button-color(
-        map_get($colors-electric-blue, 100),
-        map_get($colors-electric-blue, 10),
-        map_get($colors-electric-blue, 20),
-        map_get($colors-electric-blue, 40)
+        map.get(vars.$colors-electric-blue, 100),
+        map.get(vars.$colors-electric-blue, 10),
+        map.get(vars.$colors-electric-blue, 20),
+        map.get(vars.$colors-electric-blue, 40)
     );
 
     &.ap-one-line {

package/assets/style/components-custom-style/_mat-dialog.scss

@@ -1,23 +1,23 @@
-@import '../variables';
+@use '../variables' as vars;
 
 .mat-dialog-actions {
-    background-color: $color-grey-white;
-    border-top: 1px solid $color-silver;
-    margin-top: $padding-l;
-    padding: $padding-l;
+    background-color: vars.$color-grey-white;
+    border-top: 1px solid vars.$color-silver;
+    margin-top: vars.$padding-l;
+    padding: vars.$padding-l;
 
     &.ap-space-between {
-        margin-left: -$padding-l;
-        margin-right: -$padding-l;
+        margin-left: -(vars.$padding-l);
+        margin-right: -(vars.$padding-l);
         justify-content: space-between;
     }
 
     div:first-child {
-        margin-left: $padding-l;
+        margin-left: vars.$padding-l;
     }
 
     div:last-child {
-        margin-right: $padding-l;
+        margin-right: vars.$padding-l;
     }
 }
 

package/assets/style/components-custom-style/_mat-divider.scss

@@ -1,3 +1,6 @@
+@use '../variables' as vars;
+@use 'sass:map';
+
 .mat-divider {
-    border-color: map_get($colors-grey, 10);
+    border-color: map.get(vars.$colors-grey, 10);
 }

package/assets/style/components-custom-style/_mat-expansion-panel.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@use '../variables' as vars;
 
 .mat-accordion {
     .mat-expansion-panel-spacing {
@@ -6,8 +6,8 @@
     }
 
     .mat-action-row {
-        background-color: $color-grey-white;
-        padding: $padding-l;
+        background-color: vars.$color-grey-white;
+        padding: vars.$padding-l;
         &.ap-space-between {
             justify-content: space-between;
         }

package/assets/style/components-custom-style/_mat-list.scss

@@ -1,12 +1,12 @@
-@import '../variables';
+@use '../variables' as vars;
 
 .mat-mdc-list-option {
     .mat-mdc-pseudo-checkbox {
-        border-color: $color-silver;
-        border-radius: $border-radius;
+        border-color: vars.$color-silver;
+        border-radius: vars.$border-radius;
         border-width: 1px;
         &.mat-mdc-pseudo-checkbox-checked {
-            background: $color-success;
+            background: vars.$color-success;
             &::after {
                 left: 2px;
             }

package/assets/style/components-custom-style/_mat-menu.scss

@@ -1,44 +1,45 @@
-@import '../variables';
+@use '../variables' as vars;
+@use 'sass:map';
 
 .mat-mdc-menu-panel:not(.pop-menu) {
     box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
     min-width: unset !important;
     border-radius: 4px;
-    background-color: $color-white;
+    background-color: vars.$color-white;
 
     .mat-mdc-menu-item {
-        color: map_get($colors-grey, 100);
+        color: map.get(vars.$colors-grey, 100);
         height: unset;
-        padding: $padding-s $padding-m;
+        padding: vars.$padding-s vars.$padding-m;
         display: flex;
         background: none;
         min-height: unset;
 
         span {
-            line-height: $font-line-height;
-            font-size: $font-size;
+            line-height: vars.$font-line-height;
+            font-size: vars.$font-size;
             display: flex;
         }
 
         &::after {
-            color: map_get($colors-grey, 100);
+            color: map.get(vars.$colors-grey, 100);
         }
 
         &:hover:not([disabled]),
         &.mat-mdc-menu-item-highlighted:not([disabled]) {
-            background-color: map_get($colors-electric-blue, 10);
-            color: map_get($colors-electric-blue, 100);
+            background-color: map.get(vars.$colors-electric-blue, 10);
+            color: map.get(vars.$colors-electric-blue, 100);
             &::after {
-                color: map_get($colors-electric-blue, 100);
+                color: map.get(vars.$colors-electric-blue, 100);
             }
             ap-symbol .svg {
-                fill: map_get($colors-electric-blue, 100) !important;
+                fill: map.get(vars.$colors-electric-blue, 100) !important;
             }
         }
 
         ap-symbol {
-            padding-right: $padding-s;
-            color: map_get($colors-grey, 60);
+            padding-right: vars.$padding-s;
+            color: map.get(vars.$colors-grey, 60);
         }
     }
 }
@@ -88,9 +89,9 @@
         position: relative;
 
         .arrow-before {
-            background-color: $color-pale-grey;
+            background-color: vars.$color-pale-grey;
             /*border: 5px solid black;
-            border-color: transparent transparent $color-white $color-white;*/
+            border-color: transparent transparent vars.$color-white vars.$color-white;*/
             //box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.05);
             content: '';
             display: block;
@@ -131,7 +132,7 @@
             position: absolute;
             width: inherit;
             height: inherit;
-            background-color: $color-white;
+            background-color: vars.$color-white;
             content: ' ';
         }
 
@@ -168,24 +169,24 @@
 }
 
 .mat-mdc-menu-panel.button-dropdown {
-    margin-bottom: $padding-sm;
+    margin-bottom: vars.$padding-sm;
     .mat-mdc-menu-item {
         .mat-mdc-menu-item-text {
             display: flex;
             flex-direction: column;
-            font-weight: $font-weight-bold;
+            font-weight: vars.$font-weight-bold;
             width: 100%;
 
             .caption {
                 font-weight: normal;
-                color: map_get($colors-grey, 60);
+                color: map.get(vars.$colors-grey, 60);
                 margin-top: 0px;
             }
         }
 
         &:hover {
             .caption {
-                color: map_get($colors-electric-blue, 85);
+                color: map.get(vars.$colors-electric-blue, 85);
             }
         }
     }