ratchet_design 0.1.7 → 0.1.8

data/app/assets/stylesheets/ratchet/base/_form.scss

@@ -6,18 +6,25 @@
  * i. Utility
  * ------------------------------------- */
 
+// Universal text-based input variable
+$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]';
+
 // Nested labels
-@mixin nested-label($size: normal) {
+@mixin nested-label($size: normal, $spacing: on) {
 
   // Scoped variables
   $font-size: if($size == large,  17px,  16px);
-  $margin:    if($size == large,  19px,  25px);
   $padding-y: if($size == large,  12px,   9px);
   $padding-x: if($size == large,  14px,  12px);
+  $margin:    if($size == large,  19px,  25px);
   $distance:  if($size == large, -24px, -22px);
   $scale:     if($size == large,  .824,  .875);
   $height:    if($size == large,  56px,  50px);
 
+  @if $spacing != on {
+    $margin: 0;
+  }
+
   // Active state
   %active {
     z-index: 2;
@@ -32,9 +39,9 @@
 
   // Input labels
   label {
-    display: flex;
-    width: 100%;
     padding: 0;
+    clear: both;
+    flex: 1 0 auto;
     background: $white;
     font-size: $font-size;
     margin-bottom: $margin;
@@ -42,8 +49,8 @@
 
   // Default active color
   :not(.valid):not(.invalid) > {
-    input,
-    textarea {
+    textarea,
+    #{$text-inputs} {
       &:focus + span,
       &:active + span {
         color: darken($aluminum, 10);
@@ -53,8 +60,8 @@
 
   // Validated label
   .valid > {
-    input,
-    textarea {
+    textarea,
+    #{$text-inputs} {
 
       // Active state
       + span {
@@ -69,15 +76,15 @@
 
       // Required active color
       &:required + span {
-        color: $lima;
+        color: $apple;
       }
     }
   }
 
   // Invalidated label
   .invalid > {
-    input,
-    textarea {
+    textarea,
+    #{$text-inputs} {
 
       // Active state
       + span {
@@ -99,6 +106,7 @@
 
   // Select-specific styles
   select {
+    margin: 0;
     font-size: $font-size;
     line-height: inherit;
     height: $height;
@@ -106,18 +114,13 @@
   }
 
   // Inputs
-  input,
-  textarea {
-    background: transparent;
-  }
-
-  input,
-  select,
-  textarea {
+  textarea,
+  #{$text-inputs} {
     z-index: 1;
     margin: 0;
     font-size: $font-size;
     line-height: inherit;
+    background: transparent;
     padding: $padding-y $padding-x;
 
     // Faux-placeholder labels
@@ -154,8 +157,25 @@
   }
 }
 
+// Inline forms
+@mixin inline-form($size: normal, $gutter: 10px) {
+  @include nested-label($size, off);
+  @include grid;
+
+  // Remove top spacing from submit button
+  > [type=submit] {
+    margin-top: 0;
+  }
+
+  // Leave right margin off last element
+  > :not(:last-child) {
+    margin-right: $gutter;
+  }
+
+}
+
 %success-btn {
-  @include button($color: $lima);
+  @include button($color: $apple);
 }
 
 /* ===================================== *
@@ -304,9 +324,15 @@ select {
 // Radios & checkboxes
 input[type=radio],
 input[type=checkbox] {
-  display: none;
+  position: absolute;
+  opacity: 0;
 
-  + span {
+  &:focus + .tick-label,
+  &:active + .tick-label {
+    box-shadow: 0 0 0 1px $aluminum inset;
+  }
+
+  + .tick-label {
     width: 20px;
     height: 20px;
     margin: 0 8px 0 0;
@@ -327,11 +353,11 @@ input[type=checkbox] {
 // Radios
 input[type=radio] {
 
-  + span {
+  + .tick-label {
     border-radius: 50%;
   }
 
-  &:checked + span {
+  &:checked + .tick-label {
     box-shadow: 0 0 0 8px $cerulean inset;
   }
 }
@@ -339,7 +365,7 @@ input[type=radio] {
 // Checkboxes
 input[type=checkbox] {
 
-  + span {
+  + .tick-label {
     border-radius: $radius;
     position: relative;
 
@@ -358,11 +384,11 @@ input[type=checkbox] {
     }
   }
 
-  &:checked + span {
+  &:checked + .tick-label {
     box-shadow: 0 0 0 10px $cerulean inset;
   }
 
-  &:checked + span:before {
+  &:checked + .tick-label:before {
     transform: scale(.5) rotate(-45deg);
   }
 }
@@ -514,13 +540,7 @@ button[type=submit] {
  * ------------------------------------- */
 
 // Apply validation styles to inputs & textareas
-textarea,
-input[type=url],
-input[type=tel],
-input[type=text],
-input[type=email],
-input[type=number],
-input[type=password] {
+textarea, #{$text-inputs} {
 
   // Strip default styling
   &:invalid {
@@ -531,13 +551,13 @@ input[type=password] {
   // Apply valid state color to required fields & adjacent labels
   &.valid:required,
   .valid &:required {
-    color: $lima;
+    color: $apple;
   }
 
   // Apply valid state to required fields
   &.valid:required,
   .valid &:required   {
-    border-color: $lima;
+    border-color: $apple;
   }
 
   // Apply invalid state color to required fields & adjacent labels
@@ -555,7 +575,7 @@ input[type=password] {
   // Apply valid state to Chrome’s autofilled fields
   &.valid:required:-webkit-autofill,
   .valid &:required:-webkit-autofill {
-    -webkit-text-fill-color: $lima;
+    -webkit-text-fill-color: $apple;
   }
 
   // Apply invalid state to Chrome’s autofilled fields
@@ -616,4 +636,4 @@ input[type=password] {
       border-color: transparent transparent $punch transparent;
     }
   }
-}
+}

data/app/assets/stylesheets/ratchet/base/_text.scss

@@ -328,7 +328,7 @@ code,
 kbd,
 samp {
   font-family: $mono-font;
-  color: $aluminum;
+  // color: $aluminum;
   direction: ltr;
   text-align: left;
   tab-size: 2;
@@ -365,8 +365,8 @@ pre {
  * xi. Syntax highlighting
  * ------------------------------------- */
 
-pre[class*=language-],
-code[class*=language-] {
+pre[class*=lang-],
+code[class*=lang-] {
   color: $aluminum;
 }
 
@@ -374,7 +374,7 @@ code[class*=language-] {
   .cm-keyword                { color: $bahama;    }
   .cm-atom                   { color: $lightning; }
   .cm-number                 { color: $rose;      }
-  .cm-def                    { color: $lima;      }
+  .cm-def                    { color: $apple;      }
   .cm-variable               { color: $flush;     }
   .cm-variable-2             { color: $orchid;    }
   .cm-variable-3             { color: $flush;     }
@@ -382,7 +382,7 @@ code[class*=language-] {
   .cm-operator               { color: $nobel;     }
   .cm-comment                { color: $nobel;     }
   .cm-string                 { color: $cerulean;  }
-  .cm-string-2               { color: $lima;      }
+  .cm-string-2               { color: $apple;      }
   .cm-meta                   { color: $nobel;     }
   .cm-error                  { color: $punch;     }
   .cm-qualifier              { color: $nobel;     }
@@ -391,7 +391,7 @@ code[class*=language-] {
   .cm-tag                    { color: $bahama;    }
   .cm-attribute              { color: $flush;     }
   .cm-header                 { color: $cerulean;  }
-  .cm-quote                  { color: $lima;      }
+  .cm-quote                  { color: $apple;      }
   .cm-hr                     { color: $nobel;     }
   .cm-link                   { color: $orchid;    }
   .cm-qualifier.cm-attribute { color: $flush;     }
@@ -399,11 +399,11 @@ code[class*=language-] {
 }
 
 .static-code {
-  .cm-variable               { color: $lima;      }
+  .cm-variable               { color: $apple;      }
 }
 
 .cm-negative                 { color: $rose;      }
-.cm-positive                 { color: $lima;      }
+.cm-positive                 { color: $apple;      }
 .cm-header,
 .cm-strong                   {                    }
 .cm-em                       {                    }

data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss

@@ -0,0 +1,93 @@
+/* ========================================================================== *
+ * Lightbox module
+ * -------------------------------------------------------------------------- */
+
+/* ===================================== *
+ * a. Common
+ * ------------------------------------- */
+
+// Main lightbox element
+.lightbox {
+  @extend %hidden;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, .9);
+  visibility: hidden; // Hidden by default
+  cursor: pointer;
+
+  // Container figure
+  figure {
+    position: relative;
+    margin: 0;
+  }
+
+  // Main image
+  img {
+    max-width: 90vw;
+    max-height: 90vh;
+    cursor: default;
+    visibility: hidden; // Hidden by default
+
+    // Make visible once loaded
+    &.loaded,
+    &.loaded + button {
+      visibility: visible;
+    }
+  }
+
+  // Close button
+  button {
+    position: absolute;
+    margin: 10px 0 0 10px;
+    width: 20px;
+    height: 20px;
+    appearance: none;
+    outline: none;
+    border: 0;
+    visibility: hidden; // Hidden by default
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill='#FFF'%3E%3Cpath d='M2.663.005c.176.021.349.045.519.095.316.091.613.249.868.455l.184.166 10.765 10.765 10.768-10.768.187-.164c.262-.21.559-.368.882-.46.279-.079.567-.106.856-.089.228.014.456.065.671.143.257.094.498.23.712.401.578.467.922 1.186.925 1.928.001.239-.033.478-.1.707-.093.316-.249.611-.456.867l-.165.184-10.766 10.765 10.768 10.768.165.187c.224.279.388.599.477.947.078.308.097.631.055.946-.041.301-.136.593-.282.859-.113.208-.256.399-.424.566-.152.153-.324.285-.511.393-.584.337-1.296.423-1.945.235-.316-.092-.612-.25-.868-.456l-.183-.166-10.766-10.765-10.768 10.768-.186.165c-.28.224-.599.388-.947.477-.316.08-.646.098-.968.052-.293-.042-.578-.137-.838-.279-.242-.132-.462-.306-.648-.511-.16-.177-.294-.377-.398-.592-.307-.636-.328-1.387-.054-2.039.091-.218.214-.422.362-.606l.166-.183 10.765-10.766-10.765-10.765-.111-.119c-.208-.245-.372-.521-.476-.826-.204-.594-.172-1.259.087-1.832.098-.217.229-.42.385-.601.174-.201.381-.374.61-.51.279-.166.594-.278.916-.323l.353-.025.179.006z'/%3E%3C/svg%3E") 0 0 / 16px 16px no-repeat;
+  }
+}
+
+// Active state
+.lightbox-active {
+
+  // Prevent scrolling
+  overflow: hidden;
+
+  // Reposition lightbox
+  .lightbox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 13;
+    visibility: visible; // Shown while active
+  }
+
+  // Default loader state
+  .loader {
+    z-index: 14;
+  }
+
+  // Loader failure state
+  .loader.failure {
+    &:before {
+      border-color: transparent;
+      background: rgba($white, .2)
+    }
+
+    &:after {
+      content: '';
+      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#FFF' d='M30.51 6.423l5.099-5.099.202-.16c.146-.09.313-.145.485-.16l.129-.004.128.011.126.026c.125.034.243.089.349.163.106.074.198.166.272.272.2.285.254.655.145.984-.041.123-.103.238-.183.339l-.086.096-35.284 35.285-.202.159c-.183.113-.398.171-.614.165-.347-.01-.676-.188-.876-.472l-.122-.227c-.047-.12-.074-.248-.078-.377-.003-.129.016-.258.056-.381.041-.122.103-.237.183-.339l.086-.096 3.989-3.989c-.337-.385-.538-.887-.538-1.424v-22.611c0-1.219.998-2.161 2.161-2.161h24.573zm3.857 26.933h-24.573l1.774-1.773h22.799c.222 0 .388-.166.333-.388v-1.884l-.166-.222-6.429-6.429c-.111-.11-.332-.11-.499 0l-2.937 2.439c-.831.72-2.106.665-2.882-.111l-1.832-1.792 1.295-1.295 1.867 1.812c.111.111.333.111.499 0l2.937-2.383c.832-.72 2.106-.665 2.882.111l5.32 5.32v-18.177l-.031-.158 1.267-1.266c.337.384.538.886.538 1.424v22.611c0 1.219-.998 2.161-2.162 2.161zm-17.556-13.234l-2.561-2.505c-.11-.111-.332-.111-.498 0l-8.202 7.703v5.875l.03.157 11.231-11.23zm1.284-1.284l10.642-10.642h-22.8c-.166 0-.332.166-.332.388v14.243l6.927-6.54c.832-.776 2.162-.776 2.993.056l2.57 2.495zm-8.089-8.465c1.101 0 1.995.894 1.995 1.996 0 1.101-.894 1.995-1.995 1.995s-1.995-.894-1.995-1.995c0-1.102.894-1.996 1.995-1.996z' /%3E%3C/svg%3E") 50% 50% / 28px 28px no-repeat;
+    }
+  }
+}
+
+// Inactive anchor links
+a[data-open-lightbox='inactive'] {
+  cursor: default;
+}

data/app/assets/stylesheets/ratchet/enhancement/_loader.scss

@@ -37,7 +37,7 @@
 .loader {
   font-size: 14px;
   color: $white;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 145px;
   width: 100%;

data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss

@@ -34,6 +34,7 @@
     content: attr(data-tooltip);
     color: $white;
     font-size: 14px;
+    font-weight: 300;
     line-height: 20px;
     padding: 10px 12px;
     max-width: 100vw;
@@ -129,7 +130,11 @@ article > p:first-of-type > [data-tooltip] {
 }
 
 .tooltip-offset {
-  @include tooltip($offset: 30px);
+  @include tooltip($offset: 10px);
+}
+
+.tooltip-width {
+  @include tooltip($width: 220px);
 }
 
 // [data-tooltip] {

data/app/assets/stylesheets/ratchet/utility/_global.scss

@@ -19,7 +19,7 @@ $white:     #FFFFFF; // White
 // Active colors
 $bahama:    #006690; // Navy
 $cerulean:  #0FA7DB; // Blue
-$lima:      #71C638; // Green
+$apple:     #3FBE3E; // Green
 $lightning: #FCB827; // Yellow
 $flush:     #FF7C00; // Orange
 $punch:     #DD3340; // Red
@@ -154,7 +154,6 @@ $content-padding: vr(2); // 30px
   @for $i from first($level) through last($level) {
     #{repeat-string('> *', $i) + ','} {
       @extend %properties;
-      opacity: 50% !important;
     }
   }
 }

data/app/helpers/ratchet/application_helper.rb

@@ -1,6 +1,11 @@
 module Ratchet
   module ApplicationHelper
 
+    # Set custom favicon
+    def favicon(&block)
+      content_for :favicon, &block
+    end
+
     # Set custom logo
     def logo(&block)
       content_for :logo, &block

data/app/helpers/ratchet/form_helper.rb

@@ -0,0 +1,140 @@
+module Ratchet
+  module FormHelper
+
+    INPUT_OPTIONS = {
+      email: {
+        type: "email",
+        placeholder: "Email address",
+        pattern: "[^@]+@[^@]+\\.[a-zA-Z]{2,}",
+        data: { message: "Please enter a valid email address." }
+      },
+
+      password: {
+        type: "password",
+        placeholder: "Password"
+      },
+
+      text: {
+        type: "text"
+      },
+
+      card_number: {
+        type: "text",
+        required: true,
+        pattern: "[0-9 -]{13,20}",
+        placeholder: "Credit Card Number",
+        data: {
+          stripe: "number",
+          message: "Please enter a valid credit card number."
+        }
+      },
+
+      card_month: {
+        type: "text",
+        required: true,
+        pattern: "0[1-9]|1[012]",
+        placeholder: "MM",
+        data: {
+          stripe: "exp_month",
+          message: "Please enter a valid expiration month."
+        }
+      },
+
+      card_year: {
+        type: "text",
+        required: true,
+        pattern: "[0-9]{4}",
+        placeholder: "YYYY",
+        data: {
+          stripe: "exp_year",
+          message: "Please enter a valid expiration year."
+        }
+      },
+
+      card_cvc: {
+        type: "text",
+        required: true,
+        pattern: "[0-9]{3,4}",
+        data: {
+          stripe: "cvc",
+          message: "Please enter a valid security code."
+        }
+      },
+
+      select_country: {
+        country_options: {
+          include_blank: "Select a country",
+          priority_countries: ["US", "GB", "CA"],
+        },
+
+        html_options: {}
+      }
+    }
+
+    # Country select
+    def select_country_tag(name, options = {}, country_options = {})
+      country_options.reverse_merge! INPUT_OPTIONS[:select_country][:country_options]
+
+      options = INPUT_OPTIONS[:select_country][:html_options].deep_merge options
+
+      content_tag(:label) do
+        country_select :user, :country, country_options, options
+      end
+    end
+
+    # Email inputs
+    def email_input_tag(name, value = nil, options = {})
+      base_input_tag(name, value, options, :email)
+    end
+
+    # Passowrd inputs
+    def password_input_tag(name, value = nil, options = {})
+      base_input_tag(name, value, options, :password)
+    end
+
+    def text_input_tag(name, value = nil, options = {})
+      base_input_tag(name, value, options, :text)
+    end
+
+    def card_number_tag(name, value=nil, options={})
+      base_input_tag(name, value, options, :card_number)
+    end
+
+    def card_month_tag(name, value=nil, options={})
+      base_input_tag(name, value, options, :card_month)
+    end
+
+    def card_year_tag(name, value=nil, options={})
+      base_input_tag(name, value, options, :card_year)
+    end
+
+    def card_cvc_tag(name, value=nil, options={})
+      base_input_tag(name, value, options, :card_cvc)
+    end
+
+    private
+
+    def base_input_tag(name, value, options, type)
+      if value.is_a? Hash
+        options = value
+        value = nil
+      end
+
+      options = (INPUT_OPTIONS[type]||{}).deep_merge options
+
+      label = options.delete(:label)
+      tag = text_field_tag(name, value, options)
+
+      if label
+        options[:placeholder] = label
+
+        content_tag(:label) do
+          tag + content_tag(:span) { label }
+        end
+      else
+        tag
+      end
+
+    end
+  end
+end

data/app/views/layouts/ratchet/default.html.slim

@@ -20,7 +20,8 @@ html
     meta name="viewport" content="width=device-width, initial-scale=1.0"
 
     / Favicon
-    = favicon_tag sizes: "32x32"
+    - if content_for?(:favicon)
+        = yield :favicon
 
     / Ratchet core JS
     = javascript_tag "core"

data/app/views/shared/ratchet/_footer.html.slim

@@ -1,2 +1,2 @@
 footer role="contentinfo"
-  p © #{Time.now.year} Compose
+  p © #{Time.now.year} #{Site.name}

data/lib/ratchet_design/version.rb

@@ -1,3 +1,3 @@
 module RatchetDesign
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

data/lib/ratchet_design.rb

@@ -1,4 +1,5 @@
 require "cyborg"
+require "country_select"
 require "ratchet_design/version"
 
 module RatchetDesign