@kms-ngx-ui/presentational 0.0.5 → 0.0.7

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

@@ -1,59 +1,59 @@
-@mixin generic-dialog-component-theme($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,149 +1,149 @@
-
-@import '../../../styles/mixins.scss';
-@mixin icon-theme($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);
-        }
-    }
+
+@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);
+        }
+    }
 }

package/src/lib/ui/image-slider/image-slider.component.scss

@@ -0,0 +1,220 @@
+@mixin image-slider-theme() {
+    // TODO
+    $responsive-breakpoint1: 996px;
+    $responsive-breakpoint-1024: 1024px;
+    $responsive-breakpoint2: 1200px;
+    $responsive-breakpoint3: 1400px;
+    $color-secondary:        var(--primaryColor);
+    $color-disabled:         var(--gray04);
+    $color-image-background: white;
+    $img-size: 796px; 
+
+    .all-wrapper{
+        position: relative;
+
+        .default-image {
+
+            visibility: hidden;
+        }
+    }
+
+    .swiper-bigImage{
+        @include backgroundContains();
+        background-color: $color-image-background;
+
+        width: $img-size;
+        height: auto;
+        padding-top: 75%; /* 4:3 Aspect Ratio */
+        position: relative;
+        
+        @media (max-width: $responsive-breakpoint3) {
+            width: 100%;
+        }
+    }
+
+    .swiper-holder{
+        margin: 18px 0;
+        width: 796px;
+        @media (max-width: $responsive-breakpoint3) {
+            width: 100%;
+        }
+
+        .swiper-button{
+            &-next, &-prev,
+            &-next2, &-prev2{
+                position: absolute;
+                width: 10px;
+                height: 20px;
+                top: calc((100% - 140px) / 2);
+                transform: translate(0, 50%);
+                color: $color-secondary;
+                &.swiper-button-disabled{
+                    display: none;
+                }
+                &:after{
+                    font-size: 20px;
+                }
+            }
+        
+            &-next,
+            &-next2{
+                right: 20px;
+            }
+            &-prev,
+            &-prev2{
+                left: 20px;
+            }
+
+            &-next, &-prev{
+                top: auto;
+                bottom: calc((140px)/ 2);
+            }
+
+            @media (max-width: $responsive-breakpoint2) {
+                &-next{
+                    right: 20px;
+                }
+                &-prev{
+                    left: 20px;
+                }
+            }
+            @media (max-width: $responsive-breakpoint-1024) {
+
+                &-next{
+                    right: 0;
+                }
+                &-prev{
+                    left: 0;
+                }
+            }
+            @media (max-width: $responsive-breakpoint1) {
+                &-next{
+                    right: 10vw;
+                }
+                &-prev{
+                    left: 10vw;
+                }
+            }
+        }
+    }
+
+        swiper{
+            width: 560px;
+            margin: 0 auto;
+            position: relative;
+            @media (max-width: $responsive-breakpoint-1024) {
+                width: 400px;
+            }
+            @media (max-width: $responsive-breakpoint1) {
+                width: 60vw;
+            }
+
+            .swiper-wrapper {
+                display: flex;
+
+                .swiper-slide {
+                    flex-basis: 0;
+                    position: relative;
+
+                    .img {
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        background-position: center center;
+
+                        width: 158px;
+                        height: auto;
+                        padding-top: 75%; /* 4:3 Aspect Ratio */
+                        
+                        cursor: pointer;
+                        border: 1px solid #dbdbda;
+                        border-radius: var(--defaultBorderRadius);
+                        @media (max-width: $responsive-breakpoint-1024) {
+                            width: 100px;
+                        }
+                        @media (max-width: $responsive-breakpoint1) {
+                            width: 20vw;
+                        }
+                        &.active{
+                            border: 1px solid var(--grey08);
+                            background-color: var(--gray06);
+                        }
+                    }
+
+                    button {
+                        position: absolute;
+                        width: 15px;
+                        height: 15px;
+                        right: 5px;
+                        top: 5px;
+                        background: none;
+
+                        .icon{
+                            width: 15px !important;
+                            height: 15px !important;
+                            
+                            svg {
+                                width: 15px !important;
+                                height: 15px !important;
+                            }
+                        }
+                    }
+                }
+                .cdk-drag-preview {
+                    box-sizing: border-box;
+                    border-radius: var(--defaultBorderRadius);
+                    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+                }
+        
+                .cdk-drag-placeholder {
+                    opacity: 0.3;
+                    border: 1px solid var(--grey07);
+                    background-color: var(--gray05);
+                }
+        
+                .cdk-drag-animating {
+                    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+                }
+        
+                .swiper-slide:first-child:not(.cdk-drag-disabled)
+                {
+                    .img {
+                        border: solid var(--primaryColor);
+                        border-radius: 8px;
+                    }
+
+                    .default-image {
+                        visibility: visible !important;
+                        text-align: center;
+                        font: normal normal normal 14px/25px var(--fontName-text03);
+                        letter-spacing: 0.22px;
+                        color: var(--gray04);;
+                        opacity: 1;
+                    }
+                }
+        
+                .swiper-wrapper.cdk-drop-list-dragging .swiper-slide:not(.cdk-drag-placeholder) {
+                    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+                }
+            }
+
+            .swiper-container {
+                width: 100%;
+                overflow-y: hidden;
+                overflow-x: hidden;
+            }
+        }
+
+    .cdk-drag-preview,
+    .cdk-drag-dragging {
+        &.swiper-slide {
+            .default-image{
+                visibility: hidden;
+            }
+            button {
+                visibility: hidden;
+            }
+        }
+    }
+}