tungsten 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 485aa16cdbb3ff7a8880fab83541fb5aee360533
-  data.tar.gz: c2dc7ff628762fe63152282f12931069381149a1
+  metadata.gz: 4ab9260819e6dccadd68a7ba4b198552dfe36333
+  data.tar.gz: 132a10903f5919c9a8b79970e37568fed04d0a51
 SHA512:
-  metadata.gz: 12a0b669adc672af3c518ec67d32a796bf830444b62e49c45c5224526475f71b1410ddcda38eb45614754ded8212f796a9aac6f8db0ce8f9539a39fa21ef4370
-  data.tar.gz: 9155fc7a0fde8da462885bfe39e997dd0560645015744c628ea4f6e6a04dd938ad39729c4e1b77d90c4e6108c6f06fa742094eba23d03f84fc0d6ed0e3addb6e
+  metadata.gz: 407f8aed971b13c08039363318af6e42b594224dfe983097f042c9f7b79b4a6d2f23cb9da45feb9dd47122090ca102e26f107cb983808baed158fbdc5fa582cf
+  data.tar.gz: 861b148dfc2bf1399ea8f91cffb0625fa159603cec0a6c4869124737847e83125b71dd1300a4b73a31732f73ca1e51d0138b691f0b2fa6df378e226541a7ee4d

data/app/assets/images/tungsten/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M9.458 10.767l-2.916 1.683-3.125-1.804-2.917-1.684v-3.608l3.125-1.804 2.917 1.683 2.916-1.683 3.125 1.804 2.917 1.684v3.608l-3.125 1.804-2.917-1.683zm.209-.361v-2.887l2.5 1.443v2.887l-2.5-1.443zm-5.834 0v-2.887l2.5 1.443v2.887l-2.5-1.443zm-2.916-1.684v-2.887l2.5 1.443v2.887l-2.5-1.443zm5.625-3.007l2.5 1.443-2.5 1.443-2.501-1.443 2.501-1.443zm5.833 0l2.5 1.443-2.5 1.443-2.5-1.443 2.5-1.443zm-8.75-1.684l2.5 1.443-2.5 1.443-2.5-1.443 2.5-1.443zm5.833 0l2.5 1.443-2.5 1.443-2.5-1.443 2.5-1.443z"/></svg>

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

@@ -0,0 +1,21 @@
+/* ========================================================================== *
+ * Badges module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  text-align: center;
+  justify-content: center;
+  color: $white;
+  background: $green-01;
+  font-weight: 700;
+  margin: 0 2px;
+}

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

@@ -1,8 +1,11 @@
 /* ========================================================================== *
- * Button module
+ * Buttons module
  * -------------------------------------------------------------------------- */
 
-// Universal
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -46,6 +49,64 @@
       0 1px 3px rgba($gray-11, .25);
   }
 
+  // Destructive action
+  &.destructive {
+
+    // Normal state
+    @include normal {
+      color: $red-01;
+    }
+
+    // Active state
+    @include active {
+      color: $red-02;
+    }
+  }
+
+  // Primary action
+  &.primary {
+
+    // Normal state
+    @include normal {
+      color: $white;
+      background: $blue-03;
+      box-shadow:
+        0 0 0 1px darken($blue-03, 5),
+        0 1px 3px rgba($gray-11, .15);
+    }
+
+    // Active state
+    @include active {
+      color: $white;
+      background: $blue-04;
+      box-shadow:
+        0 0 0 1px $blue-04,
+        0 1px 3px rgba($gray-11, .15);
+    }
+  }
+
+  // Primary destructive action
+  &.primary.destructive {
+
+    // Normal state
+    @include normal {
+      color: $white;
+      background: $red-01;
+      box-shadow:
+        0 0 0 1px darken($red-01, 5),
+        0 1px 3px rgba($gray-11, .15);
+    }
+
+    // Active state
+    @include active {
+      color: $white;
+      background: $red-02;
+      box-shadow:
+        0 0 0 1px $red-02,
+        0 1px 3px rgba($gray-11, .15);
+    }
+  }
+
   // Disabled
   &[disabled] {
     color: $gray-05 !important;
@@ -82,62 +143,6 @@
   }
 }
 
-// Destructive action
-.button.destructive {
-
-  // Normal state
-  @include normal {
-    color: $red-01;
-  }
-
-  // Active state
-  @include active {
-    color: $red-02;
-  }
-}
-
-// Primary action
-.button.primary {
-
-  // Normal state
-  @include normal {
-    color: $white;
-    background: $blue-03;
-    box-shadow:
-      0 0 0 1px darken($blue-03, 5),
-      0 1px 3px rgba($gray-11, .15);
-  }
-
-  // Active state
-  @include active {
-    color: $white;
-    background: $blue-04;
-    box-shadow:
-      0 0 0 1px $blue-04,
-      0 1px 3px rgba($gray-11, .15);
-  }
-}
-
-.primary.destructive {
-
-  // Normal state
-  @include normal {
-    background: $red-01;
-    box-shadow:
-      0 0 0 1px darken($red-01, 5),
-      0 1px 3px rgba($gray-11, .15);
-  }
-
-  // Active state
-  @include active {
-    color: $white;
-    background: $red-02;
-    box-shadow:
-      0 0 0 1px $red-02,
-      0 1px 3px rgba($gray-11, .15);
-  }
-}
-
 // Siblings need their space
 .button + .button {
   margin-left: 10px;

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

@@ -11,17 +11,14 @@
 }
 
 .card {
-  display: flex;
-  flex-direction: column;
   position: relative;
   padding: $card-padding;
-  font-size: 14px;
-  @include collapse-top;
+  @include collapse-bottom;
 
   &-actions {
     display: flex;
     align-items: baseline;
-    margin-top: $card-padding;
+    margin-bottom: $card-padding;
     flex-direction: row-reverse;
 
     > *:last-child {
@@ -34,7 +31,7 @@
 
     a,
     button {
-      margin-left: 10px;
+      margin-bottom: 10px;
     }
 
     a {
@@ -43,7 +40,7 @@
   }
 
   #{$block-elements} {
-    margin-top: 15px;
+    margin-bottom: $vertical-margin;
   }
 
   &:not([class*='columns']) {
@@ -51,6 +48,8 @@
   }
 
   &[class*='columns'] {
+    position: relative;
+    z-index: 1;
     flex-direction: row;
 
     &:before {
@@ -69,19 +68,25 @@
     font-size: 16px;
   }
 
-  header, footer {
+  &-header,
+  &-footer {
     display: flex;
     align-items: baseline;
+
     .card-actions {
-      margin-top: 0;
+      margin-bottom: 0;
       margin-left: auto;
     }
   }
 
-  footer {
+  &-description {
+    font-size: 12px;
+  }
+
+  &-footer {
     display: flex;
     align-items: baseline;
-    @include collapse-top;
+    @include collapse-bottom;
     font-size: 12px;
     padding: $card-padding;
     background: $gray-01;

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

@@ -65,7 +65,10 @@ $timing: cubic-bezier(0.4, 0.0, 0.2, 1);
  * ------------------------------------- */
 
 // Block-level elements that get vertical margin
-$block-elements: p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table;
+$block-elements: p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table, '.card';
+
+// Text-based inputs
+$text-inputs: 'input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
 
 // Border radius
 $radius: 2px;
@@ -73,6 +76,9 @@ $radius: 2px;
 // Card padding
 $card-padding: 20px;
 
+// Block element vertical margin
+$vertical-margin: 20px;
+
 // Inner content padding
 $content-padding: 40px;
 

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

@@ -6,10 +6,10 @@
  * Utilities
  * ------------------------------------- */
 
-$small-gutter : 7.5px;
-$medium-gutter: 15px;
+$small-gutter : 10px;
+$medium-gutter: 20px;
 $large-gutter : 30px;
-$columns      : 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve';
+$columns      : 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight';
 
 // Horizontal gutter mixin
 @mixin horizontal-gutter($amount) {
@@ -24,10 +24,10 @@ $columns      : 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight',
 
 // Vertical gutter mixin
 @mixin vertical-gutter($amount) {
-  margin-bottom:   -$amount;
+  margin-bottom: -$amount;
 
   > * {
-    margin-bottom:   $amount;
+    margin-bottom: $amount;
   }
 }
 
@@ -74,7 +74,7 @@ form [class*='columns'] {
 }
 
 // Flexible columns
-.span {
+.flex {
   flex: 1;
 }
 
@@ -159,6 +159,72 @@ form [class*='columns'] {
       .large-gutter > .#{nth($columns, $a)}-of-#{nth($columns, $b)} {
         @extend %span-#{nth($columns, $key)}-large-gutter;
       }
+
+      // Alias for full-width columns
+      @if $key == length($columns) {
+
+        // No gutter
+        .span {
+          @extend %span-#{nth($columns, $key)};
+        }
+
+        // Regular gutter
+        .gutter > .span {
+          @extend %span-#{nth($columns, $key)}-gutter;
+        }
+
+        // Small gutter
+        .small-gutter > .span {
+          @extend %span-#{nth($columns, $key)}-small-gutter;
+        }
+
+        // Large gutter
+        .large-gutter > .span {
+          @extend %span-#{nth($columns, $key)}-large-gutter;
+        }
+      }
     }
   }
+}
+
+/* ===================================== *
+ * Vertical alignment
+ * ------------------------------------- */
+
+.top-aligned {
+  align-items: flex-start;
+}
+
+.center-aligned {
+  align-items: center;
+}
+
+.bottom-aligned {
+  align-items: flex-end;
+}
+
+/* ===================================== *
+ * Horizontal justification
+ * ------------------------------------- */
+
+.left-justified {
+  justify-items: flex-start;
+}
+
+.center-justified {
+  justify-items: center;
+}
+
+.right-justified {
+  justify-items: flex-end;
+}
+
+/* ===================================== *
+ * Breakpoints
+ * ------------------------------------- */
+
+[class*='columns'].medium-breakpoint > * {
+  @media (max-width: 950px) {
+    flex: 0 1 100%;
+  }
 }

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

@@ -3,5 +3,9 @@
 @import 'grid';
 @import 'layout';
 @import 'text';
+@import 'tables';
 @import 'buttons';
+@import 'badges';
 @import 'cards';
+@import 'sections';
+@import 'navigation';

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

@@ -29,6 +29,20 @@ textarea {
   color: $gray-11;
 }
 
+#{$block-elements} {
+  margin-bottom: $vertical-margin;
+}
+
+
+/* ===================================== *
+ * Application
+ * ------------------------------------- */
+
+.application-content {
+  padding: $content-padding;
+  background: $gray-02;
+}
+
 /* ===================================== *
  * Visibility
  * ------------------------------------- */
@@ -36,12 +50,4 @@ textarea {
 .hidden {
   display: none;
   visibility: hidden;
-}
-
-// Temporary content stuffs
-.content {
-  max-width: 1200px;
-  padding: $content-padding;
-  margin-left: auto;
-  margin-right: auto;
 }

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

@@ -0,0 +1,35 @@
+/* ========================================================================== *
+ * Navigation module
+ * -------------------------------------------------------------------------- */
+
+.horizontal-nav {
+  display: flex;
+  flex-flow: row wrap;
+  position: relative;
+  background: $white;
+  box-shadow:
+    0 -1px rgba($gray-11, .1) inset,
+    0 0 0 1px rgba($gray-11, .05) inset,
+    0 1px 3px -1px rgba($gray-11, .1);
+
+  a {
+    padding: 9px 12px;
+    text-decoration: none;
+    transition: background $duration;
+
+    @include normal {
+      color: $blue-03;
+      background: transparent;
+    }
+
+    &.active {
+      color: $blue-03;
+      background: rgba($blue-03, .1);
+    }
+
+    @include active {
+      color: $blue-03;
+      background: rgba($blue-03, .1);
+    }
+  }
+}