inuit-rails 6.0.0.beta.4

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

@@ -0,0 +1,247 @@
+/* ==========================================================================
+   #LAYOUT
+   ========================================================================== */
+
+/**
+ * Grid-like layout system.
+ *
+ * The layout object provides us with a column-style layout system. This file
+ * contains the basic structural elements, but classes should be complemented
+ * with width utilities, for example:
+ *
+ *   <div class="o-layout">
+ *     <div class="o-layout__item  u-1/2">
+ *     </div>
+ *     <div class="o-layout__item  u-1/2">
+ *     </div>
+ *   </div>
+ *
+ * The above will create a two-column structure in which each column will
+ * fluidly fill half of the width of the parent. We can have more complex
+ * systems:
+ *
+ *   <div class="o-layout">
+ *     <div class="o-layout__item  u-1/1  u-1/3@medium">
+ *     </div>
+ *     <div class="o-layout__item  u-1/2  u-1/3@medium">
+ *     </div>
+ *     <div class="o-layout__item  u-1/2  u-1/3@medium">
+ *     </div>
+ *   </div>
+ *
+ * The above will create a system in which the first item will be 100% width
+ * until we enter our medium breakpoint, when it will become 33.333% width. The
+ * second and third items will be 50% of their parent, until they also become
+ * 33.333% width at the medium breakpoint.
+ *
+ * We can also manipulate entire layout systems by adding a series of modifiers
+ * to the `.o-layout` block. For example:
+ *
+ *   <div class="o-layout  o-layout--reverse">
+ *
+ * This will reverse the displayed order of the system so that it runs in the
+ * opposite order to our source, effectively flipping the system over.
+ *
+ *   <div class="o-layout  o-layout--[right|center]">
+ *
+ * This will cause the system to fill up from either the centre or the right
+ * hand side. Default behaviour is to fill up the layout system from the left.
+ *
+ * There are plenty more options available to us: explore them below.
+ */
+
+// By default we use the `font-size: 0;` trick to remove whitespace between
+// items. Set this to true in order to use a markup-based strategy like
+// commenting out whitespace or minifying HTML.
+$inuit-use-markup-fix: false !default;
+
+
+
+
+
+/* Default/mandatory classes.
+   ========================================================================== */
+
+/**
+ * 1. Allows us to use the layout object on any type of element.
+ * 2. We need to defensively reset any box-model properties.
+ * 3. Use the negative margin trick for multi-row grids:
+ *    http://csswizardry.com/2011/08/building-better-grid-systems/
+ */
+
+.o-layout {
+  display: block; /* [1] */
+  margin:  0; /* [2] */
+  padding: 0; /* [2] */
+  list-style: none; /* [1] */
+  margin-left: -$inuit-global-spacing-unit; /* [3] */
+
+  @if ($inuit-use-markup-fix == false) {
+    font-size: 0;
+  }
+
+}
+
+
+  /**
+   * 1. Required in order to combine fluid widths with fixed gutters.
+   * 2. Allows us to manipulate grids vertically, with text-level properties,
+   *    etc.
+   * 3. Default item alignment is with the tops of each other, like most
+   *    traditional grid/layout systems.
+   * 4. By default, all layout items are full-width (mobile first).
+   * 5. Gutters provided by left padding:
+   *    http://csswizardry.com/2011/08/building-better-grid-systems/
+   * 6. Fallback for old IEs not supporting `rem` values.
+   */
+
+  .o-layout__item {
+    box-sizing: border-box; /* [1] */
+    display: inline-block; /* [2] */
+    vertical-align: top; /* [3] */
+    width: 100%; /* [4] */
+    padding-left: $inuit-global-spacing-unit; /* [5] */
+
+    @if ($inuit-use-markup-fix == false) {
+      font-size: $inuit-global-font-size; /* [6] */
+      font-size: 1rem;
+    }
+
+  }
+
+
+
+
+
+/* Gutter size modifiers.
+   ========================================================================== */
+
+.o-layout--tiny {
+  margin-left: -$inuit-global-spacing-unit-tiny;
+
+  > .o-layout__item {
+    padding-left: $inuit-global-spacing-unit-tiny;
+  }
+
+}
+
+
+.o-layout--small {
+  margin-left: -$inuit-global-spacing-unit-small;
+
+  > .o-layout__item {
+    padding-left: $inuit-global-spacing-unit-small;
+  }
+
+}
+
+
+.o-layout--large {
+  margin-left: -$inuit-global-spacing-unit-large;
+
+  > .o-layout__item {
+    padding-left: $inuit-global-spacing-unit-large;
+  }
+
+}
+
+
+.o-layout--huge {
+  margin-left: -$inuit-global-spacing-unit-huge;
+
+  > .o-layout__item {
+    padding-left: $inuit-global-spacing-unit-huge;
+  }
+
+}
+
+
+.o-layout--flush {
+  margin-left: 0;
+
+  > .o-layout__item {
+    padding-left: 0;
+  }
+
+}
+
+
+
+
+
+/* Vertical alignment modifiers.
+   ========================================================================== */
+
+/**
+ * Align all grid items to the middles of each other.
+ */
+
+.o-layout--middle {
+
+  > .o-layout__item {
+    vertical-align: middle;
+  }
+
+}
+
+
+/**
+ * Align all grid items to the bottoms of each other.
+ */
+
+.o-layout--bottom {
+
+  > .o-layout__item {
+    vertical-align: bottom;
+  }
+
+}
+
+
+
+
+
+/* Fill order modifiers.
+   ========================================================================== */
+
+/**
+ * Fill up the layout system from the centre.
+ */
+
+.o-layout--center {
+  text-align: center;
+
+  > .o-layout__item {
+    text-align: left;
+  }
+
+}
+
+
+/**
+ * Fill up the layout system from the right-hand side.
+ */
+
+.o-layout--right {
+  text-align: right;
+
+  > .o-layout__item {
+    text-align: left;
+  }
+
+}
+
+
+/**
+ * Reverse the rendered order of the grid system.
+ */
+
+.o-layout--reverse {
+  direction: rtl;
+
+  > .o-layout__item {
+    direction: ltr;
+    text-align: left;
+  }
+
+}

data/vendor/assets/stylesheets/inuitcss/objects/_objects.list-bare.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   #LIST-BARE
+   ========================================================================== */
+
+/**
+ * Strip list-like appearance from lists by removing their bullets, and any
+ * indentation.
+ */
+
+.o-list-bare {
+  list-style: none;
+  margin-left: 0;
+}

data/vendor/assets/stylesheets/inuitcss/objects/_objects.list-inline.scss

@@ -0,0 +1,53 @@
+/* ==========================================================================
+   #LIST-INLINE
+   ========================================================================== */
+
+/**
+ * The list-inline object simply displays a list of items in one line.
+ */
+
+.o-list-inline {
+  margin-left: 0;
+  list-style: none;
+}
+
+
+  .o-list-inline__item {
+    display: inline-block;
+  }
+
+
+
+
+
+/* Delimited list.
+   ========================================================================== */
+
+/**
+ * By default, applying this class will comma separate your list items. You can
+ * change the delimiter by predefining the following variable:
+ */
+
+$inuit-list-inline-delimiter:   ",\00A0" !default;
+
+/**
+ * 1. Fallback for old IEs not supporting `rem` values.
+ */
+
+.o-list-inline--delimited {
+  font-size: 0;
+
+  > .o-list-inline__item {
+    font-size: $inuit-global-font-size; /* [1] */
+    font-size: 1rem;
+  }
+
+  > .o-list-inline__item + .o-list-inline__item {
+
+    &:before {
+      content: "#{$inuit-list-inline-delimiter}";
+    }
+
+  }
+
+}

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

@@ -0,0 +1,152 @@
+/* ==========================================================================
+   #MEDIA
+   ========================================================================== */
+
+/**
+ * Place any image- and text-like content side-by-side, as per:
+ * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
+ */
+
+.o-media {
+  @include inuit-clearfix();
+  display: block;
+}
+
+
+  .o-media__img {
+    float: left;
+    margin-right: $inuit-global-spacing-unit;
+
+    > img {
+      display: block;
+    }
+
+  }
+
+
+  .o-media__body {
+    overflow: hidden;
+    display: block;
+
+    &,
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+  }
+
+
+
+
+
+/* Size variants
+   ========================================================================== */
+
+/**
+ * Modify the amount of space between our image and our text. We also have
+ * reversible options for all available sizes.
+ */
+
+.o-media--tiny {
+
+  > .o-media__img {
+    margin-right: $inuit-global-spacing-unit-tiny;
+  }
+
+  &.o-media--reverse {
+
+    > .o-media__img {
+      margin-right: 0;
+      margin-left:  $inuit-global-spacing-unit-tiny;
+    }
+
+  }
+
+}
+
+
+.o-media--small {
+
+  > .o-media__img {
+    margin-right: $inuit-global-spacing-unit-small;
+  }
+
+  &.o-media--reverse {
+
+    > .o-media__img {
+      margin-right: 0;
+      margin-left:  $inuit-global-spacing-unit-small;
+    }
+
+  }
+
+}
+
+
+.o-media--large {
+
+  > .o-media__img {
+    margin-right: $inuit-global-spacing-unit-large;
+  }
+
+  &.o-media--reverse {
+
+    > .o-media__img {
+      margin-right: 0;
+      margin-left:  $inuit-global-spacing-unit-large;
+    }
+
+  }
+
+}
+
+
+.o-media--huge {
+
+  > .o-media__img {
+    margin-right: $inuit-global-spacing-unit-huge;
+  }
+
+  &.o-media--reverse {
+
+    > .o-media__img {
+      margin-right: 0;
+      margin-left:  $inuit-global-spacing-unit-huge;
+    }
+
+  }
+
+}
+
+
+
+
+
+/* Reversed media objects
+   ========================================================================== */
+
+.o-media--reverse {
+
+  > .o-media__img {
+    float: right;
+    margin-right: 0;
+    margin-left: $inuit-global-spacing-unit;
+  }
+
+}
+
+
+
+
+
+/* Gutterless media objects
+   ========================================================================== */
+
+.o-media--flush {
+
+  > .o-media__img {
+    margin-right: 0;
+    margin-left:  0;
+  }
+
+}