vanilla-framework 4.6.0 → 4.8.0

package/scss/_patterns_links.scss

@@ -2,15 +2,15 @@
 
 @mixin vf-p-links {
   .p-link--soft {
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
 
     &:visited {
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
       text-decoration: none;
     }
 
     &:hover {
-      color: $color-link;
+      color: $colors--theme--link-default;
     }
 
     &.is-selected {
@@ -18,21 +18,23 @@
     }
   }
 
+  // "inverted" links are meant for undefined dark backgrounds
+  // and they use the default text color
   .p-link--inverted {
-    color: $color-light;
+    color: $colors--theme--text-default;
     font-weight: $font-weight-bold;
 
     &:hover {
-      color: $color-light;
+      color: $colors--theme--text-default;
     }
 
     &:visited {
-      color: darken($color-light, 10%);
+      color: $colors--theme--text-muted;
     }
   }
 
   .p-link--skip {
-    color: $color-link;
+    color: $colors--theme--link-default;
     display: block;
     left: -999px;
     position: absolute;
@@ -54,7 +56,7 @@
     display: flex;
 
     &::before {
-      border-bottom: 1px solid $colors--light-theme--border-default;
+      border-bottom: 1px solid $colors--theme--border-default;
       content: '';
       flex-grow: 1;
       margin: $spv--x-large 0 calc($spv--x-large - 1px) 0;
@@ -62,6 +64,7 @@
 
     &::after {
       @extend %icon;
+      // FIXME: to do when icons are themed
       @include vf-icon-back-to-top($color-mid-dark);
 
       content: '';
@@ -70,7 +73,7 @@
   }
 
   .p-top__link {
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
     padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }

package/scss/_patterns_lists.scss

@@ -256,37 +256,6 @@ $list-step-bullet-margin: $sph--x-large;
       }
     }
   }
-
-  // Theming
-  @if ($theme-default-p-inline-list--middot == 'dark') {
-    .p-inline-list--middot {
-      @include vf-p-inline-list-middot-dark-theme;
-    }
-
-    .p-inline-list--middot.is-light {
-      @include vf-p-inline-list-middot-light-theme;
-    }
-  } @else {
-    .p-inline-list--middot {
-      @include vf-p-inline-list-middot-light-theme;
-    }
-
-    .p-inline-list--middot.is-dark {
-      @include vf-p-inline-list-middot-dark-theme;
-    }
-  }
-}
-
-@mixin vf-p-inline-list-middot-theme($color-list-text) {
-  color: $color-list-text;
-}
-
-@mixin vf-p-inline-list-middot-light-theme {
-  @include vf-p-inline-list-middot-theme($colors--light-theme--text-default);
-}
-
-@mixin vf-p-inline-list-middot-dark-theme {
-  @include vf-p-inline-list-middot-theme($colors--dark-theme--text-default);
 }
 
 @mixin vf-p-inline-list-stretch {

package/scss/_patterns_navigation.scss

@@ -7,6 +7,7 @@ $navigation-logo-tag-height-desktop: 2.3rem;
 $navigation-logo-banner-height: 3rem; // legacy logo height (small and medium screens)
 $navigation-logo-banner-height-desktop: 3.5rem; // legacy logo height (on large screens)
 $navigation-logo-size: 1rem;
+$navigation-logo-padding: calc(1.5rem + 0.19rem); // ~27px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
 $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
@@ -31,7 +32,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
     }
   }
 
@@ -44,7 +45,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-right: $sph--large;
+      padding-right: map-get($grid-margin-widths, default);
     }
   }
 
@@ -54,7 +55,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   %navigation-link {
-    $properties: #{background-color, color, opacity};
+    $properties:
+      #{background-color,
+      color,
+      opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @extend %vf-navigation-separator;
@@ -71,7 +75,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     line-height: map-get($line-heights, default-text);
     margin: 0;
     overflow: hidden;
-    padding-left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large}); // allow navigation align with tag logo text on small screens
+    padding-left: calc(map-get($grid-margin-widths, small) + $navigation-logo-padding); // allow navigation align with tag logo text on small screens
     position: relative;
     text-align: left;
     text-overflow: ellipsis;
@@ -79,11 +83,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
 
     @media (min-width: $threshold-4-6-col) {
-      padding-left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
+      padding-left: calc(map-get($grid-margin-widths, default) + $navigation-logo-padding);
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
     }
 
     &:visited,
@@ -185,6 +189,52 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
   }
 
+  .p-navigation__row--25-75 {
+    // ideally we'd like to extend row only on large screens,
+    // but that's not possible to use @extend inside media query
+    @extend %vf-row;
+
+    // when mobile navigation is displayed, remove default row padding
+    @media (width < $breakpoint-navigation-threshold) {
+      padding: 0;
+    }
+
+    // when large screen navigation is displayed, use 25/75 grid split
+    @media (min-width: $breakpoint-navigation-threshold) {
+      // remove padding from logo banner (the grid has its own padding)
+      .p-navigation__banner {
+        padding-left: 0;
+      }
+
+      // shift navigation items by the size of grid margin to align with grid
+      .p-navigation__items:first-child {
+        margin-left: calc(-1 * map-get($grid-margin-widths, default));
+      }
+
+      // on medium screen sizes (6 columns) use 2/4 column split
+      @media (min-width: $threshold-4-6-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 2;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 4;
+        }
+      }
+
+      // on large screen sizes (12 columns) use 3/9 column split
+      @media (min-width: $threshold-6-12-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 3;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 9;
+        }
+      }
+    }
+  }
+
   .p-navigation__item,
   .p-navigation__item--dropdown-toggle {
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -282,7 +332,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     .p-navigation__link {
       @extend %navigation-link;
 
-      padding-left: calc($sph--x-large + 0.19rem); // additional padding added to align better with logos as originally designed in SVG
+      // within logo we don't need a regular item padding
+      @extend %vf-reset-horizontal-padding;
+      padding-left: $navigation-logo-padding;
 
       &:hover {
         background-color: transparent !important;
@@ -430,8 +482,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     display: block;
     height: 100%; // keep the height of the navigation when 'Search' label is hidden
+
     padding-left: 0; // on small screens label is hidden, so we remove left padding as well
-    padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+    padding-right: calc(map-get($grid-margin-widths, default) + map-get($icon-sizes, default));
     position: relative;
 
     // hide "search" label on small screens (only show the icon)
@@ -441,7 +494,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show both label and icon on large screens
     @media (min-width: $breakpoint-large) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
 
       .p-navigation__search-label {
         display: initial;
@@ -457,7 +510,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       height: $spv--large;
       pointer-events: none;
       position: absolute;
-      right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+      right: calc(map-get($grid-margin-widths, default) / 2);
       text-indent: calc(100% + 10rem);
       top: calc($spv--medium + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
@@ -597,7 +650,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+        right: calc(map-get($grid-margin-widths, default) / 2); // position by the center of grid margin
         top: calc($spv--large + map-get($nudges, x-small));
         transform: rotate(0deg);
       }
@@ -619,8 +672,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__link {
-      // add padding to accommodate icon
-      padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+      // increase padding to accommodate chevron icon
+      padding-right: map-get($grid-margin-widths, default) + map-get($icon-sizes, default);
     }
 
     &:first-child .p-navigation__link::before {

package/scss/_patterns_notifications.scss

@@ -76,9 +76,12 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     @extend %vf-is-bordered;
     @extend %vf-bg--x-light;
 
+    background: $colors--theme--background-default;
     background-position: $sph--large $notification-icon-vert-offset;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
+    border-color: $colors--theme--border-default;
+    color: $colors--theme--text-default;
     margin-bottom: $spv--x-large;
     padding-bottom: calc($spv--small - 1px);
     padding-left: $notification-content-icon-space;
@@ -90,7 +93,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     }
 
     &.is-borderless {
-      background-color: transparent;
       background-position: 0 $borderless-notification-icon-vert-offset;
       border: none;
       margin-top: 0;
@@ -145,7 +147,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 
     .p-notification__close {
       @extend %vf-hide-text;
-      @include vf-icon-close($color-mid-dark);
+      @include vf-icon-close-themed;
 
       background-color: transparent;
       background-position: center;
@@ -174,6 +176,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     .p-notification__timestamp {
       @extend %default-text;
       @extend %muted-text;
+
+      color: $colors--theme--text-muted;
     }
 
     .p-notification__actions {
@@ -187,6 +191,11 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 
     .p-notification__action {
       @extend %default-text;
+      color: $colors--theme--link-default;
+
+      &:visited {
+        color: $colors--theme--link-visited;
+      }
     }
 
     .p-notification__action + .p-notification__action {
@@ -205,8 +214,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-default {
   .p-notification {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-information, left, true);
-    @include vf-icon-info($color-mid-dark);
+    @include vf-highlight-bar($colors--theme--border-information, left, true);
+    @include vf-icon-info-themed;
   }
 }
 
@@ -214,8 +223,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-positive {
   .p-notification--positive {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-positive, left, true);
-    @include vf-icon-success;
+    @include vf-highlight-bar($colors--theme--border-positive, left, true);
+    @include vf-icon-success-themed;
   }
 }
 
@@ -223,8 +232,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-caution {
   .p-notification--caution {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-caution, left, true);
-    @include vf-icon-warning;
+    @include vf-highlight-bar($colors--theme--border-caution, left, true);
+    @include vf-icon-warning-themed;
   }
 }
 
@@ -232,8 +241,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-negative {
   .p-notification--negative {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-negative, left, true);
-    @include vf-icon-error;
+    @include vf-highlight-bar($colors--theme--border-negative, left, true);
+    @include vf-icon-error-themed;
   }
 }
 
@@ -241,7 +250,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-information {
   .p-notification--information {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-information, left, true);
-    @include vf-icon-info($color-mid-dark);
+    @include vf-highlight-bar($colors--theme--border-information, left, true);
+    @include vf-icon-info-themed;
   }
 }

package/scss/_patterns_search-box.scss

@@ -38,13 +38,33 @@
       }
     }
 
+    // Theme set on body element
     .p-search-box__input {
+      background-color: $colors--theme--background-inputs;
+      border-color: $colors--theme--border-high-contrast;
+
+      color: $colors--theme--text-default;
       flex: 1 1 100%;
       margin-bottom: 0;
       padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));
       position: absolute;
       right: 0;
 
+      &:hover,
+      &:-webkit-autofill:hover {
+        background-color: $colors--theme--background-hover !important;
+      }
+
+      &:active,
+      &:focus,
+      &:-internal-autofill-selected,
+      &:-webkit-autofill,
+      &:-webkit-autofill:focus {
+        // XXX: remove important once the button {} selector is refactored to use themeing. At the moment, it trumps these.
+        background-color: $colors--theme--background-active !important;
+        border-color: $colors--theme--border-high-contrast !important;
+      }
+
       &::-webkit-search-cancel-button {
         -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
       }
@@ -64,7 +84,6 @@
     }
   }
 
-  // Theming
   %transparent-button {
     &,
     &:active,
@@ -74,102 +93,4 @@
       border-width: 0;
     }
   }
-
-  @if ($theme-default-p-search-box == 'dark') {
-    .p-search-box__input {
-      @include vf-search-box-dark-theme;
-    }
-  } @else {
-    .p-search-box {
-      .p-search-box__input {
-        @include vf-search-box-light-theme;
-      }
-    }
-  }
-
-  // beware that the order of the following classes is important
-  // as they are used to override the default theme
-  .is-paper .p-search-box {
-    .p-search-box__input {
-      @include vf-search-box-paper-theme;
-    }
-  }
-
-  .p-search-box.is-light {
-    .p-search-box__input {
-      @include vf-search-box-light-theme;
-    }
-  }
-
-  .p-search-box.is-dark {
-    .p-search-box__input {
-      @include vf-search-box-dark-theme;
-    }
-  }
-}
-
-@mixin vf-search-box-theme(
-  $color-search-box-background,
-  $color-search-box-background-hover,
-  $color-search-box-background-active,
-  $color-search-box-border,
-  $color-search-box-text
-) {
-  //XXX: This should inherit from input color theming. Once that becomes available, delete this.
-  background-color: $color-search-box-background;
-  border-color: $color-search-box-border;
-  color: $color-search-box-text;
-
-  &:hover,
-  &:-webkit-autofill:hover {
-    background-color: $color-search-box-background-hover !important;
-  }
-
-  &:active,
-  &:focus,
-  &:-internal-autofill-selected,
-  &:-webkit-autofill,
-  &:-webkit-autofill:focus {
-    // XXX: remove important once the button {} selector is refactored to use themeing. At the moment, it trumps these.
-    background-color: $color-search-box-background-active !important;
-    border-color: $color-search-box-border !important;
-  }
-}
-
-@mixin vf-search-box-light-theme {
-  @include vf-search-box-theme(
-    $color-search-box-background: $colors--light-theme--background-inputs,
-    $color-search-box-background-hover: $colors--light-theme--background-hover,
-    $color-search-box-background-active: $colors--light-theme--background-active,
-    $color-search-box-border: $colors--light-theme--border-high-contrast,
-    $color-search-box-text: $colors--light-theme--text-default
-  );
-}
-
-@mixin vf-search-box-dark-theme {
-  @include vf-search-box-theme(
-    $color-search-box-background: lighten($colors--dark-theme--background-default, 10%),
-    $color-search-box-background-hover: $colors--dark-theme--background-hover,
-    $color-search-box-background-active: $colors--dark-theme--background-active,
-    $color-search-box-border: $color-x-light,
-    $color-search-box-text: $colors--dark-theme--text-default
-  );
-
-  &::placeholder {
-    color: $colors--dark-theme--text-default;
-  }
-}
-
-@mixin vf-search-box-paper-theme {
-  // XXX: currently these colours are transparent,
-  // so they work both on paper and white backgrounds.
-  // We may need later to add a specific override for
-  // a white background within paper themed pages.
-  @include vf-search-box-theme(
-    $color-search-box-background: $colors--paper-theme--background-inputs,
-    $color-search-box-background-hover: $colors--paper-theme--background-hover,
-    $color-search-box-background-active: $colors--paper-theme--background-active,
-    $color-search-box-border: $colors--light-theme--border-high-contrast,
-    $color-search-box-text: $colors--light-theme--text-default
-  );
 }

package/scss/_patterns_section.scss

@@ -1,5 +1,6 @@
 @mixin vf-p-section {
-  .p-section {
+  .p-section,
+  .p-section--hero {
     // same as %section-padding--default
     padding-bottom: $spv--strip-regular * 0.5;
 
@@ -22,4 +23,14 @@
     // same as %section-padding--shallow
     padding-bottom: $spv--x-large;
   }
+
+  // hero section has additional top padding (as it appears on the top of the page)
+  .p-section--hero {
+    padding-top: $spv--large;
+
+    // on large screens, same as %section-padding--shallow
+    @media (min-width: $breakpoint-large) {
+      padding-top: $spv--x-large;
+    }
+  }
 }

package/scss/_patterns_side-navigation-expandable.scss

@@ -15,6 +15,7 @@
   .p-side-navigation__expand {
     @include vf-button-base;
     background: none;
+    background-color: inherit;
     border: 0;
     border-radius: 0;
     font-size: inherit;
@@ -28,15 +29,29 @@
 
     &::before {
       @extend %icon;
-      @include vf-icon-chevron;
+      @include vf-icon-chevron-themed;
       content: '';
       transform: rotate(-90deg);
       transition: transform 100ms;
     }
+
+    &:hover {
+      background: $colors--theme--background-hover;
+      color: $colors--theme--text-default;
+    }
   }
 
-  .p-side-navigation__expand[aria-expanded='true']::before {
-    transform: rotate(0deg);
+  .p-side-navigation__expand[aria-expanded='true'] {
+    background-color: inherit;
+
+    &::before {
+      transform: rotate(0deg);
+    }
+
+    &:hover {
+      background: $colors--theme--background-hover;
+      color: $colors--theme--text-default;
+    }
   }
 
   // transition
@@ -59,56 +74,4 @@
     transform: translate3d(0, 0, 0);
     visibility: visible;
   }
-
-  // Theming for the expandable variant
-  @if ($theme-default-p-side-navigation == 'dark') {
-    .p-side-navigation,
-    [class*='p-side-navigation--'] {
-      @include vf-side-navigation-expandable-theme-dark;
-
-      &.is-light {
-        @include vf-side-navigation-expandable-theme-light;
-      }
-    }
-  } @else {
-    .p-side-navigation,
-    [class*='p-side-navigation--'] {
-      @include vf-side-navigation-expandable-theme-light;
-
-      &.is-dark {
-        @include vf-side-navigation-expandable-theme-dark;
-      }
-    }
-  }
-}
-
-@mixin vf-side-navigation-expandable-theme($color-sidenav-text-active, $color-sidenav-item-background-hover, $color-sidenav-toggle-icon) {
-  .p-side-navigation__expand {
-    background-color: inherit;
-    &::before {
-      @include vf-icon-chevron($color-sidenav-toggle-icon);
-    }
-
-    &:hover {
-      background: $color-sidenav-item-background-hover;
-      color: $color-sidenav-text-active;
-    }
-  }
-}
-
-@mixin vf-side-navigation-expandable-theme-light {
-  @include vf-side-navigation-expandable-theme(
-    $color-sidenav-text-active: $colors--light-theme--text-default,
-    $color-sidenav-item-background-hover: $colors--light-theme--background-hover,
-    $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
-  );
-}
-
-@mixin vf-side-navigation-expandable-theme-dark {
-  @include vf-side-navigation-expandable-theme(
-    $color-sidenav-text-active: $colors--dark-theme--text-default,
-    $color-sidenav-item-background-hover: $colors--dark-theme--background-hover,
-    // color of toggle icon - needed because of lack of rgba support in icon mixin
-    $color-sidenav-toggle-icon: #999
-  );
 }