@agorapulse/ui-theme 0.0.3 → 1.0.0-SNAPSHOT

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

@@ -120,13 +120,19 @@
                 color: map_get($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(.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);
             }
+            &.animated ap-symbol {
+                color: map_get($colors-electric-blue, 100);
+            }
         }
     }
-    &.square {
+    &.square,
+    &.square-rounded {
         min-width: 36px;
         padding: 0;
         &.small {
@@ -139,26 +145,133 @@
             min-width: 44px;
         }
     }
+
+    &.square-rounded {
+        border-radius: 8px;
+    }
+
+    //loading
+    &.animated {
+        overflow: hidden;
+        opacity: 1;
+
+        &.circle,
+        &.square {
+            ap-symbol {
+                animation: fadeout 0.4s linear 1 forwards;
+            }
+
+            .animation {
+                position: absolute;
+                border: 2px solid transparent;
+                width: 16px;
+                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);
+                animation:
+                    spin 1s linear infinite,
+                    fadein 0.4s linear 1 forwards;
+            }
+
+            &.animation-fade-out {
+                ap-symbol {
+                    animation: fadein 0.4s linear 1 forwards;
+                }
+
+                .animation {
+                    animation:
+                        spin 1s linear infinite,
+                        fadeout 0.4s linear 1 forwards;
+                }
+            }
+        }
+
+        &:not(.circle):not(.square) .animation {
+            position: absolute;
+            bottom: 0;
+            background-color: map_get($colors-orange, 100);
+            height: 5px;
+            width: 50%;
+            border-radius: 6px;
+            animation: slide 1.2s linear infinite;
+        }
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes slide {
+        0% {
+            left: -70px;
+        }
+        100% {
+            left: calc(100%);
+        }
+    }
+
+    @keyframes fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeout {
+        0% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
 }
 
 @mixin flat-button-color($background-color, $hover-background-color, $active-background-color) {
-    background-color: $background-color;
-    color: #fff;
-    ap-symbol {
-        color: #fff!important;
-    }
-    &:hover, &.force-hover {
-        background-color: $hover-background-color;
+    &:not([disabled]) {
+        background-color: $background-color;
+        color: #fff;
+
+        ap-symbol {
+            color: #fff !important;
+        }
+
+        &:hover,
+        &.force-hover {
+            background-color: $hover-background-color;
+        }
+
+        &:active {
+            background-color: $active-background-color;
+        }
     }
-    &:active {
+    &.animated {
         background-color: $active-background-color;
+        &:not(.circle):not(.square) .animation {
+            background-color: $background-color;
+        }
+        &.circle .animation,
+        &.square .animation {
+            border-top-color: white;
+            border-right-color: white;
+        }
     }
 }
 
 button.mat-flat-button {
     @extend %ap-button;
     background-color: transparent;
-    &:not([disabled]):hover, &.force-hover {
+    &:not([disabled]):hover,
+    &.force-hover {
         background-color: map_get($colors-grey, 5);
         &.active {
             background-color: map_get($colors-electric-blue, 10);
@@ -189,47 +302,72 @@ button.mat-flat-button {
         background-color: map_get($colors-grey, 20);
         color: #fff;
     }
-    &.mat-accent:not([disabled]) {
-        @include flat-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 85), map_get($colors-electric-blue, 60));
+    &.mat-accent {
+        @include flat-button-color(
+            map_get($colors-electric-blue, 100),
+            map_get($colors-electric-blue, 85),
+            map_get($colors-electric-blue, 60)
+        );
     }
-    &.mat-primary:not([disabled]) {
+    &.mat-primary {
         @include flat-button-color(map_get($colors-orange, 100), map_get($colors-orange, 85), map_get($colors-orange, 60));
     }
-    &.mat-success:not([disabled]) {
+    &.mat-success {
         @include flat-button-color(map_get($colors-green, 100), map_get($colors-green, 85), map_get($colors-green, 60));
     }
-    &.mat-warn:not([disabled]) {
+    &.mat-warn {
         @include flat-button-color(map_get($colors-red, 100), map_get($colors-red, 85), map_get($colors-red, 60));
     }
     // Social networks
-    &.mat-facebook:not([disabled]) {
+    &.mat-facebook {
         @include flat-button-color($color-facebook, $color-facebook, $color-facebook);
     }
-    &.mat-instagram:not([disabled]) {
+    &.mat-instagram {
         @include flat-button-color($color-instagram, $color-instagram, $color-instagram);
     }
-    &.mat-linkedin:not([disabled]) {
+    &.mat-linkedin {
         @include flat-button-color($color-linkedin, $color-linkedin, $color-linkedin);
     }
-    &.mat-twitter:not([disabled]) {
+    &.mat-twitter {
         @include flat-button-color($color-twitter, $color-twitter, $color-twitter);
     }
-    &.mat-youtube:not([disabled]) {
+    &.mat-youtube {
         @include flat-button-color($color-youtube, $color-youtube, $color-youtube);
     }
-    &.mat-google:not([disabled]) {
+    &.mat-google {
         @include flat-button-color($color-google, $color-google, $color-google);
     }
 }
 
 @mixin stroked-button-color($color, $border-color, $hover-border-color) {
-    color: $color;
-    border-color: $border-color;
-    &:hover, &.force-hover {
-        border-color: $hover-border-color;
+    &:not([disabled]) {
+        color: $color;
+        border-color: $border-color;
+
+        &:hover,
+        &.force-hover {
+            border-color: $hover-border-color;
+        }
+
+        &:active {
+            border-color: $color;
+        }
     }
-    &:active {
+    &.animated {
+        color: $color;
         border-color: $color;
+        &:not(.circle):not(.square) .animation {
+            bottom: -1px;
+            background-color: $color;
+        }
+        &.circle,
+        &.square {
+            border: none;
+            .animation {
+                border-top-color: $color;
+                border-right-color: $color;
+            }
+        }
     }
 }
 @mixin ghost-button-color($color, $hover-background-color, $active-background-color) {
@@ -239,7 +377,8 @@ button.mat-flat-button {
     ap-symbol {
         color: $color;
     }
-    &:hover, &.force-hover {
+    &:hover,
+    &.force-hover {
         background-color: $hover-background-color;
     }
     &:active {
@@ -258,7 +397,8 @@ button.mat-stroked-button {
         ap-symbol {
             color: map_get($colors-grey, 60);
         }
-        &:hover, &.force-hover {
+        &:hover,
+        &.force-hover {
             background-color: map_get($colors-grey, 10);
         }
         &:active {
@@ -269,6 +409,40 @@ button.mat-stroked-button {
             color: map_get($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);
+        position: relative;
+
+        &:after {
+            display: block;
+            position: absolute;
+            right: -6px;
+            top: -6px;
+            height: 16px;
+            width: 16px;
+            background-color: white;
+            border-radius: 200px;
+            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);
+        }
+        &:focus-visible {
+            background-color: map_get($colors-purple, 20);
+            border: 1px solid map_get($colors-purple, 20);
+            box-shadow:
+                0 0 0 1px $color-white,
+                0 0 0 3px map_get($colors-electric-blue, 100);
+        }
+        &:active {
+            background: map_get($colors-purple, 40);
+            border: 1px solid map_get($colors-purple, 60);
+        }
+    }
+
     @extend %ap-button;
     &.background-grey {
         background-color: $color-grey-background;
@@ -276,13 +450,15 @@ button.mat-stroked-button {
     &.background-white {
         background-color: $color-white;
     }
-    &:not([disabled]) {
+    &:not([disabled]),
+    &:not(.locked) {
         border-color: map_get($colors-grey, 20);
         &.active {
-            border-color: map_get($colors-electric-blue, 40);
+            border-color: map_get($colors-electric-blue, 100);
         }
     }
-    &:not([disabled]):hover, &.force-hover {
+    &:not([disabled]):hover,
+    &.force-hover {
         border-color: map_get($colors-grey, 40);
         &.active {
             border-color: map_get($colors-electric-blue, 85);
@@ -300,16 +476,20 @@ button.mat-stroked-button {
         color: map_get($colors-grey, 20);
     }
 
-    &.mat-accent:not([disabled]) {
-        @include stroked-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 60), map_get($colors-electric-blue, 85));
-    }
-    &.mat-primary:not([disabled]) {
+    &.mat-accent {
+        @include stroked-button-color(
+            map_get($colors-electric-blue, 100),
+            map_get($colors-electric-blue, 60),
+            map_get($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));
     }
-    &.mat-success:not([disabled]) {
+    &.mat-success {
         @include stroked-button-color(map_get($colors-green, 100), map_get($colors-green, 60), map_get($colors-green, 85));
     }
-    &.mat-warn:not([disabled]) {
+    &.mat-warn {
         @include stroked-button-color(map_get($colors-red, 100), map_get($colors-red, 60), map_get($colors-red, 85));
     }
     &.mat-warn.ghost {
@@ -333,7 +513,11 @@ button.mat-stroked-button {
         }
     }
     &.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));
+        @include ghost-button-color(
+            map_get($colors-electric-blue, 100),
+            map_get($colors-electric-blue, 60),
+            map_get($colors-electric-blue, 85)
+        );
         &[disabled] {
             background-color: transparent;
             color: map_get($colors-electric-blue, 85);
@@ -352,22 +536,22 @@ button.mat-stroked-button {
             }
         }
     }
-    &.mat-facebook:not([disabled]) {
+    &.mat-facebook {
         @include stroked-button-color($color-facebook, $color-facebook, 'none');
     }
-    &.mat-instagram:not([disabled]) {
+    &.mat-instagram {
         @include stroked-button-color($color-instagram, $color-instagram, 'none');
     }
-    &.mat-linkedin:not([disabled]) {
+    &.mat-linkedin {
         @include stroked-button-color($color-linkedin, $color-linkedin, 'none');
     }
-    &.mat-twitter:not([disabled]) {
+    &.mat-twitter {
         @include stroked-button-color($color-twitter, $color-twitter, 'none');
     }
-    &.mat-youtube:not([disabled]) {
+    &.mat-youtube {
         @include stroked-button-color($color-youtube, $color-youtube, 'none');
     }
-    &.mat-google:not([disabled]) {
+    &.mat-google {
         @include stroked-button-color($color-google, $color-google, 'none');
     }
 }
@@ -384,7 +568,6 @@ button.mat-stroked-button {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
             width: 40px;
-
         }
     }
 }
@@ -402,7 +585,8 @@ button.mat-stroked-button {
     ap-symbol {
         color: $text-color !important;
     }
-    &:hover, &.force-hover {
+    &:hover,
+    &.force-hover {
         cursor: pointer;
         background-color: $hover-background-color;
     }
@@ -418,7 +602,12 @@ 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));
+    @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)
+    );
 
     &.ap-one-line {
         @include crop-text();
@@ -426,7 +615,12 @@ 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));
+    @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)
+    );
 
     &.ap-one-line {
         @include crop-text();

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

@@ -6,26 +6,27 @@
     margin-top: $padding-l;
     padding: $padding-l;
 
-    &[fxLayout] {
+    &.ap-space-between {
         margin-left: -$padding-l;
         margin-right: -$padding-l;
+        justify-content: space-between;
     }
 
-    [fxFlex]:first-child {
+    div:first-child {
         margin-left: $padding-l;
     }
 
-    [fxFlex]:last-child {
+    div:last-child {
         margin-right: $padding-l;
     }
 }
 
 .dark-backdrop {
-    background: rgba(0, 0, 0, .75);
+    background: rgba(0, 0, 0, 0.75);
 }
 
 .white-backdrop {
-    background: rgba(255, 255, 255, .75);
+    background: rgba(255, 255, 255, 0.75);
 }
 
 .full-screen-modal {

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

@@ -1,3 +1,5 @@
+@import '../variables';
+
 .mat-accordion {
     .mat-expansion-panel-spacing {
         margin: 0;
@@ -6,16 +8,13 @@
     .mat-action-row {
         background-color: $color-grey-white;
         padding: $padding-l;
-        &[fxLayout] {
-            margin-left: -$padding-l;
-            margin-right: -$padding-l;
-        }
-        [fxFlex]:first-child {
-            margin-left: $padding-l;
+        &.ap-space-between {
+            justify-content: space-between;
         }
-        [fxFlex]:last-child {
-            margin-right: $padding-l;
+        div {
+            button {
+                margin: 0;
+            }
         }
     }
-
 }

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

@@ -1,11 +1,11 @@
 @import '../variables';
 
-.mat-list-option {
-    .mat-pseudo-checkbox {
+.mat-mdc-list-option {
+    .mat-mdc-pseudo-checkbox {
         border-color: $color-silver;
         border-radius: $border-radius;
         border-width: 1px;
-        &.mat-pseudo-checkbox-checked {
+        &.mat-mdc-pseudo-checkbox-checked {
             background: $color-success;
             &::after {
                 left: 2px;
@@ -14,6 +14,6 @@
     }
 }
 
-.mat-list-base {
+.mat-mdc-list-base {
     padding-top: 0 !important;
 }