inuit-rails 6.0.0.beta.4

data/vendor/assets/stylesheets/inuitcss/tools/_tools.font-size.scss

@@ -0,0 +1,44 @@
+///* ========================================================================
+//   #FONT-SIZE
+//   ======================================================================== */
+
+// Generate a font-size and baseline-compatible line-height.
+@mixin inuit-font-size($font-size, $line-height: auto, $important: false) {
+
+  @if (type-of($font-size) == number) {
+    @if (unit($font-size) != "px") {
+      @error "`#{$font-size}` needs to be a pixel value.";
+    }
+  } @else {
+    @error "`#{$font-size}` needs to be a number.";
+  }
+
+  @if ($important == true) {
+    $important: !important;
+  } @elseif ($important == false) {
+    $important: null;
+  } @else {
+    @error "`#{$important}` needs to be `true` or `false`."
+  }
+
+  // We provide a `px` fallback for old IEs not supporting `rem` values.
+  font-size: $font-size $important;
+  font-size: ($font-size / $inuit-global-font-size) * 1rem $important;
+
+  @if ($line-height == 'auto') {
+    line-height: ceil($font-size / $inuit-global-line-height) * ($inuit-global-line-height / $font-size) $important;
+  }
+
+  @else {
+
+    @if (type-of($line-height) == number or $line-height == 'inherit' or $line-height == 'normal') {
+      line-height: $line-height $important;
+    }
+
+    @elseif ($line-height != 'none' and $line-height != false) {
+      @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
+    }
+
+  }
+
+}

data/vendor/assets/stylesheets/inuitcss/tools/_tools.hidden.scss

@@ -0,0 +1,15 @@
+///* ========================================================================
+//   #HIDDEN-VISUALLY
+//   ======================================================================== */
+
+// Mixin to quickly apply accessible hiding to elements.
+@mixin inuit-hidden-visually() {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+}

data/vendor/assets/stylesheets/inuitcss/tools/_tools.rem.scss

@@ -0,0 +1,48 @@
+///* ========================================================================
+//   #REM
+//   ======================================================================== */
+
+// Convert any px value into its rem equivalent.
+
+@function inuit-rem($value) {
+
+  @if (type-of($value) == number) {
+
+    @if (unit($value) != "px") {
+      @error "`#{$value}` needs to be a pixel value.";
+    }
+
+  } @else {
+    @error "`#{$value}` needs to be a number.";
+  }
+
+  @return $value / $inuit-global-font-size * 1rem;
+
+}
+
+
+// Mixin to create a declaration whose value is a rem unit. Also provide pixel
+// fallback.
+//
+// .simple-usage {
+//   @include inuit-rem(padding, 10px);
+// }
+
+@mixin inuit-rem($property, $value) {
+
+  @if (type-of($value) == number) {
+
+    @if (unit($value) != "px") {
+      @error "`#{$value}` needs to be a pixel value.";
+    }
+
+  } @else {
+    @error "`#{$value}` needs to be a number.";
+  }
+
+  // We provide a `px` fallback for old IEs not supporting `rem` values.
+  #{$property}: $value;
+
+  #{$property}: inuit-rem($value);
+
+}

data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.clearfix.scss

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   #CLEARFIX
+   ========================================================================== */
+
+/**
+ * Attach our clearfix mixin to a utility class.
+ */
+
+.u-clearfix {
+  @include inuit-clearfix();
+}

data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.headings.scss

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   #HEADINGS
+   ========================================================================== */
+
+/**
+ * Redefine all of our basic heading styles against utility classes so as to
+ * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
+ * but we want it to be sized like an H1:
+ *
+ *   <h2 class="u-h1"></h2>
+ *
+ */
+
+.u-h1 {
+  @include inuit-font-size($inuit-font-size-h1, $important: true);
+}
+
+.u-h2 {
+  @include inuit-font-size($inuit-font-size-h2, $important: true);
+}
+
+.u-h3 {
+  @include inuit-font-size($inuit-font-size-h3, $important: true);
+}
+
+.u-h4 {
+  @include inuit-font-size($inuit-font-size-h4, $important: true);
+}
+
+.u-h5 {
+  @include inuit-font-size($inuit-font-size-h5, $important: true);
+}
+
+.u-h6 {
+  @include inuit-font-size($inuit-font-size-h6, $important: true);
+}

data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.hide.scss

@@ -0,0 +1,21 @@
+/* ==========================================================================
+   #HIDE
+   ========================================================================== */
+
+/**
+ * Hide only visually, but have it available for screen readers:
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+
+.u-hidden-visually {
+  @include inuit-hidden-visually();
+}
+
+
+/**
+ * Hide visually and from screen readers.
+ */
+
+.u-hidden {
+  display: none !important;
+}

data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.print.scss

@@ -0,0 +1,90 @@
+/* ==========================================================================
+   #PRINT
+   ========================================================================== */
+
+/**
+ * Very crude, reset-like styles taken from the HTML5 Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
+ * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
+ */
+
+@media print {
+
+  /**
+   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
+   */
+
+  *,
+  *:before,
+  *:after,
+  *:first-letter,
+  *:first-line {
+    background: transparent !important;
+    color: #000 !important; /* [1] */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+
+
+  /**
+   * Don't show links that are fragment identifiers, or use the `javascript:`
+   * pseudo protocol.
+   */
+
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: "";
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+
+  /**
+   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
+   */
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+
+  img {
+    max-width: 100% !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+}

data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.spacing.scss

@@ -0,0 +1,57 @@
+/* ==========================================================================
+   #SPACING
+   ========================================================================== */
+
+/**
+ * Utility classes to put specific spacing values onto elements. The below loop
+ * will generate us a suite of classes like:
+ *
+ *   .u-margin-top {}
+ *   .u-padding-left-large {}
+ *   .u-margin-right-small {}
+ *   .u-padding {}
+ *   .u-padding-right-none {}
+ */
+
+/* stylelint-disable string-quotes */
+
+$inuit-spacing-directions: (
+  null: null,
+  '-top': '-top',
+  '-right': '-right',
+  '-bottom': '-bottom',
+  '-left': '-left',
+) !default;
+
+$inuit-spacing-properties: (
+  'padding': 'padding',
+  'margin': 'margin',
+) !default;
+
+$inuit-spacing-sizes: (
+  null: $inuit-global-spacing-unit,
+  '-tiny': $inuit-global-spacing-unit-tiny,
+  '-small': $inuit-global-spacing-unit-small,
+  '-large': $inuit-global-spacing-unit-large,
+  '-huge': $inuit-global-spacing-unit-huge,
+  '-none': 0
+) !default;
+
+
+@each $property, $property-namespace in $inuit-spacing-properties {
+
+  @each $direction, $direction-namespace in $inuit-spacing-directions {
+
+    @each $size, $value in $inuit-spacing-sizes {
+
+      .u-#{$property-namespace}#{$direction-namespace}#{$size} {
+        #{$property}#{$direction}: $value !important;
+      }
+
+    }
+
+  }
+
+}
+
+/* stylelint-enable string-quotes */

data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.widths.scss

@@ -0,0 +1,167 @@
+/* ==========================================================================
+   #WIDTHS
+   ========================================================================== */
+
+/**
+ * inuitcss generates a series of utility classes that give a fluid width to
+ * whichever element they’re applied, e.g.:
+ *
+ *   <img src="" alt="" class="u-1/2" />
+ *
+ * These classes are most commonly used in conjunction with our layout system,
+ * e.g.:
+ *
+ *   <div class="o-layout__item  u-1/2">
+ *
+ * By default, inuitcss will also generate responsive variants of each of these
+ * classes by using your Sass MQ configuration, e.g.:
+ *
+ *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
+ *
+ * Optionally, inuitcss can generate offset classes which can push and pull
+ * elements left and right by a specified amount, e.g.:
+ *
+ *   <div class="o-layout__item  u-2/3  u-pull-1/3">
+ *
+ * This is useful for making very granular changes to the rendered order of
+ * items in a layout.
+ *
+ * N.B. This option is turned off by default.
+ */
+
+
+
+
+
+// Which fractions would you like in your grid system(s)? By default, inuitcss
+// provides you fractions of one whole, halves, thirds, quarters and fifths,
+// e.g.:
+//
+//   .u-1/2
+//   .u-2/5
+//   .u-3/4
+//   .u-2/3
+
+$inuit-fractions: 1 2 3 4 5 !default;
+
+
+
+
+
+// Optionally, inuitcss can generate classes to offset items by a certain width.
+// Would you like to generate these types of class as well? E.g.:
+//
+//   .u-push-1/3
+//   .u-pull-2/4
+//   .u-pull-1/5
+//   .u-push-2/3
+
+$inuit-offsets: false !default;
+
+
+
+
+
+// By default, inuitcss uses fractions-like classes like `<div class="u-1/4">`.
+// You can change the `/` to whatever you fancy with this variable.
+$inuit-widths-delimiter: \/ !default;
+
+
+
+
+
+// When using Sass-MQ, this defines the separator for the breakpoints suffix
+// in the class name. By default, we are generating the responsive suffixes
+// for the classes with a `@` symbol so you get classes like:
+// <div class="u-3/12@mobile">
+$inuit-widths-breakpoint-separator: \@ !default;
+
+
+
+
+
+// A mixin to spit out our width classes. Pass in the columns we want the widths
+// to have, and an optional suffix for responsive widths. E.g. to create thirds
+// and quarters for a small breakpoint:
+//
+// @include widths(3 4, -sm);
+
+@mixin inuit-widths($columns, $breakpoint: null) {
+
+  // Loop through the number of columns for each denominator of our fractions.
+  @each $denominator in $columns {
+
+    // Begin creating a numerator for our fraction up until we hit the
+    // denominator.
+    @for $numerator from 1 through $denominator {
+
+      // Build a class in the format `.u-3/4[@<breakpoint>]`.
+      .u-#{$numerator}#{$inuit-widths-delimiter}#{$denominator}#{$breakpoint} {
+        width: ($numerator / $denominator) * 100% !important;
+      }
+
+      @if ($inuit-offsets == true) {
+
+        /**
+        * 1. Reset any leftover or conflicting `left`/`right` values.
+        */
+
+        // Build a class in the format `.u-push-1/2[@<breakpoint>]`.
+        .u-push-#{$numerator}#{$inuit-widths-delimiter}#{$denominator}#{$breakpoint} {
+          position: relative !important;
+          right: auto !important; /* [1] */
+          left: ($numerator / $denominator) * 100% !important;
+        }
+
+        // Build a class in the format `.u-pull-5/6[@<breakpoint>]`.
+        .u-pull-#{$numerator}#{$inuit-widths-delimiter}#{$denominator}#{$breakpoint} {
+          position: relative !important;
+          right: ($numerator / $denominator) * 100% !important;
+          left: auto !important; /* [1] */
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+
+
+
+/**
+ * A series of width helper classes that you can use to size things like grid
+ * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
+ * your markup:
+ *
+ * <div class="u-7/12">
+ *
+ * The following will generate widths helper classes based on the fractions
+ * defined in the `$inuit-fractions` list.
+ */
+
+@include inuit-widths($inuit-fractions);
+
+
+
+
+/**
+ * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
+ * defined breakpoints, and give them a Responsive Suffix, e.g.:
+ *
+ * <div class="u-3/12@mobile">
+ */
+
+@if (variable-exists(mq-breakpoints)) {
+
+  @each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {
+
+    @include mq($from: $inuit-bp-name) {
+      @include inuit-widths($inuit-fractions, #{$inuit-widths-breakpoint-separator}#{$inuit-bp-name});
+    }
+
+  }
+
+}