vanilla-framework 2.36.0 → 3.0.0-beta.1

package/scss/_patterns_inline-images.scss

@@ -1,37 +0,0 @@
-@import 'settings';
-
-// Image grid to showcase group of images
-@mixin vf-p-inline-images {
-  .p-inline-images {
-    @extend %vf-clearfix;
-
-    display: block;
-    list-style: none; // if list is used as wrapper
-    margin-left: 0;
-    padding-left: 0;
-    text-align: center;
-  }
-
-  .p-inline-images__item {
-    display: inline-block;
-    margin: 1rem;
-    overflow: hidden;
-    text-align: center;
-    vertical-align: middle;
-
-    @media (min-width: $breakpoint-medium) {
-      margin: 1.875rem;
-    }
-  }
-
-  .p-inline-images__logo {
-    max-height: map-get($icon-sizes, thumb);
-    max-width: 7rem;
-    width: auto;
-
-    @media (min-width: $breakpoint-medium) {
-      max-height: 5.5rem;
-      max-width: 9rem;
-    }
-  }
-}

package/scss/_patterns_subnav.scss

@@ -1,210 +0,0 @@
-@import 'settings';
-
-@mixin vf-p-subnav {
-  @include deprecate('3.0.0', '.p-subnav will be removed, use .p-navigation__item--dropdown-toggle instead') {
-    $color-navigation-background: $color-x-light !default;
-    $subnav-vertical-padding: $spv-inner--large;
-
-    .p-subnav {
-      position: relative;
-    }
-
-    .p-subnav::after {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      content: '';
-      display: block;
-      height: $spv-inner--large;
-      pointer-events: none;
-      position: absolute;
-      right: map-get($grid-margin-widths, small);
-      text-indent: calc(100% + 10rem);
-      top: calc(#{$spv-inner--large} + #{map-get($nudges, nudge--x-small)});
-      width: map-get($icon-sizes, default);
-
-      @media (min-width: $threshold-4-6-col) {
-        right: map-get($grid-margin-widths, medium);
-      }
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc(#{$sph-inner--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
-      }
-    }
-
-    .p-subnav__items,
-    .p-subnav__items--right {
-      @extend %vf-has-box-shadow;
-      @extend %vf-has-round-corners;
-
-      display: none;
-      margin: 0;
-      min-width: 100%;
-      padding: 0;
-      z-index: 5;
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        position: absolute;
-        // padding applied to .p-navigation__link + line-heigh of the anchor text inside
-        top: $subnav-vertical-padding * 2 + map-get($line-heights, default-text);
-      }
-
-      @media (max-width: $breakpoint-navigation-threshold - 1) {
-        box-shadow: none;
-      }
-    }
-
-    .p-subnav__items--right {
-      right: 0;
-    }
-
-    .p-subnav.is-active {
-      &::after {
-        transform: rotate(180deg);
-      }
-
-      .p-subnav__items,
-      .p-subnav__items--right {
-        display: block;
-      }
-    }
-
-    %subnav-link {
-      padding-right: 2 * $sph-inner--small + map-get($icon-sizes, default); // icon padded with the default padding-right of selects, inputs etc.
-    }
-
-    .p-subnav__item {
-      @extend %navigation-link-responsive-padding-horizontal;
-
-      display: block;
-      padding-bottom: $spv-inner--small;
-      padding-top: $spv-inner--small;
-      white-space: nowrap;
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        padding-bottom: $spv-inner--medium;
-        padding-top: $spv-inner--medium;
-      }
-
-      &,
-      &:active,
-      &:focus,
-      &:hover,
-      &:visited {
-        text-decoration: none;
-      }
-    }
-
-    .p-subnav > .p-navigation__link {
-      // remove nesting in 3.0 when deprecated __link styles are removed
-      @extend %subnav-link;
-    }
-
-    @include deprecate('3.0.0', 'Use .p-navigation__items, .p-navigation__item, .p-navigation__link classes instead.') {
-      // stylelint-disable-next-line selector-max-type -- this is deprecated use, will be removed
-      .p-subnav > a {
-        @extend %subnav-link;
-      }
-    }
-
-    // Theming
-    @if ($theme-default-nav == 'dark') {
-      .p-subnav {
-        @include vf-subnav-dark-theme;
-      }
-
-      .p-subnav.is-light,
-      .p-navigation.is-light .p-subnav {
-        @include vf-subnav-light-theme;
-      }
-    } @else {
-      .p-subnav {
-        @include vf-subnav-light-theme;
-      }
-
-      .p-subnav.is-dark,
-      .p-navigation.is-dark .p-subnav {
-        @include vf-subnav-dark-theme;
-      }
-    }
-  }
-}
-
-@mixin vf-subnav-theme(
-  // color of the subnav toggle chevron icon
-  $color-subnav-icon,
-  // color of the subnav items background
-  $color-subnav-background,
-  // color of the subnav items text
-  $color-subnav-text,
-  // color of the subnav items background on hover
-  $color-subnav-background-hover,
-  // color of the subnav items background on active
-  $color-subnav-background-active,
-  // color of the subnav items text on hover
-  $color-subnav-text-hover,
-  // color of the subnav items separator on small screens
-  $color-subnav-separator
-) {
-  &::after {
-    @include vf-icon-chevron($color-subnav-icon);
-  }
-
-  .p-subnav__items {
-    background-color: $color-subnav-background;
-  }
-
-  .p-subnav__item {
-    background-color: $color-subnav-background;
-
-    &,
-    &:active,
-    &:focus,
-    &:visited {
-      color: $color-subnav-text;
-    }
-
-    &:hover {
-      background-color: $color-subnav-background-hover;
-      color: $color-subnav-text-hover;
-    }
-
-    &:active {
-      background: $color-subnav-background-active;
-      color: $color-subnav-text-hover;
-    }
-  }
-
-  &.is-active > .p-navigation__link {
-    background: $color-subnav-background-active;
-    color: $color-subnav-text-hover;
-  }
-}
-
-@mixin vf-subnav-light-theme {
-  @include vf-subnav-theme(
-    $color-subnav-background: $colors--light-theme--background-default,
-    $color-subnav-background-hover: $colors--light-theme--background-alt,
-    $color-subnav-background-active: $colors--light-theme--background-active,
-    $color-subnav-text: $colors--light-theme--text-default,
-    $color-subnav-text-hover: $colors--light-theme--text-default,
-    $color-subnav-icon: $color-mid-dark,
-    $color-subnav-separator: $colors--light-theme--border-default
-  );
-}
-
-@mixin vf-subnav-dark-theme {
-  // FIXME:
-  // $color-subnav-icon color should be $colors--dark-theme--text-muted,
-  // but vf-url-friendly-color doesn't support rgba(),
-  // so we are using #999 as fallback for now
-  @include vf-subnav-theme(
-    $color-subnav-background: $colors--dark-theme--background-alt,
-    $color-subnav-background-hover: $colors--dark-theme--background-hover,
-    $color-subnav-background-active: $colors--dark-theme--background-active,
-    $color-subnav-text: $colors--dark-theme--text-default,
-    $color-subnav-text-hover: $colors--dark-theme--text-default,
-    $color-subnav-icon: $color-mid-x-light,
-    $color-subnav-separator: $colors--dark-theme--border-default
-  );
-}

package/scss/standalone/base.scss

@@ -1,2 +0,0 @@
-@import '../vanilla';
-@include vf-base;

package/scss/standalone/custom.scss

@@ -1,7 +0,0 @@
-// we are testing building Vanilla with custom settings
-
-// using 100% grid to make sure it works if it's not in rem units
-$grid-max-width: 100%;
-
-@import '../vanilla';
-@include vanilla;

package/scss/standalone/dark.scss

@@ -1,11 +0,0 @@
-$theme-default-forms: 'dark';
-$theme-default-hr: 'dark';
-$theme-default-nav: 'dark';
-$theme-default-p-search-box: 'dark';
-$theme-default-p-contextual-menu: 'dark';
-$theme-default-p-divider: 'dark';
-$theme-default-p-inline-list--middot: 'dark';
-
-@import '../vanilla';
-
-@include vanilla;

package/scss/standalone/example.scss

@@ -1,15 +0,0 @@
-// styles specific for the example pages
-
-@import '../vanilla';
-@include vf-u-baseline-grid;
-
-// stylelint-disable selector-max-type -- examples base can use type selectors
-html {
-  background: $colors--light-theme--background-default;
-}
-
-body {
-  background: $colors--light-theme--background-default;
-  margin: 1rem;
-}
-// stylelint-enable selector-max-type

package/scss/standalone/import.scss

@@ -1,2 +0,0 @@
-// for testing if just importing Vanilla builds without errors
-@import '../vanilla';

package/scss/standalone/layouts_fluid-breakout-full.scss

@@ -1,8 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-l-fluid-breakout(14rem, 13rem, 0, '--single-main');
-
-@include vf-p-grid;
-@include vf-p-lists;
-@include vf-p-strip;

package/scss/standalone/layouts_fluid-breakout.scss

@@ -1,8 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-l-fluid-breakout;
-
-@include vf-p-card;
-@include vf-p-grid;
-@include vf-p-lists;

package/scss/standalone/patterns_accordion.scss

@@ -1,6 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// needed for the example with checkboxes
-@include vf-p-form-tick-elements;
-@include vf-p-accordion;

package/scss/standalone/patterns_article-pagination.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-article-pagination;

package/scss/standalone/patterns_breadcrumbs.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-breadcrumbs;

package/scss/standalone/patterns_buttons.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// needed in buttons icon example
-@include vf-p-icons;
-
-// needed in aria-pressed example
-@include vf-p-contextual-menu;
-@include vf-p-buttons;

package/scss/standalone/patterns_card.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-card;
-@include vf-p-grid;
-@include vf-p-strip;
-
-@include vf-u-vertical-spacing;
-@include vf-u-align;

package/scss/standalone/patterns_chip.scss

@@ -1,6 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-chip;
-@include vf-p-icons-common;
-@include vf-p-icon-close;

package/scss/standalone/patterns_code-copyable.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-code-copyable;

package/scss/standalone/patterns_code-numbered.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-code-numbered;

package/scss/standalone/patterns_code-snippet.scss

@@ -1,6 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-code-snippet;
-
-@include vf-u-hide;

package/scss/standalone/patterns_contextual-menu.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-buttons;
-
-// icons are needed for indicator variant
-@include vf-p-icons-common;
-@include vf-p-icon-chevron;
-@include vf-p-contextual-menu;

package/scss/standalone/patterns_divider.scss

@@ -1,7 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-divider;
-
-// grid classes (col-X) needed for divider pattern
-@include vf-p-grid;

package/scss/standalone/patterns_form-password-toggle.scss

@@ -1,19 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// button styles used in some form examples
-@include vf-p-buttons;
-
-// importing forms and related patterns as they are all used in various examples
-@include vf-p-forms;
-@include vf-p-form-password-toggle;
-
-// icons for password toggle
-@include vf-p-icon-hide;
-@include vf-p-icon-show;
-
-// Add margin utilities
-@include vf-u-margin-collapse;
-
-// Add form validation
-@include vf-p-form-validation;

package/scss/standalone/patterns_form-tick-elements.scss

@@ -1,13 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// grid required by stacked form example
-@include vf-p-grid;
-
-// button styles used in some form examples
-@include vf-p-buttons;
-@include vf-p-muted-heading;
-@include vf-p-form-tick-elements;
-@include vf-p-form-help-text;
-
-@include vf-u-layout;

package/scss/standalone/patterns_forms.scss

@@ -1,17 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// grid required by stacked form example
-@include vf-p-grid;
-
-// button styles used in some form examples
-@include vf-p-buttons;
-
-// importing forms and related patterns as they are all used in various examples
-@include vf-p-forms;
-@include vf-p-form-help-text;
-@include vf-p-form-validation;
-@include vf-p-form-tick-elements;
-
-// float utilities used to position buttons in some examples
-@include vf-u-floats;

package/scss/standalone/patterns_grid.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-grid;

package/scss/standalone/patterns_heading-icon.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-heading-icon;

package/scss/standalone/patterns_headings.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-headings;

package/scss/standalone/patterns_icons-additional.scss

@@ -1,104 +0,0 @@
-// This file contains everything needed to render
-// the application icon set only. This is not a standard
-// pattern, but is needed to display this icon set in
-// our examples.
-
-@import '../vanilla';
-@include vf-b-placeholders;
-
-@include vf-p-icons-common;
-
-@include vf-p-icon-applications;
-@include vf-p-icon-controllers;
-@include vf-p-icon-fullscreen;
-@include vf-p-icon-models;
-@include vf-p-icon-machines;
-@include vf-p-icon-pin;
-@include vf-p-icon-units;
-@include vf-p-icon-priority-critical;
-@include vf-p-icon-priority-high;
-@include vf-p-icon-priority-low;
-@include vf-p-icon-priority-medium;
-@include vf-p-icon-priority-negligible;
-@include vf-p-icon-priority-unknown;
-@include vf-p-icon-add-canvas;
-@include vf-p-icon-add-logical-volume;
-@include vf-p-icon-add-partition;
-@include vf-p-icon-back-to-top;
-@include vf-p-icon-begin-downloading;
-@include vf-p-icon-bundle;
-@include vf-p-icon-canvas;
-@include vf-p-icon-change-version;
-@include vf-p-icon-comments;
-@include vf-p-icon-conflict-grey;
-@include vf-p-icon-conflict-resolution-grey;
-@include vf-p-icon-conflict-resolution;
-@include vf-p-icon-conflict;
-@include vf-p-icon-connected;
-@include vf-p-icon-containers;
-@include vf-p-icon-copy-to-clipboard;
-@include vf-p-icon-disconnect;
-@include vf-p-icon-edit;
-@include vf-p-icon-export;
-@include vf-p-icon-exposed;
-@include vf-p-icon-filter;
-@include vf-p-icon-fork;
-@include vf-p-icon-get-link;
-@include vf-p-icon-halfscreen-bar;
-@include vf-p-icon-hide;
-@include vf-p-icon-highlight-off;
-@include vf-p-icon-highlight-on;
-@include vf-p-icon-home;
-@include vf-p-icon-import;
-@include vf-p-icon-in-progress;
-@include vf-p-icon-inspector-debug;
-@include vf-p-icon-loading-steps;
-@include vf-p-icon-lock-locked-active;
-@include vf-p-icon-lock-locked;
-@include vf-p-icon-lock-unlock;
-@include vf-p-icon-maximise-bar;
-@include vf-p-icon-minimise-bar;
-@include vf-p-icon-mount-2;
-@include vf-p-icon-mount;
-@include vf-p-icon-open-terminal;
-@include vf-p-icon-plans;
-@include vf-p-icon-pods;
-@include vf-p-icon-power-error;
-@include vf-p-icon-power-off;
-@include vf-p-icon-power-on;
-@include vf-p-icon-profile;
-@include vf-p-icon-restart;
-@include vf-p-icon-revisions;
-@include vf-p-icon-security;
-@include vf-p-icon-settings;
-@include vf-p-icon-show;
-@include vf-p-icon-sort-both;
-@include vf-p-icon-sort-down;
-@include vf-p-icon-sort-up;
-@include vf-p-icon-starred;
-@include vf-p-icon-status-failed-small;
-@include vf-p-icon-status-in-progress-small;
-@include vf-p-icon-status-in-progress;
-@include vf-p-icon-status-queued-small;
-@include vf-p-icon-status-queued;
-@include vf-p-icon-status-succeeded-small;
-@include vf-p-icon-status-waiting-small;
-@include vf-p-icon-status-waiting;
-@include vf-p-icon-status;
-@include vf-p-icon-submit-bug;
-@include vf-p-icon-success-grey;
-@include vf-p-icon-switcher-dashboard;
-@include vf-p-icon-switcher-environments;
-@include vf-p-icon-switcher;
-@include vf-p-icon-tag;
-@include vf-p-icon-task-outstanding;
-@include vf-p-icon-timed-out-grey;
-@include vf-p-icon-timed-out;
-@include vf-p-icon-topic;
-@include vf-p-icon-unit-pending;
-@include vf-p-icon-unit-running;
-@include vf-p-icon-unmount;
-@include vf-p-icon-unstarred;
-@include vf-p-icon-user-group;
-@include vf-p-icon-video-play;
-@include vf-p-icon-warning-grey;

package/scss/standalone/patterns_icons.scss

@@ -1,7 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-icons;
-
-// for spin animation on the spinner icon
-@include vf-u-animations;

package/scss/standalone/patterns_image.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-image;

package/scss/standalone/patterns_inline-images.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-inline-images;

package/scss/standalone/patterns_label.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-label;

package/scss/standalone/patterns_links.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-links;

package/scss/standalone/patterns_list-tree.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-list-tree;

package/scss/standalone/patterns_lists.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-lists;

package/scss/standalone/patterns_logo-section.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-logo-section;

package/scss/standalone/patterns_matrix.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-matrix;

package/scss/standalone/patterns_media-object.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-media-object;

package/scss/standalone/patterns_modal.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// used in the example
-@include vf-p-heading-icon;
-@include vf-p-modal;
-@include vf-button-negative;
-
-@include vf-u-margin-collapse;

package/scss/standalone/patterns_muted-heading.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-muted-heading;

package/scss/standalone/patterns_navigation.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-navigation;

package/scss/standalone/patterns_notifications.scss

@@ -1,11 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-notification;
-
-// needed in borderless demo
-@include vf-u-margin-collapse;
-
-// needed for deprecated notification pattern
-// can be removed in 3.0
-@include vf-p-icon-close;