@imiobe/plonetheme-smartweb-base 0.0.6 → 0.1.0

package/src/scss/_sub-sitenav.scss

@@ -4,57 +4,64 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  @media screen and (min-width:1200px) {
+
+  @media screen and (min-width: 1200px) {
     flex-direction: row;
     align-items: center;
     gap: 40px;
     background: $subsite-navbar-bg;
   }
+
   #subsite-logo {
     font-size: 24px;
     text-transform: uppercase;
     display: inline-block;
     background: $subsite-logo-background;
+
     a {
       text-decoration: none;
       color: $subsite-logo-color;
       font-weight: 500;
-      padding: 1rem 2rem 1rem 2rem;
+      padding: 1rem 2rem;
       position: relative;
-      display: block;
+      display: flex;
       align-items: center;
+      gap: 14px;
+      flex-wrap: wrap;
+
+      svg,
+      img {
+        max-width: 80px;
+        max-height: 80px;
+      }
     }
   }
 }
 
-
-div#subsite-logo img {
-  margin-right: 0.25em;
-  margin-left: -1.25rem;
-  height: 3rem;
-  margin-top: -0.5em;
-  margin-bottom: -0.5em;
-}
-
-
 // sub nav
 #subsite-navigation {
   padding: $sub-navbar-padding;
-  &>ul {
+
+  & > ul {
     width: 100%;
+
     @include media-breakpoint-up(md) {
       flex-direction: column;
       gap: 15px;
     }
+
     @include media-breakpoint-up(lg) {
       flex-direction: row;
     }
+
     @include media-breakpoint-up(xl) {
       gap: $nav-first-level-gap;
     }
+
     .index_html {
       display: none;
     }
+
     li {
       ul {
         left: 0;
@@ -74,19 +81,21 @@ div#subsite-logo img {
         display: none;
       }
 
-      &.show-nav>.has_subtree.dropdown {
+      &.show-nav > .has_subtree.dropdown {
         z-index: 1;
-        opacity: 1;
+        opacity: 100%;
         visibility: visible;
         border-radius: $nav-overlay-radius;
+
         a {
           pointer-events: initial !important;
         }
       }
-      &.show-nav>.has_subtree {
+
+      &.show-nav > .has_subtree {
         visibility: visible;
 
-        .show-nav>.dropdown {
+        .show-nav > .dropdown {
           left: 25.5em;
 
           .dropdown {
@@ -95,7 +104,7 @@ div#subsite-logo img {
         }
       }
 
-      &>.has_subtree {
+      & > .has_subtree {
         width: 21em;
         padding: 2em;
         background: #fff;
@@ -117,38 +126,42 @@ div#subsite-logo img {
       }
     }
 
-    &>li {
-      &>a {
+    & > li {
+      & > a {
         display: flex;
         align-items: center;
         padding: 0;
         color: $sub-nav-link-color;
+
         @if $nav-first-level-uppercase {
           text-transform: uppercase;
         }
+
         &:hover,
         &:focus {
-          &:before {
+          &::before {
             content: "";
             height: 2px;
             position: absolute;
             left: 0;
             background-color: $primary;
             bottom: 0;
-            transition: all .3s ease;
+            transition: all 0.3s ease;
             right: 0;
           }
         }
       }
 
-      &>.has_subtree {
+      & > .has_subtree {
         width: 25em;
+
         .close-nav {
           position: absolute;
           z-index: 99;
           top: 0;
           right: 1.5em;
           border-bottom: none !important;
+
           .close-nav-icon {
             display: block;
             width: 20px;
@@ -160,24 +173,27 @@ div#subsite-logo img {
     }
 
     div.has_subtree {
-      &>span {
+      & > span {
         color: $primary;
       }
+
       &.dropdown {
         .has_subtree .nav-link {
           &[aria-haspopup="true"] {
-            &:after {
+            &::after {
               content: $nav-overlay-next-icon;
               right: 0;
             }
+
             &:hover,
             &:focus {
-              &:after {
+              &::after {
                 content: $nav-overlay-next-icon-hover;
               }
             }
           }
         }
+
         @include media-breakpoint-up(md) {
           display: flex;
           height: 800px;
@@ -185,45 +201,54 @@ div#subsite-logo img {
           max-height: 85vh;
           flex-direction: column;
 
-          &>ul {
+          & > ul {
             overflow-y: auto;
           }
         }
+
         @include media-breakpoint-down(lg) {
           overflow: hidden;
           overflow-y: scroll;
         }
       }
+
       .close-nav .close-nav-icon {
         display: block;
         width: 20px;
         height: 20px;
         padding: 0;
-        background-image: url("../../assets/svg/close.svg");
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' aria-hidden='true' class='css-tj5bde-Svg'%3E%3Cpath d='M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z'/%3E%3C/svg%3E");
       }
     }
+
     .dropdown {
       background-color: aqua;
-      opacity: 0;
+      opacity: 0%;
       visibility: hidden;
+
       a {
         padding: 1rem 0;
         border-bottom: 1px solid #ddd;
         pointer-events: none;
       }
+
       .nav-title {
         padding: 0 !important;
+
         a {
           color: $nav-overlay-title-color;
           font-size: $nav-overlay-title-font-size;
           font-weight: $nav-overlay-title-font-weight;
+          font-family: $nav-title-font-family;
         }
       }
+
       .nav-link {
         display: flex;
         align-items: center;
         justify-content: space-between;
         color: #000;
+
         &:hover,
         &:focus {
           color: $primary;
@@ -245,14 +270,15 @@ div#subsite-logo img {
   }
 
   &.activated {
-    &>ul>li>a {
+    & > ul > li > a {
       @include media-breakpoint-up(md) {
         color: $sub-nav-link-open-color !important;
       }
     }
   }
 }
-#subsite-navigation>ul>.has_subtree.nav-item>.nav-link::after {
+
+#subsite-navigation > ul > .has_subtree.nav-item > .nav-link::after {
   content: "";
   width: 9px;
   height: 6px;
@@ -261,11 +287,11 @@ div#subsite-logo img {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
-  margin-left: .4rem;
+  margin-left: 0.4rem;
 }
 
-#portal-globalnav-wrapper #portal-globalnav>li>.has_subtree,
-#subsite-navigation #portal-globalnav>li>.has_subtree {
+#portal-globalnav-wrapper #portal-globalnav > li > .has_subtree,
+#subsite-navigation #portal-globalnav > li > .has_subtree {
   @include media-breakpoint-up(lg) {
     margin-top: 2.25rem;
   }
@@ -275,25 +301,28 @@ div#subsite-logo img {
 
 //sub site
 #subsite-navigation {
-  &>ul {
+  & > ul {
     display: flex;
-    flex-direction: column;
     flex-direction: row;
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
   }
+
   li {
     a {
       padding: 0.75rem 1rem;
     }
   }
+
   .has_subtree {
     display: block;
-    & .opener~ul {
+
+    & .opener ~ ul {
       height: auto;
     }
-    >label {
+
+    > label {
       position: absolute;
       top: 0;
       right: 0;
@@ -306,27 +335,33 @@ div#subsite-logo img {
       padding-right: 0.5em;
       text-align: center;
     }
-    &>input {
+
+    & > input {
       display: none;
     }
+
     &:hover {
-      &>ul {
-        opacity: 1;
+      & > ul {
+        opacity: 100%;
         visibility: visible;
       }
     }
-    .has_subtree:hover>ul {
+
+    .has_subtree:hover > ul {
       top: 0;
       left: 16em;
     }
   }
 }
 
-#subsite-navigation>ul li>.has_subtree.dropdown {
+#subsite-navigation > ul li > .has_subtree.dropdown {
   position: absolute;
   left: 0;
-  box-shadow: 0 1.6px 11.5px rgb(0 0 0 / 2.4%), 0 4.5px 31.9px rgb(0 0 0 / 3.5%),
-    0 10.9px 76.9px rgb(0 0 0 / 4.6%), 0 36px 255px rgb(0 0 0 / 7%);
+  box-shadow:
+    0 1.6px 11.5px rgb(0 0 0 / 2.4%),
+    0 4.5px 31.9px rgb(0 0 0 / 3.5%),
+    0 10.9px 76.9px rgb(0 0 0 / 4.6%),
+    0 36px 255px rgb(0 0 0 / 7%);
 
   .has_subtree.dropdown {
     top: 0;
@@ -344,7 +379,7 @@ div#subsite-logo img {
 @media screen and (max-width: 992px) {
   .collapse:not(.show) {
     display: block;
-    opacity: 0;
+    opacity: 0%;
     visibility: hidden;
   }
 
@@ -366,12 +401,15 @@ div#subsite-logo img {
     .has_subtree.dropdown {
       top: 0;
       width: 100vw !important;
-      box-shadow: 0 0 6.5px rgb(0 0 0 / 4.7%), 0 0 16.9px rgb(0 0 0 / 6.7%),
-        0 0 33.8px rgb(0 0 0 / 8.3%), 0 0 64.5px rgb(0 0 0 / 10.3%),
+      box-shadow:
+        0 0 6.5px rgb(0 0 0 / 4.7%),
+        0 0 16.9px rgb(0 0 0 / 6.7%),
+        0 0 33.8px rgb(0 0 0 / 8.3%),
+        0 0 64.5px rgb(0 0 0 / 10.3%),
         0 0 139px rgb(0 0 0 / 15%);
     }
 
-    #portal-globalnav>li>.nav-link {
+    #portal-globalnav > li > .nav-link {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -379,11 +417,16 @@ div#subsite-logo img {
     }
   }
 
-  .navbar-toggler[aria-expanded="true"]+#portal-globalnav-collapse {
+  .navbar-toggler[aria-expanded="true"] + #portal-globalnav-collapse {
     left: 0;
   }
 
-  #portal-globalnav-wrapper .navbar-nav li.show-nav>.has_subtree .show-nav>.dropdown {
+  #portal-globalnav-wrapper
+    .navbar-nav
+    li.show-nav
+    > .has_subtree
+    .show-nav
+    > .dropdown {
     z-index: 99;
     height: 100vh;
     background: #fff;
@@ -396,11 +439,13 @@ div#subsite-logo img {
       right: -100vw;
       left: inherit;
       height: 100vh;
-      transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64),
-        opacity 5s ease, 0.5s visibility ease;
+      transition:
+        right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64),
+        opacity 5s ease,
+        0.5s visibility ease;
     }
 
-    &.show-nav>.has_subtree.dropdown {
+    &.show-nav > .has_subtree.dropdown {
       right: 0;
       left: inherit !important;
       transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64);
@@ -415,19 +460,22 @@ div#subsite-logo img {
   #subsite-navigation {
     .has_subtree.dropdown {
       width: 100vw !important;
-      box-shadow: 0 0 6.5px rgb(0 0 0 / 4.7%), 0 0 16.9px rgb(0 0 0 / 6.7%),
-        0 0 33.8px rgb(0 0 0 / 8.3%), 0 0 64.5px rgb(0 0 0 / 10.3%),
+      box-shadow:
+        0 0 6.5px rgb(0 0 0 / 4.7%),
+        0 0 16.9px rgb(0 0 0 / 6.7%),
+        0 0 33.8px rgb(0 0 0 / 8.3%),
+        0 0 64.5px rgb(0 0 0 / 10.3%),
         0 0 139px rgb(0 0 0 / 15%);
     }
 
-    #portal-globalnav>li>.nav-link {
+    #portal-globalnav > li > .nav-link {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 0;
     }
 
-    li.show-nav>.has_subtree .show-nav>.dropdown {
+    li.show-nav > .has_subtree .show-nav > .dropdown {
       left: 0 !important;
     }
 
@@ -435,11 +483,10 @@ div#subsite-logo img {
       .has_subtree.dropdown {
         position: absolute;
         z-index: 1;
-        left: inherit;
         left: 0 !important;
       }
 
-      &.show-nav>.has_subtree.dropdown {
+      &.show-nav > .has_subtree.dropdown {
         right: 0;
         left: 5% !important;
         max-width: 90%;
@@ -447,7 +494,7 @@ div#subsite-logo img {
     }
   }
 
-  #subsite-navigation>ul {
+  #subsite-navigation > ul {
     display: flex;
     width: auto;
     flex-wrap: nowrap;
@@ -462,11 +509,12 @@ div#subsite-logo img {
 
 // mobile
 
-#subsite-navigation>ul>li>a {
+#subsite-navigation > ul > li > a {
   white-space: nowrap;
 }
+
 // SUB
 
-#subsite-navigation>ul li>.has_subtree.dropdown .has_subtree.dropdown {
+#subsite-navigation > ul li > .has_subtree.dropdown .has_subtree.dropdown {
   bottom: 0;
-}
+}

package/src/scss/_swiper.scss

@@ -16,9 +16,11 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: $swiper-background-size;
-  @include media-breakpoint-down(md){
+
+  @include media-breakpoint-down(md) {
     display: none;
   }
+
   &::after {
     display: none;
   }
@@ -29,26 +31,31 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: $swiper-background-size;
-  @include media-breakpoint-down(md){
+
+  @include media-breakpoint-down(md) {
     display: none;
   }
+
   &::after {
     display: none;
   }
 }
-@include media-breakpoint-up(lg){
-  .nb-items-batch-4{
-    .swiper-slide{
+
+@include media-breakpoint-up(lg) {
+  .nb-items-batch-4 {
+    .swiper-slide {
       max-width: 25%;
     }
   }
-  .nb-items-batch-3{
-    .swiper-slide{
+
+  .nb-items-batch-3 {
+    .swiper-slide {
       max-width: 33%;
     }
   }
-  .nb-items-batch-2{
-    .swiper-slide{
+
+  .nb-items-batch-2 {
+    .swiper-slide {
       max-width: 50%;
     }
   }
@@ -56,4 +63,4 @@
 
 .swiper-pagination-bullet-active {
   background: $swipper-bullet-color !important;
-}
+}