scooter-sass 0.9.1

data/app/assets/stylesheets/scooter/helpers/_typography.scss

@@ -0,0 +1,88 @@
+// scss-lint:disable ImportantRule
+//
+//-----------------------------
+//
+// Utility: Typography
+// ===================
+//
+//-----------------------------
+//
+.u-font-center,
+%u-font-center {
+    text-align: center !important;
+}
+
+.u-font-left,
+%u-font-left {
+    text-align: left !important;
+}
+
+.u-font-right,
+%u-font-right {
+    text-align: right !important;
+}
+
+.u-font-small,
+%u-font-small {
+    font-size: 0.85em;
+}
+
+.u-font-strong,
+%u-font-strong {
+    font-weight: 600;
+}
+
+.u-font-black,
+%u-font-black {
+    color: color(black);
+}
+
+.u-font-meta,
+%u-font-meta {
+    color: color(gray, medium);
+}
+
+.u-font-error,
+%u-font-error,
+.u-font-danger,
+%u-font-danger {
+    color: color(red);
+}
+
+.u-font-success,
+%u-font-success {
+    color: color(green);
+}
+
+.u-font-wrap,
+%u-font-wrap {
+    white-space: normal;
+}
+
+.u-font-nowrap,
+%u-font-nowrap {
+    white-space: nowrap;
+}
+
+// Hide text in element
+// Useful for icons with screenreader-accessible text
+.u-thide {
+    overflow: hidden;
+    white-space: nowrap;
+
+    text-indent: 100%;
+}
+
+// Ellipsis text overflow
+.u-ellip {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+
+    text-overflow: ellipsis;
+}
+
+// Remove list styling from lists
+.u-unlist {
+    list-style: none;
+}

data/app/assets/stylesheets/scooter/mixins/__all.scss

@@ -0,0 +1,11 @@
+//---------------------------
+//
+// Mixins
+//
+//---------------------------
+
+@import "debug";
+@import "properties";
+@import "arrow";
+@import "image";
+@import "accessibility";

data/app/assets/stylesheets/scooter/mixins/_accessibility.scss

@@ -0,0 +1,22 @@
+// scss-lint:disable ImportantRule
+//
+//-----------------------------------
+//
+// Accessibility mixins
+// ====================
+//
+//-----------------------------------
+
+// Assert that the parent selector matches one of the selectors passed into $selectors
+@mixin assert-selector($selectors...) {
+    $result: &;
+
+    @each $selector in $selectors {
+        $result: selector-append($result, unquote(':not(#{$selector})'));
+    }
+
+    @at-root #{$result} {
+        /*! You must ensure the element matches one of these selectors: #{$selectors} */
+        outline: 2px solid red !important;
+    }
+}

data/app/assets/stylesheets/scooter/mixins/_arrow.scss

@@ -0,0 +1,53 @@
+//-----------------------------
+//
+// Arrow mixin
+// ===========
+//
+// Allows creation of CSS-only directional arrows
+//
+// The following example turns the .el element into a 10px downward-facing
+// arrow that inherits its color from the parent.
+//
+// .el {
+//   @include arrow(10px, inherit, down);
+// }
+//
+//-----------------------------
+
+// @private mixin arrow-base
+// Used to set up an arrow element
+@mixin __arrow-base($size: 10px) {
+    display: inline-block;
+    width: 0;
+    height: 0;
+
+    $size: $size/2;
+    border: $size solid transparent;
+}
+
+// @private mixin arrow-make
+// Used with arrow-base($size) to create an arrow shape
+@mixin __arrow-make($color: inherit, $direction: down) {
+    // Set up the direction
+    @if $direction == down {
+        $direction: "top";
+    } @elseif $direction == up {
+        $direction: "bottom";
+    } @elseif $direction == left {
+        $direction: "right";
+    } @elseif $direction == right {
+        $direction: "left";
+    } @else {
+        @warn "[@include arrow[-*](vars)] $direction can only accept the following values: up, down, left, right. Falling back to default (down)";
+        $direction: "top";
+    }
+
+    border-#{$direction}-color: $color;
+}
+
+// Arrow
+// Shorthand mixin accessor for arrow-base() and arrow-make()
+@mixin arrow($size: 10px, $color: inherit, $direction: down) {
+    @include __arrow-base($size);
+    @include __arrow-make($color, $direction);
+}

data/app/assets/stylesheets/scooter/mixins/_debug.scss

@@ -0,0 +1,83 @@
+//-----------------------------
+//
+// Debugging
+// =========
+//
+// Mixins for debugging class use, etc.
+//
+//-----------------------------
+
+// Simple toggle for switching debugging on and off
+$DBdebug: false !default;
+
+// Mixin that gives visual feedback in the DOM if a selector is used outside of
+// a given context. Useful for detecting misused Elements in BEM.
+//
+//  .simple {
+//    font-weight: bold;
+//  }
+//
+//    .simple__usage {
+//      color: red;
+//      @include nest-check(".simple");
+//    }
+//
+// Courtesy Harry Roberts (@csswizardry)
+@mixin nest-check($element) {
+    @if ($DBdebug == true) {
+        position: relative;
+
+        outline: 1px solid color(red);
+
+        &::after {
+            content: "Error: Element `." attr(class) "` should be within `#{$element}`.";
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            white-space: nowrap;
+
+            font-family: monospace;
+
+            color: color(red);
+            background-color: color(white);
+        }
+
+        #{$element} & {
+            outline: none;
+
+            &::after {
+                content: normal;
+            }
+        }
+    }
+}
+
+@if ($DBdebug == true) {
+
+    // If an element has a class attribute containing two hyphens but no space
+    // (i.e. only one class is being used, and it's a Modifier), provide visual
+    // feedback in the DOM.
+    //
+    // N.B. This isn't bulletproof: `class="foo--bar baz"` would pass, as would
+    //      `class=" foo--bar"`. Use with a pinch of salt.
+    //
+    [class*="--"]:not([class*=" "]) {
+        position: relative;
+
+        outline: 1px solid red;
+
+        &:after {
+            content: "Error: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            white-space: nowrap;
+
+            font-family: monospace;
+
+            color: red;
+            background-color: white;
+        }
+    }
+
+}

data/app/assets/stylesheets/scooter/mixins/_image.scss

@@ -0,0 +1,15 @@
+//-----------------------------------
+//
+// Image mixins
+// ============
+//
+//-----------------------------------
+
+@mixin background-image($name, $size: null, $position: center, $repeat: no-repeat) {
+    background-image: url("#{$DBimage-path}#{$name}");
+    @if ($size != null) {
+        background-size: $size;
+    }
+    background-position: $position;
+    background-repeat: $repeat;
+}

data/app/assets/stylesheets/scooter/mixins/_properties.scss

@@ -0,0 +1,16 @@
+//---------------------------
+//
+// Property functions
+//
+//---------------------------
+
+// Share values for multiple properties
+// Usage:
+//
+// @include share(padding-top, padding-bottom, 23px);
+//
+@mixin share($props.../*, $value */) {
+    @for $i from 1 to length($props) {
+        #{nth($props, $i)}: nth($props, -1);
+    }
+}

data/app/assets/stylesheets/scooter/objects/__all.scss

@@ -0,0 +1,11 @@
+//---------------------------
+//
+// Objects
+//
+//---------------------------
+
+@import "wrap";
+@import "grid";
+@import "media";
+@import "list-ui";
+@import "flag";

data/app/assets/stylesheets/scooter/objects/_flag.scss

@@ -0,0 +1,88 @@
+//-----------------------------
+//
+// Flag object
+// ===========
+//
+// Modified version of Harry Roberts' flag object
+// (http://csswizardry.com/2013/05/the-flag-object/)
+//
+// Similar to the media object. Used to vertically align a fluid-width element
+// and a fixed-width element next to one another.
+//
+// Usage:
+//
+// <div class="o-flag">
+//   <div class="o-flag__fix">
+//     <img src="" alt="This element will maintain its width" />
+//   </div>
+//   <div class="o-flag__flex">
+//     <p>This element will grow to fill the remaining space</p>
+//   </div>
+// </div>
+//
+//-----------------------------
+
+$DBflag-namespace: "o-flag" !default;
+
+.#{$DBflag-namespace} {
+    display: table;
+    width: 100%;
+
+    &__fix,
+    &__flex {
+        display: table-cell;
+        vertical-align: middle;
+
+        // Use the --top modifier to align top edges of the elements
+        .#{$DBflag-namespace}--top & {
+            vertical-align: top;
+        }
+
+        // Use --bottom to align bottom edges of the elements
+        .#{$DBflag-namespace}--bottom & {
+            vertical-align: bottom;
+        }
+
+    }
+
+    // The fixed-width element
+    &__fix {
+        white-space: nowrap;
+    }
+
+    // This element grows to fill the remainder of its container
+    &__flex {
+        width: 100%;
+    }
+}
+
+// Flexbox adjustments
+@supports (display: flex) {
+    .#{$DBflag-namespace} {
+        display: flex;
+        align-items: center;
+
+        &--top {
+            align-items: flex-start;
+        }
+
+        &--bottom {
+            align-items: flex-end;
+        }
+    }
+
+    .#{$DBflag-namespace}__fix {
+        display: inherit;
+        align-items: inherit;
+        flex: 0 0 auto;
+    }
+
+    .#{$DBflag-namespace}__flex {
+        display: initial;
+        min-width: 0;
+        // Though width is set by flex in this selector, Safari 9 exhibits a bug
+        // causing it to ignore the implied width if an explicit width is set.
+        width: auto;
+        flex: 1 1 auto;
+    }
+}

data/app/assets/stylesheets/scooter/objects/_grid.scss

@@ -0,0 +1,295 @@
+// scss-lint:disable SelectorDepth
+//
+//-----------------------------
+//
+//  Grid system adapted from Daniel Eden's
+//  Toast (http://daneden.github.io/Toast/)
+//
+//
+//  Usage
+//  =====
+//
+//  Assuming default values:
+//
+//  <div class="grid">
+//    <div class="grid__col grid__col--1-of-2">
+//      A half-width column.
+//    </div>
+//    <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
+//      A quarter, pulled left by its own width. You get this, right?
+//    </div>
+//  </div>
+//
+//
+//  Customisation
+//  =============
+//
+//  $DBgrid-namespace and $grid-column-namespace adjusts the class names for the
+//  grid. With default values, grid wrappers have a class of '.grid' and
+//  columns '.grid__col'.
+//
+//  $DBcol-groups(n) adjusts column divisions.
+//  For example, $DBcol-groups(12) will produce a 12-column grid.
+//  $DBcol-groups(3,6,8) will produce a 3-, 6-, and 8-column grid.
+//
+//  $DBgutter-width is-you guessed it-the gutter width. Accepts any unit.
+//
+//  That's it. Have fun.
+//
+//-----------------------------
+
+// Namespaces
+// This stops me from being overzealous with enforcing classes
+$DBgrid-namespace: "o-grid" !default;
+$DBgrid-column-namespace: "o-grid__col" !default;
+
+// $DBcol-groups are the column groups you want
+// For example, $DBcol-groups: (3, 4, 5) will output:
+// .grid__col--n-of-3, .grid__col--n-of-4, [...]
+$DBcol-groups: (2, 3, 4, 6, 12) !default;
+
+// Gutter width
+$DBgutter-width: 20px !default;
+
+// Breakpoints
+$DBbreakpoint-medium: 750px !default;
+$DBbreakpoint-small: 550px !default;
+
+.#{$DBgrid-namespace} {
+    list-style: none;
+    margin-left: -$DBgutter-width;
+}
+
+%span-all       { width: percentage(1 / 1); }
+
+%one-half       { width: percentage(1 / 2); }
+
+%one-third      { width: percentage(1 / 3); }
+%two-thirds     { width: percentage(2 / 3); }
+
+%one-quarter    { width: percentage(1 / 4); }
+%two-quarters   { width: percentage(2 / 4); }
+%three-quarters { width: percentage(3 / 4); }
+
+%push-span-all       { margin-left: percentage(1 / 1); }
+
+%push-one-half       { margin-left: percentage(1 / 2); }
+
+%push-one-third      { margin-left: percentage(1 / 3); }
+%push-two-thirds     { margin-left: percentage(2 / 3); }
+
+%push-one-quarter    { margin-left: percentage(1 / 4); }
+%push-two-quarters   { margin-left: percentage(2 / 4); }
+%push-three-quarters { margin-left: percentage(3 / 4); }
+
+%pull-span-all       { margin-left: -(percentage(1 / 1)); }
+
+%pull-one-half       { margin-left: -(percentage(1 / 2)); }
+
+%pull-one-third      { margin-left: -(percentage(1 / 3)); }
+%pull-two-thirds     { margin-left: -(percentage(2 / 3)); }
+
+%pull-one-quarter    { margin-left: -(percentage(1 / 4)); }
+%pull-two-quarters   { margin-left: -(percentage(2 / 4)); }
+%pull-three-quarters { margin-left: -(percentage(3 / 4)); }
+
+// For each of our column groups...
+@each $group in $DBcol-groups {
+
+    // For each column width from 1 to the column group...
+    @for $i from 1 through $group {
+        $relation: ($i / $group);
+
+        .#{$DBgrid-column-namespace}--#{$i}-of-#{$group} {
+            @if $relation == 1 {
+                @extend %span-all;
+            } @else if $relation == 1 {
+                @extend %one-half;
+            } @else if $relation == (1 / 3) {
+                @extend %one-third;
+            } @else if $relation == (2 / 3) {
+                @extend %two-thirds;
+            } @else if $relation == (1 / 4) {
+                @extend %one-quarter;
+            } @else if $relation == (2 / 4) {
+                @extend %two-quarters;
+            } @else if $relation == (3 / 4) {
+                @extend %three-quarters;
+            } @else {
+                width: percentage($i / $group);
+            }
+        }
+
+        .#{$DBgrid-column-namespace}--push-#{$i}-of-#{$group} {
+
+            @if $relation == 1 {
+                @extend %push-span-all;
+            } @else if $relation == (1 / 2) {
+                @extend %push-one-half;
+            } @else if $relation == (1 / 3) {
+                @extend %push-one-third;
+            } @else if $relation == (2 / 3) {
+                @extend %push-two-thirds;
+            } @else if $relation == (1 / 4) {
+                @extend %push-one-quarter;
+            } @else if $relation == (2 / 4) {
+                @extend %push-two-quarters;
+            } @else if $relation == (3 / 4) {
+                @extend %push-three-quarters;
+            } @else {
+                margin-left: percentage($i / $group);
+            }
+        }
+
+        .#{$DBgrid-column-namespace}--pull-#{$i}-of-#{$group} {
+
+            @if $relation == 1 {
+                @extend %pull-span-all;
+            } @else if $relation == (1 / 2) {
+                @extend %pull-one-half;
+            } @else if $relation == (1 / 3) {
+                @extend %pull-one-third;
+            } @else if $relation == (2 / 3) {
+                @extend %pull-two-thirds;
+            } @else if $relation == (1 / 4) {
+                @extend %pull-one-quarter;
+            } @else if $relation == (2 / 4) {
+                @extend %pull-two-quarters;
+            } @else if $relation == (3 / 4) {
+                @extend %pull-three-quarters;
+            } @else {
+
+                margin-left: -(percentage($i / $group));
+
+            }
+        }
+    } // end @for
+
+} // end @each
+
+// All direct descendents of .grid get treated the same way.
+// This might be overkill for some, but its a time-saver for me.
+.#{$DBgrid-column-namespace} {
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: -0.24em;
+    min-height: 1px;
+    padding-left: $DBgutter-width;
+    vertical-align: top;
+
+    // Remove whitespace offset when there is no whitespace
+    .#{$DBgrid-namespace}--nowhitespace &,
+    [data-reactid] & {
+        margin-right: 0;
+    }
+
+    .#{$DBgrid-namespace}--responsive & {
+        @media (max-width: $DBbreakpoint-medium) {
+            display: block;
+            margin-left: 0;
+            margin-right: 0;
+            width: auto;
+        }
+
+        @media (max-width: $DBbreakpoint-medium) and (min-width: $DBbreakpoint-small) {
+            &[class*="#{$DBgrid-column-namespace}--m-"] {
+                display: inline-block;
+                margin-right: -0.24em;
+            }
+
+            &.#{$DBgrid-column-namespace}--m-1-of-2,
+            &.#{$DBgrid-column-namespace}--m-2-of-4 {
+                 width: percentage(1 / 2);
+            }
+
+            &.#{$DBgrid-column-namespace}--m-1-of-3 {
+                width: percentage(1 / 3);
+            }
+
+            &.#{$DBgrid-column-namespace}--m-2-of-3 {
+                width: percentage(2 / 3);
+            }
+
+            &.#{$DBgrid-column-namespace}--m-1-of-4 {
+                width: percentage(1 / 4);
+            }
+
+            &.#{$DBgrid-column-namespace}--m-3-of-4 {
+                width: percentage(3 / 4);
+            }
+        }
+
+        @media (max-width: $DBbreakpoint-small) {
+            &[class*="#{$DBgrid-column-namespace}--s-"] {
+                display: inline-block;
+                margin-right: -0.24em;
+            }
+
+            &.#{$DBgrid-column-namespace}--s-1-of-2,
+            &.#{$DBgrid-column-namespace}--s-2-of-4 {
+                width: percentage(1 / 2);
+            }
+
+            &.#{$DBgrid-column-namespace}--s-1-of-3 {
+                width: percentage(1 / 3);
+            }
+
+            &.#{$DBgrid-column-namespace}--s-2-of-3 {
+                width: percentage(2 / 3);
+            }
+
+            &.#{$DBgrid-column-namespace}--s-1-of-4 {
+                width: percentage(1 / 4);
+            }
+
+            &.#{$DBgrid-column-namespace}--s-3-of-4 {
+                width: percentage(3 / 4);
+            }
+        }
+    }
+}
+
+// Centers the column in the grid and clears the row of all other columns
+.#{$DBgrid-column-namespace}--centered {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+// Displays the column as the first in its row
+.#{$DBgrid-column-namespace}--d-first {
+    float: left;
+}
+
+// Displays the column as the last in its row
+.#{$DBgrid-column-namespace}--d-last {
+    float: right;
+}
+
+// Removes gutters from the columns
+.#{$DBgrid-namespace}--no-gutter {
+    margin-left: 0;
+    width: 100%;
+
+    .#{$DBgrid-column-namespace} {
+        padding-left: 0;
+    }
+
+    .#{$DBgrid-column-namespace}--span-all {
+        margin-left: 0;
+        width: 100%;
+    }
+}
+
+// Align column to the bottom.
+.#{$DBgrid-column-namespace}--ab,
+.#{$DBgrid-column-namespace}--align-bottom {
+    vertical-align: bottom;
+}
+
+// Align column to the middle.
+.#{$DBgrid-column-namespace}--am,
+.#{$DBgrid-column-namespace}--align-middle {
+    vertical-align: middle;
+}