@imiobe/plonetheme-smartweb-base 0.0.4 → 0.0.6

package/src/scss/_sitenav.scss

@@ -1,9 +1,17 @@
 #portal-globalnav-wrapper {
   position: initial !important;
   padding: 0 !important;
+  li{
+    list-style: none!important;
+  }
   @include media-breakpoint-up(lg) {
     flex: 1;
   }
+  @include media-breakpoint-down(lg) {
+    margin: 0!important;
+  }
+}
+#portal-globalnav {
   span {
     padding: 1rem 0;
   }
@@ -12,8 +20,6 @@
     padding-left: 0;
   }
 
-  #portal-globalnav-collapse {
-    #portal-globalnav {
       width: 100%;
       @include media-breakpoint-up(md) {
         flex-direction: column;
@@ -25,7 +31,7 @@
       @include media-breakpoint-up(xl) {
         gap: $nav-first-level-gap;
       }
-      .index_html {
+      .nav_index_html {
         display: none;
       }
       li {
@@ -92,35 +98,53 @@
 
       &>li {
         &>a {
-          display: flex;
-          align-items: center;
           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: "";
-              height: 2px;
-              position: absolute;
-              left: 0;
-              background-color: #FCE181;
-              bottom: 0;
-              transition: all .3s ease;
-              right: 0;
+              opacity: 1;
             }
           }
         }
@@ -220,29 +244,41 @@
       }
 
       .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 {
-      &>ul>li>a {
+      &>li>a {
         @include media-breakpoint-up(md) {
           color: $nav-link-open-color !important;
         }
       }
     }
-  }
 
   label[role="button"] {
     position: absolute;
   }
 }
-
-.close-nav,
+@include media-breakpoint-up(lg) {
+  #portal-globalnav-wrapper {
+   flex:1;
+   .container{
+    padding: 0;
+   }
+  }
+ }
+ .close-nav,
 .prev-nav {
   cursor: pointer;
 }
@@ -273,228 +309,28 @@
     align-items: center;
   }
 }
-////// 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: $yellow;
-//                 //     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);
-//     }
-//   }
-//   }
-// }
 
+// 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;
+}
 // 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,
+      0.5s visibility ease;
+  }
+}
 //sub site
 #subsite-navigation {
   &>ul {
@@ -578,7 +414,7 @@
       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");
+      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) {
@@ -703,27 +539,15 @@
 }
 
 
-
-// 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;
-//     }
-// }
+.navbar-dark .navbar-toggler-icon {
+  background-image:$header-toggler-icon!important;
+}
+.navbar-toggler:focus {
+  border: 0px;
+  outline: 0px !important;
+  background: transparent;
+  box-shadow: none !important;
+}
 
 // SUB