scooter-sass 0.9.1

data/app/assets/stylesheets/scooter/components/_tokens.scss

@@ -0,0 +1,116 @@
+//-----------------------------
+//
+// Tokens
+// ======
+//
+// Usage:
+//
+// <div class="c-token [modifier]">
+//   [avatar/icon]
+//   <span class="c-token__name">{{Name/email}}</span>
+//   <i class="c-token__delete">&times;</i>
+// </div>
+//
+//-----------------------------
+
+$DBtoken-namespace: "c-token" !default;
+
+$DBtoken-background-neutral: color(gray, x-light) !default;
+$DBtoken-background-warning: color(yellow, x-light) !default;
+$DBtoken-background-error: color(red, x-light) !default;
+
+$DBtoken-background-neutral-selected: color(gray, medium) !default;
+$DBtoken-background-warning-selected: color(yellow, dark) !default;
+$DBtoken-background-error-selected: color(red, dark) !default;
+
+$DBtoken-text-neutral: color(gray) !default;
+$DBtoken-text-warning: color(yellow, x-dark) !default;
+$DBtoken-text-error: color(red, x-dark) !default;
+
+/*!
+ * Token components
+ */
+.#{$DBtoken-namespace} {
+    display: inline-block;
+    // We want tokens to always remain on one line
+    white-space: nowrap;
+    padding: 4px;
+
+    line-height: 1;
+
+    color: $DBtoken-text-neutral;
+    border-radius: 3px;
+    box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.1);
+    background-color: $DBtoken-background-neutral;
+
+    cursor: default;
+
+    &:hover {
+        box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.3);
+    }
+
+    > * {
+        vertical-align: middle;
+        margin-left: 0.25em;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}
+
+// Warning state
+// (Out-of-org, non-blocking)
+.#{$DBtoken-namespace}--warning {
+    color: $DBtoken-text-warning;
+    background-color: $DBtoken-background-warning;
+}
+
+// Invalid state
+// (Out-of-org, suspended)
+.#{$DBtoken-namespace}--invalid {
+    color: $DBtoken-text-error;
+    background-color: $DBtoken-background-error;
+}
+
+// Pending state
+// Transient state while actual state is determined
+.#{$DBtoken-namespace}--pending {
+    opacity: 0.5;
+}
+
+// Selected state
+.#{$DBtoken-namespace}.is-selected, .#{$DBtoken-namespace}.is-selected:hover {
+    color: color(white);
+    background-color: $DBtoken-background-neutral-selected;
+
+    &.#{$DBtoken-namespace}--warning {
+        background-color: $DBtoken-background-warning-selected;
+    }
+
+    &.#{$DBtoken-namespace}--invalid {
+        background-color: $DBtoken-background-error-selected;
+    }
+}
+
+
+// User name or email
+.#{$DBtoken-namespace}__name {
+    // Open Sans' line-height needs some manual correction
+    top: 1px;
+    margin-left: 0.25em;
+}
+
+// Delete token glyph
+.#{$DBtoken-namespace}__delete {
+    margin-right: 0.15em;
+    margin-left: 0.25em;
+
+    font-size: 1.25em;
+
+    color: currentColor;
+    opacity: 0.7;
+
+    cursor: pointer;
+}
+

data/app/assets/stylesheets/scooter/components/_typeahead.scss

@@ -0,0 +1,77 @@
+//-----------------------------
+//
+// Typeahead
+//
+//-----------------------------
+
+$DBtypeahead-namespace: "c-typeahead" !default;
+
+$DBtypeahead-background: color(white) !default;
+
+.#{$DBinput-namespace}--typeahead {
+    &.is-active {
+        border-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+/*!
+ * Typeahead component
+ */
+.#{$DBtypeahead-namespace} {
+    display: none;
+    overflow: scroll;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    max-height: 180px;
+    margin-top: -1px;
+
+    line-height: 1.5;
+
+    border: 1px solid color(gray, x-dark, 0.1);
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 1px 2px color(gray, x-dark, 0.1);
+    background-color: $DBtypeahead-background;
+
+    background-clip: padding-box;
+
+    &.is-open {
+        display: block;
+    }
+
+    &__result {
+        margin-top: -1px;
+
+        cursor: pointer;
+
+        &.is-selected {
+            z-index: 2;
+            margin-bottom: -2px;
+
+            color: color(blue);
+            border-bottom: 1px solid;
+            border-color: color(gray, x-dark, 0.1);
+            background-color: color(blue, x-light);
+
+            .f-meta {
+                color: inherit;
+            }
+        }
+
+        &.is-invalid {
+            cursor: default;
+        }
+    }
+
+    &__media, &__content {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &__media {
+        margin-right: half($DBbaseline);
+    }
+}

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

@@ -0,0 +1,11 @@
+//---------------------------
+//
+// Functions
+//
+// Just a few helpful functions
+//
+//---------------------------
+
+@import "maths";
+@import "colors";
+@import "units";

data/app/assets/stylesheets/scooter/functions/_colors.scss

@@ -0,0 +1,104 @@
+//---------------------------
+//
+// Color functions
+//
+//---------------------------
+
+//---------------------------
+//
+// Defining acceptable alpha & shade values for color functions
+//
+//---------------------------
+$__alpha-stops: (0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1);
+$__shade-vals: ("x-dark", "dark", "base", "medium", "light", "x-light");
+
+//---------------------------
+//
+// The grayscale function takes two arguments:
+//  REQUIRED: Level of gray
+//    There are 10 levels of gray, ranging from 1 to 10 (darkest to lightest).
+//  OPTIONAL: Level of opacity
+//    There are 11 levels of opacity, ranging from 0.0 to 1.0 (transparent to opaque).
+//
+// Example: grayscale(1, 1);
+// This will create a dark gray that is fully opaque.
+//
+//---------------------------
+@function grayscale($gradation, $alpha: 1) {
+    @if map-has-key($DBgrayscaleColors, $gradation) {
+        $alpha-val: $alpha;
+
+        @if index($__alpha-stops, $alpha-val) == null {
+            @error "Only alpha values in 0.1 increments are allowed";
+        }
+
+        $grayscale-val: map-get($DBgrayscaleColors, $gradation);
+        @return rgba($grayscale-val, $alpha-val);
+    } @else {
+        @warn "No gradation of #{$gradation} found in $DBgrayscaleColors map.";
+    }
+}
+
+//---------------------------
+//
+// The color function takes three arguments:
+//  REQUIRED: Color
+//    There are 7 colors (gray, blue, green, red, yellow, black, white).
+//  OPTIONAL: Shade
+//    Each color has 6 shades (x-dark, dark, base, medium, light, x-light).
+//  OPTIONAL: Opacity
+//    Each shade has 11 levels of opacity, ranging from 0.0 to 1.0 (transparent to opaque).
+//
+// Example: color(blue);
+// This will create a base blue that is fully opaque.
+//
+// Example 2: color(red, dark, 0.8);
+// This will create a dark red that is 80% opaque.
+//
+// Example 3: color(yellow, 0.6);
+// This will create a base yellow that is 60% opaque.
+//
+//---------------------------
+@function color($name, $properties...) {
+    $n: length($properties);
+    $i: 1;
+
+    $shade-val: "base";
+    $alpha-val: 1;
+
+    @while $i <= $n {
+        $current-property: (nth($properties, $i));
+
+        @if type-of($current-property) == "string" {
+            $shade-val: $current-property;
+        } @else if type-of($current-property) == "number" {
+            $alpha-val: $current-property;
+        }
+
+        $i: $i + 1;
+    }
+
+    @if index($__shade-vals, $shade-val) == null {
+        @warn "Only the following shades are allowed: " + $__shade-vals;
+    }
+
+    @if index($__alpha-stops, $alpha-val) == null {
+        @error "Only alpha values in 0.1 increments are allowed";
+    }
+
+    @if map-has-key($DBglobalColors, $name) {
+        $rgb-val: ();
+
+        @if $name == white or $name == black {
+            $rgb-val: map-get($DBglobalColors, $name);
+        } @else {
+            $rgb-val: map-get(map-get($DBglobalColors, $name), $shade-val);
+        }
+
+        @return rgba($rgb-val, $alpha-val);
+    } @else {
+        @warn "No global color called #{$name} found."
+        + "Are you sure it's in `variables/colors?`";
+    }
+}
+

data/app/assets/stylesheets/scooter/functions/_maths.scss

@@ -0,0 +1,21 @@
+//---------------------------
+//
+// Mathematical functions
+//
+//---------------------------
+
+@function half($n) {
+    @return round($n / 2);
+}
+
+@function quarter($n) {
+    @return round($n / 4);
+}
+
+@function double($n) {
+    @return round($n * 2);
+}
+
+@function quadruple($n) {
+    @return round($n * 4);
+}

data/app/assets/stylesheets/scooter/functions/_units.scss

@@ -0,0 +1,10 @@
+//-----------------------------
+//
+// Units function
+//
+//-----------------------------
+
+// Strip units from passed value
+@function stripUnit($n) {
+    @return $n / ($n*0+1);
+}

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

@@ -0,0 +1,13 @@
+//---------------------------
+//
+// Helpers
+//
+// Classes and placeholders for common layout patterns, etc.
+//
+//---------------------------
+
+@import "accessibility";
+@import "clearfix";
+@import "inputs";
+@import "layout";
+@import "typography";

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

@@ -0,0 +1,28 @@
+//---------------------------
+//
+// Accessibility Helpers
+//
+//---------------------------
+
+// Visually hide elements, leaving them accessible to screen readers
+.ax-visually-hidden {
+    position: absolute !important;
+    border: 0 !important;
+    clip: rect(0, 0, 0, 0) !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+}
+
+// Give focusable elements a distinct outline
+.ax-focusable:focus, .ax-focusable.is-focused {
+    box-shadow: 0 0 0 2px color(blue, medium, 0.7);
+    outline: none;
+}
+
+// Alternative highlight for focusable elements
+.ax-focusable-inline:focus, .ax-focusable-inline.is-focused {
+    text-decoration: underline;
+}

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

@@ -0,0 +1,23 @@
+//-----------------------------
+//
+// Clearfix
+// ========
+//
+// The micro clearfix: http://cssmojo.com/latest_new_clearfix_so_far/
+//
+// Use @extend to avoid having the .clearfix class appear over and over again in
+// markup
+//
+//-----------------------------
+
+.clearfix,
+%clearfix {
+
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+}
+

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

@@ -0,0 +1,22 @@
+//---------------------------
+//
+// Input Helpers
+//
+//---------------------------
+
+// Remove default styles for buttons
+.u-unbutton {
+    padding: 0;
+
+    background: none;
+    border: 0;
+
+    &:focus {
+        box-shadow: 0 0 0 2px color(blue, light);
+    }
+
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+}

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

@@ -0,0 +1,112 @@
+// scss-lint:disable ImportantRule
+//
+//---------------------------
+//
+// Layout Helpers
+//
+//---------------------------
+
+$DBspacing-unit: 16px !default;
+
+$DBspacing-sizes: (
+  'xxs': .25,
+  'xs': .5,
+  's': 1,
+  'm': 1.5,
+  'l': 2,
+  'xl': 4,
+  'xxl': 6,
+  'jumbo': 8
+);
+
+$DBspacing-edges: (
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'vertical' ('top' 'bottom'),
+  'horizontal' ('left' 'right')
+);
+
+.u-trim-margin {
+    margin: 0 !important;
+}
+
+.u-trim-padding {
+    padding: 0 !important;
+}
+
+@each $size, $scale in $DBspacing-sizes {
+
+  .u-pad-#{$size} {
+    padding: round($DBspacing-unit * $scale) !important;
+  }
+
+  .u-mar-#{$size} {
+    margin: round($DBspacing-unit * $scale) !important;
+  }
+
+  @each $edge, $sub in $DBspacing-edges {
+    // Padding
+    .u-pad-#{$edge}-#{$size} {
+      @if $sub {
+        @each $subedge in $sub {
+          padding-#{$subedge}: round($DBspacing-unit * $scale) !important;
+        }
+      } @else {
+        padding-#{$edge}: round($DBspacing-unit * $scale) !important;
+      }
+    }
+
+    // Margins
+    .u-mar-#{$edge}-#{$size} {
+      @if $sub {
+        @each $subedge in $sub {
+          margin-#{$subedge}: round($DBspacing-unit * $scale) !important;
+        }
+      } @else {
+        margin-#{$edge}: round($DBspacing-unit * $scale) !important;
+      }
+    }
+  }
+}
+
+// Floats
+// ======
+//
+.u-l-fl,
+%u-l-fl {
+    float: left !important;
+}
+
+.u-l-fr,
+%u-l-fr {
+    float: right !important;
+}
+
+// Display types
+// =============
+//
+.u-l-b {
+    display: block !important;
+}
+
+.u-l-ib {
+    display: inline-block !important;
+
+    &--m {
+        vertical-align: middle !important;
+    }
+
+    &--t {
+        vertical-align: top !important;
+    }
+
+    &--b {
+        vertical-align: bottom !important;
+    }
+}
+
+.u-l-dn {
+    display: none !important;
+}