@imiobe/plonetheme-smartweb-base 0.0.6 → 0.1.0

package/src/scss/_sitenav.scss

@@ -1,16 +1,20 @@
 #portal-globalnav-wrapper {
   position: initial !important;
   padding: 0 !important;
-  li{
-    list-style: none!important;
+
+  li {
+    list-style: none !important;
   }
+
   @include media-breakpoint-up(lg) {
     flex: 1;
   }
+
   @include media-breakpoint-down(lg) {
-    margin: 0!important;
+    margin: 0 !important;
   }
 }
+
 #portal-globalnav {
   span {
     padding: 1rem 0;
@@ -20,265 +24,294 @@
     padding-left: 0;
   }
 
-      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;
-      }
-      .nav_index_html {
-        display: none;
-      }
-      li {
-        ul {
-          left: 0;
-          transition: ease-out 2.75s;
-        }
+  width: 100%;
 
-        a {
-          position: relative;
-          display: block;
-          padding: 0.75rem 1rem;
-          hyphens: auto;
-          text-decoration: none;
-          word-break: break-word;
-        }
+  @include media-breakpoint-up(md) {
+    flex-direction: column;
+    gap: 15px;
+  }
 
-        .opener {
-          display: none;
-        }
+  @include media-breakpoint-up(lg) {
+    flex-direction: row;
+  }
 
-        &.show-nav>.has_subtree.dropdown {
-          z-index: 1;
-          opacity: 1;
-          visibility: visible;
-          border-radius: $nav-overlay-radius;
-          a {
-            pointer-events: initial !important;
-          }
-        }
-        &.show-nav>.has_subtree {
-          visibility: visible;
+  @include media-breakpoint-up(xl) {
+    gap: $nav-first-level-gap;
+  }
 
-          .show-nav>.dropdown {
-            left: 25.5em;
+  .nav_index_html {
+    display: none;
+  }
 
-            .dropdown {
-              left: 21.5em;
-            }
-          }
-        }
+  li {
+    ul {
+      left: 0;
+      transition: ease-out 2.75s;
+    }
 
-        &>.has_subtree {
-          width: 21em;
-          padding: 2em;
-          background: #fff;
+    a {
+      position: relative;
+      display: block;
+      padding: 0.75rem 1rem;
+      hyphens: auto;
+      text-decoration: none;
+      word-break: break-word;
+    }
 
-          &.dropdown {
-            position: absolute;
-            left: 0;
+    .opener {
+      display: none;
+    }
 
-            .has_subtree.dropdown {
-              top: 0;
-            }
-          }
+    &.show-nav > .has_subtree.dropdown {
+      z-index: 1;
+      opacity: 100%;
+      visibility: visible;
+      border-radius: $nav-overlay-radius;
+
+      a {
+        pointer-events: initial !important;
+      }
+    }
+
+    &.show-nav > .has_subtree {
+      visibility: visible;
+
+      .show-nav > .dropdown {
+        left: 25.5em;
+
+        .dropdown {
+          left: 21.5em;
         }
+      }
+    }
+
+    & > .has_subtree {
+      width: 21em;
+      padding: 2em;
+      background: #fff;
+
+      &.dropdown {
+        position: absolute;
+        left: 0;
 
-        &.has_subtree .has_subtree ul {
-          z-index: 0;
+        .has_subtree.dropdown {
           top: 0;
-          left: 0;
         }
       }
+    }
+  }
 
-      &>li {
-        &>a {
-          padding: 0;
-          color: $nav-link-color;
-          @if $nav-first-level-uppercase {
-            text-transform: uppercase;
-          }
-        }
-        &.has_subtree > a {
-          display: flex;
-          align-items: center;
-          padding: 0;
-          color: $nav-link-color;
-          &:after {
-            content: "";
-            width: 9px;
-            height: 6px;
-            display: block;
-            background-image: $nav-link-drop;
-            @include media-breakpoint-down(lg){
-              content: $nav-link-drop-mobile;
-              display: block;
-              height: auto;
-              margin-left: 0;
-              width: auto;
-              background: none;
-            }
-            background-size: contain;
-            background-position: center;
-            background-repeat: no-repeat;
-            margin-left: .4rem;
-          }
-          &:before {
-            content: "";
-            height: 2px;
-            position: absolute;
-            left: 0;
-            background-color: $nav-link-active-color;
-            bottom: 0;
-            transition: all .15s ease;
-            right: 0;
-            opacity: 0;
-          }
-          &:hover,
-          &:focus {
-            color: $nav-link-active-color;
-            &:before {
-              content: "";
-              opacity: 1;
-            }
-          }
-        }
+  & > li {
+    & > a {
+      padding: 0;
+      color: $header-nav-link-color;
+      font-size: $header-nav-link-font-size;
+      font-family: $header-nav-link-font-family;
 
-        &>.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;
-              height: 20px;
-              padding: 0;
-            }
-          }
-        }
+      @if $nav-first-level-uppercase {
+        text-transform: uppercase;
       }
+    }
 
-      div.has_subtree {
-        &>span {
-          color: yellow;
+    &.has_subtree > a {
+      display: flex;
+      align-items: center;
+      padding: 0;
+
+      &::after {
+        content: "";
+        width: 9px;
+        height: 6px;
+        display: block;
+        background-image: $nav-link-drop;
+
+        @include media-breakpoint-down(lg) {
+          content: $nav-link-drop-mobile;
+          display: block;
+          height: auto;
+          margin-left: 0;
+          width: auto;
+          background: none;
         }
-        &.dropdown {
-          .has_subtree .nav-link {
-            &[aria-haspopup="true"] {
-              &:after {
-                content: $nav-overlay-next-icon;
-                right: 0;
-              }
-              &:hover,
-              &:focus {
-                &:after {
-                  content: $nav-overlay-next-icon-hover;
-                }
-              }
-            }
-          }
-          @include media-breakpoint-up(md) {
-            display: flex;
-            height: 800px;
-            min-height: 350px;
-            max-height: 85vh;
-            flex-direction: column;
-
-            &>ul {
-              overflow-y: auto;
-            }
-          }
-          @include media-breakpoint-down(lg) {
-            overflow: hidden;
-            overflow-y: scroll;
-          }
+
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        margin-left: 0.4rem;
+      }
+
+      &::before {
+        content: "";
+        height: 2px;
+        position: absolute;
+        left: 0;
+        background-color: $nav-link-active-color;
+        bottom: 0;
+        transition: all 0.15s ease;
+        right: 0;
+        opacity: 0%;
+      }
+
+      &:hover,
+      &:focus {
+        color: $nav-link-active-color;
+
+        &::before {
+          content: "";
+          opacity: 100%;
         }
-        .close-nav .close-nav-icon {
+      }
+    }
+
+    & > .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;
           height: 20px;
           padding: 0;
-          background-image: url("../../assets/svg/close.svg");
         }
       }
-      .dropdown {
-        background-color: aqua;
-        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;
+    }
+  }
+
+  div.has_subtree {
+    & > span {
+      color: yellow;
+    }
+
+    &.dropdown {
+      .has_subtree .nav-link {
+        &[aria-haspopup="true"] {
+          &::after {
+            content: $nav-overlay-next-icon;
+            right: 0;
           }
-        }
-        .nav-link {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          color: #000;
+
           &:hover,
           &:focus {
-            color: $primary;
-          }
-
-          .state-private {
-            color: #c4183c;
+            &::after {
+              content: $nav-overlay-next-icon-hover;
+            }
           }
         }
       }
 
-      .quick-access {
-        padding-top: 1.5rem;
-        .quick-access-title{
-          color: $nav-quick-link-color;
-          font-size: $nav-quick-link-size;
-          font-weight: $nav-quick-link-weight;
-          padding:$nav-quick-link-padding;
-        }
-        ul {
-          position: relative !important;
-          width: auto !important;
-          padding: 0 !important;
+      @include media-breakpoint-up(md) {
+        display: flex;
+        height: 800px;
+        min-height: 350px;
+        max-height: 85vh;
+        flex-direction: column;
+
+        & > ul {
+          overflow-y: auto;
         }
       }
 
-    &.activated {
-      &>li>a {
-        @include media-breakpoint-up(md) {
-          color: $nav-link-open-color !important;
-        }
+      @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("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%;
+    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: $nav-overlay-next-color-hover;
+      }
+
+      .state-private {
+        color: #c4183c;
+      }
+    }
+  }
+
+  .quick-access {
+    padding-top: 1.5rem;
+
+    .quick-access-title {
+      color: $nav-quick-link-color;
+      font-size: $nav-quick-link-size;
+      font-weight: $nav-quick-link-weight;
+      padding: $nav-quick-link-padding;
+    }
+
+    ul {
+      position: relative !important;
+      width: auto !important;
+      padding: 0 !important;
+    }
+  }
+
+  &.activated {
+    & > li > a {
+      @include media-breakpoint-up(md) {
+        color: $nav-link-open-color !important;
+      }
+    }
+  }
+
   label[role="button"] {
     position: absolute;
   }
 }
+
 @include media-breakpoint-up(lg) {
   #portal-globalnav-wrapper {
-   flex:1;
-   .container{
-    padding: 0;
-   }
+    flex: 1;
+
+    .container {
+      padding: 0;
+    }
   }
- }
- .close-nav,
+}
+
+.close-nav,
 .prev-nav {
   cursor: pointer;
 }
@@ -287,22 +320,25 @@
   @include media-breakpoint-down(lg) {
     display: block !important;
   }
+
   @include media-breakpoint-up(lg) {
     display: none !important;
   }
 }
 
-#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;
   }
 }
+
 @include media-breakpoint-down(lg) {
-  #portal-globalnav-collapse #portal-globalnav>li>.nav-link {
+  #portal-globalnav-collapse #portal-globalnav > li > .nav-link {
     border-bottom: 1px solid #ddd;
   }
-  #portal-globalnav-collapse #portal-globalnav>li>.nav-link {
+
+  #portal-globalnav-collapse #portal-globalnav > li > .nav-link {
     padding: 1rem 0;
     display: flex;
     justify-content: space-between;
@@ -311,31 +347,40 @@
 }
 
 // Pour changer la couleur de navlink en active
-#portal-globalnav-wrapper #portal-globalnav-collapse #portal-globalnav > li.show-nav.has_subtree > a{
-  color: $nav-link-active-color!important;
+#portal-globalnav-wrapper
+  #portal-globalnav-collapse
+  #portal-globalnav
+  > li.show-nav.has_subtree
+  > a {
+  color: $nav-link-active-color !important;
 }
+
 // de core
+
 @media screen and (max-width: 992px) {
   #portal-globalnav-wrapper .navbar-nav li.show-nav > .has_subtree.dropdown {
     right: 0;
     left: inherit !important;
     transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64) !important;
   }
+
   #portal-globalnav-wrapper .navbar-nav li .has_subtree.dropdown {
     position: fixed !important;
     z-index: 1;
     right: -100vw;
     left: inherit !important;
     height: 100vh;
-    transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64), opacity 5s ease,
+    transition:
+      right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64),
+      opacity 5s ease,
       0.5s visibility ease;
   }
 }
+
 //sub site
 #subsite-navigation {
-  &>ul {
+  & > ul {
     display: flex;
-    flex-direction: column;
     flex-direction: row;
     padding-left: 0;
     margin-bottom: 0;
@@ -351,11 +396,11 @@
   .has_subtree {
     display: block;
 
-    & .opener~ul {
+    & .opener ~ ul {
       height: auto;
     }
 
-    >label {
+    > label {
       position: absolute;
       top: 0;
       right: 0;
@@ -369,29 +414,32 @@
       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;
@@ -409,19 +457,23 @@
 @media screen and (max-width: 992px) {
   .open-nav-overflow {
     overflow: hidden;
+
     .navbar-dark .navbar-toggler {
       color: #000;
       border-color: #000;
     }
+
     .navbar-dark .navbar-toggler-icon {
-      background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23000%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e")!important;
+      background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23000%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e") !important;
     }
   }
+
   .collapse:not(.show) {
     display: block;
-    opacity: 0;
+    opacity: 0%;
     visibility: hidden;
   }
+
   .navbar-toggler {
     z-index: 99;
   }
@@ -436,20 +488,26 @@
     padding: 6em 2em 0;
     background: #fff;
     transition: all 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64);
+
     #portal-globalnav {
-      &>li>a {
+      & > li > a {
         color: #000 !important;
         padding: 1rem 0 !important;
       }
     }
+
     .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;
@@ -457,11 +515,16 @@
     }
   }
 
-  .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;
@@ -474,11 +537,13 @@
       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);
@@ -493,19 +558,22 @@
   #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;
     }
 
@@ -513,11 +581,10 @@
       .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%;
@@ -525,7 +592,7 @@
     }
   }
 
-  #subsite-navigation>ul {
+  #subsite-navigation > ul {
     display: flex;
     width: auto;
     flex-wrap: nowrap;
@@ -538,19 +605,19 @@
   color: #c4183c;
 }
 
-
 .navbar-dark .navbar-toggler-icon {
-  background-image:$header-toggler-icon!important;
+  background-image: $header-toggler-icon !important;
 }
+
 .navbar-toggler:focus {
-  border: 0px;
-  outline: 0px !important;
+  border: 0;
+  outline: 0 !important;
   background: transparent;
   box-shadow: none !important;
 }
 
 // SUB
 
-#subsite-navigation>ul li>.has_subtree.dropdown .has_subtree.dropdown {
+#subsite-navigation > ul li > .has_subtree.dropdown .has_subtree.dropdown {
   bottom: 0;
-}
+}