@gudhub/ssg-web-components-library 1.0.0

package/src/components/header/header.scss

@@ -0,0 +1,556 @@
+.shadow {
+    position: fixed;
+    top: 0;
+    left: -200%;
+    background: rgba(0,0,0,0);
+    width: 100%;
+    height: 100%;
+    z-index: 11;
+    transition: background .5s ease;    
+}
+header {
+    background-color: var(--primary-bg-color);
+    height: 90px;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 15;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    transition: all .2s ease;
+    .header_right {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+        .btn {
+            padding: 16px 25px;
+            height: 52px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .btn.empty:hover {
+            svg {
+                path {
+                    fill: #FFF;
+                }
+            }
+        }
+    }
+    .popup_shadow.show_shadow {
+        opacity: 1;
+        pointer-events: all;
+    }
+    .popup_shadow {
+        position: fixed;
+        z-index: 5;
+        top: 0;
+        left: 0;
+        background: rgba(0,0,0,.5);
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: all .4s ease;
+    }
+    .container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 100%;
+    }
+    .header_center {
+        height: 100%;
+    }
+    .logo {
+        max-width: 160px;
+        min-width: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .mobileRight {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+    }
+   
+    nav {
+        height: 100%;
+        ul {
+            height: 100%;
+            list-style: none;
+            display: flex;
+            align-items: center;
+            li {
+                position: relative;
+                height: 100%;
+                &:last-child {
+                    margin-right: 0;
+                }
+                &.megamenu {
+                    & > a, & > span {
+                        cursor: pointer;
+                        &::before {
+                            content: "";
+                            position: absolute;
+                            top: calc(50% - 2px);
+                            right: 10px;
+                            width: 10px;
+                            height: 10px;
+                            transition: all 0.2s ease;
+                            background-repeat: no-repeat;
+                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M13 1.5L7 7.5L1 1.5' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E");
+                            background-size: contain;
+                        }
+                    }
+                }
+                a, span {
+                    padding: 0 25px;
+                    position: relative;
+                    white-space: nowrap;
+                    font-weight: 500;
+                    font-size: 16px;
+                    line-height: 25px;
+                    color: #fff;
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    transition: all .2s ease;
+                }
+                &.menu__item {
+                    a {
+                        .arrowIcon {
+                            margin-top: 3px;
+                            margin-left: 5px;
+                        }
+                    }
+                    a, span {
+                        &:hover {
+                            text-shadow: .5px 0 0 #fff;
+                            &::after {
+                                width: calc(100% - 50px);
+                            }
+                        }
+                        &::after {
+                            content: '';
+                            position: absolute;
+                            bottom: 32px;
+                            left: 25px;
+                            width: 0;
+                            height: 1px;
+                            background-color: var(--primary-color);
+                            transition: all .2s ease;
+                        }
+                    }
+                }
+                .child {
+                    a:after {
+                        content: none;
+                    }
+                }
+                .megamenu_wrapper {
+                    border: 0px solid var(--block-secondary-border-color);
+                    width: 600px;
+                    transition: all .2s ease;
+                    max-height: 0;
+                    position: absolute;
+                    z-index: 12;
+                    height: 100%;
+                    top: 90px;
+                    left: -125px;
+                    background-color: var(--block-secondary-bg-color);
+                    overflow: hidden;
+                    padding: 0 40px;
+                    border-radius: 30px;
+                }
+                .childs_wrapper {
+                    ul {
+                        height: auto;
+                    }
+                    .child {
+                        flex-wrap: wrap;
+                        align-items: flex-start;
+                        li {
+                            margin-right: 0;
+                            width: 50%;
+                        }
+                        a, span {
+                            font-size: 16px;
+                            line-height: 22px;
+                            color: var(--block-secondary-text-color);
+                            padding: 10px;
+                            transition: all .2s ease;
+                            &:hover {
+                                text-shadow: .5px 0 0 var(--block-secondary-text-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// .scrolled, .active {
+//     .header {
+//         margin-top: 0;
+//         border-bottom: 1px solid #F0F0F0;
+//         background: #FFF;
+//         height: 80px;
+//         .header__wrapper {
+//             height: 80px;
+//         }
+//         nav ul li .megamenu_wrapper {
+//             top: 80px;
+//         }
+//     }
+//     header nav ul li.menu__item {
+//         a::after, span::after {
+//             bottom: 28px;
+//         }
+//     }
+// }
+
+// [data-light-letters] header {
+//     nav ul li {
+//         a, span {
+//             color: #fff;
+//             &:hover {
+//                 text-shadow: 0.5px 0 0 #fff;
+//             }
+//         }
+//         &.megamenu > {
+//             a::before, span::before {
+//                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M13 1.5L7 7.5L1 1.5' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E")
+//             }
+//         }
+//     }
+//     .hamburger {
+//         &::before, & > div, &::after {
+//             background: #fff;
+//         }
+//     }
+//     .has_child .megamenu .menu_title {
+//         color: #282828;
+//     }
+//     .header__logo svg path {
+//         fill: #fff;
+//     }
+// }
+// [data-light-letters] header {
+//     .white_logo {
+//         display: block;
+//     }
+//     .logo {
+//         display: none;
+//     }
+// }
+// .scrolled[data-light-letters] header {
+//     .white_logo {
+//         display: none;
+//     }
+//     .logo {
+//         display: block;
+//     }
+//     nav ul li {
+//         a, span {
+//             color: #151515;
+//             &:hover {
+//                 text-shadow: 0.5px 0 0 #151515;
+//             }
+//         }
+//         &.megamenu > {
+//             a::before, span::before {
+//                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M13 1.5L7 7.5L1 1.5' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E")
+//             }
+//         }
+//     }
+//     .hamburger {
+//         &::before, & > div, &::after {
+//             background: #151515;
+//         }
+//     }
+// }
+// .active[data-light-letters] header {
+//     .white_logo {
+//         display: none;
+//     }
+//     .logo {
+//         display: block;
+//     }
+//     nav ul li {
+//         a, span {
+//             color: #151515;
+//             &:hover {
+//                 text-shadow: 0.5px 0 0 #151515;
+//             }
+//         }
+//         &.megamenu > {
+//             a::before, span::before {
+//                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M13 1.5L7 7.5L1 1.5' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E")
+//             }
+//         }
+//     }
+//     .hamburger {
+//         &::before, & > div, &::after {
+//             background: #151515;
+//         }
+//     }
+// }
+
+// .scrolled[data-light-letters] header {
+//     .header__menu li, .header__menu li a, .header__menu li > div {
+//         color: #282828;
+//     }
+//     .header__logo svg path {
+//         fill: #151515;
+//     }
+// }
+
+
+.hamburger {
+    display: block;
+    position: relative;
+    z-index: 2;
+    width: 40px;
+    height: 20px;
+    transition: all .2s ease;
+    padding: 10px 0;
+    cursor: pointer;
+    &::before {
+        z-index: 3;
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 5px;
+        width: 25px;
+        height: 3px;
+        background: #fff;
+        border-radius: 100px;
+        transition: all .3s ease;
+    }
+    &::after {
+        content: "";
+        position: absolute;
+        top: calc(100% - 3px);
+        right: 20px;
+        width: 10px;
+        height: 3px;
+        background: #fff;
+        transition: all .3s ease;
+        z-index: 3;
+        border-radius: 100px;
+    }
+    & > div {
+        border-radius: 100px;
+        position: absolute;
+        top: calc(50% - 1px);
+        right: 10px;
+        width: 20px;
+        height: 3px;
+        background: #fff;
+        transition: all .5s ease;
+        opacity: 1;
+    }
+}
+@media screen and (max-width: 1250px) {
+    header nav ul li {
+        a, span {
+            padding: 0 16px;
+        }
+        &.megamenu > a::before , &.megamenu > span::before {
+            right: 0;
+        }
+    }
+}
+@media screen and (min-width: 1024px) {
+    .hamburger {
+        display: none;
+    }
+    .hamburger_wrapper {
+        display: none;
+    }
+    header {
+        nav {
+            ul {
+                li {
+                    &:hover {
+                        .megamenu_wrapper {
+                            height: 270px;
+                            border-width: 1px;
+                            padding: 30px 40px;
+                            max-height: 300px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    header nav ul li.megamenu:hover > a::before, header nav ul li.megamenu:hover > span::before {
+        transform: rotate(180deg);
+        top: calc(50% - 7px);
+    }
+}
+@media screen and (max-width: 1024px) {
+    header .container {
+        .shared_wrapper {
+            &.logo_wrapper {
+                display: flex;
+                justify-content: center;
+            }
+            &.button_wrapper {
+                display: flex;
+                justify-content: flex-end;
+            }
+        }
+    }
+    header nav ul li {
+        .megamenu_wrapper {
+            transition: all .5s ease;
+        }
+        a, span {
+            &::after {
+                content: none;
+            }
+        }
+    }
+    header nav ul li.menu__item {
+        a, span {
+            &::after {
+                content: none;
+            }
+        }
+    }
+    
+    header nav ul li .childs_wrapper {
+        background-color: transparent;
+        box-shadow: none;
+        .child a, .child span {
+            color: #fff;
+            padding-left: 10px;
+            font-size: 16px;
+        }
+    }
+    header {
+        .container {
+            position: relative;
+            justify-content: space-between;
+        }
+        .header_center {
+            position: absolute;
+            top: 80px;
+            left: -200%;
+            width: 100%;
+            max-width: 500px;
+            height: calc(100vh - 68px);
+            background: #05183A;
+            transition: all .5s ease;
+            nav {
+                padding: 20px;
+                ul {
+                    align-items: flex-start;
+                    li {
+                        height: auto;
+                        width: 100%;
+                        &.hover {
+                            .megamenu_wrapper {
+                                max-height: 1000px;
+                            }
+                        }
+                        .megamenu_wrapper {
+                            position: static;
+                            padding: 0;
+                            background-color: transparent;
+                            width: auto;
+                            box-shadow: none;
+                        }
+                        a, span {
+                            font-size: 20px;
+                            line-height: 30px;
+                            padding: 5px 0;
+                            height: auto;
+                        }
+                    }
+                }
+            }
+        }
+        
+        nav ul {
+            flex-direction: column;
+        }
+    }
+    .active {
+        .shadow {
+            background: rgba(0,0,0,.5);
+            left: 0;
+        }
+        header {
+            .header_center {
+                left: 0;
+            }
+        }
+        .hamburger {
+            height: 28px;
+            & > div {
+                opacity: 0;
+                right: 100px;
+            }
+            &::before {
+                right: 0;
+                top: calc(50% - 1px);
+                transform: rotate(-45deg);
+            }
+            &::after {
+                right: 0;
+                top: calc(50% - 1px);
+                width: 25px;
+                transform: rotate(45deg);
+            }
+        }
+    }
+    header .mobileRight {
+        width: auto;
+        gap: 20px;
+    }
+}
+@media screen and (max-width: 700px) {
+    header .header_right {
+        display: none;
+    }
+}
+@media screen and (max-width: 650px) {
+    header .header_center {
+        top: 58px;
+    }
+    header {
+        height: 60px;
+        .logo {
+            width: 100px;
+        }
+        .btn {
+            font-size: 14px;
+            line-height: 25px;
+            font-weight: 500;
+            padding: 8px 12px;
+            border-radius: 10px;
+            width: auto;
+            height: auto;
+            white-space: nowrap;
+        }
+    }
+}
+@media screen and (max-width: 400px) {
+    header .container .shared_wrapper {
+        width: auto;
+        &.logo_wrapper {
+            display: block;
+        }
+    }
+}

package/src/components/homepage-banner/config.js

@@ -0,0 +1,5 @@
+export const homepageBanner = {
+  tag: 'homepage-banner',
+  src: '@gudhub/ssg-web-component-library/src/components/homepage-banner/homepage-banner.js',
+  serverOnly: false
+}