@worksafevictoria/wcl7.5 1.13.0-beta.3 → 1.13.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.13.0-beta.3",
+  "version": "1.13.0-beta.4",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Global/AppHeaderNew/index.vue

@@ -48,14 +48,15 @@
                 </a>
                 <div
                   ref="contrastChoices"
-                  class="flex-container"
+                  class="flex-container_contrast"
                   v-if="show"
                 >
-                  <div class="flex-item contrast_slide--box-list">
-                    <div v-for="list in lists" :key="list.value">
-                      <label :class="{'last-radio': list.label==='Greyscale'}">
+                  <div class="flex-item_contrast contrast_slide--box-list">
+                    <div v-for="list in lists" :key="list.value" >
+                     <label :for="list.id" :class="{'last-radio': list.label==='Greyscale'}">
                         <input
                           type="radio"
+                          :id="list.id"
                           :name="list.name"
                           :value="list.value"
                           :checked="list.value === selectedValue"
@@ -411,18 +412,22 @@ export default {
       NavSearchIcon,
       lists: [
         {
+          id: 'contrast1',
           name: 'contrast',
           value: 'default',
           label: 'Light contrast (default)'
         },
         {
+          id: 'contrast2',
           name: 'contrast',
           value: 'high_contrast',
           label: 'Increased contrast'
         },
-        { name: 'contrast', 
-          value: 'grayscale', 
-          label: 'Greyscale' 
+        {
+          id: 'contrast3',
+          name: 'contrast',
+          value: 'grayscale',
+          label: 'Greyscale'
         }
       ],
       selectedValue: null

package/src/components/Global/AppHeaderNew/styles.scss

@@ -18,6 +18,9 @@
     padding: 0px 15px;
     display: table;
     width: 100%;
+    border-bottom-style: solid;
+    border-bottom-color: lightgrey;
+    border-bottom-width: 1px;
 
     > nav {
       width: 100%;
@@ -470,11 +473,7 @@
     }
   }
 }
-@mixin opened-slide {
-  left: 100%;
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
+
 .contrast_slide {
   &_container {
     background: white;
@@ -490,21 +489,6 @@
     margin: 0;
     right: 0;
     position: absolute;
-
-    // &.closed {}
-    &.opened {
-      > .contrast_slide_hoverbar {
-        @include opened-slide;
-      }
-    }
-
-    @media (min-width: 768px) {
-      &:hover {
-        > .contrast_slide_hoverbar {
-          @include opened-slide;
-        }
-      }
-    }
   }
 
   &_hoverbar {
@@ -633,11 +617,11 @@
   }
 }
 
-.flex-container {
+.flex-container_contrast {
   margin-left: -5px;
 }
 
-.flex-item {
+.flex-item_contrast {
   border: 1px solid;
   border-color: #BABABA;
   padding: 10px;

package/src/index.js

@@ -7,7 +7,7 @@ import Subheader from './components/Containers/Subheader/index.vue'
 import SectionGroup from './components/Containers/SectionGroup/index.vue'
 import CarouselComponent from './components/Containers/Carousel/index.vue'
 
-import AppHeader from './components/Global/AppHeader/index.vue'
+import AppHeader from './components/Global/AppHeaderNew/index.vue'
 import AppFooter from './components/Global/AppFooter/index.vue'
 import HeroHeader from './components/Global/HeroHeader/index.vue'
 import SocialShare from './components/Global/SocialShare/index.vue'