@fs-design/pantry 6.567.7

package/src/components/layout/_grid.scss

@@ -0,0 +1,364 @@
+// Names
+$container: 'container' !default;
+$row: 'row' !default;
+$cell: 'col' !default;
+
+// ------------------------------------
+// Mixins
+// ------------------------------------
+
+// Generate the different container sizes at various break points
+// Usage:
+//    @import generate-container ( <Nested List Of (breakpoint-size, container-size)> )
+// Example:
+//    @import generate-container ( (1200px, 1170px), (768px, 750px) )
+@mixin generate-container($breakpoints) {
+  @each $bp-size, $container-size in $breakpoints {
+    @media (min-width: $bp-size) {
+      max-width: $container-size + $grid-horizontal-gutter;
+    }
+  }
+}
+
+@mixin cell-fractions-class-names(
+  $numerator,
+  $denominator,
+  $breakpoint: null,
+  $breakpoint-name: null
+) {
+  $fraction: #{$numerator}\/#{$denominator};
+  $width: percentage($numerator/$denominator);
+
+  @if ($breakpoint and $breakpoint-name) {
+    .#{$cell}--#{$fraction}-#{$breakpoint-name} {
+      @media (min-width: $breakpoint) {
+        width: $width;
+        flex: none;
+      }
+    }
+  } @else {
+    .#{$cell}--#{$fraction} {
+      width: $width;
+      flex: none;
+    }
+  }
+}
+
+// Cell Size Mixin
+@mixin generate-cells-fractions($breakpoint: null, $breakpoint-name: null) {
+  @each $denominator in $grid-columns {
+    @for $i from 1 through $denominator {
+      @include cell-fractions-class-names(
+        $i,
+        $denominator,
+        $breakpoint,
+        $breakpoint-name
+      );
+    }
+  }
+}
+
+// Grid Alignment Mixin
+@mixin row-alignment($position, $breakpoints) {
+  .row--align-#{$position} {
+    @content;
+  }
+
+  @each $bp-size, $name in $breakpoints {
+    .row--align-#{$position}-#{$name} {
+      @media (min-width: $bp-size) {
+        @content;
+      }
+    }
+  }
+}
+
+// Cell Alignment Mixin
+@mixin cell-alignment($position, $breakpoints) {
+  .#{$cell}--align-#{$position} {
+    @content;
+  }
+  @each $bp-size, $name in $breakpoints {
+    .#{$cell}--align-#{$position}-#{$name} {
+      @media (min-width: $bp-size) {
+        @content;
+      }
+    }
+  }
+}
+
+// ------------------------------------
+// CSS
+// ------------------------------------
+.#{$container} {
+  display: block;
+  margin: 0 auto;
+  padding: 0 ($grid-horizontal-gutter / 2);
+  width: 100%;
+
+  @include generate-container(
+    (
+      ($breakpoint-small, $grid-container-small),
+      ($breakpoint-medium, $grid-container-medium),
+      ($breakpoint-large, $grid-container-large)
+    )
+  );
+}
+
+.#{$container}--fluid {
+  max-width: 100%;
+}
+
+.#{$row} {
+  display: flex;
+  flex-wrap: wrap;
+  margin: (-$grid-vertical-gutter / 2);
+
+  & + & {
+    margin-top: ($grid-vertical-gutter / 2);
+  }
+
+  & + .#{row}-no-grid {
+    margin-top: $grid-vertical-gutter;
+  }
+
+  &::after {
+    content: ' ';
+    display: table;
+    clear: both;
+  }
+}
+
+.#{row}-no-grid {
+  & + & {
+    margin-top: $grid-vertical-gutter;
+  }
+
+  & + .#{row} {
+    margin-top: ($grid-vertical-gutter / 2);
+  }
+}
+
+.#{$cell} {
+  padding: 0 ($grid-horizontal-gutter / 2);
+  margin: ($grid-vertical-gutter / 2) 0;
+  width: 100%;
+  max-width: 100%;
+  float: left;
+}
+
+// Columns that are auto-sized
+@mixin fill-as-much-space-as-needed {
+  width: auto;
+  flex: none;
+}
+
+// Columns that fill the remaining space
+@mixin fill-remaining-space {
+  width: auto;
+  flex: 1 1 0;
+}
+
+// --------------------------------
+// Generate the cell sizings for
+// different breakpoints
+// --------------------------------
+
+// Mobile-first modifiers
+@include generate-cells-fractions();
+
+.#{$cell}--auto {
+  @include fill-as-much-space-as-needed;
+}
+
+.#{$cell}--fill {
+  @include fill-remaining-space;
+}
+
+// Small modifiers
+@include generate-cells-fractions($breakpoint-small, 'small');
+
+.#{$cell}--auto-small {
+  @media (min-width: $breakpoint-small) {
+    @include fill-as-much-space-as-needed;
+  }
+}
+
+.#{$cell}--fill-small {
+  @media (min-width: $breakpoint-small) {
+    @include fill-remaining-space;
+  }
+}
+
+@include generate-cells-fractions($breakpoint-medium, 'medium');
+
+.#{$cell}--auto-medium {
+  @media (min-width: $breakpoint-medium) {
+    @include fill-as-much-space-as-needed;
+  }
+}
+
+.#{$cell}--fill-medium {
+  @media (min-width: $breakpoint-medium) {
+    @include fill-remaining-space;
+  }
+}
+
+@include generate-cells-fractions($breakpoint-large, 'large');
+
+.#{$cell}--auto-large {
+  @media (min-width: $breakpoint-large) {
+    @include fill-as-much-space-as-needed;
+  }
+}
+
+.#{$cell}--fill-large {
+  @media (min-width: $breakpoint-large) {
+    @include fill-remaining-space;
+  }
+}
+
+// --------------------------------
+//      Row Horizontal Alignment
+// --------------------------------
+@include row-alignment(
+  'left',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  justify-content: flex-start;
+}
+
+@include row-alignment(
+  'right',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  justify-content: flex-end;
+}
+
+@include row-alignment(
+  'center',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  justify-content: center;
+}
+
+// --------------------------------
+//      Row Vertical Alignment
+// --------------------------------
+@include row-alignment(
+  'top',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  align-items: flex-start;
+}
+
+@include row-alignment(
+  'bottom',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  align-items: flex-end;
+}
+
+@include row-alignment(
+  'middle',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  align-items: center;
+}
+
+// --------------------------------
+//      Cell Vertical Alignment
+// --------------------------------
+@include cell-alignment(
+  'top',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  align-self: flex-start;
+}
+
+@include cell-alignment(
+  'bottom',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  align-self: flex-end;
+}
+
+@include cell-alignment(
+  'middle',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  align-self: center;
+}
+
+// --------------------------------
+//      Cell Horizontal Alignment
+// --------------------------------
+@include cell-alignment(
+  'left',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  margin-right: auto;
+}
+
+@include cell-alignment(
+  'center',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@include cell-alignment(
+  'right',
+  (
+    ($breakpoint-small, 'small'),
+    ($breakpoint-medium, 'medium'),
+    ($breakpoint-large, 'large')
+  )
+) {
+  margin-left: auto;
+}

package/src/components/logo/_index.scss

@@ -0,0 +1,16 @@
+.logo {
+  height: 4.5rem;
+  width: 4.5rem;
+}
+
+.logo--fs {
+  width: 27rem;
+}
+
+.logo--fsmk {
+  width: 41.25rem;
+}
+
+.logo--stacked {
+  width: 13.5rem;
+}

package/src/components/modal/_index.scss

@@ -0,0 +1,84 @@
+$modal-max-width: 456px + ($spacing-5 * 2);
+
+.modal,
+.modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.modal-container {
+  display: none;
+  background-color: transparentize(#000, 0.3);
+  height: 100%;
+  z-index: 20;
+
+  &.is-open {
+    display: block;
+  }
+}
+
+.modal {
+  padding: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+  border: $spacing-5 solid transparent;
+
+  @media (min-width: $breakpoint-small) {
+    max-width: $modal-max-width;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.modal__content {
+  background-color: $color-white;
+  border-radius: $border-radius-default;
+  padding: $spacing-5;
+  height: 100%;
+  width: 100%;
+
+  @media (min-width: $breakpoint-small) {
+    padding: $spacing-6;
+  }
+}
+
+.modal__close {
+  padding: 0;
+  display: block;
+  box-shadow: none;
+  border: 0;
+  line-height: 1;
+  font-size: 2rem;
+  color: $color-gray-400;
+  margin-bottom: $spacing-5;
+  margin-left: auto;
+  width: 1em;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-blue-300;
+    transform: none;
+    box-shadow: none;
+  }
+
+  @media (min-width: $breakpoint-small) {
+    margin-bottom: $spacing-6;
+  }
+}
+
+.modal__hero {
+  text-align: center;
+  margin-bottom: $spacing-7;
+}
+
+.modal__header {
+  text-align: center;
+  margin-bottom: $spacing-3;
+}
+
+.modal__actions {
+  margin-top: $spacing-9;
+}

package/src/components/navigation-bar/_index.scss

@@ -0,0 +1,36 @@
+$navbar-padding: $spacing-5 $spacing-6;
+$navbar-min-height: 80px;
+$menu-item-padding: $spacing-4 $spacing-5;
+$menu-submenu-width: 310px;
+$menu-margin-between: $spacing-2;
+$menu-transition-fn: cubic-bezier(0, 0, 0.2, 1);
+$menu-hamburger-transition-fn: cubic-bezier(0.215, 0.61, 0.355, 1);
+$menu-hamburger-transition-duration: 75ms;
+$hamburger-breakpoint: $breakpoint-medium;
+
+%clickable-menu-item {
+  text-decoration: none;
+  outline: 0;
+  display: flex;
+  color: $l-base-gray-darker;
+  padding: $menu-item-padding;
+  border-radius: $border-radius-default;
+  transition: color 200ms $menu-transition-fn,
+    background-color 200ms $menu-transition-fn;
+
+  &:hover,
+  &:focus {
+    background-color: $l-primary-lightest;
+  }
+
+  &:active,
+  &:focus {
+    color: $l-primary;
+  }
+}
+
+@import './nav';
+@import './navbar';
+@import './nav-menu';
+@import './nav-menu-item';
+@import './nav-submenu';

package/src/components/navigation-bar/_nav-menu-item.scss

@@ -0,0 +1,49 @@
+.nav-menu__item {
+  a:not(.btn) {
+    @extend %clickable-menu-item;
+  }
+}
+
+.nav-menu__item--separator {
+  padding: 0;
+  border-width: 0;
+  border-color: $l-base-gray-lightest;
+  border-style: solid;
+  border-bottom-width: 1px;
+  height: auto;
+  width: 100vw;
+  margin: ($spacing-4) (-$spacing-3);
+  pointer-events: none;
+
+  @media (min-width: $hamburger-breakpoint) {
+    height: 3.42857em;
+    width: auto;
+    margin: 0 $spacing-2;
+    border-right-width: 1px;
+  }
+}
+
+.nav-menu__item + .nav-menu__item,
+.nav-menu__item + .nav-submenu {
+  margin-top: $menu-margin-between;
+
+  @media (min-width: $hamburger-breakpoint) {
+    margin-top: 0;
+    margin-left: $menu-margin-between;
+  }
+}
+
+.nav-menu__item + .nav-menu__item--separator {
+  margin-top: $spacing-4;
+
+  @media (min-width: $hamburger-breakpoint) {
+    margin-top: 0;
+    margin-left: $menu-margin-between;
+  }
+}
+
+.nav-menu__item--separator + .nav-menu__item,
+.nav-menu__item--separator + .nav-submenu {
+  margin-top: 0;
+  margin-left: 0;
+}

package/src/components/navigation-bar/_nav-menu.scss

@@ -0,0 +1,53 @@
+.nav-menu {
+  margin-left: auto;
+  display: none;
+  background-color: $color-white;
+  position: relative;
+
+  @media (min-width: $hamburger-breakpoint) {
+    display: block;
+  }
+}
+
+.nav-menu__items {
+  height: 100%;
+  list-style: none;
+  padding: $spacing-5 $spacing-3;
+  display: block;
+  font-weight: $font-weight-medium;
+  font-size: $font-size-small;
+  line-height: 1.71429;
+  transition: transform 200ms $menu-transition-fn;
+
+  @media (min-width: $hamburger-breakpoint) {
+    height: auto;
+    display: flex;
+    align-items: center;
+    padding: 0;
+  }
+}
+
+.nav-menu--hamburger {
+  display: block;
+  position: absolute;
+  padding-top: $navbar-min-height;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transform: translateY(-100%);
+  transition: 300ms transform $menu-hamburger-transition-fn;
+
+  @media (min-width: $hamburger-breakpoint) {
+    display: none;
+  }
+
+  .nav-menu__item {
+    .btn {
+      text-align: center;
+      width: 100%;
+    }
+  }
+}