tungsten 0.1.4 → 0.1.5

data/app/helpers/tungsten/form_helper.rb

@@ -417,7 +417,10 @@ module Tungsten
       tag = capture(&block).html_safe
 
       tick = content_tag(:span, class: 'tick') {''}
-      label = content_tag(:span, class: 'label-text') { options.delete(:label) || name }
+
+      classnames = ['label-text']
+      classnames << 'hidden' if options.delete(:hidden_label)
+      label = content_tag(:span, class: classnames.join(' ')) { options.delete(:label) || name }
 
       options[:class] ||= ' '
       options[:class] << "#{label_class( options.delete(:type) )} tick-box"
@@ -468,7 +471,7 @@ module Tungsten
       if labels = options['external_labels']
         if labels.is_a?(Hash)
           labels.each do |label, value|
-            l = label.to_s.downcase.dasherize
+            l = dasherize(label.to_s.downcase)
             data['external-label-'+l] = value.join(';')
           end
         end
@@ -511,6 +514,11 @@ module Tungsten
       html_options = {"class" => classnames, "type" => "range", "min" => options['min'], "max" => options['max'], "value" => options['value'] }.update('data' => data)
       tag :input, html_options
     end
+
+    def dasherize(input)
+      input.gsub(/[\W,_]/, '-').gsub(/-{2,}/, '-')
+    end
+
     alias :range_input_tag :slider_input_tag
   end
 end

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.4"
+  VERSION = "0.1.5"
 end

data/public/{code-0.1.4.js → code-0.1.5.js}

@@ -89,4 +89,4 @@ function move(o){document.documentElement.scrollTop=o,document.body.parentNode.s
 });
 
 
-//# sourceMappingURL=/assets/tungsten/code-0.1.4.map.json
+//# sourceMappingURL=/assets/tungsten/code-0.1.5.map.json

data/public/{tungsten-0.1.4.css → tungsten-0.1.5.css}

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .white-text {
   color: #fff; }
 
@@ -739,15 +740,15 @@ table.ruled tfoot th, table.ruled tbody tr:nth-child(n+2) th, table.ruled tbody
 table.ruled thead th {
   border-bottom: 1px solid #dfe3e6; }
 
-table.outlined {
+table.outlined, table.doc-table {
   border-collapse: collapse; }
-table.outlined td, table.outlined th {
+table.outlined td, table.outlined th, table.doc-table td, table.doc-table th {
   border: 1px solid #dfe3e6; }
 
 table.striped tbody tr:nth-child(2n+1) th, table.striped tbody tr:nth-child(2n+1) td {
   background: #f0f3f6; }
 
-table.stretched {
+table.stretched, table.doc-table {
   table-layout: fixed;
   min-width: 100%; }
 
@@ -781,13 +782,13 @@ table.filled th:last-child, table.filled td:last-child {
   text-align: center;
   text-decoration: none;
   border: 0;
-  padding: 12px 15px;
+  padding: 8px 12px;
   background: #fff;
   border-radius: 2px;
   -webkit-transition: color 0.25s, background 0.25s, box-shadow 0.25s;
   transition: color 0.25s, background 0.25s, box-shadow 0.25s; }
-table .button, .card .button, .button-group .button, .button.small {
-  padding: 8px 12px; }
+.button.large {
+  padding: 12px 15px; }
 .button, .button:visited {
   color: inherit;
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.1), 0 1px 3px rgba(15, 33, 46, 0.15); }
@@ -1325,7 +1326,7 @@ form.button_to {
   pointer-events: none;
   font-size: inherit;
   position: absolute;
-  top: 0.9em;
+  top: 0.8em;
   left: 0.8em;
   padding: 1px 0 0 1px;
   -webkit-transform-origin: left top 0;
@@ -1352,7 +1353,8 @@ label.tick-box {
           flex-direction: row;
   -webkit-box-align: center;
       -ms-flex-align: center;
-          align-items: center; }
+          align-items: center;
+  cursor: pointer; }
 label.tick-box *, label.tick-box *:after, label.tick-box *:before {
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
           transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@@ -1474,11 +1476,11 @@ label.tick-box input[type=checkbox]:focus:checked + .tick:before, label.tick-box
   color: transparent;
   font-size: 0; }
 .check-switch-panel {
-  width: 44px;
-  height: 24px;
+  width: 40px;
+  height: 22px;
   background: rgba(15, 33, 46, 0.1);
   position: relative;
-  border-radius: 24px;
+  border-radius: 22px;
   -webkit-transition-property: background, box-shadow, border-color;
   transition-property: background, box-shadow, border-color;
   box-shadow: 0 0 0 1px rgba(15, 33, 46, 0.1) inset, 0 0 0 transparent; }
@@ -1487,9 +1489,9 @@ label.tick-box input[type=checkbox]:focus:checked + .tick:before, label.tick-box
   height: 18px;
   background: #fff;
   position: absolute;
-  bottom: 3px;
-  left: 4px;
-  border-radius: 24px;
+  bottom: 2px;
+  left: 2px;
+  border-radius: 22px;
   -webkit-transition-property: -webkit-transform;
   transition-property: -webkit-transform;
   transition-property: transform;
@@ -1503,6 +1505,9 @@ label.tick-box input[type=checkbox]:focus:checked + .tick:before, label.tick-box
   position: absolute; }
 .check-switch input:focus ~ .check-switch-panel, .check-switch input:hover:not([disabled]) ~ .check-switch-panel, .check-switch input:active ~ .check-switch-panel {
   background: rgba(15, 33, 46, 0.2); }
+.check-switch input:focus ~ .check-switch-panel .check-switch-tick, .check-switch input:hover:not([disabled]) ~ .check-switch-panel .check-switch-tick, .check-switch input:active ~ .check-switch-panel .check-switch-tick {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1); }
 input:checked + .check-switch-panel .check-switch-tick {
   -webkit-transform: translate3d(18px, 0, 0);
           transform: translate3d(18px, 0, 0); }
@@ -1511,6 +1516,9 @@ input:checked + .check-switch-panel {
 .check-switch input:checked:focus ~ .check-switch-panel, .check-switch input:checked:hover:not([disabled]) ~ .check-switch-panel, .check-switch input:checked:active ~ .check-switch-panel {
   background: #008ef3;
   box-shadow: 0 0 0 1px #006dff inset, 0 0 0 transparent; }
+.check-switch input:checked:focus ~ .check-switch-panel .check-switch-tick, .check-switch input:checked:hover:not([disabled]) ~ .check-switch-panel .check-switch-tick, .check-switch input:checked:active ~ .check-switch-panel .check-switch-tick {
+  -webkit-transform: scale(1.1) translate3d(16px, 0, 0);
+          transform: scale(1.1) translate3d(16px, 0, 0); }
 
 label.valid {
   color: #2ac84f; }
@@ -1576,3 +1584,386 @@ label.invalid input:focus, label.invalid input:hover:not([disabled]), label.inva
   background: #8c9ba5; }
 .invalid .validation-message .validation-message-text {
   background: #dd2f41; }
+
+.empty-label[data-slider-label] {
+  display: none; }
+
+input[type=range] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  margin: 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 4;
+  height: 16px;
+  background: transparent; }
+input[type=range]:focus {
+  outline: none; }
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none; }
+input[type=range]::-moz-slider-thumb {
+  -moz-appearance: none; }
+input[type=range]::-ms-track {
+  width: 100%;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent; }
+input[type=range]::-moz-focus-outer {
+  border: 0; }
+input[type=range]::-moz-range-track {
+  border: inherit;
+  background: transparent; }
+input[type=range]::-moz-range-thumb {
+  box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.4) 0 1px 1px inset;
+  border: 6px solid #fff;
+  background: rgba(15, 33, 46, 0.2);
+  box-sizing: border-box;
+  height: 19px;
+  width: 19px;
+  border-radius: 100%;
+  position: relative;
+  top: 3px;
+  -webkit-transition: all .15s ease-in;
+  transition: all .15s ease-in; }
+input[type=range]::-moz-range-thumb:after {
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  left: -15px;
+  right: -15px;
+  top: -15px;
+  bottom: -15px; }
+input[type=range]::-moz-range-thumb:active {
+  background: #5aaafa;
+  box-shadow: 0 0 2px 2px #5aaafa, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.4) 0 1px 1px inset;
+  border: 6px solid #fff;
+  background: rgba(15, 33, 46, 0.2);
+  box-sizing: border-box;
+  height: 19px;
+  width: 19px;
+  border-radius: 100%;
+  position: relative;
+  top: 3px;
+  -webkit-transition: all .15s ease-in;
+  transition: all .15s ease-in; }
+input[type=range]::-webkit-slider-thumb:after {
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  left: -15px;
+  right: -15px;
+  top: -15px;
+  bottom: -15px; }
+input[type=range]::-webkit-slider-thumb:active {
+  background: #5aaafa;
+  box-shadow: 0 0 2px 2px #5aaafa, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
+input[type=range]::-ms-thumb {
+  box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.4) 0 1px 1px inset;
+  border: 6px solid #fff;
+  background: rgba(15, 33, 46, 0.2);
+  box-sizing: border-box;
+  height: 19px;
+  width: 19px;
+  border-radius: 100%;
+  position: relative;
+  top: 3px;
+  -webkit-transition: all .15s ease-in;
+  transition: all .15s ease-in; }
+input[type=range]::-ms-thumb:after {
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  left: -15px;
+  right: -15px;
+  top: -15px;
+  bottom: -15px; }
+input[type=range]::-ms-thumb:active {
+  background: #5aaafa;
+  box-shadow: 0 0 2px 2px #5aaafa, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
+input[type=range]:focus::-moz-range-thumb {
+  background: #5aaafa;
+  box-shadow: 0 0 2px 2px #5aaafa, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
+input[type=range]:focus::-webkit-slider-thumb {
+  background: #5aaafa;
+  box-shadow: 0 0 2px 2px #5aaafa, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
+input[type=range]:focus::-ms-thumb {
+  background: #5aaafa;
+  box-shadow: 0 0 2px 2px #5aaafa, rgba(0, 0, 0, 0.4) 0 1px 1px inset; }
+input[type=range]:after {
+  position: absolute;
+  content: "";
+  left: 4px;
+  right: 4px;
+  top: 6px;
+  height: 5px;
+  background: #f5f7fa;
+  z-index: -1;
+  border-radius: 4px;
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px; }
+input[type=range]::-moz-slider-track {
+  height: 16px;
+  background: transparent; }
+input[type=range]::-moz-slider-track:after {
+  position: absolute;
+  content: "";
+  left: 4px;
+  right: 4px;
+  top: 6px;
+  height: 5px;
+  background: #f5f7fa;
+  z-index: -1;
+  border-radius: 4px;
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px; }
+input[type=range]::-ms-track {
+  height: 16px;
+  background: transparent; }
+input[type=range]::-ms-track:after {
+  position: absolute;
+  content: "";
+  left: 4px;
+  right: 4px;
+  top: 6px;
+  height: 5px;
+  background: #f5f7fa;
+  z-index: -1;
+  border-radius: 4px;
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px; }
+input[type=range].slider-input {
+  margin: 0; }
+input[type=range].slider-input:after {
+  display: none; }
+input[type=range].slider-input::-moz-slider-track:after {
+  display: none; }
+input[type=range].slider-input::-ms-track:after {
+  display: none; }
+
+input::-moz-focus-inner {
+  border: 0; }
+
+.slider-container {
+  position: relative;
+  padding: .5em 0; }
+@media all and (min-width: 400px) {
+  .slider-container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .slider-container.with-label {
+    max-width: 320px; } }
+.slider-container.line-labels {
+  padding: vr(1) 0 0; }
+
+.slider-input-container {
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+  /*margin: .6em 0;*/ }
+
+.slider-track {
+  height: 0px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin: 0 10px 0 9px;
+  position: relative;
+  top: -12px; }
+
+.slider-segment {
+  position: relative; }
+
+.slider-segment-mark:before, .slider-segment-mark:after {
+  position: absolute;
+  content: "";
+  width: 13px;
+  height: 13px;
+  top: -4px;
+  left: -5px;
+  box-sizing: border-box;
+  border-radius: 100%; }
+.slider-segment-mark:before {
+  background: #fff;
+  border: #f5f7fa 3px solid;
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px inset;
+  z-index: 3; }
+.slider-segment-mark:after {
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px;
+  z-index: 0; }
+
+.slider-fills {
+  position: absolute;
+  left: 9px;
+  right: 10px;
+  top: 9px;
+  height: 5px;
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex; }
+
+.slider-fill {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  height: 5px;
+  position: relative;
+  box-sizing: border-box;
+  background: #f5f7fa;
+  border-left: 1px solid transparent;
+  border-right: 1px solid rgba(15, 33, 46, 0.2); }
+.slider-fill:before {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px;
+  z-index: -1; }
+.slider-fill:first-child {
+  border-left: 1px solid rgba(15, 33, 46, 0.2); }
+.slider-fill:first-child, .slider-fill:first-child:before {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px; }
+.slider-fill:first-child:before {
+  left: 0px; }
+.slider-fill:last-child, .slider-fill:last-child:before {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px; }
+.slider-fill:last-child:before {
+  right: 0px; }
+
+.slider-input.no-segments ~ .slider-fills .slider-fill, .slider-input[max='100'] ~ .slider-fills .slider-fill {
+  border-right: 0; }
+
+.slider-line-label {
+  position: absolute;
+  white-space: nowrap;
+  font-size: 12px;
+  z-index: 3;
+  height: 1.25;
+  top: -28px;
+  right: -30px;
+  left: -28px;
+  text-align: center; }
+
+.slider-segment:first-child .slider-line-label {
+  left: -9px;
+  right: auto;
+  text-align: left; }
+.slider-segment:first-child .slider-line-label:before {
+  left: 8px; }
+
+.slider-segment:last-child .slider-line-label {
+  right: -11px;
+  left: auto;
+  text-align: right; }
+.slider-segment:last-child .slider-line-label:before {
+  right: 9px; }
+
+.slider-label {
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: rgba(15, 33, 46, 0.2) 0 0 0 1px;
+  font-size: 14px;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center; }
+@media all and (min-width: 400px) {
+  .slider-label {
+    white-space: nowrap;
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translatey(-50%);
+            transform: translatey(-50%);
+    -webkit-transform-style: preserve-3d;
+            transform-style: preserve-3d; }
+  .slider-label:after, .slider-label:before {
+    content: ""; } }
+.slider-label:after, .slider-label:before {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 50%;
+  -webkit-transform: translatey(-50%);
+          transform: translatey(-50%);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent; }
+.slider-label > * + *:before {
+  content: " — "; }
+@media all and (min-width: 400px) {
+  .slider-label > * + * {
+    display: block; }
+  .slider-label > * + *:before {
+    content: ""; } }
+.slider-label [class*=big] {
+  font-size: 1.15em; }
+.slider-label [class*=small] {
+  font-size: .8em; }
+
+[data-slider-label]:after {
+  content: attr(data-after); }
+[data-slider-label]:before {
+  content: attr(data-before); }
+
+@media all and (min-width: 400px) {
+  .slider-label.align-right {
+    margin-left: 10px;
+    left: 100%;
+    text-align: left; } }
+.slider-label.align-right:before, .slider-label.align-right:after {
+  left: -7px;
+  border-right: 7px solid rgba(15, 33, 46, 0.2); }
+.slider-label.align-right:after {
+  border-right-color: #fff;
+  left: -6px; }
+
+@media all and (min-width: 400px) {
+  .slider-label.align-left {
+    margin-right: 10px;
+    right: 100%;
+    text-align: right; } }
+.slider-label.align-left:before, .slider-label.align-left:after {
+  right: -7px;
+  border-top: 7px solid transparent;
+  border-left: 7px solid rgba(15, 33, 46, 0.2);
+  border-bottom: 7px solid transparent; }
+.slider-label.align-left:after {
+  border-left-color: #fff;
+  right: -6px; }
+
+.slider-input.fill ~ .slider-fills .slider-fill[data-index].filled {
+  background: #5aaafa;
+  border-right-color: #1f8bf8; }
+.slider-input.fill ~ .slider-fills .slider-fill[data-index].filled:first-child {
+  border-left-color: #1f8bf8; }
+.slider-input.fill ~ .slider-fills .slider-fill[data-index].filled:before {
+  box-shadow: #1f8bf8 0 0 0 1px; }
+.slider-input.fill ~ .slider-track .filled .slider-segment-mark[data-index]:before {
+  border-color: #5aaafa;
+  box-shadow: #1f8bf8 0 0 0 1px inset; }
+.slider-input.fill ~ .slider-track .filled .slider-segment-mark[data-index]:after {
+  box-shadow: #1f8bf8 0 0 0 1px; }