slow-steps 0.2.0 → 0.3.3

data/_sass/forms/mc-forms.sass

@@ -77,7 +77,7 @@ input.switch
 input.switch
   &:checked
     + .icon
-      background: $opd-blue-trust
+      background: $opd-light-blue
 
     ~
       .yes
@@ -126,13 +126,13 @@ input.switch
       background: $env-primary
 
 .styled-checkbox:checked
-  background: $opd-orange-confidence
+  background: $opd-coral
 
   + .icon span
     left: calc(100% - 25.732px)
 
     &:before
-      background: $opd-blue-trust
+      background: $opd-light-blue
 
 .content__gdpr
   display: flex

data/_sass/global.sass

@@ -101,9 +101,35 @@ body
   text-align: center
   width: 100vw
 
-  & > *
+
+  & > p
+    opacity: 0
     padding-top: 12px
+    animation: fadeInAnimation ease 1s
+    animation-delay: .8s
+    animation-iteration-count: 1
+    animation-fill-mode: forwards
+
+  & > h1, h2, h3, h4, h5
+    animation: zoomInAnimation ease .6s
+    animation-iteration-count: 1
+    animation-fill-mode: forwards
+
+@keyframes zoomInAnimation
+  0%
+    transform: scale(0)
+    opacity: 0
+
+  100%
+    transform: scale(1)
+    opacity: 1
+
+@keyframes fadeInAnimation
+  0%
+    opacity: 0
 
+  100%
+    opacity: 1
 
 .hero__strap--center
   //padding-top: $navbar-height
@@ -146,7 +172,7 @@ body
 
 // Block colors and sizes
 .strap--opd-trust
-  @include opd-blue-trust
+  @include opd-light-blue
 
 
 .strap__100
@@ -256,15 +282,25 @@ $svg-text-offset: 60px
 
 
 // Social icons wraped in <a's
-.social
-  color: $grey
-  text-decoration: none
+
+.social-media
+  display: flex
+  padding: 0
+  margin: 0
+  line-height: 0
+
+.social-media-item
+  list-style: none
+
+.social-media-link
+  @include default-trans
+  color: $white
 
 .yaml--link
   color: inherit
   text-decoration: none
   &:hover
-    color: $opd-blue-trust
+    color: $opd-light-blue
 
 
 @media screen and ( min-width: 768px )
@@ -284,26 +320,23 @@ $svg-text-offset: 60px
     max-width: 600px
     margin: 0 auto
 
-  .social--Facebook
+  .social-media-item
     &:hover
-      color: $facebook-primary
+      .social--Facebook
+        color: $facebook-primary
 
-  .social--Twitter
-    &:hover
-      color: $twitter-primary
+      .social--Twitter
+        color: $twitter-primary
 
-  .social--LinkedIn
-    &:hover
-      color: $linkedin-primary
+      .social--LinkedIn
+        color: $linkedin-primary
 
-  .social--Instagram
-    &:hover
-      color: $instagram-primary
+      .social--Instagram
+        color: $instagram-primary
 
-  .social--Website,
-  .social--Email
-    &:hover
-      color: $opd-blue-trust
+      .social--Website,
+      .social--Email
+        color: $opd-light-blue
 
 
 // This is basically a button and should to be centralised
@@ -328,7 +361,7 @@ $svg-text-offset: 60px
     width: 6rem
 
   span
-    font-weight: 900
+    font-weight: $heavy-font
     position: relative
 
   svg

data/_sass/navigation/README.md

@@ -0,0 +1,35 @@
+# Navbar Sass
+
+All the styling for the navbar originates here.
+
+## _variables.sass
+
+Sass variable definitions for dimensions and transitions
+
+## colors.sass
+
+Collection of color definitions that are not defined by environmental colors
+
+## base.sass
+
+Base sass for navigation.
+
+## burger.sass
+
+Burger specific sass.
+
+## breakpoints/1024.sass
+
+1024 px breakpoint for navigation
+
+## landing.sass
+
+Unique settings for the landing page
+
+## clinician.sass
+
+Unique settings for the clinician pages
+
+## pwp.sass
+
+Unique settings for the pwp pages

data/_sass/navigation/_variables.sass

@@ -1,25 +1,24 @@
 // This is where we setup the apperance of the navigation. Note, the contents is picked up from _data/menu.yml and written into _inludes/navbar.html
 
-// We have two key sass files, _sass/navbar/mobile.sass and .../desktop.sass
-
-// The mobile.sass is loaded first whilst a breakpoint controls the desktop.sass
-
-
 // ************* Dimesions *************
 
 // Applies to ALL displays
-$navbar-height: 5vh
 
-$mobile-navbar-height: 10vh
+$navbar-height: 5vh
 
 $secondary-navbar-height: 10vh
 
+$brand-height: 55%
+
 // change .nav-list.height manually in _sass/navbar/mobile.sass, can't figure out how to use calc --vh whith sass var
-$nav-list-height: 85vh
+
+$mobile-navbar-height: 10vh
+
+$mobile-nav-list-height: 90vh
 
 // ************* Colours *************
 
-// see _sass/colors/_variables.sass
+// see _sass/navigation/colors.sass
 
 // ************* Animations *************
 

data/_sass/navigation/{global.sass → base.sass}

@@ -1,13 +1,8 @@
 
-
-// Global navigation Sass
-
-// Avoid declaring any styling like color etc.
-// These are defined in _sass/colors/env/_env.sass and called by various functions in _sass/colors/...
-
-// Everything here will be included in EVERY .html
+// Navigation styling for base
 
 .navbar
+  @include default-trans
   align-items: center
   display: flex
   height: $mobile-navbar-height
@@ -16,38 +11,40 @@
   top: 0
   white-space: nowrap
   width: 100%
-  z-index: 99
+  z-index: 9998
 
   .social-media
-    padding-left: 4rem
+    margin-left: 3vw
+    z-index: inherit
+
   .social-media-link
-    color: $white
-    font-size: $font-size * .8
-    transform: translateY(0)
-    &:hover
-      text-shadow: 3px 3px 6px rgba($black, .2)
-      //font-size: $font-size * 1
-      transform: translateY(-2px)
+    font-size: $sm-font-size
+    padding-right: $sm-font-size
 
+.nav-scrolled
+  @include navbar-color
 
 .nav-brand
   width: 30vw
   padding-left: 3vw
-  z-index: 100
+  z-index: 1
+  margin-top: .7rem
+  // fudge fix for G making logo apear off-centre
 
   .site__logo *
-    transition: 2s ease-in
+    @include default-trans
+
 
 .nav-list
   border-bottom-left-radius: 80px
   font-size: 1.3rem
-  height: $nav-list-height
-  height: calc( var(--vh, 1vh) * 85 )
+  height: $mobile-nav-list-height
+  height: calc( var(--vh, 1vh) * #{ strip-unit($mobile-nav-list-height)} )
   list-style: none
   margin: 0
-  margin-block-start: 0
+  margin-block-start: calc( var(--vh, 1vh) * #{ strip-unit($mobile-navbar-height)} )
   padding: 0
-  padding-top: 15vh
+  padding-top: 0
   position: absolute
   right: 0
   top: 0
@@ -55,6 +52,13 @@
   transition: $nav-slider-transition
   width: 100vw
   box-sizing: content-box
+  background-color: $env-primary
+  overflow: scroll
+
+.nav-group-content
+  //text-indent: 2rem
+  .nav-link
+    margin: 3vh 20vw
 
 .nav-link
   margin: 6vh 15vw
@@ -62,13 +66,19 @@
   text-decoration: none
   display: flex
 
-.nav-group-content .nav-link
+.nav-group-link
+  color: $nav-link-color
+
+.nav-link
   font-size: 1.7rem
   z-index: 100
+  color: $nav-link-color
 
 .nav-active
   // we toggle this class in mobile-nav-slider.js on burger click
   transform: translateX(0%)
+  box-shadow: -.2px .2px 0 rgba($pure-black, .3)
+
 
 .site__logo-active
   .site__logo--group
@@ -80,4 +90,4 @@
     .site__logo__i *,
     .site__logo--t,
     .site__logo--Q
-      transition: 1.2s ease-in
+      fill: $env-secondary

data/_sass/navigation/breakpoints/1024.sass

@@ -1,18 +1,16 @@
-// Navigation styling for breakpoint 768
-
-// Avoid declaring any styling like color etc.
-// These will be decalred in _sass/naviagtion/env/
-
-// Everything here will be included in EVERY .html
-
-$brand-height: 55%
+// Navigation styling for breakpoint 1024
 
 @media screen and ( min-width: 1024px )
 
+  .pwp-group-link, .clinician-group-link
+    display: flex
+
   .navbar
     @include default-trans
-    height: $navbar-height
     align-items: center
+    background-color: $env-primary
+    height: $navbar-height
+
 
   .nav-scrolled
     @include default-trans
@@ -23,7 +21,11 @@ $brand-height: 55%
     .nav-brand
       @include default-trans
       height: 8vh
-      top: 6vh
+      max-height: 100px
+
+  .nav-scrolled
+    background-color: $env-primary
+    // overwrite mobile
 
   .nav-brand
     @include default-trans
@@ -31,12 +33,10 @@ $brand-height: 55%
     position: absolute
     max-width: 160px
     height: 10vh
-    z-index: 999
     top: 7.5vh
 
     .site__logo
       position: absolute
-      top: (100% - $brand-height) / 2
       height: $brand-height
 
   .nav-list
@@ -50,10 +50,19 @@ $brand-height: 55%
     height: 5vh
     padding: 0
     background-color: inherit
+    box-shadow: none
+    margin-block-start: 0
+    padding: 0
+    overflow: visible
 
   .nav-group
     padding: 0 2rem
 
+  .nav-group-content
+    //text-indent: 2rem
+    .nav-link
+      margin: 0
+
   .nav-link
     align-items: center
     padding: 0
@@ -63,8 +72,12 @@ $brand-height: 55%
     overflow: hidden
     position: relative
 
-  // Surround current link with lines
+  .sub-link,
+  .subsub-link
+    color: $env-primary
+
 
+  // Surround current link with ticks
   .current--url
     &:before, &:after
       content: ""
@@ -72,18 +85,17 @@ $brand-height: 55%
       height: 2px
       position: relative
       vertical-align: middle
-      width: 6%
+      width: 6px
 
     &:before
-      right: 0.5em
-      margin-left: -10%
+      right: 3px
 
     &:after
-      left: 0.5em
-      margin-right: -10%
+      left: 3px
 
   .nav-group-content
     @include default-trans
+    @include navbar-color
     align-items: center
     justify-content: flex-end
     position: absolute
@@ -93,7 +105,10 @@ $brand-height: 55%
     padding: 0
     height: $secondary-navbar-height
     //max-height: 100px
-    backdrop-filter: blur(20px)
+
+    .current--url
+      &:before, &:after
+        background-color: $env-primary
 
   .nav-group-content .nav-link
     margin: 0
@@ -103,7 +118,7 @@ $brand-height: 55%
 
   .nav-subsub-content
     background-color: $pure-white
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
+    box-shadow: 1px 1px 1px rgba($pure-black, .1)
     visibility: hidden
     opacity: 0
     border-radius: 6px
@@ -129,6 +144,15 @@ $brand-height: 55%
       transform: rotate(-45deg) translateY(14px)
       z-index: -1
 
+  .nav-group-container
+    .nav-link
+      font-weight: $heavy-font
+      text-transform: uppercase
+      padding: 1rem 3rem
+      &:not(.current--url)
+        &:hover
+          text-decoration: underline
+
   .nav-group-container:hover > .nav-subsub-content
     visibility: visible
     opacity: 1