tungsten 0.1.2 → 0.1.3

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

@@ -0,0 +1,25 @@
+/* ========================================================================== *
+ * Sections module
+ * -------------------------------------------------------------------------- */
+
+.app-section {
+
+  &-header,
+  &-footer {
+    display: flex;
+    align-items: baseline;
+
+    .section-actions {
+      margin-bottom: 0;
+      margin-left: auto;
+    }
+  }
+
+  &-header {
+    justify-content: space-between;
+  }
+
+  &-heading {
+    font-size: 18px;
+  }
+}

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

@@ -0,0 +1,66 @@
+/* ========================================================================== *
+ * Tables module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
+table {
+  vertical-align: top;
+  border-spacing: 0;
+}
+
+th,
+td {
+  padding: 8px;
+  text-align: left;
+  background: $white;
+
+  // Right-aligned button panels
+  &.action-panel {
+    min-width: 120px;
+    text-align: right;
+    white-space: nowrap;
+  }
+}
+
+caption {
+  display: none;
+}
+
+// Ruled cells
+table.ruled {
+  tfoot th,
+  tbody tr:nth-child(n+2) th,
+  tbody tr:nth-child(n+2) td {
+    border-top: 1px solid $gray-04;
+  }
+
+  thead th {
+    border-bottom: 1px solid $gray-04;
+  }
+}
+
+// Outlined cells
+table.outlined {
+  border-collapse: collapse;
+  td,
+  th {
+    border: 1px solid $gray-04;
+  }
+}
+
+// Striped rows
+table.striped {
+  tbody tr:nth-child(2n+1) th,
+  tbody tr:nth-child(2n+1) td {
+    background: $gray-03;
+  }
+}
+
+// Equal-width columns
+table.stretched {
+  table-layout: fixed;
+  min-width: 100%;
+}

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

@@ -12,6 +12,7 @@ select,
 button,
 textarea {
   color: $gray-10;
+  font-size: $base-size;
   font-family: $base-font;
   line-height: $base-line-height;
   @include font-smoothing;

data/app/assets/stylesheets/tungsten/form/_base.scss

@@ -1,63 +1,22 @@
-$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
-
-
-@mixin input-active {
-  &:focus,
-  &:hover:not([disabled]),
-  &:active {
-    @content;
-  }
-}
-
-$input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-$empty-shadow: 0 0 0 transparent;
-
-label { *, *:before, *:after {
-  transition-duration: $duration;
-  transition-timing-function: $timing;
-}}
-
-@function input-shadow($color: $gray-06, $size: 1px) {
-  @return 0 0 0 $size $color inset, $empty-shadow;
-}
-
-@function input-focus-shadow($color: $gray-08, $size: 1px) {
-  @return 0 0 0 $size $color inset, $input-weight-shadow
-}
-
-$focus-shadow: input-focus-shadow();
-$input-shadow: input-shadow();
-
-form {
-  width: 100%;
+.switch-label,
+.tick-label {
+  pointer-events: none;
 
-  &.max {
-    max-width: 100%;
+  * {
+    pointer-events: all;
   }
-
-}
-
-.switch-label, .tick-label {
-  pointer-events: none;
-  * { pointer-events: all; }
 }
 
 label {
-  // Bare text-based inputs
-  + input,
-  + select,
-  + textarea {
-    margin-top: -5px;
-  }
-
-  [type=checkbox], [type=radio] {
+  [type=checkbox],
+  [type=radio] {
     position: absolute;
     border: none;
     cursor: pointer;
     opacity: 0;
     z-index: -1;
   }
-} 
+}
 
 fieldset {
   border: 0;
@@ -66,48 +25,26 @@ fieldset {
   margin-right: 0;
 }
 
-// Fieldset legends
-legend {
-  font-size: 24px;
-  font-weight: 300;
-  padding-top: 11px;
-  width: 100%;
-  margin-bottom: 19px;
-  + * {
-    clear: both;
-  }
-}
-
-fieldset h2, legend.header {
-  text-transform: none;
-  letter-spacing: normal;
-  justify-content: space-between;
-  box-shadow: none;
-  font-weight: 300;
-  width: 100%;
-  float: left;
-  font-size: 24px;
-  padding: 20px 0 0; // 30px
-  margin: 0 0 30px; // 30px
-  text-align: center;
-  + * { clear: both; }
-}
-
-
-@mixin input-base {
-  width: 100%;
-  font-size: 16px;
+select,
+textarea,
+#{$text-inputs} {
+  appearance: none;
   border: none;
-  line-height: 30px;
+  width: 100%;
   padding: 9px 12px;
   border-radius: $radius;
-  transition-property: box-shadow, color;
-  appearance: none;
-  box-shadow: $input-shadow;
+  transition: box-shadow $duration;
+
+  // Normal state
+  @include normal {
+    box-shadow: 0 0 0 1px rgba($gray-11, .1);
+  }
 
-  // Keep Chrome’s autofilled fields white
-  &:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px $white inset;
+  // Active state
+  @include active {
+    box-shadow:
+      0 0 0 1px rgba($gray-11, .2),
+      0 1px 3px rgba($gray-11, .25);
   }
 
   &:disabled:not([type="submit"]) {
@@ -116,30 +53,6 @@ fieldset h2, legend.header {
   }
 }
 
-input, select, textarea {
-  outline: 0;
-  outline-style: none;
-  border: none;
-
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-
-}
-
-#{$text-inputs}, select, textarea {
-  @include input-base;
-
-  @include input-active {
-    box-shadow: $focus-shadow;
-  }
-}
-
-textarea {
-  line-height: 20px;
-}
-
 // Override default search styling
 input[type=search] {
   &,
@@ -150,7 +63,7 @@ input[type=search] {
 }
 
 select {
-  min-height: 50px;
+  min-height: 40px;
   cursor: pointer;
   background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 14'%3E%3Cpolygon fill='%237A7B7C' points='3.5,0 0,6 7,6'/%3E%3Cpolygon fill='%237A7B7C' points='3.5,14 0,8 7,8'/%3E%3C/svg%3E") calc(100% - 14px) 50% / 7px 14px no-repeat;
 }
@@ -159,17 +72,7 @@ select {
 textarea {
   display: block;
   resize: vertical;
-  margin-top: 10px;
-  min-height: 100px;
-}
-
-// Bare inputs
-:not(label) > {
-  input,
-  select,
-  textarea {
-    margin: 15px 0;
-  }
+  min-height: 75px;
 }
 
 ::placeholder {
@@ -183,56 +86,11 @@ input[type=number]::-webkit-inner-spin-button {
   margin: 0;
 }
 
-.form-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  margin: 0 -5px;
-
-  > * {
-    padding: 0 5px;
-  }
-}
-
-.wide-cell {
-  flex: 1 0 auto;
-  @include until(400px) {
-    width: 100%;
-  }
-}
-
-.button-cell {
-  display: flex;
-  flex-direction: row-reverse;
-
-  @include until(550px) {
-    width: 100%;
-  }
-
-  @include until(400px) {
-    a.button, button {
-      width: 100%;
-    }
-  }
-}
-
 label {
   display: flex;
-  font-size: 15px;
   flex-direction: column;
   position: relative;
   flex: 1 0 auto;
-  margin: 18px 0;
-
-  .label-text {
-    transition-property: box-shadow, color;
-    padding-bottom: .2em;
-  }
-
-  select, input, textarea {
-    margin: 0px;
-  }
 }
 
 form.button_to {

data/app/assets/stylesheets/tungsten/form/_check-radio.scss

@@ -17,14 +17,14 @@ label.tick-box {
       margin: 0 8px 0 0;
       background: $white;
       transition-property: box-shadow;
-      box-shadow: input-shadow(), $empty-shadow inset;
+      // box-shadow: input-shadow(), $empty-shadow inset;
     }
 
-    @include input-active {
-      border: none;
+    // @include input-active {
+      // border: none;
 
-      + .tick { box-shadow: input-shadow( $gray-08 ), $empty-shadow inset; }
-    }
+      // + .tick { box-shadow: input-shadow( $gray-08 ), $empty-shadow inset; }
+    // }
 
     &:disabled {
       pointer-events: none;
@@ -63,7 +63,7 @@ label.tick-box {
 
     // Checked
     &:checked + .tick {
-      box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 8px $blue-03 inset;
+      // box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 8px $blue-03 inset;
 
       &:after {
         box-shadow: 0 1px 0 2px darken($blue-03, 15);
@@ -72,22 +72,22 @@ label.tick-box {
     }
 
     // Hover, focus, active
-    @include input-active {
-      
-      // Active Unchecked
-      + .tick {
-        &:before { transform: scale(.35); }
-        &:after  { transform: scale(0);   }
-      }
-
-      // Active Checked
-      &:checked + .tick {
-        box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 8px darken( $blue-03, 5 ) inset;
-
-        &:before { transform: scale(0);   }
-        &:after  { transform: scale(.35); }
-      }
-    }
+    // @include input-active {
+
+    //   // Active Unchecked
+    //   + .tick {
+    //     &:before { transform: scale(.35); }
+    //     &:after  { transform: scale(0);   }
+    //   }
+
+    //   // Active Checked
+    //   &:checked + .tick {
+    //     box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 8px darken( $blue-03, 5 ) inset;
+
+    //     &:before { transform: scale(0);   }
+    //     &:after  { transform: scale(.35); }
+    //   }
+    // }
   }
 
   // Checkboxes
@@ -115,7 +115,7 @@ label.tick-box {
 
     // Checked
     &:checked + .tick {
-      box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 10px $blue-03 inset;
+      // box-shadow: input-shadow( darken($blue-03, 3) ), 0 0 0 10px $blue-03 inset;
 
       &:after, &:before {
         transform: scale(.5) rotate(-50deg);
@@ -129,26 +129,26 @@ label.tick-box {
     }
 
     // Hover, focus, active
-    @include input-active {
-      
-      // Active Uncheked
-      + .tick:before {
-        border-color: $gray-06;
-        transform: scale(.4) rotate(-50deg);
-      }
-
-      // Active Checked
-      &:checked + .tick {
-        box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 10px darken( $blue-03, 5 ) inset;
-
-        &:before {
-          top: 1px;
-          opacity: 1;
-          transform: scale(.5) rotate(-50deg);
-          border-color: darken( $blue-03, 10 );
-        }
-      }
-    }
+    // @include input-active {
+
+    //   // Active Uncheked
+    //   + .tick:before {
+    //     border-color: $gray-06;
+    //     transform: scale(.4) rotate(-50deg);
+    //   }
+
+    //   // Active Checked
+    //   &:checked + .tick {
+    //     box-shadow: input-shadow( darken($blue-03, 15) ), 0 0 0 10px darken( $blue-03, 5 ) inset;
+
+    //     &:before {
+    //       top: 1px;
+    //       opacity: 1;
+    //       transform: scale(.5) rotate(-50deg);
+    //       border-color: darken( $blue-03, 10 );
+    //     }
+    //   }
+    // }
   }
 }