foundation-rails 5.5.3.2 → 6.1.1.0

data/vendor/assets/scss/components/_visibility.scss

@@ -0,0 +1,131 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+/// Hide an element by default, only displaying it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for($size) {
+  $size: map-get($breakpoints, $size);
+  $size: -zf-bp-to-em($size) - (1/16);
+
+  @include breakpoint($size down) {
+    display: none !important;
+  }
+}
+
+/// Hide an element by default, only displaying it within a certain breakpoint.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for-only($size) {
+  $lower-bound-size: map-get($breakpoints, $size);
+  $upper-bound-size: -zf-map-next($breakpoints, $size);
+
+  // more often than not this will be correct, just one time round the loop it won't so set in scope here
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  // test actual lower-bound-size, if 0 set it to 0em
+  @if $lower-bound-size == 0 {
+    $lower-bound: -zf-bp-to-em($lower-bound-size);
+  }
+
+  @if $upper-bound-size == null {
+    @media screen and (max-width: $lower-bound) {
+      display: none !important;
+    }
+  }
+  @else {
+    $upper-bound: -zf-bp-to-em($upper-bound-size);
+    @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
+      display: none !important;
+    }
+  }
+}
+
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for($size) {
+  @include breakpoint($size) {
+    display: none !important;
+  }
+}
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for-only($size) {
+  @include breakpoint($size only) {
+    display: none !important;
+  }
+}
+
+@mixin foundation-visibility-classes {
+  // Basic hiding classes
+  .hide {
+    display: none !important;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  // Responsive visibility classes
+  @each $size in $breakpoint-classes {
+    @if $size != small {
+      .hide-for-#{$size} {
+        @include hide-for($size);
+      }
+
+      .show-for-#{$size} {
+        @include show-for($size);
+      }
+    }
+
+    .hide-for-#{$size}-only {
+      @include hide-for-only($size);
+    }
+
+    .show-for-#{$size}-only {
+      @include show-for-only($size);
+    }
+  }
+
+  // Screen reader visibility classes
+  // Need a "hide-for-sr" class? Add aria-hidden='true' to the element
+  .show-for-sr,
+  .show-on-focus {
+    @include element-invisible;
+  }
+
+  // Only display the element when it's focused
+  .show-on-focus {
+    &:active,
+    &:focus {
+      @include element-invisible-off;
+    }
+  }
+
+  // Landscape and portrait visibility
+  .show-for-landscape,
+  .hide-for-portrait {
+    display: block !important;
+
+    @include breakpoint(landscape) {
+      display: block !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: none !important;
+    }
+  }
+
+  .hide-for-landscape,
+  .show-for-portrait {
+    display: none !important;
+
+    @include breakpoint(landscape) {
+      display: none !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: block !important;
+    }
+  }
+}

data/vendor/assets/scss/forms/_checkbox.scss

@@ -0,0 +1,36 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+@mixin foundation-form-checkbox {
+  [type='file'],
+  [type='checkbox'],
+  [type='radio'] {
+    margin: 0 0 $form-spacing;
+  }
+
+  // Styles for input/label siblings
+  [type='checkbox'] + label,
+  [type='radio'] + label {
+    display: inline-block;
+    margin-#{$global-left}: $form-spacing * 0.5;
+    margin-#{$global-right}: $form-spacing;
+    margin-bottom: 0;
+    vertical-align: baseline;
+  }
+
+  // Styles for inputs inside labels
+  label > [type='checkbox'],
+  label > [type='label'] {
+    margin-#{$global-right}: $form-spacing * 0.5;
+  }
+
+  // Normalize file input width
+  [type='file'] {
+    width: 100%;
+  }
+}

data/vendor/assets/scss/forms/_error.scss

@@ -0,0 +1,82 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group abide
+////
+
+/// Sets if error styles should be added to inputs.
+/// @type Boolean
+$abide-inputs: true !default;
+
+/// Sets if error styles should be added to labels.
+/// @type Boolean
+$abide-labels: true !default;
+
+/// Background color to use for invalid text inputs.
+/// @type Color
+$input-background-invalid: $alert-color !default;
+
+/// Color to use for labels of invalid inputs.
+/// @type Color
+$form-label-color-invalid: $alert-color !default;
+
+/// Default font color for form error text.
+/// @type Color
+$input-error-color: $alert-color !default;
+
+/// Default font size for form error text.
+/// @type Number
+$input-error-font-size: rem-calc(12) !default;
+
+/// Default font weight for form error text.
+/// @type Keyword
+$input-error-font-weight: $global-weight-bold !default;
+
+/// Styles the background and border of an input field to have an error state.
+///
+/// @param {Color} $background [$alert-color] - Color to use for the background and border.
+@mixin form-input-error(
+  $background: $alert-color
+) {
+  &:not(:focus) {
+    background-color: rgba($background, 0.1);
+    border-color: $background;
+  }
+}
+
+/// Adds error styles to a form element, using the values in the settings file.
+@mixin form-error {
+  display: none;
+  margin-top: $form-spacing * -0.5;
+  margin-bottom: $form-spacing;
+  font-size: $input-error-font-size;
+  font-weight: $input-error-font-weight;
+  color: $input-error-color;
+}
+
+@mixin foundation-form-error {
+  @if $abide-inputs {
+    // Error class for invalid inputs
+    .is-invalid-input {
+      @include form-input-error;
+    }
+  }
+
+  @if $abide-labels {
+    // Error class for labels of invalid outputs
+    .is-invalid-label {
+      color: $form-label-color-invalid;
+    }
+  }
+
+  // Form error element
+  .form-error {
+    @include form-error;
+
+    &.is-visible {
+      display: block;
+    }
+  }
+}

data/vendor/assets/scss/forms/_fieldset.scss

@@ -0,0 +1,53 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Default border around custom fieldsets.
+/// @type Border
+$fieldset-border: 1px solid $medium-gray !default;
+
+/// Default padding inside custom fieldsets.
+/// @type Number
+$fieldset-padding: rem-calc(20) !default;
+
+/// Default margin around custom fieldsets.
+/// @type Number
+$fieldset-margin: rem-calc(18 0) !default;
+
+/// Default padding between the legend text and fieldset border.
+/// @type Number
+$legend-padding: rem-calc(0 3) !default;
+
+@mixin fieldset {
+  border: $fieldset-border;
+  padding: $fieldset-padding;
+  margin: $fieldset-margin;
+
+  legend {
+    // Covers up the fieldset's border to create artificial padding
+    background: $body-background;
+    padding: $legend-padding;
+    margin: 0;
+    margin-#{$global-left}: rem-calc(-3);
+  }
+}
+
+@mixin foundation-form-fieldset {
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  legend {
+    margin-bottom: $form-spacing * 0.5;
+  }
+
+  .fieldset {
+    @include fieldset;
+  }
+}

data/vendor/assets/scss/forms/_forms.scss

@@ -0,0 +1,32 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Global spacing for form elements.
+/// @type Number
+$form-spacing: rem-calc(16) !default;
+
+@import
+  'text',
+  'checkbox',
+  'label',
+  'help-text',
+  'input-group',
+  'fieldset',
+  'select',
+  'error';
+
+@mixin foundation-forms {
+  @include foundation-form-text;
+  @include foundation-form-checkbox;
+  @include foundation-form-label;
+  @include foundation-form-helptext;
+  @include foundation-form-prepostfix;
+  @include foundation-form-fieldset;
+  @include foundation-form-select;
+  @include foundation-form-error;
+}

data/vendor/assets/scss/forms/_help-text.scss

@@ -0,0 +1,30 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Default color for help text.
+/// @type Color
+$helptext-color: #333 !default;
+
+/// Default font size for help text.
+/// @type Number
+$helptext-font-size: rem-calc(13) !default;
+
+/// Default font style for help text.
+/// @type Keyword
+$helptext-font-style: italic !default;
+
+@mixin foundation-form-helptext {
+  .help-text {
+    $margin-top: ($form-spacing * 0.5) * -1;
+
+    margin-top: $margin-top;
+    font-size: $helptext-font-size;
+    font-style: $helptext-font-style;
+    color: $helptext-color;
+  }
+}

data/vendor/assets/scss/forms/_input-group.scss

@@ -0,0 +1,91 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Color of labels prefixed to an input.
+/// @type Color
+$input-prefix-color: $black !default;
+
+/// Background color of labels prefixed to an input.
+/// @type Color
+$input-prefix-background: $light-gray !default;
+
+/// Border around labels prefixed to an input.
+/// @type Border
+$input-prefix-border: 1px solid $medium-gray !default;
+
+/// Left/right padding of an pre/postfixed input label
+$input-prefix-padding: 1rem !default;
+
+@mixin foundation-form-prepostfix {
+  $height: ($input-font-size + $form-spacing * 1.5);
+
+
+  .input-group {
+    display: table;
+    width: 100%;
+    margin-bottom: $form-spacing;
+
+    > :first-child {
+      border-radius: $global-radius 0 0 $global-radius;
+    }
+
+    > :last-child {
+      > * {
+        border-radius: 0 $global-radius $global-radius 0;
+      }
+    }
+  }
+
+  %input-group-child {
+    display: table-cell;
+    margin: 0;
+    vertical-align: middle;
+  }
+
+  .input-group-label {
+    @extend %input-group-child;
+    text-align: center;
+    width: 1%;
+    height: 100%;
+    padding: 0 $input-prefix-padding;
+    background: $input-prefix-background;
+    color: $input-prefix-color;
+    border: $input-prefix-border;
+
+    @if has-value($input-prefix-border) {
+      &:first-child {
+        border-#{$global-right}: 0;
+      }
+
+      &:last-child {
+        border-#{$global-left}: 0;
+      }
+    }
+  }
+
+  .input-group-field {
+    @extend %input-group-child;
+    border-radius: 0;
+    height: $height;
+  }
+
+  .input-group-button {
+    @extend %input-group-child;
+    height: 100%;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: center;
+    width: 1%;
+
+    a,
+    input,
+    button {
+      margin: 0;
+    }
+  }
+}