@imiobe/plonetheme-smartweb-base 0.0.2 → 0.0.5

package/src/scss/_sub-sitenav.scss

@@ -0,0 +1,708 @@
+// sub header
+
+.subsite-container {
+  display: flex;
+  flex-direction: column;
+  @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;
+      position: relative;
+      display: block;
+      align-items: center;
+    }
+  }
+}
+
+
+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 {
+    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;
+        transition: ease-out 2.75s;
+      }
+
+      a {
+        position: relative;
+        display: block;
+        padding: 0.75rem 1rem;
+        hyphens: auto;
+        text-decoration: none;
+        word-break: break-word;
+      }
+
+      .opener {
+        display: none;
+      }
+
+      &.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;
+
+        .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.dropdown {
+            top: 0;
+          }
+        }
+      }
+
+      &.has_subtree .has_subtree ul {
+        z-index: 0;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    &>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 {
+            content: "";
+            height: 2px;
+            position: absolute;
+            left: 0;
+            background-color: $primary;
+            bottom: 0;
+            transition: all .3s ease;
+            right: 0;
+          }
+        }
+      }
+
+      &>.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;
+          }
+        }
+      }
+    }
+
+    div.has_subtree {
+      &>span {
+        color: $primary;
+      }
+      &.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;
+        }
+      }
+      .close-nav .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;
+        }
+      }
+      .nav-link {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #000;
+        &:hover,
+        &:focus {
+          color: $primary;
+        }
+
+        .state-private {
+          color: #c4183c;
+        }
+      }
+    }
+
+    .quick-access {
+      ul {
+        position: relative !important;
+        width: auto !important;
+        padding: 0 !important;
+      }
+    }
+  }
+
+  &.activated {
+    &>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 {
+  content: "";
+  width: 9px;
+  height: 6px;
+  display: block;
+  background-image: $sub-nav-link-drop;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin-left: .4rem;
+}
+
+#portal-globalnav-wrapper #portal-globalnav>li>.has_subtree,
+#subsite-navigation #portal-globalnav>li>.has_subtree {
+  @include media-breakpoint-up(lg) {
+    margin-top: 2.25rem;
+  }
+}
+////// A SUPPRIMER PLUSTARD
+
+// #subsite-navigation {
+//     & > ul {
+//         gap: 15px;
+//     }
+// }
+
+// #subsite-navigation ul:first-child {
+// 	overflow-y: hidden;
+// }
+// #subsite-navigation > ul li > .has_subtree.dropdown {
+// 	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+// }
+// #subsite-navigation > ul li > .has_subtree.dropdown .has_subtree.dropdown {
+//     @include media-breakpoint-down(lg){
+// 	    box-shadow: none!important;
+//     }
+// }
+
+// #subsite-navigation li .has_subtree.dropdown {
+//     @include media-breakpoint-down(lg){
+//         right: inherit;
+//         left: 0 !important;
+//     }
+// }
+
+// Align je suis je trouve right
+#portal-globalnav {
+  // & > .nav-item.has_subtree:not(.je-suis):not(.en-un-clic){
+  //     & > .nav-link{
+  //         display: flex;
+  //         align-items: center;
+  //     @include media-breakpoint-up(lg){
+  //         &:after{
+  //             content:"";
+  //             width: 9px;
+  //             height: 6px;
+  //             display: block;
+  //             background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="8.444" height="5.2"><path fill="black" d="M.247.254a.831.831 0 0 1 1.2 0l2.78 2.854L7.011.254A.831.831 0 0 1 8.2.264a.882.882 0 0 1 .01 1.215L4.825 4.946a.835.835 0 0 1-.6.254 1.529 1.529 0 0 1-.6-.254L.247 1.479a.882.882 0 0 1 0-1.226Z"/></svg>');
+  //             background-size: contain;
+  //             background-position: center;
+  //             background-repeat: no-repeat;
+  //             margin-left: 0.4rem;
+  //         }
+  //     }
+  // }
+  // }
+}
+
+// #subsite-navigation{
+//     & > ul{
+//         white-space: inherit;
+//         & > li > a{
+//             white-space: nowrap;
+//         }
+//     }
+//     & > ul > .has_subtree.nav-item{
+//         & > .nav-link{
+//             display: flex;
+//             align-items: center;
+//             &:after{
+//                 content: url("../../assets/svg/drop-down-arrow.svg");
+//                 display: flex;
+//                 align-items: center;
+//                 padding-left: 0.4rem;
+//             }
+//         }
+//     }
+// }
+
+// #portal-globalnav-collapse, #subsite-navigation{
+//     .dropdown{
+//         // .show-nav{
+//         //    & > .nav-link{
+//         //         color: $primary;
+//         //         &[aria-haspopup="true"]{
+//         //             &:after{
+//         //                 content: url("../../assets/svg/drop-down-arrow-blue.svg");
+//         //                 right: 0;
+
+//         //             }
+//         //         }
+//         //     }
+//         // }
+//         // .nav-link{
+//         //     &[aria-haspopup="true"]{
+//         //         &:after{
+//         //             content: url("../../assets/svg/arrow-right-blue.svg");
+//         //             content: url("../../assets/svg/arrow-right.svg");
+//         //             position: relative;
+//         //             right: 11px;
+//         //             transition: all .2s ease;
+//         //         }
+//         //         &:hover,
+//         //         &:focus{
+//         //             &:after{
+//         //                 content: url("../../assets/svg/arrow-right-blue.svg");
+//         //             }
+//         //         }
+//         //     }
+//         // }
+//     }
+//     & > ul {
+//         & > li{
+//             & > a{
+//                 // First nav link hover line
+//                 // &:before{
+//                 //     content: "";
+//                 //     height: 2px;
+//                 //     position: absolute;
+//                 //     left: 0;
+//                 //     background-color: $$primary;
+//                 //     bottom: 0;
+//                 //     transition: all .3s ease;
+//                 //     right: 0;
+//                 //     width: 0;
+//                 // }
+//                 // @media (hover: hover) and (pointer: fine) {
+//                 //     &:focus,
+//                 //     &:hover{
+//                 //         &:before{
+//                 //             width: 100%;
+//                 //         }
+//                 //     }
+//                 // }
+//             }
+//         }
+//     }
+
+// }
+
+// // ARROW RIGHT
+// @media screen and (max-width:992px) {
+//     #portal-globalnav-collapse{
+//         #portal-globalnav > li > .nav-link{
+//             border-bottom: 1px solid #ddd;
+//             &[aria-haspopup="true"]::after {
+//                 content: url("../../assets/svg/arrow-right-blue.svg");
+//                 content: url("../../assets/svg/arrow-right.svg");
+//                 position: relative;
+//                 right: 11px;
+//             }
+//         }
+//     }
+//     // SUBSITE NAV
+//     #subsite-navigation{
+//         #portal-globalnav > li > .nav-link{
+//             border-bottom: 1px solid #ddd;
+//             &[aria-haspopup="true"]::after {
+//                 content: url("../../assets/svg/arrow-right-blue.svg");
+//                 content: url("../../assets/svg/arrow-right.svg");
+//                 position: relative;
+//                 right: 11px;
+//             }
+//         }
+//     }
+// }
+// //burger button
+// .navbar-toggler{
+//   display: block;
+//   position: relative;
+//   background: transparent!important;
+//   width: 50px;
+//   height: 50px;
+//   border-radius: 50%;
+//   text-align: center;
+//   transition: all 0.5s ease;
+//   border: 2px solid transparent;
+//   .navbar-toggler-icon {
+//     display: inline-block;
+//     position: absolute;
+//     background: #000;
+//     margin: 0 auto;
+//     width: 18px;
+//     height: 2px;
+//     top: 50%;
+//     left: 0;
+//     right: 0;
+//     border-radius: 50px;
+//     transition: all 0.5s ease;
+//     transform: translateY(-1px);
+//     &:before,
+//     &:after{
+//       content: "";
+//       border-radius: 50px;
+//       position: absolute;
+//       margin: 0 auto;
+//       background: #000;
+//       height: 2px;
+//       right: 0;
+//       transition: all 0.5s ease;
+//     }
+//     &:before {
+//       bottom: 10px;
+//       width: 24px;
+//     }
+//     &:after {
+//       top: 10px;
+//       width: 11px;
+
+//     }
+//   }
+//   &[aria-expanded=true] {
+//   .navbar-toggler-icon {
+//     background: transparent;
+//     &:before, &:after {
+//       transform-origin: 0 50%;
+//       width: 28.28427125px;
+//     }
+//     &:before {
+//       transform: rotateZ(0.78539816rad)
+//     }
+//     &:after {
+//       transform: rotateZ(-0.78539816rad);
+//     }
+//   }
+//   }
+// }
+
+// de core
+
+//sub site
+#subsite-navigation {
+  &>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 {
+      height: auto;
+    }
+    >label {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      width: 4em;
+      height: 3em;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: center;
+      padding-right: 0.5em;
+      text-align: center;
+    }
+    &>input {
+      display: none;
+    }
+    &:hover {
+      &>ul {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+    .has_subtree:hover>ul {
+      top: 0;
+      left: 16em;
+    }
+  }
+}
+
+#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%);
+
+  .has_subtree.dropdown {
+    top: 0;
+    max-width: 100%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #portal-globalnav-collapse .dropdown .nav-link,
+  #subsite-navigation .dropdown .nav-link {
+    z-index: 99;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .collapse:not(.show) {
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .navbar-toggler {
+    z-index: 99;
+  }
+
+  #portal-globalnav-collapse {
+    position: fixed;
+    z-index: 98;
+    top: 0;
+    left: 100vw;
+    width: 100vw;
+    height: 100vh;
+    padding: 6em 2em 0;
+    background: #fff;
+    transition: all 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64);
+
+    .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%),
+        0 0 139px rgb(0 0 0 / 15%);
+    }
+
+    #portal-globalnav>li>.nav-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 0;
+    }
+  }
+
+  .navbar-toggler[aria-expanded="true"]+#portal-globalnav-collapse {
+    left: 0;
+  }
+
+  #portal-globalnav-wrapper .navbar-nav li.show-nav>.has_subtree .show-nav>.dropdown {
+    z-index: 99;
+    height: 100vh;
+    background: #fff;
+  }
+
+  #portal-globalnav-wrapper .navbar-nav li {
+    .has_subtree.dropdown {
+      position: fixed;
+      z-index: 1;
+      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;
+    }
+
+    &.show-nav>.has_subtree.dropdown {
+      right: 0;
+      left: inherit !important;
+      transition: right 0.5s cubic-bezier(0.54, 0.01, 0.68, 0.64);
+    }
+  }
+
+  .close-nav {
+    display: none !important;
+  }
+
+  // SUBSITE NAV
+  #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%),
+        0 0 139px rgb(0 0 0 / 15%);
+    }
+
+    #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 {
+      left: 0 !important;
+    }
+
+    li {
+      .has_subtree.dropdown {
+        position: absolute;
+        z-index: 1;
+        left: inherit;
+        left: 0 !important;
+      }
+
+      &.show-nav>.has_subtree.dropdown {
+        right: 0;
+        left: 5% !important;
+        max-width: 90%;
+      }
+    }
+  }
+
+  #subsite-navigation>ul {
+    display: flex;
+    width: auto;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+  }
+}
+
+#portal-globalnav-collapse .dropdown .nav-link.state-private,
+#subsite-navigation .dropdown .nav-link.state-private {
+  color: #c4183c;
+}
+
+// mobile
+
+// // nav-mobile
+// .navbar-toggler{
+//     border: 0px!important;
+// }
+// .navbar-toggler:focus{
+//     box-shadow: none!important;
+// }
+// @media screen and (min-width:768px){
+//     .navbar-expand-md .navbar-toggler {
+//         display: block;
+//     }
+// }
+
+// @media screen and (min-width:992px){
+//     .navbar-expand-md .navbar-toggler {
+//         display: none;
+//     }
+// }
+#subsite-navigation>ul>li>a {
+  white-space: nowrap;
+}
+// SUB
+
+#subsite-navigation>ul li>.has_subtree.dropdown .has_subtree.dropdown {
+  bottom: 0;
+}