Trying to fix the top-bar CSS dependence on drop-left

diff --git a/css/app.css b/css/app.css
index aee6025..a535233 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6533,26 +6533,6 @@ header {
         .row .top-bar .top-bar-section ul li ul.dropdown > li:not(.has-form) a:not(.button) {
           line-height: 1.25;
           padding: 0; }
-      .row .top-bar .top-bar-section ul li ul.dropdown li.drop-right {
-        padding: 10px 0;
-        border: none;
-        border: 0px solid rgba(255, 255, 255, 0);
-        border-bottom: 3px solid rgba(255, 255, 255, 0);
-        border-image-source: url(../assets/blue_wavey.png);
-        border-image-repeat: repeat;
-        border-image-slice: 100% 33%; }
-        .row .top-bar .top-bar-section ul li ul.dropdown li.drop-right:last-child {
-          border-bottom-left-radius: 5px;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 5px;
-          border: none; }
-        .row .top-bar .top-bar-section ul li ul.dropdown li.drop-right a {
-          font-size: 1.125rem;
-          padding: 0;
-          text-align: left; }
-        .row .top-bar .top-bar-section ul li ul.dropdown li.drop-right:not(.has-form) a:not(.button) {
-          line-height: 1.25;
-          padding: 0; }
 
 .top-bar-section {
   padding-left: 170px;
@@ -6585,59 +6565,34 @@ header {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     padding: 0 20px; }
-    .top-bar-section ul li.drop-left ul.dropdown li.drop-left {
+    .top-bar-section ul li.drop-left ul.dropdown > li {
       padding: 10px 0;
       border: 0px solid rgba(255, 255, 255, 0);
       border-bottom: 3px solid rgba(255, 255, 255, 0);
       border-image-source: url(../assets/blue_wavey.png);
       border-image-repeat: repeat;
       border-image-slice: 100% 33%; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-left:last-child {
+      .top-bar-section ul li.drop-left ul.dropdown > li:last-child {
         border-bottom-left-radius: 5px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 5px;
         border: none; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-left.active:not(.has-form) a:not(.button) {
+      .top-bar-section ul li.drop-left ul.dropdown > li.active:not(.has-form) a:not(.button) {
         background: #FFFFFF !important;
         color: #c76429 !important; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-left.active:not(.has-form) a:hover:not(.button) {
+      .top-bar-section ul li.drop-left ul.dropdown > li.active:not(.has-form) a:hover:not(.button) {
         background: #FFFFFF !important;
         color: #c76429 !important; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-left a {
+      .top-bar-section ul li.drop-left ul.dropdown > li a {
         font-size: 1.125rem;
         padding: 0;
         text-align: left; }
         @media only screen and (min-width:40.063em) and (max-width:64em) {
-          .top-bar-section ul li.drop-left ul.dropdown li.drop-left a {
+          .top-bar-section ul li.drop-left ul.dropdown > li a {
             font-size: 0.875rem; } }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-left:not(.has-form) a:not(.button) {
+      .top-bar-section ul li.drop-left ul.dropdown > li:not(.has-form) a:not(.button) {
         line-height: 1.25;
         padding: 0; }
-    .top-bar-section ul li.drop-left ul.dropdown li.drop-right {
-      padding: 10px 0;
-      border: 0px solid rgba(255, 255, 255, 0);
-      border-bottom: 3px solid rgba(255, 255, 255, 0);
-      border-image-source: url(../assets/blue_wavey.png);
-      border-image-repeat: repeat;
-      border-image-slice: 100% 33%; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-right:last-child {
-        border-bottom-left-radius: 5px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 5px;
-        border: none; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-right a {
-        font-size: 1.125rem;
-        padding: 0;
-        text-align: left; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-right:not(.has-form) a:not(.button) {
-        line-height: 1.25;
-        padding: 0; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-right.active:not(.has-form) a:not(.button) {
-        background: #FFFFFF !important;
-        color: #c76429 !important; }
-      .top-bar-section ul li.drop-left ul.dropdown li.drop-right.active:not(.has-form) a:hover:not(.button) {
-        background: #FFFFFF !important;
-        color: #c76429 !important; }
   .top-bar-section ul li ul.dropdown {
     background: #FFFFFF;
     border-bottom-left-radius: 5px;
@@ -6647,51 +6602,32 @@ header {
     -moz-box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
     padding: 0 20px; }
-    .top-bar-section ul li ul.dropdown li.drop-left {
+    .top-bar-section ul li ul.dropdown > li {
       padding: 10px 0;
       border: 0px solid rgba(255, 255, 255, 0);
       border-bottom: 3px solid rgba(255, 255, 255, 0);
       border-image-source: url(../assets/blue_wavey.png);
       border-image-repeat: repeat;
       border-image-slice: 100% 33%; }
-      .top-bar-section ul li ul.dropdown li.drop-left:last-child {
+      .top-bar-section ul li ul.dropdown > li:last-child {
         border-bottom-left-radius: 5px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 5px;
         border: none; }
-      .top-bar-section ul li ul.dropdown li.drop-left.active:not(.has-form) a:not(.button) {
+      .top-bar-section ul li ul.dropdown > li.active:not(.has-form) a:not(.button) {
         background: #FFFFFF !important;
         color: #c76429 !important; }
-      .top-bar-section ul li ul.dropdown li.drop-left.active:not(.has-form) a:hover:not(.button) {
+      .top-bar-section ul li ul.dropdown > li.active:not(.has-form) a:hover:not(.button) {
         background: #FFFFFF !important;
         color: #c76429 !important; }
-      .top-bar-section ul li ul.dropdown li.drop-left a {
+      .top-bar-section ul li ul.dropdown > li a {
         font-size: 1.125rem;
         padding: 0;
         text-align: left; }
         @media only screen and (min-width:40.063em) and (max-width:64em) {
-          .top-bar-section ul li ul.dropdown li.drop-left a {
+          .top-bar-section ul li ul.dropdown > li a {
             font-size: 0.875rem; } }
-      .top-bar-section ul li ul.dropdown li.drop-left:not(.has-form) a:not(.button) {
-        line-height: 1.25;
-        padding: 0; }
-    .top-bar-section ul li ul.dropdown li.drop-right {
-      padding: 10px 0;
-      border: 0px solid rgba(255, 255, 255, 0);
-      border-bottom: 3px solid rgba(255, 255, 255, 0);
-      border-image-source: url(../assets/blue_wavey.png);
-      border-image-repeat: repeat;
-      border-image-slice: 100% 33%; }
-      .top-bar-section ul li ul.dropdown li.drop-right:last-child {
-        border-bottom-left-radius: 5px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 5px;
-        border: none; }
-      .top-bar-section ul li ul.dropdown li.drop-right a {
-        font-size: 1.125rem;
-        padding: 0;
-        text-align: left; }
-      .top-bar-section ul li ul.dropdown li.drop-right:not(.has-form) a:not(.button) {
+      .top-bar-section ul li ul.dropdown > li:not(.has-form) a:not(.button) {
         line-height: 1.25;
         padding: 0; }
 

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 08d7932..5e6639b 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -106,32 +106,6 @@
                                 padding: 0;
                             }
                         }
-                        li.drop-right {
-        //                    width: 115px !important;
-                            padding: 10px 0;
-                            border: none;
-                            border: 0px solid rgba($white, 0);
-                            border-bottom: 3px solid rgba($white, 0);
-                            border-image-source: url(../assets/blue_wavey.png);
-                            border-image-repeat: repeat;
-                            border-image-slice: 100% 33%;
-                            &:last-child {
-                                border-bottom-left-radius: 5px;
-                                border-top-right-radius: 0;
-                                border-bottom-right-radius: 5px;
-                                border: none;
-                            }
-                            a {
-                                font-size: rem-calc(18);
-                                padding: 0;
-                                text-align: left;
-
-                            }
-                            &:not(.has-form) a:not(.button) {
-                                line-height: 1.25;
-                                padding: 0;
-                            }
-                        }
                     }
                 }
             }
@@ -185,23 +159,72 @@
                     }
                 }
             }
-        &.active:not(.has-form) a:not(.button) {
-            @media #{$medium-only} {
-                font-size: rem-calc(16);
-                padding: 0 13px;
+            &.active:not(.has-form) a:not(.button) {
+                @media #{$medium-only} {
+                    font-size: rem-calc(16);
+                    padding: 0 13px;
+                }
+            }
+            &.drop-left {
+                ul.dropdown {
+                    right: -1%;
+                    left: auto;
+                    background: $white;
+                    border-bottom-left-radius: 5px;
+                    border-bottom-right-radius: 5px;
+                    padding: 0 20px;
+    //                width: 155px;
+                    > li {
+    //                    max-width: 115px !important;
+                        padding: 10px 0;
+                        border: 0px solid rgba($white, 0);
+                        border-bottom: 3px solid rgba($white, 0);
+                        border-image-source: url(../assets/blue_wavey.png);
+                        border-image-repeat: repeat;
+                        border-image-slice: 100% 33%;
+                        &:last-child {
+                            border-bottom-left-radius: 5px;
+                            border-top-right-radius: 0;
+                            border-bottom-right-radius: 5px;
+                            border: none;
+                        }
+                        &.active:not(.has-form) {
+                            & a:not(.button) {
+                                background: $white !important;
+                                color: $orange !important;
+                            }
+                            & a:hover:not(.button) {
+                                background: $white !important;
+                                color: $orange !important;
+                            }
+                        }
+                        a {
+                            font-size: rem-calc(18);
+                            padding: 0;
+                            text-align: left;
+                            @media #{$medium-only} {
+                                font-size: rem-calc(14);
+                            }
+                        }
+                        &:not(.has-form) a:not(.button) {
+                            line-height: 1.25;
+                            padding: 0;
+                        }
+                    }
+                }
             }
-        }
-        &.drop-left {
             ul.dropdown {
-                right: -1%;
-                left: auto;
                 background: $white;
                 border-bottom-left-radius: 5px;
                 border-bottom-right-radius: 5px;
+                box-shadow: 0 3px 3px 2px rgba($black, 0.5);
+                -ms-box-shadow: 0 3px 3px 2px rgba($black, 0.5);
+                -moz-box-shadow: 0 3px 3px 2px rgba($black, 0.5);
+                -webkit-box-shadow: 0 3px 3px 2px rgba($black, 0.5);
                 padding: 0 20px;
-//                width: 155px;
-                li.drop-left {
-//                    max-width: 115px !important;
+    //               width: 155px;
+                > li {
+    //                   max-width: 115px !important;
                     padding: 10px 0;
                     border: 0px solid rgba($white, 0);
                     border-bottom: 3px solid rgba($white, 0);
@@ -237,205 +260,7 @@
                         padding: 0;
                     }
                 }
-                li.drop-right {
-//                    width: 115px !important;
-                    padding: 10px 0;
-                    border: 0px solid rgba($white, 0);
-                    border-bottom: 3px solid rgba($white, 0);
-                    border-image-source: url(../assets/blue_wavey.png);
-                    border-image-repeat: repeat;
-                    border-image-slice: 100% 33%;
-                    &:last-child {
-                        border-bottom-left-radius: 5px;
-                        border-top-right-radius: 0;
-                        border-bottom-right-radius: 5px;
-                        border: none;
-                    }
-                    a {
-                        font-size: rem-calc(18);
-                        padding: 0;
-                        text-align: left;
-                        
-                    }
-                    &:not(.has-form) a:not(.button) {
-                        line-height: 1.25;
-                        padding: 0;
-                    }
-                    &.active:not(.has-form) {
-                        & a:not(.button) {
-                            background: $white !important;
-                            color: $orange !important;
-                        }
-                        & a:hover:not(.button) {
-                            background: $white !important;
-                            color: $orange !important;
-                        }
-                    }
-                }
-            }
-        }
-        ul.dropdown {
-            background: $white;
-            border-bottom-left-radius: 5px;
-            border-bottom-right-radius: 5px;
-            box-shadow: 0 3px 3px 2px rgba($black, 0.5);
-            -ms-box-shadow: 0 3px 3px 2px rgba($black, 0.5);
-            -moz-box-shadow: 0 3px 3px 2px rgba($black, 0.5);
-            -webkit-box-shadow: 0 3px 3px 2px rgba($black, 0.5);
-            padding: 0 20px;
-//               width: 155px;
-            li.drop-left {
-//                   max-width: 115px !important;
-                padding: 10px 0;
-                border: 0px solid rgba($white, 0);
-                border-bottom: 3px solid rgba($white, 0);
-                border-image-source: url(../assets/blue_wavey.png);
-                border-image-repeat: repeat;
-                border-image-slice: 100% 33%;
-                &:last-child {
-                    border-bottom-left-radius: 5px;
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 5px;
-                    border: none;
-                }
-                &.active:not(.has-form) {
-                    & a:not(.button) {
-                        background: $white !important;
-                        color: $orange !important;
-                    }
-                    & a:hover:not(.button) {
-                        background: $white !important;
-                        color: $orange !important;
-                    }
-                }
-                a {
-                    font-size: rem-calc(18);
-                    padding: 0;
-                    text-align: left;
-                    @media #{$medium-only} {
-                        font-size: rem-calc(14);
-                    }
-                }
-                &:not(.has-form) a:not(.button) {
-                    line-height: 1.25;
-                    padding: 0;
-                }
-            }
-            li.drop-right {
-//                   width: 115px !important;
-                padding: 10px 0;
-                border: 0px solid rgba($white, 0);
-                border-bottom: 3px solid rgba($white, 0);
-                border-image-source: url(../assets/blue_wavey.png);
-                border-image-repeat: repeat;
-                border-image-slice: 100% 33%;
-                &:last-child {
-                    border-bottom-left-radius: 5px;
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 5px;
-                    border: none;
-                }
-                a {
-                    font-size: rem-calc(18);
-                    padding: 0;
-                    text-align: left;
-                    
-                }
-                &:not(.has-form) a:not(.button) {
-                    line-height: 1.25;
-                    padding: 0;
-                }
             }
         }
-            
-//            &.drop-left {
-//                ul.dropdown {
-//                    padding-left: 21px;
-//                    padding-right: 250px;
-//                    top: 74px;
-//                    background: $white;
-//                    border-bottom-left-radius: 10px;
-//                    border-bottom-right-radius: 10px;
-//                    min-width: 157px;
-////                    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-////                    -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-////                    -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-////                    -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-//                    li {
-//                        white-space: nowrap;
-//                        border-bottom: 1px solid #e7e7e8;
-//                        padding: 5px 0;
-//                        &.nav-img-container {
-//                            img {
-//                                position: absolute;
-//                                right: 20px;
-//                                top: 23px;
-//                                border: 6px solid #fdefd4;
-//                            }
-//                            border: none;
-//                        }
-//                        a {
-//                            padding-left: 0;
-//                            text-align: left;
-//                            font-size: 18px;
-//                            &:hover {
-//                                color: $d-blue;
-//                                text-shadow: 0 0 1px $green;
-//                                text-shadow: 1 0 1px $green;
-//                                text-shadow: 0 1 1px $green;
-//                                text-shadow: -1 0 1px $green;
-//                                text-shadow: 0 -1 1px $green;
-//                            }
-//                        }
-//                    }
-//                }
-//            }
-//            &.drop-right {
-//                ul.dropdown {
-//                    padding-left: 250px;
-//                    padding-right: 21px;
-//                    right: -1%;
-//                    left: auto;
-//                    top: 74px;
-//                    background: $white;
-//                    border-bottom-left-radius: 10px;
-//                    border-bottom-right-radius: 10px;
-//                    min-width: 500px;
-//                    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-//                    -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-//                    -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-//                    -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5);
-//                    li {
-//                        white-space: nowrap;
-//                        background: $white;
-//                        text-align: right;
-//                        border-bottom: 1px solid #e7e7e8;
-//                        padding: 5px 0;
-//                        &.nav-img-container {
-//                            img {
-//                                position: absolute;
-//                                left: 20px;
-//                                top: 23px;
-//                                border: 6px solid #fdefd4;
-//                            }
-//                            border: none;
-//                        }
-//                        a {
-//                            padding-left: 0;
-//                            text-align: left;
-//                            font-size: 18px;
-//                            &:hover {
-//                                color: $d-blue;
-//                                text-shadow: 0 0 1px $green;
-//                                text-shadow: 1 0 1px $green;
-//                                text-shadow: 0 1 1px $green;
-//                                text-shadow: -1 0 1px $green;
-//                                text-shadow: 0 -1 1px $green;
-//                            }
-//                        }
-//                    }
-//                }
-//            }
-        }
     }
 }