inuit-rails 6.0.0.beta.4

data/vendor/assets/stylesheets/inuitcss/generic/_generic.reset.scss

@@ -0,0 +1,53 @@
+/* ==========================================================================
+   #RESET
+   ========================================================================== */
+
+/**
+ * A very simple reset that sits on top of Normalize.css.
+ */
+
+body,
+h1, h2, h3, h4, h5, h6,
+blockquote, p, pre,
+dl, dd, ol, ul,
+figure,
+hr,
+fieldset, legend {
+  margin:  0;
+  padding: 0;
+}
+
+
+/**
+ * Remove trailing margins from nested lists.
+ */
+
+li > {
+
+  ol,
+  ul {
+    margin-bottom: 0;
+  }
+
+}
+
+
+/**
+ * Remove default table spacing.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+
+/**
+ * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
+ *    on fieldsets.
+ */
+
+fieldset {
+  min-width: 0; /* [1] */
+  border: 0;
+}

data/vendor/assets/stylesheets/inuitcss/generic/_generic.shared.scss

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   #SHARED
+   ========================================================================== */
+
+/**
+ * Shared declarations for certain elements.
+ */
+
+/**
+ * Always declare margins in the same direction:
+ * csswizardry.com/2012/06/single-direction-margin-declarations
+ */
+
+/* stylelint-disable selector-list-comma-newline-after */
+
+address,
+h1, h2, h3, h4, h5, h6,
+blockquote, p, pre,
+dl, ol, ul,
+figure,
+hr,
+table,
+fieldset {
+  @include inuit-rem(margin-bottom, $inuit-global-spacing-unit);
+}
+
+
+/**
+ * Consistent indentation for lists.
+ */
+
+dd, ol, ul {
+  @include inuit-rem(margin-left, $inuit-global-spacing-unit);
+}
+
+/* stylelint-enable selector-list-comma-newline-after */

data/vendor/assets/stylesheets/inuitcss/objects/_objects.block.scss

@@ -0,0 +1,63 @@
+/* ==========================================================================
+   #BLOCK
+   ========================================================================== */
+
+/**
+ * Stacked image-with-text object. A simple abstraction to cover a very commonly
+ * occurring design pattern.
+ */
+
+.o-block {
+  display: block;
+  text-align: center;
+}
+
+
+  .o-block__img {
+    margin-bottom: $inuit-global-spacing-unit;
+
+
+    /* Size variants.
+       ====================================================================== */
+
+    .o-block--flush > & {
+      margin-bottom: 0;
+    }
+
+    .o-block--tiny > & {
+      margin-bottom: $inuit-global-spacing-unit-tiny;
+    }
+
+    .o-block--small > & {
+      margin-bottom: $inuit-global-spacing-unit-small;
+    }
+
+    .o-block--large > & {
+      margin-bottom: $inuit-global-spacing-unit-large;
+    }
+
+    .o-block--huge > & {
+      margin-bottom: $inuit-global-spacing-unit-huge;
+    }
+
+  }
+
+
+  .o-block__body {
+    display: block;
+  }
+
+
+
+
+
+/* Alignment variants.
+   ========================================================================== */
+
+.o-block--right {
+  text-align: right;
+}
+
+.o-block--left {
+  text-align: left;
+}

data/vendor/assets/stylesheets/inuitcss/objects/_objects.box.scss

@@ -0,0 +1,48 @@
+/* ==========================================================================
+   #BOX
+   ========================================================================== */
+
+/**
+ * The box object simply boxes off content. Extend with cosmetic styles in the
+ * Components layer.
+ *
+ * 1. So we can apply the `.o-box` class to naturally-inline elements.
+ */
+
+.o-box {
+  @include inuit-clearfix();
+  display: block; /* [1] */
+  padding: $inuit-global-spacing-unit;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+}
+
+
+
+
+
+/* Size variants
+   ========================================================================== */
+
+.o-box--flush {
+  padding: 0;
+}
+
+.o-box--tiny {
+  padding: $inuit-global-spacing-unit-tiny;
+}
+
+.o-box--small {
+  padding: $inuit-global-spacing-unit-small;
+}
+
+.o-box--large {
+  padding: $inuit-global-spacing-unit-large;
+}
+
+.o-box--huge {
+  padding: $inuit-global-spacing-unit-huge;
+}

data/vendor/assets/stylesheets/inuitcss/objects/_objects.crop.scss

@@ -0,0 +1,99 @@
+/* ==========================================================================
+   #CROP
+   ========================================================================== */
+
+// A list of cropping ratios that get generated as modifier classes.
+
+$inuit-crops: (
+  (2:1),
+  (4:3),
+  (16:9),
+) !default;
+
+
+
+/**
+ * Provide a cropping container in order to display media (usually images)
+ * cropped to certain ratios.
+ *
+ * 1. Set up a positioning context in which the image can sit.
+ * 2. This is the crucial part: where the cropping happens.
+ */
+
+.o-crop {
+  position: relative; /* [1] */
+  display: block;
+  overflow: hidden; /* [2] */
+}
+
+
+  /**
+   * Apply this class to the content (usually `img`) that needs cropping.
+   *
+   * 1. Image’s default positioning is top-left in the cropping box.
+   * 2. Make sure the media doesn’t stop itself too soon.
+   */
+
+  .o-crop__content {
+    position: absolute;
+    top:  0; /* [1] */
+    left: 0; /* [1] */
+    max-width: none; /* [2] */
+  }
+
+
+  /**
+   * We can position the media in different locations within the cropping area.
+   */
+
+  .o-crop__content--right {
+    right: 0;
+    left: auto;
+  }
+
+  .o-crop__content--bottom {
+    top: auto;
+    bottom: 0;
+  }
+
+  .o-crop__content--center {
+    top:  50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+
+
+/* stylelint-disable */
+
+/* Crop-ratio variants.
+   ========================================================================== */
+
+/**
+ * Generate a series of crop classes to be used like so:
+ *
+ *   <div class="o-crop  o-crop--16:9">
+ *
+ */
+
+@each $crop in $inuit-crops {
+
+  @each $antecedent, $consequent in $crop {
+
+    @if (type-of($antecedent) != number) {
+      @error "`#{$antecedent}` needs to be a number."
+    }
+
+    @if (type-of($consequent) != number) {
+      @error "`#{$consequent}` needs to be a number."
+    }
+
+    .o-crop--#{$antecedent}\:#{$consequent} {
+      padding-bottom: ($consequent/$antecedent) * 100%;
+    }
+
+  }
+
+}
+
+/* stylelint-enable */

data/vendor/assets/stylesheets/inuitcss/objects/_objects.flag.scss

@@ -0,0 +1,214 @@
+/* ==========================================================================
+   #FLAG
+   ========================================================================== */
+
+/**
+ * The flag object is a design pattern similar to the media object, however it
+ * utilises `display: table[-cell];` to give us control over the vertical
+ * alignments of the text and image.
+ *
+ * http://csswizardry.com/2013/05/the-flag-object/
+ *
+ * 1. Allows us to control vertical alignments.
+ * 2. Force the object to be the full width of its parent. Combined with [1],
+ *    this makes the object behave in a quasi-`display: block;` manner.
+ */
+
+.o-flag {
+  display: table; /* [1] */
+  width: 100%; /* [2] */
+}
+
+
+  /**
+   * Items within a flag object. There should only ever be one of each.
+   *
+   * 1. Default to aligning content to their middles.
+   */
+
+  .o-flag__img,
+  .o-flag__body {
+    display: table-cell;
+    vertical-align: middle; /* [1] */
+  }
+
+
+  /**
+   * Flag images have a space between them and the body of the object.
+   *
+   * 1. Force `.flag__img` to take up as little space as possible:
+   *    https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
+   */
+
+  .o-flag__img {
+    width: 1px; /* [1] */
+    padding-right: $inuit-global-spacing-unit;
+
+
+    /**
+     * 1. Fixes problem with images disappearing.
+     */
+
+    > img {
+      max-width: none; /* [1] */
+    }
+
+  }
+
+
+  /**
+   * The container for the main content of the flag object.
+   *
+   * 1. Forces the `.flag__body` to take up all remaining space.
+   */
+
+  .o-flag__body {
+    width: auto; /* [1] */
+
+    &,
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+  }
+
+
+
+
+
+/* Size variants.
+   ========================================================================== */
+
+.o-flag--tiny {
+
+  > .o-flag__img {
+    padding-right: $inuit-global-spacing-unit-tiny;
+  }
+
+  &.o-flag--reverse {
+
+    > .o-flag__img {
+      padding-right: 0;
+      padding-left: $inuit-global-spacing-unit-tiny;
+    }
+
+  }
+
+}
+
+.o-flag--small {
+
+  > .o-flag__img {
+    padding-right: $inuit-global-spacing-unit-small;
+  }
+
+  &.o-flag--reverse {
+
+    > .o-flag__img {
+      padding-right: 0;
+      padding-left: $inuit-global-spacing-unit-small;
+    }
+
+  }
+
+}
+
+.o-flag--large {
+
+  > .o-flag__img {
+    padding-right: $inuit-global-spacing-unit-large;
+  }
+
+  &.o-flag--reverse {
+
+    > .o-flag__img {
+      padding-right: 0;
+      padding-left: $inuit-global-spacing-unit-large;
+    }
+
+  }
+
+}
+
+.o-flag--huge {
+
+  > .o-flag__img {
+    padding-right: $inuit-global-spacing-unit-huge;
+  }
+
+  &.o-flag--reverse {
+
+    > .o-flag__img {
+      padding-right: 0;
+      padding-left: $inuit-global-spacing-unit-huge;
+    }
+
+  }
+
+}
+
+.o-flag--flush {
+
+  > .o-flag__img {
+    padding-right: 0;
+    padding-left:  0;
+  }
+
+}
+
+
+
+
+
+/* Reversed flag.
+   ========================================================================== */
+
+/**
+ * 1. Swap the rendered direction of the object…
+ * 2. …and reset it.
+ * 3. Reassign margins to the correct sides.
+ */
+
+.o-flag--reverse {
+  direction: rtl; /* [1] */
+
+  > .o-flag__img,
+  > .o-flag__body {
+    direction: ltr; /* [2] */
+  }
+
+  > .o-flag__img {
+    padding-right: 0; /* [3] */
+    padding-left: $inuit-global-spacing-unit; /* [3] */
+  }
+
+}
+
+
+
+
+
+/* Alignment variants.
+   ========================================================================== */
+
+/**
+ * Vertically align the image- and body-content differently. Defaults to middle.
+ */
+
+.o-flag--top {
+
+  > .o-flag__img,
+  > .o-flag__body {
+    vertical-align: top;
+  }
+
+}
+
+.o-flag--bottom {
+
+  > .o-flag__img,
+  > .o-flag__body {
+    vertical-align: bottom;
+  }
+
+}