express_admin 1.7.5 → 1.7.7

data/vendor/gems/foundation_apps_styles/vendor/assets/stylesheets/components/_action-sheet.scss

@@ -1,265 +0,0 @@
-/*
-  ACTION SHEET
-  ------------
-
-  A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
-*/
-
-/// @Foundation.settings
-// Action Sheet
-$actionsheet-background: white !default;
-$actionsheet-border-color: #ccc !default;
-$actionsheet-animate: transform opacity !default;
-$actionsheet-animation-speed: 0.25s !default;
-$actionsheet-width: 300px !default;
-$actionsheet-radius: 4px !default;
-$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;
-$actionsheet-padding: $global-padding !default;
-$actionsheet-tail-size: 10px !default;
-
-$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;
-
-$actionsheet-link-color: #000 !default;
-$actionsheet-link-background-hover: smartscale($actionsheet-background) !default;
-///
-
-/*
-  Styles for the list inside an action sheet.
-  Don't include this mixin if you want to build custom controls inside the sheet.
-*/
-@mixin action-sheet-menu(
-  $padding: $actionsheet-padding,
-  $color: $actionsheet-link-color,
-  $border-color: $actionsheet-border-color,
-  $background-hover: $actionsheet-link-background-hover
-) {
-  // Menu container
-  ul {
-    margin: -($padding);
-    margin-top: 0;
-    list-style-type: none;
-    user-select: none;
-
-    // If the menu has no content above it
-    &:first-child {
-      margin-top: -$padding;
-
-      li:first-child {
-        border-top: 0;
-      }
-    }
-
-    // Menu links
-    a {
-      display: block;
-      padding: $padding * 0.8;
-      line-height: 1;
-      color: $color;
-      border-top: 1px solid $border-color;
-
-      &:hover {
-        color: $color;
-        background: $background-hover;
-      }
-    }
-
-    .alert > a {
-      color: $alert-color;
-    }
-    .disabled > a {
-      pointer-events: none;
-      color: #999;
-    }
-  }
-}
-
-/*
-  Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
-*/
-@mixin action-sheet(
-  $position: bottom,
-  $shadow: $actionsheet-shadow,
-  $animate: $actionsheet-animate,
-  $animation-speed: $actionsheet-animation-speed,
-  $padding: $actionsheet-padding,
-  $background: $actionsheet-background
-) {
-  position: fixed;
-  left: 0;
-  z-index: 1000;
-  width: 100%;
-  padding: $padding;
-  background: $background;
-  text-align: center;
-  transition-property: $animate;
-  transition-duration: $animation-speed;
-  transition-timing-function: ease-out;
-
-  @if hasvalue($shadow) {
-    box-shadow: $shadow;
-  }
-
-  // Positions
-  @if $position == bottom {
-    bottom: 0;
-    transform: translateY(100%);
-
-    &.is-active {
-      transform: translateY(0%);
-    }
-  }
-  // These two don't quite work as planned yet
-  @else if $position == top {
-    top: 0;
-    transform: translateY(-100%);
-
-    &.is-active {
-      transform: translateY(0%);
-    }
-  }
-}
-
-@mixin popup-menu(
-  $position: bottom,
-  $background: $actionsheet-background,
-  $width: $actionsheet-width,
-  $radius: $actionsheet-radius,
-  $shadow: $actionsheet-popup-shadow,
-  $tail-size: $actionsheet-tail-size
-) {
-  /*
-    Core styles
-  */
-  position: absolute;
-  left: 50%;
-  width: $width;
-  border-radius: $radius;
-  opacity: 0;
-  pointer-events: none;
-
-  /*
-    Menu shadow
-  */
-  @if hasvalue($shadow) {
-    box-shadow: $shadow;
-  }
-
-  /*
-    Active state
-  */
-  &.is-active {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  /*
-    Menu tail
-  */
-  &::before, &::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    display: block;
-    width: 0px;
-    height: 0px;
-    border-left: $tail-size solid transparent;
-    border-right: $tail-size solid transparent;
-    margin-left: -($tail-size);
-  }
-
-  /*
-    Positioning
-  */
-  @if $position == bottom {
-    top: auto;
-    bottom: 0;
-    transform: translateX(-50%) translateY(110%);
-    &.is-active {
-      transform: translateX(-50%) translateY(100%);
-    }
-
-    &::before, &::after {
-      top: -($tail-size);
-      bottom: auto;
-      border-top: 0;
-      border-bottom: $tail-size solid $background;
-    }
-    &::before {
-      top: -($tail-size + 2);
-      border-bottom-color: rgba(black, 0.15);
-    }
-
-  }
-  @else if $position == top {
-    top: 0;
-    bottom: auto;
-    transform: translateX(-50%) translateY(-120%);
-    &.is-active {
-      transform: translateX(-50%) translateY(-110%);
-    }
-
-    &::before, &::after {
-      top: auto;
-      bottom: -($tail-size);
-      border-top: $tail-size solid $background;
-      border-bottom: 0;
-    }
-    &::before {
-      bottom: -($tail-size + 2);
-      border-top-color: rgba(black, 0.15);
-    }
-  }
-}
-
-@include exports(action-sheet) {
-  .action-sheet-container {
-    position: relative;
-    display: inline-block;
-
-    .button {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-  .action-sheet {
-    @include action-sheet;
-    @include action-sheet-menu;
-
-    @include breakpoint(medium) {
-      @include popup-menu;
-
-      &.top {
-        @include popup-menu(top);
-      }
-    }
-
-    &.primary {
-      background: $primary-color;
-      color: isitlight($primary-color);
-      border: 0;
-      &::before { display: none; }
-      &::before, &::after { border-top-color: $primary-color; }
-      &.top::before, &.top::after { border-bottom-color: $primary-color; }
-
-      @include action-sheet-menu(
-        $color: isitlight($primary-color),
-        $border-color: smartscale($primary-color, 10%),
-        $background-hover: smartscale($primary-color)
-      );
-    }
-    &.dark {
-      background: $dark-color;
-      color: isitlight($dark-color);
-      border: 0;
-      &::before { display: none; }
-      &::before, &::after { border-top-color: $dark-color; }
-      &.top::before, &.top::after { border-bottom-color: $dark-color; }
-
-      @include action-sheet-menu(
-        $color: isitlight($dark-color),
-        $border-color: smartscale($dark-color, 10%),
-        $background-hover: smartscale($dark-color)
-      );
-    }
-  }
-}

data/vendor/gems/foundation_apps_styles/vendor/assets/stylesheets/components/_block-list.scss

@@ -1,360 +0,0 @@
-/*
-  BLOCK LIST
-  ----------
-
-  A generic list component that can accomodate a variety of styles and controls.
-
-  Features:
-   - Icons
-   - Labels
-   - Chevrons
-   - Text fields
-   - Dropdown menus
-   - Checkbox/radio inputs
-*/
-
-/// @Foundation.settings
-// Block List
-$blocklist-background: #fff !default;
-$blocklist-fullbleed: true !default;
-$blocklist-fontsize: 1rem !default;
-
-$blocklist-item-padding: 0.8rem 1rem !default;
-$blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;
-$blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;
-$blocklist-item-color-disabled: #999 !default;
-$blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;
-
-$blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;
-$blocklist-item-icon-size: 0.8 !default;
-
-$blocklist-header-fontsize: 0.8em !default;
-$blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;
-$blocklist-header-uppercase: true;
-
-$blocklist-check-icons: true !default;
-///
-
-/*
-  Adds styles for a block list container.
-
-  $font-size: global font size for the list.
-  $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
-*/
-%block-list-container {
-  margin-bottom: 1rem;
-  line-height: 1;
-  user-select: none;
-
-  &, ul {
-    list-style-type: none;
-  }
-  ul {
-    margin-left: 0;
-  }
-}
-@mixin block-list-container(
-  $font-size: $blocklist-fontsize,
-  $full-bleed: $blocklist-fullbleed
-) {
-  @extend %block-list-container;
-  font-size: $font-size;
-
-  @if $full-bleed {
-    margin-left: -$global-padding;
-    margin-right: -$global-padding;
-  }
-}
-
-/*
-  Styles block list headers on the selector you include this mixin in (normally a <header>).
-
-  $color - color of the header.
-  $font-size - font size of the header.
-  $offset - left margin to add to the header, to line it up with the list items.
-*/
-@mixin block-list-header(
-  $color: $blocklist-header-color,
-  $font-size: $blocklist-header-fontsize,
-  $uppercase: $blocklist-header-uppercase,
-  $offset: get-side($blocklist-item-padding, left)
-) {
-  margin-top: 1em;
-  color: $color;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-  margin-left: $offset;
-  font-size: $font-size;
-  cursor: default;
-  @if $uppercase { text-transform: uppercase; }
-}
-
-/*
-  Styles block list items on the selector you include this mixin in (normally an <li>).
-
-  $color - color of items.
-  $color-hover - color of items on hover.
-  $background - background of items.
-  $background-hover - background of items on hover.
-  $border - border between items.
-  $padding - padding on items.
-*/
-@mixin block-list-item(
-  $color: $blocklist-item-color,
-  $color-hover: $blocklist-item-color,
-  $color-disabled: $blocklist-item-color-disabled,
-  $background: transparent,
-  $background-hover: $blocklist-item-background-hover,
-  $border: $blocklist-item-border,
-  $padding: $blocklist-item-padding
-) {
-  position: relative;
-
-  @if hasvalue($border) {
-    border-bottom: $border;
-    &:first-child {
-      border-top: $border;
-    }
-  }
-
-  // Inner elements share the same basic styles
-  > a, > span, > label {
-    display: block;
-    padding: $padding;
-    padding-left: get-side($padding, left);
-    color: $color;
-    line-height: 1;
-  }
-  > span {
-    cursor: default;
-  }
-  > a, > label {
-    cursor: pointer;
-
-    &:hover {
-      color: $color-hover;
-    }
-  }
-  > a, > label, select {
-    &:hover {
-      background: $background-hover;
-    }
-  }
-
-  // Coloring classes
-  &.caution > a {
-    &, &:hover { color: $alert-color; }
-  }
-  &.disabled > a {
-    cursor: default;
-    &, &:hover { color: $color-disabled; }
-    &:hover { background: transparent; }
-  }
-}
-
-/*
-  Adds label styles to the class you include this mixin in.
-
-  $color - color of the label.
-  $left-class - extra class to flip the orientation of the label.
-  $left-padding - left padding to use for left-hand labels.
-*/
-@mixin block-list-label(
-  $color: $blocklist-item-label-color,
-  $left-class: 'left',
-  $left-padding: get-side($blocklist-item-padding, top)
-) {
-  display: inline-block;
-  float: right;
-  padding: 0;
-  color: $color;
-  pointer-events: none;
-
-  &.#{$left-class} {
-    margin-left: $left-padding;
-    float: none;
-  }
-}
-
-/*
-  Adds support for chevrons, which appear on the right-hand side of the item.
-
-  $color - color of the chevron.
-  $padding - include the global padding of block list items here.
-*/
-@mixin block-list-chevron(
-  $color: $blocklist-header-color,
-  $padding: $blocklist-item-padding,
-  $label-class: 'block-list-label'
-) {
-  // Chevrons are a pseudo-element
-  &::after {
-    content: '\203A';
-    display: block;
-    position: absolute;
-    right: get-side($padding, right);
-    top: 50%;
-    transform: translateY(-50%);
-    font-weight: bold;
-    color: $color;
-    font-size: 2em;
-  }
-
-  // Labels next to links move over to make room for the chevron
-  // TODO: this selector needs to be customiable, but adding a setting just for it might be weird
-  .#{$label-class} {
-    padding-right: get-side($padding, right) * 1.5;
-  }
-}
-
-/*
-  Adds icon styles. Call this mixin on a block list container.
-
-  $size - size of the icon as a percentage (decimal) of the list item's height.
-  $item-selector - overrides the 'li' selector used for list items.
-*/
-@mixin block-list-icons(
-  $size: $blocklist-item-icon-size,
-  $item-selector: 'li'
-) {
-  // PH - need a better solution
-  $item-height:
-    $blocklist-fontsize
-    + get-side($blocklist-item-padding, top)
-    + get-side($blocklist-item-padding, top);
-
-  $icon-height: $item-height * $blocklist-item-icon-size;
-  $icon-offset: ($item-height - $icon-height) / 2;
-
-  #{$item-selector} {
-    > a, > span, > label {
-      padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;
-    }
-    img, .iconic {
-      position: absolute;
-      top: $icon-offset;
-      left: $icon-offset;
-      width: $icon-height;
-      height: $icon-height;
-      border-radius: 8px;
-      pointer-events: none;
-    }
-  }
-}
-
-/*
-  Adds support for text fields, select menus, and checkbox/radio groups in block lists.
-
-  $color - color of select menu arrow.
-  $background-hover - color of select menu when hovered over.
-  $padding - include the global padding of block list items here.
-  $dropdown-class - class to use for list items that contain a dropdown.
-  $switch-class - class to use for switches inside list items.
-*/
-@mixin block-list-inputs(
-  $color: $blocklist-item-color,
-  $background: $blocklist-background,
-  $background-hover: $blocklist-item-background-hover,
-  $padding: $blocklist-item-padding,
-  $icons: $blocklist-check-icons,
-  $dropdown-class: 'with-dropdown',
-  $switch-class: 'switch'
-) {
-  // Text fields
-  #{$text-input-selectors} {
-    $top-padding: get-side($padding, top) - ($blocklist-fontsize * 0.2);
-    $bottom-padding: get-side($padding, bottom) - ($blocklist-fontsize * 0.2);
-    $left-padding: get-side($padding, left);
-    $right-padding: get-side($padding, right);
-    $height: ($blocklist-fontsize * 1.4 + $top-padding + $bottom-padding);
-
-    overflow: visible;
-    box-sizing: border-box;
-    margin: 0;
-    border: 0;
-    height: $height;
-    padding: $top-padding $right-padding $bottom-padding $left-padding;
-    color: inherit;
-    font-size: $blocklist-fontsize;
-    -webkit-font-smoothing: antialiased;
-    vertical-align: middle;
-
-    &:hover, &:focus {
-      border: 0;
-    }
-  }
-
-  // Multiple select
-  li > input[type="checkbox"], li > input[type="radio"] {
-    position: absolute;
-    left: -9999px;
-
-    & + label {
-      display: block;
-      font-size: $blocklist-fontsize;
-      margin: 0;
-    }
-
-    @if $icons == true {
-      &:checked + label {
-        &::before {
-          @include image-checkmark($color);
-          content: '';
-          background-size: 100% 100%;
-          width: 1.5em;
-          height: 1.5em;
-          color: $primary-color;
-          float: right;
-          pointer-events: none;
-          margin-top: -0.25em;
-        }
-      }
-    }
-  }
-
-  // Dropdowns
-  .#{$dropdown-class} {
-    color: inherit;
-
-    select {
-      // Reset pesky <select> styles
-      -webkit-appearance: none;
-         -moz-appearance: none;
-      outline: 0;
-      background: 0;
-      border: 0;
-      height: auto;
-      padding: $padding;
-      margin: 0;
-      font-size: 1em; // Same size as its parent
-      line-height: 1;
-      color: inherit;
-      background-color: transparent;
-    }
-  }
-
-  // Switches
-  .#{$switch-class} {
-    position: absolute;
-    top: 50%;
-    right: get-side($padding, right);
-    transform: translateY(-50%);
-  }
-}
-
-@include exports(block-list) {
-  .block-list {
-    @include block-list-container;
-    @include block-list-inputs;
-
-    &.with-icons { @include block-list-icons; }
-    header       { @include block-list-header; }
-
-    li {
-      @include block-list-item;
-
-      &.with-chevron    { @include block-list-chevron; }
-      .block-list-label { @include block-list-label; }
-    }
-  }
-}