scooter-sass 0.9.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 3c187e561d182ee776676e3ec386fdbfa3b35a7b
+  data.tar.gz: 3437784019c5356aa6f73096e8720ddceb256a94
+SHA512:
+  metadata.gz: 488eb68ebfa87d2732752a54d4b82959612b579d8d7aad522f03bdda1748cc7c8652a078e53db8e2d329284d800259b85c24d82c20a354c44491f79d026f8d71
+  data.tar.gz: 24fc6af419c3954aab27d63b835d8afefcee59cd6b1780f1cb430e13937e5115664347eeae020d26d9588c680f73472c25a586b54ac38fed7a63b9e592d8f584

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.4.0
+before_install: gem install bundler -v 1.11.2

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in scooter-sass.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 sanata-
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,46 @@
+# Scooter version for Rails 4, 3.x Asset Pipeline
+An SCSS framework & UI library for [Dropbox](https://github.com/dropbox/scooter).
+Built to provide base styles, CSS components, and rapid static prototyping.
+
+## Installation
+
+In your Gemfile you need to add the scooter-sass gem:
+
+```ruby
+gem 'scooter-sass'
+```
+
+And then run the bundler and restart your server to make the files available through the pipeline:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install scooter-sass
+
+## Usage
+### a. Sass
+
+Import Scooter styles in `app/assets/stylesheets/application.scss`:
+
+```scss
+@import "scooter";
+```
+
+**NOTE:** If you have just generated a new Rails application, it  may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so remove it.
+
+```console
+$ rm app/assets/stylesheets/application.css
+```
+
+
+
+
+
+## Contributing
+
+1. Fork it ( https://github.com/sanata-/scooter-sass/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/stylesheets/scooter.scss

@@ -0,0 +1,38 @@
+// scss-lint:disable ImportPath
+//
+/*!
+ *
+ * SCOOTER
+ *
+ *   ---
+ *   /
+ *  /______
+ *  0     0
+ *
+ * scoot
+ *   verb [no obj.]
+ *   go or leave somewhere quickly: "I'd better scoot"
+ *
+ */
+
+
+// Variables
+@import "scooter/variables/_all";
+
+// Functions
+@import "scooter/functions/_all";
+
+// Mixins
+@import "scooter/mixins/_all";
+
+// Base styles
+@import "scooter/base/_all";
+
+// Objects
+@import "scooter/objects/_all";
+
+// Components
+@import "scooter/components/_all";
+
+// Helpers
+@import "scooter/helpers/_all";

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

@@ -0,0 +1,12 @@
+//---------------------------
+//
+// Base styles
+//
+// Reset, normalisation, and raw tag styles for Dropbox web. Outside of these
+// files, all CSS selectors should be class names.
+//
+//---------------------------
+
+@import "reset";
+@import "base";
+@import "typography";

data/app/assets/stylesheets/scooter/base/_base.scss

@@ -0,0 +1,23 @@
+//---------------------------
+//
+// Base/root styles
+//
+//---------------------------
+
+@if ($DBscope-scooter-reset == true) {
+    html.scooter-css, .scooter-css:root {
+        box-sizing: border-box;
+
+        font: 81.25%/1.75 "Open Sans", "Helvetica Neue", Arial, sans-serif;
+
+        color: color(gray, dark);
+    }
+} @else {
+    html, :root {
+        box-sizing: border-box;
+
+        font: 81.25%/1.75 "Open Sans", "Helvetica Neue", Arial, sans-serif;
+
+        color: color(gray, dark);
+    }
+}

data/app/assets/stylesheets/scooter/base/_reset.scss

@@ -0,0 +1,55 @@
+//---------------------------
+//
+// Reset
+//
+//---------------------------
+
+$DBscope-scooter-reset: false !default;
+
+@mixin scooter-reset {
+    *, ::after, ::before {
+        position: relative;
+        margin: 0;
+        padding: 0;
+        box-sizing: inherit;
+    }
+
+    input, button, textarea, select {
+        font: inherit;
+
+        appearance: none;
+    }
+
+    input[type=checkbox] {
+        -webkit-appearance: checkbox;
+        -moz-appearance: checkbox;
+        appearance: checkbox;
+    }
+
+    input[type=radio] {
+        -webkit-appearance: radio;
+        -moz-appearance: radio;
+        appearance: radio;
+    }
+
+    ul, ol {
+        margin-left: double($DBbaseline);
+    }
+
+    p, table {
+        margin-bottom: $DBbaseline;
+    }
+
+    table {
+        border-collapse: collapse;
+    }
+}
+
+@if ($DBscope-scooter-reset == true) {
+    .scooter-css {
+        @include scooter-reset;
+    }
+} @else {
+    @include scooter-reset;
+}
+

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

@@ -0,0 +1,91 @@
+//---------------------------
+//
+// Typography
+// ==========
+//
+//---------------------------
+
+@mixin scooter-type() {
+    // Headings
+    // ========
+    //
+    // Only h1-h4 are used/styled. If your DOM heirarchy goes as deep at h5 or h6,
+    // you have some rethinking to do.
+    //
+    h1,
+    %f-alpha,
+    .f-alpha {
+        display: block;
+        margin-bottom: $DBbaseline;
+
+        font-size: 28px;
+        font-weight: 200;
+        line-height: 36px;
+    }
+
+    h2,
+    %f-beta,
+    .f-beta {
+        display: block;
+        margin-bottom: $DBbaseline;
+
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 28px;
+    }
+
+    h3,
+    %f-gamma,
+    .f-gamma {
+        display: block;
+        margin-bottom: $DBbaseline;
+
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 28px;
+    }
+
+    h4,
+    %f-delta,
+    .f-delta {
+        display: block;
+
+        font-size: 13px;
+        font-weight: 600;
+        line-height: $DBbaseline;
+    }
+
+    // Other type styles
+    // =================
+    //
+    hr,
+    %hr{
+        margin-bottom: $DBbaseline;
+
+        border: 0;
+        border-top: 1px solid color(gray, x-dark, 0.1);
+    }
+
+    a,
+    %f-a,
+    .f-a {
+        text-decoration: none;
+
+        color: color(blue);
+
+        cursor: pointer;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+@if ($DBscope-scooter-reset == true) {
+    .scooter-css {
+        @include scooter-type;
+    }
+} @else {
+    @include scooter-type;
+}
+

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

@@ -0,0 +1,21 @@
+//-----------------------------
+//
+// Components
+//
+//-----------------------------
+
+@import "arrow";
+@import "avatar";
+@import "badge";
+@import "banners";
+@import "buttons";
+@import "calendar";
+@import "cards";
+@import "inputs";
+@import "loading-indicator";
+@import "modal";
+@import "tab-nav";
+@import "tables";
+@import "title-bubble";
+@import "tokens";
+@import "typeahead";

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

@@ -0,0 +1,25 @@
+//-----------------------------
+//
+// Component: Arrow
+//
+//-----------------------------
+
+$DBarrow-namespace: "c-arrow";
+
+.#{$DBarrow-namespace} {
+    &, &--down {
+        @include arrow(10px, currentColor, down);
+    }
+
+    &--left {
+        @include arrow(10px, currentColor, left);
+    }
+
+    &--right {
+        @include arrow(10px, currentColor, right);
+    }
+
+    &--up {
+        @include arrow(10px, currentColor, up);
+    }
+}

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

@@ -0,0 +1,191 @@
+//-----------------------------
+//
+// Avatars
+//
+//-----------------------------
+
+$DBavatar-namespace: "c-avatar" !default;
+$DBavatar-container-namespace: "c-facepile" !default;
+// Ideally, colors are set by JS, but this provides a fallback
+$DBavatar-color: color(blue) !default;
+
+// Map for the various sizes of avatars
+// This will help automate generation of classes for different avatar sizes
+$DBavatar-sizes: (
+xs: 16px,
+s: 24px,
+m: 32px,
+l: 48px,
+xl: 64px
+) !default;
+
+// @private mixin avatarSize
+// Set proportional font size, weight, and line-height for avatars without photos
+@mixin __avatarSize($s: 32px) {
+    width: $s;
+    // min-width provides a fallback for flexible-width elements like c-avatar--meta
+    min-width: $s;
+    height: $s;
+
+    font-size: round($s * 0.4);
+
+    @if($s < 32px) {
+        font-weight: 700;
+    } @else if($s >= 48px) {
+        font-weight: 400;
+    } @else {
+        font-weight: 600;
+    }
+}
+
+/**
+ * Avatar component. A wrapper element with an (optional) image or the user's
+ * initials.
+ */
+.#{$DBavatar-namespace} {
+    // Default size for avatars without explicit sizing
+    @include __avatarSize(32px);
+
+    display: inline-block;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+
+    text-align: center;
+    line-height: 2.5;
+
+    border-radius: 1000px;
+
+    &__img,
+    > img {
+        display: block;
+        min-width: 100%;
+        height: 100%;
+        // Keep proportions in tact even if the container is the wrong size
+        object-fit: cover;
+    }
+
+    // Give avatars a subtle little border
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        border-radius: 1000px;
+        box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.1);
+
+        pointer-events: none;
+    }
+
+    &#{&}--no-img {
+        // Default color for avatars without images
+        color: color(white);
+        background-color: $DBavatar-color;
+
+        &:after {
+            content: attr(data-initials);
+
+            box-shadow: none;
+        }
+
+        &.#{$DBavatar-namespace}--xs:after {
+            content: "";
+        }
+    }
+
+    &#{&}--square {
+        text-transform: uppercase;
+
+        border-radius: 3px;
+
+        &:after {
+            // Prevent the shadow pseudo-element from rendering
+            content: none;
+        }
+    }
+
+    &#{&}--meta {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+
+        width: auto;
+        padding: 0 2px;
+
+        color: color(gray, medium);
+        background-color: color(gray, light, 0.7);
+
+        > img {
+            display: inline-block;
+            vertical-align: middle;
+            width: auto;
+            height: auto;
+            object-fit: none;
+            margin: 0 auto;
+        }
+
+        > span {
+            // Safari has some trouble properly aligning elements in the avatar
+            // without explicit margins or widths
+            margin: auto;
+        }
+
+        &:after {
+            // Prevent the shadow pseudo-element from rendering
+            content: none;
+        }
+    }
+
+    // Loop through all the avatar sizes to generate selectors
+    @each $key, $size in $DBavatar-sizes {
+        // This is output to `.#{DBavatar-ns}--size`
+        &--#{$key} {
+            @include __avatarSize($size);
+
+            @if $key == "xs" {
+                // Extra small avatars get no initials
+                &:after {
+                    content: "";
+                }
+            }
+        }
+    } // end @each
+} // end .avatar
+
+.#{$DBavatar-container-namespace} {
+    display: flex;
+    align-items: center;
+
+    > * {
+        margin-right: quarter($DBbaseline);
+    }
+
+    &.is-animated .#{$DBavatar-namespace} {
+        animation: DBavatar-animation .3s;
+        animation-timing-function: cubic-bezier(.57,.23,.39,1.6);
+        animation-fill-mode: both;
+
+        @for $i from 1 through 15 {
+            &:nth-child(#{$i}) {
+                animation-delay: #{$i*.025}s;
+            }
+        }
+    }
+}
+
+@keyframes DBavatar-animation {
+    from {
+        opacity: 0;
+        transform: translateX(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}