foundation_apps_styles 1.1.0

data/vendor/assets/stylesheets/components/_popup.scss

@@ -0,0 +1,68 @@
+/*
+  POPUP
+  -----
+
+  A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels.
+*/
+
+/// @Foundation.settings
+// Popup
+$popup-width: rem-calc(300) !default;
+$popup-background: #fff !default;
+$popup-border: 0 !default;
+$popup-radius: 0 !default;
+$popup-shadow: 0 0 10px rgba(#000, 0.25) !default;
+///
+
+%popup {
+  position: absolute;
+  z-index: 1000;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 0.25s ease-out;
+  pointer-events: none;
+
+  &.tether-enabled {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@mixin popup-layout(
+  $width: $popup-width
+) {
+  width: $popup-width;
+}
+@mixin popup-style(
+  $background: $popup-background,
+  $color: #000,
+  $radius: $popup-radius,
+  $shadow: $popup-shadow,
+  $border: $popup-border
+) {
+  background: $background;
+  border-radius: $radius;
+  box-shadow: $shadow;
+  border: $border;
+}
+
+@mixin popup(
+  $width: $popup-width,
+  $background: $popup-background,
+  $radius: $popup-radius,
+  $shadow: $popup-shadow,
+  $border: $popup-border
+) {
+  @extend %popup;
+  @include popup-layout($width);
+  @include popup-style($background, isitlight($background), $radius, $shadow, $border);
+}
+
+@include exports(popup) {
+  .popup {
+    @include popup;
+
+    &.dark    { @include popup-style($dark-color, #fff); }
+    &.primary { @include popup-style($primary-color, isitlight($primary-color)); }
+  }
+}

data/vendor/assets/stylesheets/components/_switch.scss

@@ -0,0 +1,134 @@
+/*
+  SWITCH
+  ------
+*/
+
+/// @Foundation.settings
+// Switch
+$switch-width: rem-calc(50) !default;
+$switch-height: rem-calc(32) !default;
+$switch-background: #ccc !default;
+$switch-background-active: $primary-color !default;
+$switch-border: 0 !default;
+$switch-radius: 9999px !default;
+$switch-animation-speed: 0.15s !default;
+
+$switch-paddle-color: white !default;
+$switch-paddle-offset: 4px !default;
+///
+
+%switch {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+
+  > input {
+    position: absolute;
+    left: -9999px;
+    outline: none;
+  }
+
+  > label {
+    -ms-touch-action: manipulation;
+        touch-action: manipulation;
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    margin: 0;
+
+    // Paddle
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  input + label {
+    margin-left: 0;
+  }
+}
+
+/*
+  Defines the dimmensions of the switch.
+
+  $width - width of the switch.
+  $height - height of the switch.
+*/
+@mixin switch-layout(
+  $width: $switch-width,
+  $height: $switch-height
+) {
+  width: $width;
+  height: $height;
+
+  > label {
+    &::after {
+      width: $height;
+      height: $height;
+    }
+  }
+  input:checked + label {
+    &::after {
+      left: $width - $height;
+    }
+  }
+}
+
+@mixin switch-style(
+  $background: $switch-background,
+  $background-active: $switch-background-active,
+  $border: $switch-border,
+  $radius: $switch-radius,
+  $paddle-color: $switch-paddle-color,
+  $paddle-offset: $switch-paddle-offset,
+  $animation-speed: $switch-animation-speed
+) {
+  @if hasvalue($border) {
+    border: $border;
+  }
+  border-radius: $radius;
+
+  > label {
+    background: $background;
+
+    &::after {
+      background: $paddle-color;
+      border-radius: $radius;
+      transition: left $animation-speed ease-out;
+
+      @if hasvalue($paddle-offset) {
+        border: $paddle-offset solid $background
+      }
+    }
+  }
+
+  input:checked + label {
+    background: $background-active;
+    margin: 0;
+
+    &::after {
+      @if hasvalue($paddle-offset) {
+        border-color: $background-active;
+      }
+    }
+  }
+}
+
+@mixin switch() {
+  @extend %switch;
+  @include switch-layout;
+  @include switch-style;
+}
+
+@include exports(switch) {
+  .switch {
+    @include switch;
+
+    &.small { @include switch-layout(rem-calc(40), rem-calc(26)); }
+    &.large { @include switch-layout(rem-calc(60), rem-calc(38)); }
+  }
+}

data/vendor/assets/stylesheets/components/_tabs.scss

@@ -0,0 +1,100 @@
+/*
+  TABS
+  ----
+*/
+
+/// @Foundation.settings
+// Tabs
+$tabstrip-background: transparent !default;
+
+$tab-title-background: $gray-light !default;
+$tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
+$tab-title-background-active: smartscale($tab-title-background, 3%) !default;
+$tab-title-color: isitlight($tab-title-background) !default;
+$tab-title-color-active: $tab-title-color !default;
+
+$tab-title-padding: $global-padding !default;
+$tab-content-padding: $global-padding !default;
+///
+
+@mixin tabstrip(
+	$orientation: horizontal,
+	$background: $tabstrip-background
+) {
+	/*
+		Container styles
+	*/
+	display: flex;
+	background: $background;
+
+	@if $orientation == vertical {
+	  flex-flow: column nowrap;
+	}
+	@else {
+		flex-flow: row wrap;
+	}
+}
+
+@mixin tabstrip-item(
+	$background: $tab-title-background,
+	$background-hover: $tab-title-background-hover,
+	$background-active: $tab-title-background-active,
+	$color: $tab-title-color,
+	$color-active: $tab-title-color-active,
+	$padding: $tab-title-padding
+) {
+  background: $background;
+  padding: $padding;
+  line-height: 1;
+  margin: 0;
+  flex: 0 1 auto;
+  cursor: pointer;
+  color: $color;
+
+  &.is-active {
+    background: $background-active;
+    color: $color-active;
+
+    &:hover {
+      background: $background-hover;
+    }
+  }
+  &:hover {
+    background: $background-hover;
+  }
+}
+
+@mixin tab-content(
+	$padding: $tab-content-padding
+) {
+  padding: $padding;
+}
+
+@mixin tab-content-item {
+  display: none;
+  &.is-active {
+    display: block;
+  }
+}
+
+@include exports(tabs) {
+  .tabs {
+    @include tabstrip(horizontal);
+
+    &.vertical {
+      @include tabstrip(vertical);
+    }
+
+    .tab-item {
+      @include tabstrip-item;
+    }
+  }
+
+  .tab-contents {
+    @include tab-content;
+
+    .tab-content {
+      @include tab-content-item;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/_title-bar.scss

@@ -0,0 +1,135 @@
+/*
+  TITLE BAR
+  ---------
+
+  A navigational component which can display the current screen the user is on, along with additional controls or menu items.
+
+  The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
+   - Center
+   - Left
+   - Right
+*/
+
+/// @Foundation.settings
+// Title Bar
+$titlebar-center-width: 50% !default;
+$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;
+$titlebar-background: #eee !default;
+$titlebar-color: #000 !default;
+$titlebar-border: 1px solid #ccc !default;
+$titlebar-padding: $global-padding !default;
+$titlebar-item-classes: (
+  center: 'center',
+  left: 'left',
+  right: 'right',
+  title: 'title',
+) !default;
+///
+
+%title-bar {
+  $center: map-get($titlebar-item-classes, center);
+  $left: map-get($titlebar-item-classes, left);
+  $right: map-get($titlebar-item-classes, right);
+  $title: map-get($titlebar-item-classes, title);
+
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: visible;
+
+  // Denotes the title of the bar
+  .#{$title} {
+    font-weight: bold;
+  }
+
+  // Denotes left, right, and center sections of the bar
+  .#{$left}, .#{$center}, .#{$right} {
+    display: block;
+    white-space: nowrap;
+    overflow: visible;
+
+    // If only one section is in use, stretch it all the way out
+    &:first-child:last-child {
+      flex: 1;
+      margin: 0;
+    }
+  }
+
+  // Left always comes first, then center, then right
+  // The left and right sections have the same width
+  .#{$left} {
+    order: 1;
+    flex: 0 0 $titlebar-side-width;
+  }
+  .#{$center} {
+    order: 2;
+    flex: 0 0 $titlebar-center-width;
+    text-align: center;
+  }
+  .#{$right} {
+    order: 3;
+    flex: 0 0 $titlebar-side-width;
+    text-align: right;
+  }
+
+  // If only left and right are in use, stretch them both out equally
+  .#{$left}:first-child {
+    flex: 1 1 auto;
+  }
+  .#{$left}:first-child + .#{$right}:last-child {
+    flex: 1 1 auto;
+  }
+
+  // If only center and right are in use, shift the center section into the right position
+  .#{$center}:first-child:not(:last-child) {
+    margin-left: $titlebar-side-width;
+  }
+  // If only center and left are in use, override the above style
+  .#{$center} + .#{$left} {
+    margin-right: -($titlebar-side-width);
+  }
+}
+
+@mixin title-bar-style(
+  $background: $titlebar-background,
+  $color: $titlebar-color,
+  $border: $titlebar-border,
+  $padding: $titlebar-padding
+) {
+  background: $background;
+  color: $color;
+  padding: $padding;
+  border-bottom: $border;
+}
+
+@mixin title-bar(
+  $background: $titlebar-background,
+  $color: $titlebar-color,
+  $border: $titlebar-border,
+  $padding: $titlebar-padding
+) {
+  @extend %title-bar;
+  @include title-bar-style($background, $color, $border, $padding);
+}
+
+@include exports(title-bar) {
+  .title-bar {
+    @include title-bar;
+
+    &.primary {
+      @include title-bar-style($primary-color, isitlight($primary-color));
+      a, a:hover { color: isitlight($primary-color); }
+      @if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } }
+    }
+    &.dark {
+      @include title-bar-style($dark-color, #fff);
+      a, a:hover { color: #fff; }
+      @if using(iconic) { .iconic { @include color-icon(#fff); } }
+    }
+  }
+    .title-bar-bottom {
+      border-bottom: 0;
+      border-top: $titlebar-border;
+    }
+}

data/vendor/assets/stylesheets/components/_typography.scss

@@ -0,0 +1,345 @@
+/*
+  TYPOGRAPHY
+  ----------
+
+  Includes typographic resets for many common elements, and a few helper classes.
+   - Headers
+   - Subheaders
+   - Lead paragraphs
+   - Ordered/unordered lists
+   - Code samples
+   - Anchors
+   - Dividers
+   - Blockquotes
+   - Acronyms
+*/
+
+/// @Foundation.settings
+// Typography
+// We use these to control header font styles
+$header-font-family: $body-font-family !default;
+$header-font-weight: $font-weight-normal !default;
+$header-font-style: $font-weight-normal !default;
+$header-font-color: #222 !default;
+$header-line-height: 1.4 !default;
+$header-top-margin: .2rem !default;
+$header-bottom-margin: .5rem !default;
+$header-text-rendering: optimizeLegibility !default;
+
+// We use these to control header font sizes
+$h1-font-size: rem-calc(44) !default;
+$h2-font-size: rem-calc(37) !default;
+$h3-font-size: rem-calc(27) !default;
+$h4-font-size: rem-calc(23) !default;
+$h5-font-size: rem-calc(18) !default;
+$h6-font-size: 1rem !default;
+
+// We use these to control header size reduction on small screens
+$h1-font-reduction: rem-calc(10) !default;
+$h2-font-reduction: rem-calc(10) !default;
+$h3-font-reduction: rem-calc(5) !default;
+$h4-font-reduction: rem-calc(5) !default;
+$h5-font-reduction: 0 !default;
+$h6-font-reduction: 0 !default;
+
+// These control how subheaders are styled.
+$subheader-line-height: 1.4 !default;
+$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+$subheader-font-weight: $font-weight-normal !default;
+$subheader-top-margin: .2rem !default;
+$subheader-bottom-margin: .5rem !default;
+
+// A general <small> styling
+$small-font-size: 60% !default;
+$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+
+// We use these to style paragraphs
+$paragraph-font-family: inherit !default;
+$paragraph-font-weight: $font-weight-normal !default;
+$paragraph-font-size: 1rem !default;
+$paragraph-line-height: 1.6 !default;
+$paragraph-margin-bottom: rem-calc(20) !default;
+$paragraph-aside-font-size: rem-calc(14) !default;
+$paragraph-aside-line-height: 1.35 !default;
+$paragraph-aside-font-style: italic !default;
+$paragraph-text-rendering: optimizeLegibility !default;
+
+// We use these to style <code> tags
+$code-color: grayscale($primary-color) !default;
+$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
+$code-font-weight: $font-weight-normal !default;
+$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
+$code-border-size: 1px !default;
+$code-border-style: solid !default;
+$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
+
+// We use these to style anchors
+$anchor-text-decoration: none !default;
+$anchor-text-decoration-hover: none !default;
+$anchor-font-color: $primary-color !default;
+$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;
+
+// We use these to style the <hr> element
+$hr-border-width: 1px !default;
+$hr-border-style: solid !default;
+$hr-border-color: #ddd !default;
+$hr-margin: rem-calc(20) !default;
+
+// We use these to style lists
+$list-font-family: $paragraph-font-family !default;
+$list-font-size: $paragraph-font-size !default;
+$list-line-height: $paragraph-line-height !default;
+$list-margin-bottom: $paragraph-margin-bottom !default;
+$list-style-position: outside !default;
+$list-side-margin: 1.1rem !default;
+$list-ordered-side-margin: 1.4rem !default;
+$list-side-margin-no-bullet: 0 !default;
+$list-nested-margin: rem-calc(20) !default;
+$definition-list-header-weight: $font-weight-bold !default;
+$definition-list-header-margin-bottom: .3rem !default;
+$definition-list-margin-bottom: rem-calc(12) !default;
+
+// We use these to style blockquotes
+$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+$blockquote-padding: rem-calc(9 20 0 19) !default;
+$blockquote-border: 1px solid #ddd !default;
+$blockquote-cite-font-size: rem-calc(13) !default;
+$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
+$blockquote-cite-link-color: $blockquote-cite-font-color !default;
+
+// Acronym styles
+$acronym-underline: 1px dotted #ddd !default;
+///
+
+@mixin lead {
+  font-size: $paragraph-font-size + rem-calc(3.5);
+  line-height: 1.6;
+}
+
+@mixin subheader {
+  line-height: $subheader-line-height;
+  color: $subheader-font-color;
+  font-weight: $subheader-font-weight;
+  margin-top: $subheader-top-margin;
+  margin-bottom: $subheader-bottom-margin;
+}
+
+@include exports(typography) {
+  /* Typography resets */
+  div,
+  dl,
+  dt,
+  dd,
+  ul,
+  ol,
+  li,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  pre,
+  form,
+  p,
+  blockquote,
+  th,
+  td {
+    margin:0;
+    padding:0;
+  }
+
+  /* Default Link Styles */
+  a {
+    color: $anchor-font-color;
+    text-decoration: $anchor-text-decoration;
+    line-height: inherit;
+
+    &[ui-sref] {
+      cursor: pointer;
+    }
+
+    &:hover,
+    &:focus {
+      color: $anchor-font-color-hover;
+      @if $anchor-text-decoration-hover != $anchor-text-decoration {
+      	text-decoration: $anchor-text-decoration-hover;
+      }
+    }
+
+    img { border:none; }
+  }
+
+  /* Default paragraph styles */
+  p {
+    font-family: $paragraph-font-family;
+    font-weight: $paragraph-font-weight;
+    font-size: $paragraph-font-size;
+    line-height: $paragraph-line-height;
+    margin-bottom: $paragraph-margin-bottom;
+    text-rendering: $paragraph-text-rendering;
+
+    &.lead { @include lead; }
+
+    & aside {
+      font-size: $paragraph-aside-font-size;
+      line-height: $paragraph-aside-line-height;
+      font-style: $paragraph-aside-font-style;
+    }
+  }
+
+  /* Default header styles */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $header-font-family;
+    font-weight: $header-font-weight;
+    font-style: $header-font-style;
+    color: $header-font-color;
+    text-rendering: $header-text-rendering;
+    margin-top: $header-top-margin;
+    margin-bottom: $header-bottom-margin;
+    line-height: $header-line-height;
+
+    small {
+      font-size: $small-font-size;
+      color: $small-font-color;
+      line-height: 0;
+    }
+  }
+
+  h1 { font-size: $h1-font-size - $h1-font-reduction; }
+  h2 { font-size: $h2-font-size - $h2-font-reduction; }
+  h3 { font-size: $h3-font-size - $h3-font-reduction; }
+  h4 { font-size: $h4-font-size - $h4-font-reduction; }
+  h5 { font-size: $h5-font-size - $h5-font-reduction; }
+  h6 { font-size: $h6-font-size - $h6-font-reduction; }
+
+  .subheader { @include subheader; }
+
+  hr {
+    border: $hr-border-style $hr-border-color;
+    border-width: $hr-border-width 0 0;
+    clear: both;
+    margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
+    height: 0;
+  }
+
+  /* Helpful Typography Defaults */
+  em,
+  i {
+    font-style: italic;
+    line-height: inherit;
+  }
+
+  strong,
+  b {
+    font-weight: $font-weight-bold;
+    line-height: inherit;
+  }
+
+  small {
+    font-size: $small-font-size;
+    color: $small-font-color;
+    line-height: inherit;
+  }
+
+  code {
+    font-family: $code-font-family;
+    font-weight: $code-font-weight;
+    color: $code-color;
+    background-color: $code-background-color;
+    border-width: $code-border-size;
+    border-style: $code-border-style;
+    border-color: $code-border-color;
+    padding: $code-padding;
+  }
+
+  /* Lists */
+  ul,
+  ol,
+  dl {
+    font-size: $list-font-size;
+    line-height: $list-line-height;
+    margin-bottom: $list-margin-bottom;
+    list-style-position: $list-style-position;
+    font-family: $list-font-family;
+  }
+
+  /* Lists */
+  ul, ol {
+    margin-left: $list-side-margin;
+    li {
+      ul,
+      ol {
+        margin-left: $list-nested-margin;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  /* Lists without bullets */
+  ul.no-bullet {
+    &, li ul, li ol {
+      list-style-type: none;
+    }
+    margin-left: $list-side-margin-no-bullet;
+  }
+
+  /* Definition Lists */
+  dl {
+    dt {
+      margin-bottom: $definition-list-header-margin-bottom;
+      font-weight: $definition-list-header-weight;
+    }
+    dd { margin-bottom: $definition-list-margin-bottom; }
+  }
+
+  /* Abbreviations */
+  abbr,
+  acronym {
+    text-transform: uppercase;
+    font-size: 90%;
+    color: $body-font-color;
+    border-bottom: $acronym-underline;
+    cursor: help;
+  }
+  abbr {
+    text-transform: none;
+  }
+
+  /* Blockquotes */
+  blockquote {
+    margin: 0 0 $paragraph-margin-bottom;
+    padding: $blockquote-padding;
+    border-left: $blockquote-border;
+
+    cite {
+      display: block;
+      font-size: $blockquote-cite-font-size;
+      color: $blockquote-cite-font-color;
+      &:before {
+        content: "\2014 \0020";
+      }
+
+      a,
+      a:visited {
+        color: $blockquote-cite-link-color;
+      }
+    }
+  }
+  blockquote,
+  blockquote p {
+    line-height: $paragraph-line-height;
+    color: $blockquote-font-color;
+  }
+
+  @include breakpoint(medium) {
+    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
+    h1 { font-size: $h1-font-size; }
+    h2 { font-size: $h2-font-size; }
+    h3 { font-size: $h3-font-size; }
+    h4 { font-size: $h4-font-size; }
+    h5 { font-size: $h5-font-size; }
+    h6 { font-size: $h6-font-size; }
+  }
+}