tungsten 0.1.16 → 0.1.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2ab6f396a5376f121a115d097cb538040ab4eef5
-  data.tar.gz: 74eb6fafd135a1901fe34aed02f77c06e39c79a1
+  metadata.gz: 329f8efbe917b13ad6a9dd0905d7afb167be3d82
+  data.tar.gz: 7dc93e12d1a22c612d3ea79742ce99787b72f2f6
 SHA512:
-  metadata.gz: 4a38745041cbaf5df3d39a536f7de23ac94160a2fcace927a73638a7a1c3c7c2d3516256df54aedcf09fdf4216087574f097a171e179ba2c03efbbc20240bbac
-  data.tar.gz: 1568758094ebba7c308400d0bd4ca299661f4e76832544794182e35a61e8289b98c670695490c133f00ef40deeb854f52b1161f1fea91be6ad9c972b2592a152
+  metadata.gz: fb1c49ab62f7a3ea7a4f1f354b602b3791c62cdcccbab9d9a478d7dd7ce0f240be9bb7cc6f16a73b6af27d2cf21055dea93f4251725bf65aae54484abe05e6b1
+  data.tar.gz: ae18d0137dac13386f774285e05adb9cbcf2986af0e4263dddfd84ee3fb1515ef113c7840a5ac5d9b650870d695f210e4156327f6edfb7b41cee3a7b581af701

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

@@ -2,5 +2,6 @@
 @import 'colors.yml';
 @import 'core/index';
 @import 'code/index';
-@import 'form/index';
 @import 'pages/index';
+@import 'form/index';
+@import 'components/index';

data/app/assets/stylesheets/tungsten/{core → components}/_buttons.scss

@@ -13,6 +13,7 @@
   width: auto;
   line-height: 1;
   font-size: 14px;
+  white-space: nowrap;
   font-weight: 500;
   text-align: center;
   text-decoration: none;

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

@@ -0,0 +1,5 @@
+@import 'tables';
+@import 'buttons';
+@import 'badges';
+@import 'cards';
+@import 'tooltip';

data/app/assets/stylesheets/tungsten/components/_tooltip.scss

@@ -0,0 +1,38 @@
+.has-tooltip:hover {
+  position: relative;
+  &:before, &:after {
+    opacity: 0;
+    position: absolute;
+    left: 50%;
+    transform: translate3d(-50%, 0, 0);
+    z-index: 100000;
+    pointer-events: none;
+  }
+  &:after {
+    -webkit-font-smoothing: subpixel-antialiased;
+    top: calc(100% + 6px);
+    transform: translateX(-50%);
+    background: rgba(#000, 0.8);
+    display: inline-block;
+    color: #fff;
+    white-space: nowrap;
+    font-size: 11px;
+    line-height: 1.5em;
+    padding: 5px 8px;
+    border-radius: $radius;
+  }
+  &:before {
+    top: 100%;
+    @include triangle(up, rgba(#000, 0.8), 6px);
+  }
+
+  &:hover, &:focus {
+    &:after { content: attr(aria-label); }
+    &:before { content: ""; }
+    &:before, &:after {
+      animation: fade-in .1s ease-in;
+      animation-fill-mode: forwards;
+      animation-delay: .4s;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}

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

@@ -71,7 +71,7 @@ $block-elements: p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table, '.card';
 $text-inputs: 'input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
 
 // Border radius
-$radius: 2px;
+$radius: 3px;
 
 // Card padding
 $card-padding: 20px;
@@ -162,6 +162,32 @@ $header-height: 84px;
   }
 }
 
+@mixin triangle($direction, $color, $size) {
+  @if $direction == left {
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == right {
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    border-top: $size solid transparent;
+  }
+  @else if $direction == up {
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+  @else if $direction == down {
+    border-right: $size solid transparent;
+    border-left: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  height: 0;
+  width: 0;
+}
+
 // Between widths media query mixin
 @mixin between($small-width, $large-width) {
   $large-width: $large-width - 1;

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

@@ -3,9 +3,6 @@
 @import 'grid';
 @import 'layout';
 @import 'text';
-@import 'tables';
-@import 'buttons';
-@import 'badges';
-@import 'cards';
 @import 'sections';
 @import 'navigation';
+@import 'animations';

data/app/helpers/tungsten/button_helper.rb

@@ -18,7 +18,8 @@ module Tungsten
         data: options.delete(:data),
         class: options.delete(:class),
         disabled: options.delete(:disabled),
-        type: options.delete(:type) || 'button'
+        type: options.delete(:type) || 'button',
+        'aria-label'=> options.delete(:aria_label)
       }
 
       button_options[:href] = options[:href] if options[:href]
@@ -62,6 +63,16 @@ module Tungsten
       button(text, options, &block)
     end
 
+    def copy_button(text, target, options={}, &block)
+      options[:aria_label] ||= "Copy to clipboard"
+      options[:class] = "#{options[:class]} has-tooltip".strip
+
+      options[:data] ||= {}
+      options[:data][:copy_target] = target
+
+      button(text, options, &block)
+    end
+
     def button_classes(options)
       classes = ['button']
       classes << options[:class]

data/app/views/tungsten/errors/not_found.html.slim

@@ -2,4 +2,4 @@
   .error-svgs= error_code_svg @status_code
 .error-message
   h1 Page Not Found
-  p Regretably, this page does not exist.
+  p Regrettably, this page does not exist.

data/lib/tungsten/version.rb

@@ -1,3 +1,3 @@
 module Tungsten
-  VERSION = "0.1.16"
+  VERSION = "0.1.17"
 end

data/public/{code-0.1.16.js → code-0.1.17.js}

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