tungsten 0.1.4 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 07bfda293e824feb27c190817e7d60cfdf1fd609
-  data.tar.gz: 840878d34d7b88813ec69594d9507257abb1c88f
+  metadata.gz: f909f0937328ef9672199c895d0616a2260947f9
+  data.tar.gz: 775474c2bb1a15328c9fcb4c0d82cc5e60d6fde1
 SHA512:
-  metadata.gz: e076c8150b263124efadde7d9f99c8703c15e31a9c71a198fea3af4ad13a6fb79310163fbc4b96aa497333558a277a863da4c646bac0b20a1ea5c4cf3b8394b3
-  data.tar.gz: 252fd49f940be51a1ae30362dc63a0f4a90509f6d8cea20edb10a968d1f57f6b3998269aac18d63280edc982b2cb18251f64b07adc4e9a6a78b5fed7dd49fd42
+  metadata.gz: ece4c95ab1394b3dfff54e19514f92e48148e440b2d4db81d20f1ccb7ccaca658ef3dc62147338ecf0baf49e10ff481b933f873c070702a2fd9f6a3dbdf540e2
+  data.tar.gz: 0a05cd1a62943c91ea59368940c5a2309e2a593ba9a4a0d983b4483c2776024a1a651be0de749ad65994d3be52926a1c869a70d800810ea8268e3ef027a1b486

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

@@ -17,7 +17,7 @@
   text-align: center;
   text-decoration: none;
   border: 0;
-  padding: 12px 15px;
+  padding: 8px 12px;
   background: $white;
   border-radius: $radius;
   transition:
@@ -25,12 +25,9 @@
     background $duration,
     box-shadow $duration;
 
-  // Smaller padding in tight contexts
-  table &,
-  .card &,
-  .button-group &,
-  &.small {
-    padding: 8px 12px;
+  // Make it bigger ¯\_(ツ)_/¯
+  &.large {
+    padding: 12px 15px;
   }
 
   // Normal state
@@ -146,4 +143,4 @@
 // Siblings need their space
 // .button + .button {
 //   margin-left: 10px;
-// }
+// }

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

@@ -43,7 +43,7 @@ table.ruled {
 }
 
 // Outlined cells
-table.outlined {
+table.outlined, table.doc-table {
   border-collapse: collapse;
   td,
   th {
@@ -60,7 +60,7 @@ table.striped {
 }
 
 // Equal-width columns
-table.stretched {
+table.stretched, table.doc-table {
   table-layout: fixed;
   min-width: 100%;
 }
@@ -78,4 +78,4 @@ table.filled {
   td:last-child {
     width: 99%;
   }
-}
+}

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

@@ -1,6 +1,7 @@
 label.tick-box {
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
 
   // Bounce a little :)
   *, *:after, *:before {

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

@@ -1,7 +1,7 @@
 .check-switch {
-  $width: 44px;
-  $height: 24px;
-  $tick-width: $width/2 - 4;
+  $width: 40px;
+  $height: 22px;
+  $tick-width: $width/2 - 2;
   cursor: pointer;
   flex-direction: row; align-items: center;
 
@@ -30,11 +30,11 @@
 
   &-tick {
     width: $tick-width;
-    height: $height - 6;
+    height: $height - 4;
     background: $white;
     position: absolute;
-    bottom: 3px;
-    left: 4px;
+    bottom: 2px;
+    left: 2px;
     border-radius: $height;
     transition-property: transform;
     transform: translate3d( 0, 0, 0 );
@@ -50,10 +50,12 @@
       ~ .check-switch-panel {
         background: rgba( $gray-11, .2 );
       }
+      ~ .check-switch-panel .check-switch-tick {
+        transform: scale(1.1);
+      }
     }
   }
 
-
   input:checked + &-panel &-tick {
     transform: translate3d( $tick-width , 0, 0 );
   }
@@ -66,7 +68,9 @@
         background: darken( $blue-03, 2 );
         box-shadow: input-shadow( $blue-04 );
       }
+      ~ .check-switch-panel .check-switch-tick {
+        transform: scale(1.1) translate3d( $tick-width - 2 , 0, 0 );
+      }
     }
   }
-
 }

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

@@ -3,3 +3,4 @@
 @import 'check-radio';
 @import 'check-switch';
 @import 'validation';
+@import 'slider';

data/app/assets/stylesheets/tungsten/form/_label-placeholder.scss

@@ -71,7 +71,7 @@
     pointer-events: none;
     font-size: inherit;
     position: absolute;
-    top: ($padding-y / 2);
+    top: ($padding-y / 2) - .1;
     left: $padding-x;
     padding: 1px 0 0 1px;
     transform-origin: left top 0;

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

@@ -0,0 +1,387 @@
+$slider-track: $gray-02;
+$slider-track-line: rgba( $gray-11, .2 );
+$slider-mark: $white;
+$slider-active: $blue-01;//hsl(203, 47%, 65%);
+
+@mixin slider-fill-theme($color, $class: 'fill', $index: '') {
+  $threshold: 8;
+
+  @if $index == '' {
+    $index: 'data-index';
+  } @else {
+    $index: 'data-index="#{$index}"';
+  }
+
+  .slider-input.#{$class} {
+    ~ .slider-fills {
+      .slider-fill[#{$index}].filled {
+        background: $color;
+        border-right-color: darken($color, 12);
+        &:first-child {
+          border-left-color: darken($color, 12);
+        }
+        &:before {
+          box-shadow: darken($color, 12) 0 0 0 1px;
+        }
+      }
+    }
+
+     ~ .slider-track {
+      .filled .slider-segment-mark[#{$index}] {
+        &:before {
+          border-color: $color;
+          box-shadow: darken($color, 12) 0 0 0 1px inset;
+        }
+        &:after {
+          box-shadow: darken($color, 12) 0 0 0 1px;
+        }
+      }
+    }
+  }
+}
+
+
+@mixin reset-slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  margin: 0;
+  cursor: pointer;
+  &:focus { outline: none; }
+  &::-webkit-slider-thumb { -webkit-appearance: none; }
+  &::-moz-slider-thumb { -moz-appearance: none; }
+  &::-ms-track {
+    width: 100%;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+  &::-moz-focus-outer { 
+    border: 0;
+  }
+  &::-moz-range-track {
+    border: inherit;
+    background: transparent;
+  }
+}
+
+@mixin slider-thumb {
+  &::-moz-range-thumb     { @content; }
+  &::-webkit-slider-thumb { @content; }
+  &::-ms-thumb            { @content; }
+}
+
+@mixin slider-track {
+  @content;
+  &::-moz-slider-track {
+    @content;
+  }
+  &::-ms-track {
+    @content;
+  }
+}
+
+.empty-label[data-slider-label] {
+  display: none;
+}
+
+input[type=range] {
+  @include reset-slider;
+  position: relative;
+  z-index: 4;
+  
+  @include slider-thumb {
+    box-shadow: rgba(#000, .4) 0 0 0 1px, rgba(#000, .4) 0 1px 1px inset;
+    border: 6px solid #fff;
+    background: $slider-track-line;
+    box-sizing: border-box;
+    height: 19px;
+    width: 19px;
+    border-radius: 100%;
+    position: relative;
+    top: 3px;
+    transition: all .15s ease-in;
+    &:after {
+      box-sizing: border-box;
+      content: "";
+      position: absolute;
+      left: -15px; right: -15px; top: -15px; bottom: -15px;
+      
+    }
+    &:active {
+      background: $slider-active;//#409bd9;
+      box-shadow: 0 0 2px 2px $slider-active, rgba(#000, .4) 0 1px 1px inset;
+    }
+  }
+  
+  &:focus {
+    @include slider-thumb {
+      background: $slider-active;//#409bd9;
+      box-shadow: 0 0 2px 2px $slider-active, rgba(#000, .4) 0 1px 1px inset;
+    }
+  }
+  
+  @include slider-track {
+    height: 16px;
+    background: transparent;
+
+    &:after {
+      position: absolute;
+      content: "";
+      left: 4px; right: 4px; top: 6px;
+      height: 5px;
+      background: $slider-track;
+      z-index: -1;
+      border-radius: 4px;
+      box-shadow: $slider-track-line 0 0 0 1px;
+    }
+  }
+
+  &.slider-input {
+    margin: 0;
+
+    @include slider-track {
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+
+input::-moz-focus-inner { 
+  border: 0; 
+}
+
+.slider-container {
+  position: relative;
+  padding: .5em 0;
+
+  @include at-least(400px){
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    &.with-label {
+      max-width: 320px;
+    }
+  }
+
+  &.line-labels {
+    padding: vr(1) 0 0;
+  }
+}
+
+.slider-input-container {
+  position: relative;
+  flex: 1 0 auto;
+  /*margin: .6em 0;*/
+}
+
+.slider-track {
+  height: 0px;
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 0 10px 0 9px;
+  position: relative;
+  top: -12px;
+}
+
+.slider-segment {
+  position: relative;
+}
+
+.slider-segment-mark {
+  &:before, &:after {
+    position: absolute;
+    content: "";
+    width: 13px;
+    height: 13px;
+    top: -4px;
+    left: -5px;
+    box-sizing: border-box;
+    border-radius: 100%;
+  }
+  &:before {
+    background: $slider-mark;
+    border: $slider-track 3px solid;
+    box-shadow: $slider-track-line 0 0 0 1px inset;
+    z-index: 3;
+  }
+  &:after {
+    box-shadow: $slider-track-line 0 0 0 1px;
+    z-index: 0;
+  }
+}
+
+.slider-fills {
+  position: absolute;
+  left: 9px;
+  right: 10px;
+  top: 9px;
+  height: 5px;
+  z-index: 1;
+  display: flex;
+}
+
+.slider-fill {
+  flex-grow: 1;
+  height: 5px;
+  position: relative;
+  
+  box-sizing: border-box;
+  background: $slider-track;
+  border-left: 1px solid transparent;
+  border-right: 1px solid $slider-track-line;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0px; left: 0px; right: 0px; bottom: 0px;
+    box-shadow: $slider-track-line 0 0 0 1px;
+    z-index: -1;
+  }
+
+  &:first-child { 
+    border-left: 1px solid $slider-track-line;
+    &, &:before {
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+    &:before { left: 0px; }
+  }
+
+  &:last-child {
+    &, &:before {
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+    &:before { right: 0px; }
+  }
+
+}
+
+.slider-input.no-segments, .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;
+  &:before {
+    left: 8px;
+  }
+}
+
+.slider-segment:last-child .slider-line-label {
+  right: -11px;
+  left: auto;
+  text-align: right;
+  &:before {
+    right: 9px;
+  }
+}
+
+.slider-label {
+  background: $slider-mark;
+  border-radius: 3px;
+  box-shadow: $slider-track-line 0 0 0 1px;
+  font-size: 14px;
+  padding: 4px 8px;
+  position: relative;
+  text-align: center;
+
+  @include at-least(400px){
+    white-space: nowrap;
+    position: absolute;
+    top: 50%;
+    transform: translatey(-50%);
+    transform-style: preserve-3d;
+    &:after, &:before {
+      content: "";
+    }
+  }
+  
+  &:after, &:before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 50%;
+    transform: translatey(-50%);
+    transform-style: preserve-3d;
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+  }
+
+  > * + * {
+    &:before { content: " — " }
+
+    @include at-least(400px) {
+      display: block;
+      &:before { content: ""; }
+    }
+  }
+
+  [class*=big] {
+    font-size: 1.15em;
+  }
+
+  [class*=small] {
+    font-size: .8em;
+  }
+}
+
+[data-slider-label] {
+  &:after { content: attr(data-after); }
+  &:before { content: attr(data-before); }
+}
+
+.slider-label.align-right {
+  @include at-least(400px) {
+    margin-left: 10px;
+    left: 100%;
+    text-align: left;
+  }
+  &:before, &:after {
+    left: -7px;
+    border-right: 7px solid $slider-track-line;
+  }
+  &:after {
+    border-right-color: $slider-mark;
+    left: -6px;
+  }
+}
+
+.slider-label.align-left {
+  @include at-least(400px) {
+    margin-right: 10px;
+    right: 100%;
+    text-align: right;
+  }
+  &:before, &:after {
+    right: -7px;
+    border-top: 7px solid transparent;
+    border-left: 7px solid $slider-track-line;
+    border-bottom: 7px solid transparent;
+  }
+  &:after {
+    border-left-color: $slider-mark;
+    right: -6px;
+  }
+}
+
+@include slider-fill-theme($slider-active, 'fill');