scooter-sass 0.9.1

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

@@ -0,0 +1,46 @@
+//---------------------------
+//
+// Badge
+//
+//---------------------------
+
+$DBbadge-namespace: "c-badge" !default;
+
+$DBbadge-background: color(white) !default;
+$DBbadge-text-color: color(red, medium) !default;
+$DBbadge-border-color: color(red, light) !default;
+
+/**
+ * Badge component
+ */
+.#{$DBbadge-namespace} {
+    // Repeat the box-sizing reset here in case this component is used without the reset stylesheet.
+    box-sizing: border-box;
+
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    padding: 1px 4px;
+
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1.4;
+    text-align: center;
+    text-shadow: none;
+
+    color: $DBbadge-text-color;
+    background: $DBbadge-background;
+
+    border: 1px solid $DBbadge-border-color;
+    border-radius: 3px;
+
+    &#{&}--top-right {
+        position: absolute;
+        z-index: 1;
+        top: -1em;
+        left: -1em;
+
+        // Align the left edge relative to the right edge.
+        margin-left: 100%;
+    }
+}

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

@@ -0,0 +1,68 @@
+//-----------------------------
+//
+// Banners
+//
+// Example:
+// <div class="c-banner">
+//   This is a neutral banner
+// </div>
+//
+// <div class="c-banner c-banner--warning">
+//   This is a warning banner
+// </div>
+//
+// <div class="c-banner c-banner--unpinned">
+//   This is a free-floating banner
+// </div>
+//
+//-----------------------------
+
+$DBbanner-namespace: "c-banner" !default;
+
+$DBbanner-background-neutral: color(gray, x-light) !default;
+$DBbanner-background-success: color(green, x-light) !default;
+$DBbanner-background-warning: color(yellow, x-light) !default;
+$DBbanner-background-error: color(red, x-light) !default;
+
+$DBbanner-text-neutral: color(gray) !default;
+$DBbanner-text-success: color(green, x-dark) !default;
+$DBbanner-text-warning: color(yellow, x-dark) !default;
+$DBbanner-text-error: color(red, x-dark) !default;
+
+/**
+ * Banner component. Used to display messages to the user, typically pinned to
+ * the top of the page.
+ */
+.#{$DBbanner-namespace} {
+    padding: 12px;
+
+    color: $DBbanner-text-neutral;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: color(gray, x-dark, 0.1);
+    background-color: $DBbanner-background-neutral;
+
+    &#{&}--success {
+        color: $DBbanner-text-success;
+        background-color: $DBbanner-background-success;
+    }
+
+    &#{&}--warning {
+        color: $DBbanner-text-warning;
+        background-color: $DBbanner-background-warning;
+    }
+
+    &#{&}--error {
+        color: $DBbanner-text-error;
+        background-color: $DBbanner-background-error;
+    }
+
+    // The default style for banners assumes that the banner is pinned to the top
+    // edge of the page. The unpinned modifier treats the banner as a fixed or
+    // relatively-positioned element.
+    &#{&}--unpinned {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 3px;
+    }
+}

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

@@ -0,0 +1,152 @@
+//---------------------------
+//
+// Buttons
+//
+//---------------------------
+
+$DBbutton-namespace: "c-btn" !default;
+
+$DBbutton-background-primary: linear-gradient(color(blue), color(blue, dark)) !default;
+$DBbutton-background-primary-hover: color(blue) !default;
+$DBbutton-background-primary-active: color(blue, dark) !default;
+
+$DBbutton-background-secondary: color(white) !default;
+$DBbutton-background-secondary-hover: linear-gradient(color(white), color(gray, x-light)) !default;
+$DBbutton-background-secondary-active: color(gray, x-light) !default;
+
+$DBbutton-background-tertiary: linear-gradient(color(white), color(blue, x-light)) !default;
+$DBbutton-background-tertiary-hover: color(blue, x-light) !default;
+$DBbutton-background-tertiary-active: linear-gradient(color(blue, x-light), lighten(color(blue, light), 5%)) !default;
+
+
+// Providing fallback colors for IE <= 9
+$DBbutton-background-fallback-primary: color(blue);
+$DBbutton-background-fallback-tertiary: color(white);
+
+$DBbutton-text-primary: color(white) !default;
+$DBbutton-text-secondary: color(gray) !default;
+$DBbutton-text-tertiary: color(blue) !default;
+
+$DBbutton-border-primary: color(blue, dark) !default;
+$DBbutton-border-secondary: color(gray, light) !default;
+$DBbutton-border-tertiary: color(blue) !default;
+
+/**
+ * Button component
+ */
+.#{$DBbutton-namespace} {
+    // Ensure the element is actually a button
+    @include assert-selector(button, "[type=submit]");
+
+    display: inline-block;
+    padding: 7px 12px;
+
+    font-weight: 600;
+    line-height: 1.4;
+    text-align: center;
+    text-decoration: none;
+
+    border: 1px solid currentColor;
+    border-radius: 3px;
+
+    cursor: pointer;
+
+    &[disabled], &#{&}--disabled {
+        opacity: 0.5;
+
+        cursor: default;
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 2px color(blue, 0.3);
+        outline: none;
+    }
+
+    &:hover {
+        text-decoration: none;
+    }
+
+    &#{&}--big {
+        padding: 10px 26px;
+    }
+
+    &#{&}--full {
+        display: block;
+        width: 100%;
+    }
+
+    &#{&}--primary {
+        color: $DBbutton-text-primary;
+        border-color: $DBbutton-border-primary;
+        background-color: $DBbutton-background-fallback-primary;
+        background: $DBbutton-background-primary;
+
+        &:hover:not(:disabled) {
+            background: $DBbutton-background-primary-hover;
+        }
+
+        &:active:not(:disabled) {
+            background:$DBbutton-background-primary-active;
+        }
+    }
+
+    &#{&}--secondary {
+        color: $DBbutton-text-secondary;
+        border-color: $DBbutton-border-secondary;
+        background: $DBbutton-background-secondary;
+
+        &:hover:not(:disabled) {
+            background: $DBbutton-background-secondary-hover;
+        }
+
+        &:active:not(:disabled) {
+            background:$DBbutton-background-secondary-active;
+        }
+    }
+
+    &#{&}--tertiary {
+        color: $DBbutton-text-tertiary;
+        border-color: $DBbutton-border-tertiary;
+        background-color: $DBbutton-background-fallback-tertiary;
+        background: $DBbutton-background-tertiary;
+
+        &:hover:not(:disabled) {
+            background: $DBbutton-background-tertiary-hover;
+        }
+
+        &:active:not(:disabled) {
+            background:$DBbutton-background-tertiary-active;
+        }
+    }
+}
+
+.#{$DBbutton-namespace}-group {
+    display: flex;
+
+    .#{$DBbutton-namespace} {
+        margin: 0;
+        border-radius: 0;
+
+        + .#{$DBbutton-namespace} {
+            border-left: 0;
+        }
+
+        &:first-child {
+            border-top-left-radius: 3px;
+            border-bottom-left-radius: 3px;
+        }
+
+        &:last-child {
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+        }
+    }
+
+    &--justify {
+        width: 100%;
+
+        .#{$DBbutton-namespace} {
+            flex: 1 0 auto;
+        }
+    }
+}

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

@@ -0,0 +1,97 @@
+//-----------------------------
+//
+// Component: Calendar
+//
+//-----------------------------
+
+$DBcalendar-namespace: "c-calendar";
+$DBdatepicker-namespace: "c-datepicker";
+
+.#{$DBdatepicker-namespace} {
+    position: relative;
+    box-sizing: border-box;
+
+    background-color: color(white);
+
+    .#{$DBcalendar-namespace} {
+        position: absolute;
+        top: 100%;
+        left: 0;
+    }
+}
+
+.#{$DBcalendar-namespace} {
+    display: inline-block;
+    z-index: 1;
+
+    border-radius: 5px;
+    background-color: color(gray, x-light);
+
+    .#{$DBcalendar-namespace}__header {
+        padding-bottom: 4px;
+
+        font-size: 0.6em;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+
+        color: color(gray, medium);
+    }
+
+    .#{$DBcalendar-namespace}__date {
+        box-sizing: border-box;
+        padding: 4px 8px;
+        // This assumes that the `date` element is a child nested inside a `td`
+        width: 100%;
+        min-width: 32px;
+
+        text-align: center;
+
+        color: color(blue);
+        border: 1px solid color(gray, x-light);
+        background-color: color(white);
+
+        cursor: pointer;
+        appearance: none;
+
+        tr:first-child td:first-child & {
+            border-top-left-radius: 4px;
+        }
+
+        tr:first-child td:last-child & {
+            border-top-right-radius: 4px;
+        }
+
+        tr:last-child td:first-child & {
+            border-bottom-left-radius: 4px;
+        }
+
+        tr:last-child td:last-child & {
+            border-bottom-right-radius: 4px;
+        }
+
+        &:hover {
+            background-color: color(blue, x-light);
+        }
+
+        &:hover, &:focus:not([class*="--disabled"]) {
+            text-decoration: underline;
+        }
+
+        &.is-selected {
+            color: color(white);
+            background-color: color(blue);
+        }
+
+        &.is-in-range {
+            color: color(white);
+            background-color: color(blue, medium);
+        }
+
+        &--disabled, &--disabled:hover {
+            color: color(gray, light);
+            background-color: color(gray, x-light);
+
+            cursor: default;
+        }
+    }
+}

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

@@ -0,0 +1,146 @@
+// scss-lint:disable NestingDepth
+//
+//-----------------------------
+//
+// Cards
+//
+// Simple styling for a card-like component used in a variety of ways with
+// optional arrows for tooltip-like cards
+//
+//-----------------------------
+
+$DBcard-namespace: "c-card" !default;
+
+$DBcard-background: color(white) !default;
+
+// The opaque color for the card border/shadow. Transparency is handled by
+// the class itself.
+$DBcard-border: color(gray, x-dark) !default;
+$DBcard-border-selected: color(blue) !default;
+
+/**
+ * Card component with optional arrow/tail
+ */
+.#{$DBcard-namespace} {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    padding: 12px;
+    box-sizing: border-box;
+
+    border: 1px solid rgba($DBcard-border, 0.1);
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba($DBcard-border, 0.1);
+    background-color: $DBcard-background;
+    background-clip: padding-box;
+    transition: 0.1s;
+
+    &#{&}--arrow {
+        &::before, &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            margin-left: -8px;
+
+            border: 8px solid transparent;
+            border-bottom-color: color(white);
+            transition: 0.1s;
+        }
+
+        &::before {
+            margin-left: -9px;
+
+            border-width: 9px;
+            border-bottom-color: rgba($DBcard-border, 0.2);
+        }
+
+
+
+        // West/East directions are only affecting horizontal offsets, so we can
+        // style North and South at the same time
+        &-nw, &-sw {
+            &::after, &::before {
+                left: 0;
+                margin-left: 12px;
+            }
+
+            &::before {
+                margin-left: 11px;
+            }
+        }
+
+        &-ne, &-se {
+            &::after, &::before {
+                right: 0;
+                left: auto;
+                margin-right: 12px;
+            }
+
+            &::before {
+                margin-right: 11px;
+            }
+        }
+
+        // South direction changes a lot of styles, and it's probably safe to
+        // assume North is the desired default.
+        &-sw, &-se, &-s {
+            &::after, &::before {
+                top: 100%;
+                bottom: auto;
+
+                border-top-color: color(white);
+                border-bottom-color: transparent;
+            }
+
+            &::before {
+                border-top-color: rgba($DBcard-border, 0.2);
+                // Since we're spoofing a triangle with borders, we can't use
+                // box-shadow, but we can use the drop-shadow filter. Limited support,
+                // but it's just a nice-to-have.
+                filter: drop-shadow(0 1px 2px rgba($DBcard-border, 0.2));
+            }
+        }
+    }
+}
+
+// Floating cards have a hover state and selected states
+.#{$DBcard-namespace}--floating {
+    &:hover {
+        border-color: rgba($DBcard-border, 0.2);
+        box-shadow: 0 1px 2px rgba($DBcard-border, 0.2);
+    }
+
+    &.#{$DBcard-namespace}--arrow {
+        &:hover::before {
+            border-bottom-color: rgba($DBcard-border, 0.3);
+        }
+
+        &-se, &-sw, &-s {
+            &:hover::before {
+                border-top-color: rgba($DBcard-border, 0.3);
+                border-bottom-color: transparent;
+                filter: drop-shadow(0 1px 2px rgba($DBcard-border, 0.3));
+            }
+        }
+    }
+
+    &.is-selected {
+        border-color: $DBcard-border-selected;
+    }
+
+    &--arrow.is-selected {
+        &::before, &:hover::before {
+            border-bottom-color: $DBcard-border-selected;
+        }
+    }
+
+    &--arrow-se, &--arrow-sw, &--arrow-s {
+        &.is-selected {
+            &::before, &:hover::before {
+                border-top-color: $DBcard-border-selected;
+                border-bottom-color: transparent;
+            }
+        }
+    }
+}