@agorapulse/ui-theme 13.1.2 → 13.1.5

package/assets/style/_colors.scss

@@ -157,6 +157,12 @@ $colors-red: (
     10: #FDE7E7
 );
 
+$colors-soft-red: (
+    100: #ff5353,
+    85: #ff6d6d,
+    10: #fff9f9
+);
+
 $colors-yellow: (
     100: #FFE91F,
     85: #FFEC41,

package/assets/style/_variables.scss

@@ -71,6 +71,7 @@ $form-input-hover-border-color: map_get($colors-grey, 40);
 // Avatar
 
 $avatar-size-large: 64px;
+$avatar-size-large-normal: 56px;
 $avatar-size-normal: 48px;
 $avatar-size-medium: 40px;
 $avatar-size-medium-sm: 36px;

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

@@ -124,6 +124,9 @@
             ap-symbol {
                 color: map_get($colors-grey, 60);
             }
+            &.animated ap-symbol {
+                color: map_get($colors-electric-blue, 100);
+            }
         }
     }
     &.square, &.square-rounded {
@@ -143,19 +146,114 @@
     &.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;
+        }
     }
 }
 
@@ -193,47 +291,66 @@ button.mat-flat-button {
         background-color: map_get($colors-grey, 20);
         color: #fff;
     }
-    &.mat-accent:not([disabled]) {
+    &.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) {
@@ -304,16 +421,16 @@ button.mat-stroked-button {
         color: map_get($colors-grey, 20);
     }
 
-    &.mat-accent: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:not([disabled]) {
+    &.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 {
@@ -356,22 +473,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');
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agorapulse/ui-theme",
-  "version": "13.1.2",
+  "version": "13.1.5",
   "description": "Agorapulse UI Theme Library",
   "repository": {
     "type": "git",