crossbar 0.0.1

data/app/assets/stylesheets/base/_image.scss

@@ -0,0 +1,5 @@
+image,
+picture {
+  margin: $b-image-margin;
+  max-width: 100%;
+}

data/app/assets/stylesheets/base/_list.scss

@@ -0,0 +1,34 @@
+/*
+Typography
+
+Table of content:
+  - Unordered list <ul> / Ordered list <ol>
+  - Definition list <dl>
+*/
+
+ul,
+ol {
+  margin: $b-ul-margin;
+  padding: $b-ul-padding;
+
+  &%list-reset {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// Definition list
+
+dl {
+  margin-bottom: $b-dl-margin-bottom;
+
+  dt {
+    font-weight: $b-dt-font-weight;
+    margin-top: $b-dt-margin-top;
+  }
+
+  dd {
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/base/_table.scss

@@ -0,0 +1,24 @@
+table {
+  border-collapse: collapse;
+  margin: $b-table-margin;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  border-bottom: $b-th-border-bottom;
+  font-weight: $b-font-weight-bold;
+  padding: $b-th-padding;
+  text-align: left;
+}
+
+td {
+  border-bottom: $b-td-border-bottom;
+  padding: $b-td-padding;
+}
+
+td,
+th,
+tr {
+  vertical-align: middle;
+}

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

@@ -0,0 +1,106 @@
+/*
+Typography
+
+Table of content:
+  - Scaffolding
+  - Hyperlink <a>
+  - Blockquote <blockquote>
+  - Cite <cite>
+  - Headers <h1> <h2> <h3> <h4> <h5> <h6>
+  - Horizontal line <hr>
+  - Paragraph <p>
+*/
+
+// Scaffolding
+
+body {
+  background-color: $b-background-color;
+  color: $b-font-color;
+  // font-family: $font-family-b;
+  font-family: $b-font-family;
+  font-feature-settings: $b-font-features;
+  font-size: $b-font-size;
+  -webkit-font-smoothing: antialiased;
+  line-height: $b-line-height;
+}
+
+// Hyperlink
+
+a {
+  color: $b-link-color;
+  text-decoration: underline;
+  transition: color 125ms linear;
+
+  &:hover {
+    color: $b-link-color-hover;
+    text-decoration: none;
+  }
+
+  &:active,
+  &:focus {
+    color: $b-link-color-active;
+    outline: none;
+    text-decoration: none;
+  }
+}
+
+// Blockquote
+
+blockquote {
+  border-left: $b-blockquote-border-left;
+  color: $b-blockquote-color;
+  font-family: $b-blockquote-font-family;
+  margin: $b-blockquote-margin;
+  padding: $b-blockquote-padding;
+}
+
+cite {
+  color: $b-cite-color;
+  font-style: $b-cite-font-style;
+  white-space: pre;
+
+  &:before {
+    content: '\A \2014 \00A0';
+  }
+}
+
+// Code
+code {
+  font-family: $b-code-font-family;
+  font-size: $b-code-font-size;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Headers
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: $b-headers-line-height;
+  margin: 0 0 $b-spacing-half;
+}
+
+@each $header, $value in $b-headers-font-sizes {
+  #{$header} {
+    font-size: $value;
+  }
+}
+
+// Horizontal line
+
+hr {
+  border-bottom: $b-hr-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $b-hr-margin;
+}
+
+// Paragraph
+
+p {
+  margin: $b-paragraph-margin;
+}

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

@@ -0,0 +1,33 @@
+/*
+ * Lighten a color
+ * @access public
+ * @param {Color} $color - color to tint
+ * @param {Number} $percentage - percentage of `$color` in returned color
+ * @return {Color}
+ */
+@function tint($color, $percentage) {
+  @if type-of($color) != 'color' {
+    @warn "Color #{$color} is not a valid color";
+  }
+  @if $percentage < 0 or $percentage > 100 {
+    @warn "Percentage #{$percentage} must be between 0 and 100";
+  }
+  @return mix($color, white, (100 - $percentage));
+}
+
+/*
+ * Darken a color
+ * @access public
+ * @param {Color} $color - color to shade
+ * @param {Number} $percentage - percentage of `$color` in returned color
+ * @return {Color}
+ */
+@function shade($color, $percentage) {
+  @if type-of($color) != 'color' {
+    @warn "Color #{$color} is not a valid color";
+  }
+  @if $percentage < 0 or $percentage > 100 {
+    @warn "Percentage #{$percentage} must be between 0 and 100";
+  }
+  @return mix($color, black, (100 - $percentage));
+}

data/app/assets/stylesheets/base/functions/_list-attributes.scss

@@ -0,0 +1,10 @@
+@function list-attributes($attributes-list) {
+  $list: ();
+
+  @each $attribute in $attributes-list {
+    $attribute: unquote($attribute);
+    $list: append($list, $attribute, comma);
+  }
+
+  @return $list;
+}

data/app/assets/stylesheets/base/variables/_colors.scss

@@ -0,0 +1,23 @@
+
+$black: rgba(0, 0, 0, 1);
+$white: rgba(255, 255, 255, 1);
+
+$black-level-1: rgba($black, 0.87);
+$black-level-2: rgba($black, 0.54);
+$black-level-3: rgba($black, 0.27);
+$black-level-4: rgba($black, 0.12);
+
+$gray-50:  #fafafa;
+$gray-100: #f5f5f5;
+$gray-200: #eee;
+$gray-300: #e0e0e0;
+$gray-400: #bdbdbd;
+$gray-500: #9e9e9e;
+$gray-600: #757575;
+$gray-700: #616161;
+$gray-800: #424242;
+$gray-900: #212121;
+
+$blue: #328cc0;
+$green: #3eb596;
+$red: #f3585e;

data/app/assets/stylesheets/base/variables/_inputs.scss

@@ -0,0 +1,22 @@
+// Inputs
+
+$b-text-inputs-list:   'input[type="text"]',
+                          'input[type="password"]';
+
+$b-text-inputs-list-html5: 'input[type="color"]',
+                           'input[type="date"]',
+                           'input[type="datetime"]',
+                           'input[type="datetime-local"]',
+                           'input[type="email"]',
+                           'input[type="month"]',
+                           'input[type="number"]',
+                           'input[type="password"]',
+                           'input[type="search"]',
+                           'input[type="tel"]',
+                           'input[type="time"]',
+                           'input[type="url"]',
+                           'input[type="week"]';
+
+$b-button-inputs-list: 'input[type="button"]',
+                       'input[type="reset"]',
+                       'input[type="submit"]';

data/app/assets/stylesheets/base/variables/_variables.scss

@@ -0,0 +1,188 @@
+// BASES
+// =====
+
+// Colors
+$b-accent-color: $blue;
+$b-background-color: $white;
+$b-font-color: $black-level-1;
+$b-link-color: $b-accent-color;
+$b-link-color-hover: shade($b-link-color, 20);
+
+// Font families
+$sans: 'Helevetica Neue', 'Helvetica', 'Verdana', 'Arial', sans-serif;
+$serif: 'Georgia', 'Cambria', 'Times', 'Times New Roman', serif;
+$monospace: 'Menlo', 'Courier New', 'Courier', monospace;
+
+$b-font-family: $sans;
+
+// Font features
+$b-font-features: 'kern', 'liga', 'frac', 'pnum';
+
+// Font size
+$b-font-size: 1rem;
+$b-font-size-small: ($b-font-size * 0.75);
+
+// Font weights
+$b-font-weight-regular: 400;
+$b-font-weight-medium: 500;
+$b-font-weight-bold: 700;
+
+$b-font-weight: $b-font-weight-regular;
+
+// Line height
+$b-line-height: 1.5;
+
+// Spacing
+$b-spacing: ($b-line-height * 1rem);
+$b-spacing-half: ($b-spacing / 2);
+$b-spacing-third: ($b-spacing / 3);
+$b-spacing-fourth: ($b-spacing / 4);
+$b-spacing-eighth: ($b-spacing / 8);
+
+// Border
+$b-border-color: $gray-300;
+$b-border-size: 1px;
+$b-border-style: solid;
+$b-border: $b-border-size $b-border-style $b-border-color;
+
+// TYPOGRAPHY
+// =========
+
+// Blockquote
+$b-blockquote-border-left: medium solid $b-border-color;
+$b-blockquote-color: $black-level-1;
+$b-blockquote-font-family: $serif;
+$b-blockquote-margin: $b-spacing 0;
+$b-blockquote-padding: 0 0 0 $b-spacing-half;
+
+// Cite;
+$b-cite-color: $black-level-2;
+$b-cite-font-style: italic;
+
+// Code
+$b-code-font-family: $monospace;
+$b-code-font-size: $b-font-size-small;
+
+// Headers
+$b-h1-font-size: ($b-font-size * 2.25);
+$b-h2-font-size: ($b-font-size * 2);
+$b-h3-font-size: ($b-font-size * 1.75);
+$b-h4-font-size: ($b-font-size * 1.5);
+$b-h5-font-size: ($b-font-size * 1.25);
+$b-h6-font-size: $b-font-size;
+
+$b-headers-font-sizes: (h1: $b-h1-font-size,
+                        h2: $b-h2-font-size,
+                        h3: $b-h3-font-size,
+                        h4: $b-h4-font-size,
+                        h5: $b-h5-font-size,
+                        h6: $b-h6-font-size);
+$b-headers-line-height: 1.25;
+
+// Horizontal line
+$b-hr-border: 1px solid $black-level-4;
+$b-hr-margin: $b-spacing 0;
+
+// Hyperlink
+$b-link-color: $b-accent-color;
+$b-link-color-hover: shade($b-link-color, 20);
+$b-link-color-active: shade($b-link-color, 40);
+
+// Paragraph
+$b-paragraph-margin: 0 0 $b-spacing-half;
+
+
+// BUTTONS
+// =======
+$b-button-border: 0;
+$b-button-border-radius: 0;
+$b-button-color: $b-font-color;
+$b-button-font-family: $sans;
+$b-button-font-size: $b-font-size;
+$b-button-padding: $b-spacing-half $b-spacing;
+
+$button-pri-background-color: $b-accent-color;
+$button-pri-background-color-hover: shade($button-pri-background-color, 20);
+$button-pri-color: $white;
+$button-pri-font-weight: $b-font-weight-bold;
+
+$button-sec-background-color: $gray-300;
+$button-sec-background-color-hover: shade($button-sec-background-color, 20);
+$button-sec-color: $b-font-color;
+$button-sec-font-weight: $b-font-weight-medium;
+
+// FORM ELEMENTS
+// =============
+
+// Form
+$b-form-font-family: $b-font-family;
+$b-form-font-size: $b-font-size;
+
+// Fieldset
+$b-form-fieldset-background-color: $gray-50;
+$b-form-fieldset-border: $b-border;
+$b-form-fieldset-margin: 0 0 $b-spacing-half;
+$b-form-fieldset-padding: $b-spacing;
+
+$b-form-label-color: $black-level-2;
+$b-form-label-font-weight: $b-font-weight-medium;
+$b-form-label-margin: 0 0 $b-spacing-eighth;
+
+// Form button input
+$b-form-button-inputs: list-attributes($b-button-inputs-list);
+
+// Form choice input (checkbox & radio)
+$b-form-choice-input-margin: 0 $b-spacing-third 0 0;
+
+// Form file input
+$b-form-file-input-padding: 0 0 $b-spacing-half;
+
+// Form select
+$b-form-select-margin: 0 0 $b-spacing-half;
+
+// Form text input
+$b-form-text-inputs: list-attributes($b-text-inputs-list);
+$b-form-text-inputs-html5: list-attributes($b-text-inputs-list-html5);
+
+$b-form-text-input-background-color: $white;
+$b-form-text-input-border-color: $gray-400;
+$b-form-text-input-border-color-hover: $gray-700;
+$b-form-text-input-border-color-focus: $b-accent-color;
+$b-form-text-input-border-radius: 0;
+$b-form-text-input-box-shadow: 0;
+$b-form-text-input-color: $black-level-1;
+$b-form-text-input-margin: 0 0 $b-spacing-half;
+$b-form-text-input-padding: $b-spacing-half;
+
+$b-form-text-input-placeholder-color: $black-level-3;
+
+// IMAGES
+// ======
+$b-image-margin: 0;
+
+// LIST
+// ====
+
+// Ordered & Unordered List
+$b-ul-margin: 0 0 $b-spacing-half;
+$b-ul-padding: 0 0 0 $b-spacing;
+
+// Definition List
+$b-dl-margin-bottom: $b-spacing-half;
+
+$b-dt-font-weight: $b-font-weight-bold;
+$b-dt-margin-top: $b-spacing-half;
+
+// TABLES
+// ======
+
+// Table
+$b-table-margin: $b-spacing-half 0;
+
+// Table header
+$b-th-border-bottom: medium solid shade($b-border-color, 15);
+$b-th-padding: $b-spacing-half $b-spacing-fourth;
+
+// Table division
+$b-td-border-bottom: 1px solid shade($b-border-color, 15);
+$b-td-padding: $b-spacing-half $b-spacing-fourth;