@kms-ngx-ui/presentational 0.0.24 → 14.0.0

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

@@ -1,220 +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;
-            }
-        }
-    }
+@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;
+            }
+        }
+    }
 }

package/src/lib/ui/kms-accordion-item/kms-accordion-item.component.scss

@@ -1,95 +1,95 @@
-@mixin kms-accordion-item-theme() {
-    .accordion-item {        
-        &.showFlat{
-            background-color: transparent;
-            box-shadow: none !important;
-            border-radius: unset !important;
-            border-top: solid rgba(189, 188, 187, 0.5);
-        }
-        &.isSmall{
-            .accordion-item-header{
-                height: 42px;
-                padding-top: 0;
-                padding-bottom: 0;
-    
-                .accordion-item-title{
-                    font-size: 16px !important;
-                    font-weight: 300;
-                }  
-            
-                .accordion-item-header-icon-wrapper{
-                    kms-icon{
-                        
-                        svg{
-                            height: 16px;
-                            width: 16px;
-                        }    
-                    }
-                }
-            }
-        }
-
-        .accordion-item-header{
-            height: auto;
-            padding-top: $base-spacing-hoz;
-            padding-bottom: $base-spacing-hoz;
-
-            .accordion-item-title{
-                text-align: left;
-                font: 600 22px/38px var(--fontName-text);
-                letter-spacing: 0.53px;
-                color: var(--gray09);
-                margin: 0px;
-                
-                @media (max-width: $responsive-breakpoint) {
-                    font: 15 18px/23px var(--fontName-text);
-                    letter-spacing: 0.29px;
-                    color: var(--gray10);
-                    //height: 3em;
-                }
-
-                span{
-                    display: inline;
-
-                    @media (max-width: $responsive-breakpoint) {
-                        display: block;
-                    }
-                }
-            }  
-        
-            .accordion-item-header-icon-wrapper{
-                align-self: center;
-                
-                kms-icon{ 
-                    svg {    
-                        height: 22px;
-                        width: 22px;
-                        use{
-                            fill: var(--primaryColor);
-                        }
-                    }
-                }
-                
-                &-desktop{
-                    display: block;
-                    @media (max-width: $responsive-breakpoint) {
-                        display: none;
-                    }
-                }
-    
-                &-mobile{
-                    display: none;
-                    @media (max-width: $responsive-breakpoint) {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-
-    mat-expansion-panel-header{
-        @media (max-width: $responsive-breakpoint) {
-            height: auto !important;
-        }
-    }
-}
+@mixin kms-accordion-item-theme() {
+    .accordion-item {        
+        &.showFlat{
+            background-color: transparent;
+            box-shadow: none !important;
+            border-radius: unset !important;
+            border-top: solid rgba(189, 188, 187, 0.5);
+        }
+        &.isSmall{
+            .accordion-item-header{
+                height: 42px;
+                padding-top: 0;
+                padding-bottom: 0;
+    
+                .accordion-item-title{
+                    font-size: 16px !important;
+                    font-weight: 300;
+                }  
+            
+                .accordion-item-header-icon-wrapper{
+                    kms-icon{
+                        
+                        svg{
+                            height: 16px;
+                            width: 16px;
+                        }    
+                    }
+                }
+            }
+        }
+
+        .accordion-item-header{
+            height: auto;
+            padding-top: $base-spacing-hoz;
+            padding-bottom: $base-spacing-hoz;
+
+            .accordion-item-title{
+                text-align: left;
+                font: 600 22px/38px var(--fontName-text);
+                letter-spacing: 0.53px;
+                color: var(--gray09);
+                margin: 0px;
+                
+                @media (max-width: $responsive-breakpoint) {
+                    font: 15 18px/23px var(--fontName-text);
+                    letter-spacing: 0.29px;
+                    color: var(--gray10);
+                    //height: 3em;
+                }
+
+                span{
+                    display: inline;
+
+                    @media (max-width: $responsive-breakpoint) {
+                        display: block;
+                    }
+                }
+            }  
+        
+            .accordion-item-header-icon-wrapper{
+                align-self: center;
+                
+                kms-icon{ 
+                    svg {    
+                        height: 22px;
+                        width: 22px;
+                        use{
+                            fill: var(--primaryColor);
+                        }
+                    }
+                }
+                
+                &-desktop{
+                    display: block;
+                    @media (max-width: $responsive-breakpoint) {
+                        display: none;
+                    }
+                }
+    
+                &-mobile{
+                    display: none;
+                    @media (max-width: $responsive-breakpoint) {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+
+    mat-expansion-panel-header{
+        @media (max-width: $responsive-breakpoint) {
+            height: auto !important;
+        }
+    }
+}