@kms-ngx-ui/presentational 0.0.24 → 14.0.0

package/src/lib/ui/generic-dialog/generic-dialog.component.scss

@@ -1,59 +1,59 @@
-@mixin generic-dialog-component-theme() {
-    .mat-dialog-container {
-        padding: 44px 40px;
-        width: 560px !important;
-
-        .mat-dialog-title {
-            height: 24px !important;
-            padding-bottom: 20px;
-            padding-left: 24px;
-            padding-top: 20px;
-
-            h3 {
-                margin: 0;
-            }
-        }
-
-        .mat-dialog-content {
-            margin: 0;
-        }
-
-        .custom-dialog-actions {
-            align-items: center;
-            display: flex;
-            height: 64px;
-            justify-content: flex-end;
-            padding-right: 24px;
-
-            button:first-of-type {
-                margin-right: 8px;
-            }
-        }
-
-        .dialog-col {
-            padding-top: 0;
-        }
-    }
-    .big{
-        .mat-dialog-container {
-            width: 1084px !important;
-            height: 90vh;
-            padding: 44px 40px;
-            @media (max-width: $responsive-breakpoint) {
-                padding: 10px 10px;
-            }
-        }
-    }
-    .middle{
-        .mat-dialog-container {
-            width: 600px !important;
-            height: 95vh;
-        }
-    }
-    .small{
-        .mat-dialog-container {
-            width: 450px !important;
-            height: auto !important;
-        }
-    }
-}
+@mixin generic-dialog-component-theme() {
+    .mat-dialog-container {
+        padding: 44px 40px;
+        width: 560px !important;
+
+        .mat-dialog-title {
+            height: 24px !important;
+            padding-bottom: 20px;
+            padding-left: 24px;
+            padding-top: 20px;
+
+            h3 {
+                margin: 0;
+            }
+        }
+
+        .mat-dialog-content {
+            margin: 0;
+        }
+
+        .custom-dialog-actions {
+            align-items: center;
+            display: flex;
+            height: 64px;
+            justify-content: flex-end;
+            padding-right: 24px;
+
+            button:first-of-type {
+                margin-right: 8px;
+            }
+        }
+
+        .dialog-col {
+            padding-top: 0;
+        }
+    }
+    .big{
+        .mat-dialog-container {
+            width: 1084px !important;
+            height: 90vh;
+            padding: 44px 40px;
+            @media (max-width: $responsive-breakpoint) {
+                padding: 10px 10px;
+            }
+        }
+    }
+    .middle{
+        .mat-dialog-container {
+            width: 600px !important;
+            height: 95vh;
+        }
+    }
+    .small{
+        .mat-dialog-container {
+            width: 450px !important;
+            height: auto !important;
+        }
+    }
+}

package/src/lib/ui/icon/icon.component.scss

@@ -1,115 +1,149 @@
-
-@import '../../../styles/mixins.scss';
-@mixin icon-theme(){
-    .icon {
-        display: inline-block;
-        height: inherit;
-        outline-color: transparent;
-        transition: transform 0.2s ease-in-out;
-        position: relative;
-        @include iconSize(100%);
-
-        &.size{
-            &-full {
-                @include iconSize(100%);
-            }
-            &-16{
-                @include iconSize(16px);
-            }
-            &-20{
-                @include iconSize(20px);
-            }
-            &-32{
-                @include iconSize(32px);
-            }
-            &-64{
-                @include iconSize(64px);
-            }
-            &-128{
-                @include iconSize(64px);
-            }
-            &-256{
-                @include iconSize(256px);
-            }
-        }
-
-        svg, use{
-            fill: black; 
-            position: relative;
-            transform: translate(0, 0) !important;
-        }
-        
-        &_hoverable {
-            cursor: pointer;
-            &:hover,
-            &:focus {
-                svg use{
-                    fill: var(--primaryColor);
-                }
-            }
-        }
-
-        &_active {
-            cursor: pointer;
-            fill: var(--primaryColor) !important;
-
-            &:hover, &:focus {
-                fill: var(--primaryColor02) !important;
-            }
-        }
-
-        &.color{
-            &-primary svg use{
-                fill: var(--primaryColor);
-            }
-            &-accent svg use{
-                fill: var(--accentColor);
-            }
-            &-disabled svg use{
-                fill: var(--gray04);
-            }
-            &-white svg use{
-                fill: var(--white);
-            }
-            &-blackish svg use{
-                fill: var(--gray09);
-            }
-            &-warn svg use{
-                fill: #BF2F2F;
-            }
-            &-success svg use{
-                fill: #39B948;
-            }
-            &-info svg use{
-                fill: #E5C936;
-            }
-            &-grey1 svg use{
-                fill: #646260;
-            }
-            &-grey2 svg use{
-                fill: #918F8E;
-            }
-            &-grey3 svg use{
-                fill: var(--gray04);
-            }
-            &-grey4 svg use{
-                fill: #E4E4E4;
-            }
-            &-grey5 svg use{
-                fill: #F2F2F2;
-            }
-            &-grey6 svg use{
-                fill: var(--gray07);
-            }
-            &-inactive{
-                fill: #bdbcbb;
-            }
-        }
-
-        // IE 11 with win7 fix that caused an application freeze.
-        svg use {
-            pointer-events: none;
-        }
-
-    }
+
+@import '../../../styles/mixins.scss';
+@mixin icon-theme(){
+    .icon {
+        display: inline-block;
+        height: inherit;
+        outline-color: transparent;
+        transition: transform 0.2s ease-in-out;
+        position: relative;
+        @include iconSize(100%);
+
+        &.size{
+            &-full {
+                @include iconSize(100%);
+            }
+            &-16{
+                @include iconSize(16px);
+            }
+            &-20{
+                @include iconSize(20px);
+            }
+            &-32{
+                @include iconSize(32px);
+            }
+            &-64{
+                @include iconSize(64px);
+            }
+            &-128{
+                @include iconSize(64px);
+            }
+            &-256{
+                @include iconSize(256px);
+            }
+        }
+
+        svg, use{
+            fill: black; 
+            position: relative;
+            transform: translate(0, 0) !important;
+        }
+        
+        &_hoverable {
+            cursor: pointer;
+            &:hover,
+            &:focus {
+                svg use{
+                    fill: var(--primaryColor);
+                }
+            }
+        }
+
+        &_active {
+            cursor: pointer;
+            fill: var(--primaryColor) !important;
+
+            &:hover, &:focus {
+                fill: var(--primaryColor02) !important;
+            }
+        }
+
+        &.color{
+            &-primary svg use{
+                fill: var(--primaryColor);
+            }
+            &-secondary svg use{
+                fill: var(--primaryColor);
+            }
+            &-disabled svg use{
+                fill: var(--gray04);
+            }
+            &-white svg use{
+                fill: var(--white);
+            }
+            &-blackish svg use{
+                fill: var(--gray09);
+            }
+            &-warn svg use{
+                fill: #BF2F2F;
+            }
+            &-success svg use{
+                fill: #39B948;
+            }
+            &-info svg use{
+                fill: #E5C936;
+            }
+            &-grey1 svg use{
+                fill: #646260;
+            }
+            &-grey2 svg use{
+                fill: #918F8E;
+            }
+            &-grey3 svg use{
+                fill: var(--gray04);
+            }
+            &-grey4 svg use{
+                fill: #E4E4E4;
+            }
+            &-grey5 svg use{
+                fill: #F2F2F2;
+            }
+            &-grey6 svg use{
+                fill: var(--gray07);
+            }
+            &-inactive{
+                fill: #bdbcbb;
+            }
+        }
+
+        // IE 11 with win7 fix that caused an application freeze.
+        svg use {
+            pointer-events: none;
+        }
+
+        &.is-rotating45 {
+            animation-name: spinanimation;
+            animation-duration: 3000ms;
+            transform: rotate(45deg);
+        }
+    
+        &.is-rotating90 {
+            animation-name: spinanimation;
+            animation-duration: 3000ms;
+            transform: rotate(90deg);
+        }
+    
+        &.is-rotating180 {
+            animation-name: spinanimation180;
+            animation-duration: 3000ms;
+        }
+    
+        &.is-rotating45Anti {
+            animation-name: spinanimation;
+            animation-duration: 3000ms;
+            transform: rotate(-45deg);
+        }
+    
+        &.is-rotating90Anti {
+            animation-name: spinanimation;
+            animation-duration: 3000ms;
+            transform: rotate(-90deg);
+        }
+    
+        &.is-rotating180Anti {
+            animation-name: spinanimation;
+            animation-duration: 3000ms;
+            transform: rotate(-180deg);
+        }
+    }
 }