tungsten 0.1.0 → 0.1.1

data/app/assets/stylesheets/tungsten/core/_cards.scss

@@ -0,0 +1,90 @@
+/* ========================================================================== *
+ * Card module
+ * -------------------------------------------------------------------------- */
+
+@mixin card {
+  background: $white;
+  border-radius: $radius;
+  box-shadow:
+    0 0 0 1px rgba($gray-11, .05),
+    0 1px 3px rgba($gray-11, .15);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: $card-padding;
+  font-size: 14px;
+  @include collapse-top;
+
+  &-actions {
+    display: flex;
+    align-items: baseline;
+    margin-top: $card-padding;
+    flex-direction: row-reverse;
+
+    > *:last-child {
+      margin: 0;
+    }
+
+    &.centered {
+      justify-content: center;
+    }
+
+    a,
+    button {
+      margin-left: 10px;
+    }
+  }
+
+  #{$block-elements} {
+    margin-top: 15px;
+  }
+
+  &:not([class*='columns']) {
+    @include card;
+  }
+
+  &[class*='columns'] {
+    flex-direction: row;
+
+    &:before {
+      content: '';
+      @include card;
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &-heading {
+    font-size: 16px;
+  }
+
+  &-footer {
+    display: flex;
+    align-items: baseline;
+    @include collapse-top;
+    font-size: 12px;
+    padding: $card-padding;
+    background: $gray-01;
+    border-radius: 0 0 $radius $radius;
+    box-shadow: 0 1px rgba($gray-11, .1) inset;
+    background-clip: padding-box;
+    border-top: $card-padding solid transparent;
+    margin: auto $card-padding * -1 $card-padding * -1 $card-padding * -1;
+
+    .card-actions {
+      margin-top: 0;
+      margin-left: auto;
+    }
+  }
+}
+
+table.card {
+  display: table;
+}

data/app/assets/stylesheets/tungsten/core/_colors.scss

@@ -0,0 +1,20 @@
+// Solid color classes
+@each $name, $color in $colors {
+  // Assign a `.[color]-text` class with a color of [color]
+  .#{$name}-text {
+    color: $color;
+  }
+
+  .#{$name}-bg {
+    background-color: $color;
+  }
+}
+
+@each $name, $colors in $gradients {
+  $start: nth($colors, 1);
+  $end:   nth($colors, 2);
+
+  .#{$name}-gradient-bg {
+    background: linear-gradient(135deg, #{$start}, #{$end}) left top/100% 100% no-repeat;
+  }
+}

data/app/assets/stylesheets/tungsten/core/_globals.scss

@@ -0,0 +1,172 @@
+/* ========================================================================== *
+ * Globals module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * Fonts
+ * ------------------------------------- */
+
+// Font size & spacing
+$base-size: 14px;
+$base-line-height: 1.5;
+
+// Fonts stacks
+$base-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+$mono-font: 'Roboto Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+
+// Smooth fonts are smooth
+@mixin font-smoothing($value: on) {
+  @if $value == on {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  } @else {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
+// Inline links
+@mixin inline-link($default: $blue-03, $hover: $blue-04) {
+  text-decoration: underline;
+  text-decoration-color: rgba($default, .5);
+  transition: color $duration;
+
+  // Default state
+  @include normal {
+    color: $default;
+  }
+
+  // Active state
+  @include active {
+    color: $hover;
+  }
+}
+
+/* ===================================== *
+ * Animations
+ * ------------------------------------- */
+
+ // Transition duration
+$duration: .25s;
+$timing: cubic-bezier(0.4, 0.0, 0.2, 1);
+
+// Class to prevent transitions
+.full-stop * {
+  &,
+  &:after,
+  &:before {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* ===================================== *
+ * Layout
+ * ------------------------------------- */
+
+// Block-level elements that get vertical margin
+$block-elements: p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table;
+
+// Border radius
+$radius: 2px;
+
+// Card padding
+$card-padding: 20px;
+
+// Inner content padding
+$content-padding: 40px;
+
+// Main header height
+$header-height: 84px;
+
+// Collapse top margin
+@mixin collapse-top {
+  > *:first-child,
+  > *:first-child > *:first-child,
+  > *:first-child > *:first-child > *:first-child {
+    margin-top: 0;
+  }
+}
+
+// Collapse bottom margin
+@mixin collapse-bottom {
+  > *:last-child,
+  > *:last-child > *:last-child,
+  > *:last-child > *:last-child > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Modules with max-width and padding
+@mixin padded-module($width: 1100px, $padding: null, $nested: true) {
+  padding-left: calc(50vw - #{$width / 2});
+  padding-right: calc(50vw - #{$width / 2});
+
+  @if $nested {
+    width: 100vw;
+  }
+
+  @if $padding {
+    @media (max-width: $width + $padding * 2) {
+      padding-left: $padding;
+      padding-right: $padding;
+    }
+  }
+}
+
+// Center an element to the viewport regardless of nesting
+@mixin center-to-viewport {
+  margin-left: calc(-50vw + 50%);
+  transform: translateX(calc(50vw - 50%));
+}
+
+/* ===================================== *
+ * Context
+ * ------------------------------------- */
+
+// Normal link state mixin
+@mixin normal {
+  &,
+  &:visited {
+    @content;
+  }
+}
+
+// Active link state mixin
+@mixin active {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}
+
+// Until width media query mixin
+@mixin until($width) {
+  $width: $width - 1;
+  @media all and (max-width: $width) {
+    @content;
+  }
+}
+
+// At least width media query mixin
+@mixin at-least($width) {
+  @media all and (min-width: $width) {
+    @content;
+  }
+}
+
+// Between widths media query mixin
+@mixin between($small-width, $large-width) {
+  $large-width: $large-width - 1;
+  @media (max-width: $large-width) and (min-width: $small-width) {
+    @content;
+  }
+}
+
+// HDPI screens media query mixin
+@mixin hdpi {
+  @media (min-device-pixel-ratio: 1.3), (min-resolution: 120dpi), (min-resolution: 1.3dppx) {
+    @content;
+  }
+}

data/app/assets/stylesheets/tungsten/core/_grid.scss

@@ -0,0 +1,164 @@
+/* ========================================================================== *
+ * Grid module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * Utilities
+ * ------------------------------------- */
+
+$small-gutter : 7.5px;
+$medium-gutter: 15px;
+$large-gutter : 30px;
+$columns      : 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve';
+
+// Horizontal gutter mixin
+@mixin horizontal-gutter($amount) {
+  margin-left:  -$amount / 2;
+  margin-right: -$amount / 2;
+
+  > * {
+    margin-left:  $amount / 2;
+    margin-right: $amount / 2;
+  }
+}
+
+// Vertical gutter mixin
+@mixin vertical-gutter($amount) {
+  margin-bottom:   -$amount;
+
+  > * {
+    margin-bottom:   $amount;
+  }
+}
+
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
+// Columns container
+[class*='columns'] {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+// Top-align columns in certain contexts
+form [class*='columns'] {
+  align-items: flex-start;
+}
+
+// Normal gutter
+.gutter {
+  @include horizontal-gutter($medium-gutter);
+
+  &.match {
+    @include vertical-gutter($medium-gutter);
+  }
+}
+
+// Small gutter
+.small-gutter {
+  @include horizontal-gutter($small-gutter);
+
+  &.match {
+    @include vertical-gutter($small-gutter);
+  }
+}
+
+// Large gutter
+.large-gutter {
+  @include horizontal-gutter($large-gutter);
+
+  &.match {
+    @include vertical-gutter($large-gutter);
+  }
+}
+
+// Flexible columns
+.span {
+  flex: 1;
+}
+
+// Loop through columns
+@for $a from 1 through length($columns) {
+
+  // Define column expanse
+  $span: (length($columns) / $a);
+
+  // No gutter placeholders
+  %span-#{nth($columns, $a)} {
+    flex: 0 1 100% / $span;
+  }
+
+  // Regular gutter placeholders
+  %span-#{nth($columns, $a)}-gutter {
+    flex: 0 1 calc(#{100% / $span} - #{$medium-gutter});
+  }
+
+  // Small gutter placeholders
+  %span-#{nth($columns, $a)}-small-gutter {
+    flex: 0 1 calc(#{100% / $span} - #{$small-gutter});
+  }
+
+  // Large gutter placeholders
+  %span-#{nth($columns, $a)}-large-gutter {
+    flex: 0 1 calc(#{100% / $span} - #{$large-gutter});
+  }
+
+  @if length($columns) % $a == 0 {
+
+    // Container-declared columns
+    .#{nth($columns, $a)}-columns {
+
+      // No gutter
+      > * {
+        @extend %span-#{nth($columns, $span)};
+      }
+
+      // Regular gutter
+      &.gutter > * {
+        @extend %span-#{nth($columns, $span)}-gutter;
+      }
+
+      // Small gutter
+      &.small-gutter > * {
+        @extend %span-#{nth($columns, $span)}-small-gutter;
+      }
+
+      // Large gutter
+      &.large-gutter > * {
+        @extend %span-#{nth($columns, $span)}-large-gutter;
+      }
+    }
+  }
+
+  // Loop through columns again
+  @for $b from 1 through length($columns) {
+
+    // Only create usable classnames
+    @if $a <= $b and length($columns) % $b == 0 {
+
+      // Define placeholder key
+      $key: length($columns) * ($a / $b);
+
+      // No gutter
+      .#{nth($columns, $a)}-of-#{nth($columns, $b)} {
+        @extend %span-#{nth($columns, $key)};
+      }
+
+      // Regular gutter
+      .gutter > .#{nth($columns, $a)}-of-#{nth($columns, $b)} {
+        @extend %span-#{nth($columns, $key)}-gutter;
+      }
+
+      // Small gutter
+      .small-gutter > .#{nth($columns, $a)}-of-#{nth($columns, $b)} {
+        @extend %span-#{nth($columns, $key)}-small-gutter;
+      }
+
+      // Large gutter
+      .large-gutter > .#{nth($columns, $a)}-of-#{nth($columns, $b)} {
+        @extend %span-#{nth($columns, $key)}-large-gutter;
+      }
+    }
+  }
+}