tungsten 0.1.0 → 0.1.1

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

@@ -1,13 +1,7 @@
-// Solid color classes
-@each $name, $color in $colors {
-  // Assign a `.[color]-text` class with a color of [color]
-  .#{$name}-text {
-    color: $color;
-  }
-
-  .#{$name}-bg {
-    // &:before {
-      background-color: $color;
-    // }
-  }
-}
+@import 'colors';
+@import 'globals';
+@import 'grid';
+@import 'layout';
+@import 'text';
+@import 'buttons';
+@import 'cards';

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

@@ -0,0 +1,47 @@
+/* ===================================== *
+ * Universal
+ * ------------------------------------- */
+
+*,
+*:after,
+*:before {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+/* ===================================== *
+ * Document
+ * ------------------------------------- */
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: $base-size;
+}
+
+body,
+input,
+textarea {
+  color: $gray-11;
+}
+
+/* ===================================== *
+ * Visibility
+ * ------------------------------------- */
+
+.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/_text.scss

@@ -0,0 +1,219 @@
+/* ========================================================================== *
+ * Text module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * Common
+ * ------------------------------------- */
+
+body,
+input,
+select,
+button,
+textarea {
+  color: $gray-10;
+  font-family: $base-font;
+  line-height: $base-line-height;
+  @include font-smoothing;
+}
+
+/* ===================================== *
+ * Heading
+ * ------------------------------------- */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+
+// 1.125 modular scale - http://www.modularscale.com/?16&px&1.125&web&text
+h1 {
+  font-size: 29px;
+}
+
+h2 {
+  font-size: 26px;
+}
+
+h3 {
+  font-size: 22px;
+}
+
+h4 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 18px;
+}
+
+h6 {
+  font-size: 16px;
+}
+
+/* ===================================== *
+ * Blockquote
+ * ------------------------------------- */
+
+/* ===================================== *
+ * Inline
+ * ------------------------------------- */
+
+// Bold text
+b,
+strong {
+  font-weight: 700;
+}
+
+// Subscripts & superscripts
+sub,
+sup {
+  // Specified in % so that the sup/sup is the right size relative to the surrounding text
+  font-size: 75%;
+
+  // Zero out the line-height so that it doesn't interfere with the positioning that follows
+  line-height: 0;
+
+  // Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text
+  position: relative;
+
+  // Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule
+  vertical-align: baseline;
+}
+
+// Move the superscripted text up
+sup {
+  top: -0.5em;
+}
+
+// Move the subscripted text down, but only half as far down as the superscript moved up
+sub {
+  bottom: -0.25em;
+}
+
+// Definitions & Abbreviations
+dfn[title],
+abbr[title] {
+  position: relative;
+  cursor: help;
+  font-style: normal;
+  text-decoration: none;
+  border-bottom: 1px dashed silver;
+
+  &:after,
+  &:before {
+    position: absolute;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  &:after {
+    content: attr(title);
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 14px;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    padding: 10px;
+    border-radius: $radius;
+    background: black;
+  }
+
+  &:before {
+    content: '';
+    left: calc(50% - 5px);
+    top: 100%;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 5px 6px 5px;
+    border-color: transparent transparent black transparent;
+  }
+
+  &:hover:after,
+  &:hover:before {
+    opacity: 1;
+    z-index: 2;
+  }
+}
+
+// Links & buttons
+a,
+button {
+  color: inherit;
+  cursor: pointer;
+}
+
+a {
+  @include inline-link;
+}
+
+/* ===================================== *
+ * Horizontal rule
+ * ------------------------------------- */
+
+hr {
+  border: solid silver;
+  border-width: 1px 0 0 0;
+}
+
+/* ===================================== *
+ * Preformatted text
+ * ------------------------------------- */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: $mono-font;
+  font-weight: 400;
+  direction: ltr;
+  text-align: left;
+  tab-size: 2;
+  hyphens: none;
+  tab-size: 2;
+  hyphens: none;
+}
+
+pre {
+  overflow: auto;
+  padding: 2px 6px;
+  border-radius: $radius;
+  background: white;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+:not(pre) > code,
+:not(pre) > kbd,
+:not(pre) > samp {
+  line-height: 0;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  border-radius: $radius;
+  padding: 1px 4px;
+  box-shadow: 0 0 0 1px silver inset;
+}
+
+/* ===================================== *
+ * Text alignment
+ * ------------------------------------- */
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}

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

@@ -0,0 +1,235 @@
+$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) {
+  @return 0 0 0 1px $color inset, $input-weight-shadow
+}
+
+$focus-shadow: input-focus-shadow();
+$input-shadow: input-shadow();
+
+form {
+  width: 100%;
+
+  &.max {
+    max-width: 100%;
+  }
+
+}
+
+.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] {
+    position: absolute;
+    border: none;
+    cursor: pointer;
+    opacity: 0;
+    z-index: -1;
+  }
+} 
+
+fieldset {
+  border: 0;
+  padding: 0;
+  margin-left: 0;
+  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;
+  border: none;
+  line-height: 30px;
+  padding: 9px 12px;
+  border-radius: $radius;
+  transition-property: box-shadow, color;
+  appearance: none;
+  box-shadow: $input-shadow;
+
+  // Keep Chrome’s autofilled fields white
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px $white inset;
+  }
+
+  &:disabled:not([type="submit"]) {
+    color: $gray-05;
+    cursor: default;
+  }
+}
+
+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] {
+  &,
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+}
+
+select {
+  min-height: 50px;
+  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;
+}
+
+// Confine resizing of textareas
+textarea {
+  display: block;
+  resize: vertical;
+  margin-top: 10px;
+  min-height: 100px;
+}
+
+// Bare inputs
+:not(label) > {
+  input,
+  select,
+  textarea {
+    margin: 15px 0;
+  }
+}
+
+::placeholder {
+  opacity: 1;
+  color: $gray-06;
+}
+
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  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;
+  }
+  select, input, textarea {
+    margin: 0px;
+  }
+}
+