scooter-sass 0.9.1

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

@@ -0,0 +1,91 @@
+//-----------------------------
+//
+// Inputs
+//
+//-----------------------------
+
+$DBform-namespace: "c-form" !default;
+$DBlabel-namespace: "c-label" !default;
+$DBinput-namespace: "c-input" !default;
+
+$DBlabel-color: color(gray, medium) !default;
+$DBinput-color: color(gray) !default;
+$DBinput-color-disabled: color(gray, 0.7) !default;
+
+$DBinput-border: color(gray, x-dark, 0.1) !default;
+$DBinput-border-focused: color(blue, medium) !default;
+
+$DBinput-background: color(white) !default;
+$DBinput-background-disabled: color(gray, x-light) !default;
+
+/**
+ * Input & label components
+ */
+.#{$DBlabel-namespace} {
+    // Ensure the element is actually a label
+    @include assert-selector(label);
+
+    display: block;
+    margin-bottom: $DBbaseline;
+
+    font-size: 12px;
+
+    color: $DBlabel-color;
+}
+
+.#{$DBinput-namespace} {
+    // Ensure the element is actually a kind of input
+    @include assert-selector(input, button, select, textarea);
+
+    display: block;
+    width: 100%;
+    padding: 5px 7px;
+    box-sizing: border-box;
+
+    font-size: $DBfont-size;
+    text-align: left;
+
+    color: $DBinput-color;
+    border: 1px solid $DBinput-border;
+    border-radius: 3px;
+    background-color: $DBinput-background;
+    background-clip: padding-box;
+
+    &:focus {
+        border-color: $DBinput-border-focused;
+        outline: 0;
+    }
+
+    &:disabled, &.is-disabled {
+        background-color: $DBinput-background-disabled;
+    }
+
+    &.is-invalid,
+    .#{$DBform-namespace}--validated &:invalid {
+        @include background-image("icon-form-invalid.svg", 14px, right 10px center);
+
+        padding-right: 34px;
+
+        border-color: color(red, 0.5);
+        // Override default invalidation styles
+        box-shadow: none;
+        outline: 0;
+    }
+
+    &.is-valid,
+    .#{$DBform-namespace}--validated &:valid {
+        @include background-image("icon-form-valid.svg", 14px, right 10px center);
+
+        padding-right: 34px;
+    }
+}
+
+textarea.#{$DBinput-namespace} {
+    resize: vertical;
+}
+
+select.#{$DBinput-namespace} {
+    @include background-image("icon-form-dropdown.svg", 7px 14px, right 10px center);
+
+    padding-right: 27px;
+}

data/app/assets/stylesheets/scooter/components/_loading-indicator.scss

@@ -0,0 +1,69 @@
+//-----------------------------
+//
+// Loading indicator
+// =================
+//
+// Usage:
+// <div class="c-loader">Loading...</div>
+//
+//-----------------------------
+
+$DBloadingindicator-namespace: "c-loader";
+
+$DBloadingindicator-color: color(gray, dark);
+
+$DBloadingindicator-size: 6px;
+
+$DBloadingindicator-speed: 0.9s;
+
+/**
+ * Loading indicator component
+ */
+.#{$DBloadingindicator-namespace} {
+    display: inline-block;
+    position: relative;
+    width: $DBloadingindicator-size;
+    height: $DBloadingindicator-size;
+    margin: ($DBloadingindicator-size * 2) 0;
+
+    font-size: 0;
+
+    color: transparent;
+    border-radius: 100%;
+    background-color: rgba($DBloadingindicator-color, 0.3);
+
+    &, &:after, &:before {
+        animation: loaderFade $DBloadingindicator-speed ease-in-out infinite;
+    }
+
+    &:after, &:before {
+        content: "";
+        vertical-align: middle;
+        position: absolute;
+        left: 100%;
+        width: $DBloadingindicator-size;
+        height: $DBloadingindicator-size;
+        margin-left: round($DBloadingindicator-size * 0.6);
+
+        border-radius: 100%;
+        background-color: rgba($DBloadingindicator-color, 0.3);
+        animation-delay: ($DBloadingindicator-speed / 3);
+    }
+
+    &:after {
+        left: 200%;
+        margin-left: (round($DBloadingindicator-size * 0.3) + $DBloadingindicator-size);
+
+        animation-delay: (($DBloadingindicator-speed / 3) * 2);
+    }
+}
+
+@keyframes loaderFade {
+    50% {
+        background-color: rgba($DBloadingindicator-color, 1);
+    }
+
+    0%, 100% {
+        background-color: rgba($DBloadingindicator-color, 0.3);
+    }
+}

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

@@ -0,0 +1,74 @@
+//-----------------------------
+//
+// Modal
+//
+//-----------------------------
+
+$DBmodal-namespace: "c-modal" !default;
+
+$DBmodal-padding: 32px;
+
+$DBmodal-background: color(white) !default;
+$DBmodal-background-alt: color(gray, x-light) !default;
+
+/**
+ * Modal component
+ */
+.#{$DBmodal-namespace}-overlay {
+    @include share(top, right, bottom, left, 0);
+    display: flex;
+    position: absolute;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    padding: $DBmodal-padding;
+
+    background-color: color(gray, dark, 0.6);
+}
+
+.#{$DBmodal-namespace} {
+    overflow: scroll;
+    flex: 1 1 640px;
+    max-width: 640px;
+
+    border-radius: 3px;
+    box-shadow: 0 1px 2px color(gray, x-dark, 0.1);
+    background-color: $DBmodal-background;
+}
+
+.#{$DBmodal-namespace}__title,
+.#{$DBmodal-namespace}__header {
+    z-index: 3;
+    padding: ($DBmodal-padding/2) $DBmodal-padding;
+
+    box-shadow: 0 1px 1px color(gray, x-dark, 0.1);
+    background-color: $DBmodal-background;
+
+    .#{$DBmodal-namespace}--unibody & {
+        padding-bottom: 0;
+
+        box-shadow: none;
+    }
+
+    h2 {
+        margin-bottom: 0;
+    }
+}
+
+.#{$DBmodal-namespace}__content {
+    // Raise the z-index to enable overlapping of sibling banners
+    z-index: 2;
+    padding: $DBmodal-padding;
+
+    background-color: $DBmodal-background-alt;
+
+    .#{$DBmodal-namespace}--unibody & {
+        // The 'unibody' variant of c-modal has no differentiation between the
+        // title and the content
+        background-color: $DBmodal-background;
+    }
+}
+
+.#{$DBmodal-namespace}__banner {
+    box-shadow: inset 0 1px 0 color(gray, x-dark, 0.1);
+}

data/app/assets/stylesheets/scooter/components/_tab-nav.scss

@@ -0,0 +1,70 @@
+//------------------------------
+//
+// Tab navigation
+// ==============
+//
+// Example:
+// <nav>
+//   <ul class="c-tab-nav">
+//     <li class="c-tab-nav__tab"><a href="#photos">Photos</a></li>
+//     <!-- Add the --is-active modifier to active tabs -->
+//     <li class="c-tab-nav__tab c-tab-nav__tav--is-active"><a
+//     href="#docs">Documents</a></li>
+//   </ul>
+// </nav>
+//
+//------------------------------
+
+$DBtab-nav-namespace: "c-tab-nav" !default;
+
+.#{$DBtab-nav-namespace} {
+    margin-left: 0;
+    padding-left: 0;
+
+    list-style: none;
+
+    border-bottom: 1px solid color(gray, dark, 0.1);
+}
+
+.#{$DBtab-nav-namespace}__tab {
+    display: inline-block;
+    margin-bottom: -1px;
+
+    color: color(gray, medium);
+
+    // Adjacent siblings get a margin-left
+    + #{&} {
+        margin-left: 16px;
+    }
+
+    a, button {
+        display: inline-block;
+        padding: 0;
+        padding-bottom: 8px;
+
+        border: 0;
+        border-bottom: 1px solid transparent;
+        transition: 0.2s;
+        background-color: transparent;
+        color: inherit;
+
+        appearance: none;
+        cursor: pointer;
+
+        &:hover, &:focus {
+            text-decoration: none;
+
+            outline: 0;
+            color: color(gray, dark);
+            border-bottom-color: currentColor;
+        }
+    }
+
+    &.is-active a,
+    &.is-active button {
+        font-weight: 600;
+
+        color: color(gray, dark);
+        border-bottom-color: currentColor;
+    }
+}

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

@@ -0,0 +1,66 @@
+//-----------------------------
+//
+// Tables
+//
+//-----------------------------
+
+$DBtable-namespace: "c-table";
+
+.#{$DBtable-namespace} {
+    display: table;
+    width: 100%;
+
+    text-align: left;
+
+    &__th, th,
+    &__td, td {
+        @include share(padding-top, padding-bottom, $DBbaseline/2);
+        @include share(padding-left, padding-right, $DBbaseline/4);
+    }
+
+    &__th, th {
+        font-weight: 400;
+
+        color: grayscale(5);
+        border-bottom: 2px solid color(gray, light);
+    }
+
+    &__row, tr {
+        border-bottom: 1px solid color(gray, light);
+    }
+
+    // Messaging state modifiers
+    &__row, tr,
+    &__td, td {
+        &--success {
+            background-color: color(green, light);
+        }
+
+        &--warning {
+            background-color: color(yellow, light);
+        }
+
+        &--error {
+            background-color: color(red, light);
+        }
+    }
+
+    // "Zebra-striped" rows change in color every other row
+    &--zebra &__row:nth-child(odd),
+    &--zebra tbody tr:nth-child(odd) {
+        background-color: color(gray, x-light);
+    }
+
+    // Selectable states also get hover/focus interaction
+    &--selectable &__row,
+    &--selectable tbody tr {
+        &:hover, &:focus,
+        &.has-focus {
+            background-color: color(blue, x-light);
+        }
+
+        &.is-selected {
+            background-color: color(blue, light);
+        }
+    }
+}

data/app/assets/stylesheets/scooter/components/_title-bubble.scss

@@ -0,0 +1,137 @@
+//-----------------------------
+//
+// Title Bubble
+// ============
+//
+// A tipsy-like tooltip component with default south direction
+//
+// Usage:
+// <div class="c-title-bubble [c-title-bubble--n | --e | --w]" data-title="Some text">
+//   {{content}}
+// </div>
+//
+//-----------------------------
+
+$DBtitlebubble-namespace: "c-title-bubble" !default;
+
+$DBtitlebubble-background: color(gray, dark) !default;
+$DBtitlebubble-point-width: 5px !default;
+
+/**
+ * Title-bubble component
+ */
+.#{$DBtitlebubble-namespace} {
+    display: inline-block;
+    position: relative;
+
+    &:before, &:after {
+        z-index: 500;
+    }
+
+    &:after {
+        content: attr(data-title);
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        white-space: nowrap;
+        margin-top: $DBtitlebubble-point-width;
+        padding: 7px 9px;
+
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 1.4;
+
+        color: color(white);
+        border-radius: 3px;
+        background-color: $DBtitlebubble-background;
+
+        transform: translateX(-50%);
+        transform-origin: 50% 50%;
+    }
+
+    &:before {
+        content: "";
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-top: -($DBtitlebubble-point-width);
+        margin-left: -$DBtitlebubble-point-width;
+
+        border: 5px solid transparent;
+        border-bottom-color: $DBtitlebubble-background;
+    }
+
+    &--respect-line-break {
+        &:after {
+            white-space: pre-line;
+        }
+    }
+
+    &--n {
+        &:after {
+            top: auto;
+            bottom: 100%;
+            margin-bottom: $DBtitlebubble-point-width;
+        }
+
+        &:before {
+            top: auto;
+            bottom: 100%;
+            margin-bottom: -$DBtitlebubble-point-width;
+
+            border-top-color: $DBtitlebubble-background;
+            border-bottom-color: transparent;
+        }
+    }
+
+    &--e {
+        &:after {
+            top: 50%;
+            left: 100%;
+            margin-top: 0;
+            margin-left: $DBtitlebubble-point-width;
+
+            transform: translateY(-50%);
+        }
+
+        &:before {
+            top: 50%;
+            left: 100%;
+            margin-top: -$DBtitlebubble-point-width;
+
+            border-right-color: $DBtitlebubble-background;
+            border-bottom-color: transparent;
+        }
+    }
+
+    &--w {
+        &:after {
+            top: 50%;
+            right: 100%;
+            left: auto;
+            margin-top: 0;
+            margin-right: $DBtitlebubble-point-width;
+
+            transform: translateY(-50%);
+        }
+
+        &:before {
+            top: 50%;
+            right: 100%;
+            left: auto;
+            margin-top: -$DBtitlebubble-point-width;
+            margin-right: -$DBtitlebubble-point-width;
+
+            border-bottom-color: transparent;
+            border-left-color: $DBtitlebubble-background;
+        }
+    }
+
+    &:hover, &:focus, &.is-child-focused {
+        &:before, &:after {
+            display: block;
+        }
+    }
+}