myg 2.9.0 → 2.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb17af5bbbc1e1b865e000c8099c716ff992b651250b4403957ebe3e9a83c679
-  data.tar.gz: c99b18a42e3a793a0328835da730745fdc1d1c388a2a6b7026d3415bc4714ed3
+  metadata.gz: 4eecc6e83a49f0bd0650c6387e64b1a7a8b6398f6a32377e3bc74066aff36937
+  data.tar.gz: 51b17c34d0d68565eaeb7f9e1a4b9d7a2eb6306ca16f2f0e83ab2bc7fdafd156
 SHA512:
-  metadata.gz: e4070d42c085a9ff1cf201decc487a099ad8a6c476be0842f68a108405d413260a87f1fe7639372a37ec6c26104747eaa4a56b817d8db368f79de290fe869549
-  data.tar.gz: 4f1721cdff5ee79322889ddc7937985be3a5aa325061fd798aacf8351f752835d6555d69a76bbddb0e365b0140ef41a32ee22f130b7ebd56400878b68432ce87
+  metadata.gz: 6b8a80a79943865ca3adf30ee79ed19448e0ce131c525bde0ac61b08b8f74a9a45df384c62a862d5b8efb8b12ad5df798e43d25d74d9a99bf9f7f540241dfbfc
+  data.tar.gz: 03e40b9c3d1a48cda1aba64b697c666113b276ead5908de8ddfa5182f17c5a7e7a08474c9ff27c1191c07072851034c0a040d430b2fb33e7ad92822e958b3568

data/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 * nothing yet
 
+### 2.10.0 - 2018/05/18
+
+* features
+    * update to Myg 0.13.0
+
 ### 2.9.0 - 2018/04/16
 
 * features

data/app/views/mozaic/myg/_form-field.html.erb

@@ -1,5 +1,5 @@
 <% wrapper_html = {
-    class: ['myg-form-field', ('myg-form-field--inline-label' if options[:inline_label]), ('myg-form-field--floating-label' if options[:floating_label]), ('myg-form-field--file' if options[:file]), options.dig(:wrapper_html, :class)].join(' ')
+    class: [('myg-form-field' unless options[:file]), ('-inline-label' if options[:inline_label]), ('-floating-label' if options[:floating_label]), ('myg-form-field--file' if options[:file]), options.dig(:wrapper_html, :class)].join(' ')
 } %>
 <% if options[:floating_label] %><% input_html = {
     class_name: options[:class_name],
@@ -39,7 +39,7 @@
         <% end %>
     <% end %>
     <% if options[:floating_label] %>
-        <%= content_tag 'div', class: 'myg-input--container' do %>
+        <%= content_tag 'div', class: 'myg-input__container' do %>
             <%= component "myg/#{options[:as]}", input_defaults.merge((options[:input_html] || {}).merge(input_html)) %>
             <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:floating_label] %><% end %>
         <% end %>

data/app/views/mozaic/myg/_tabs.html.erb

@@ -2,7 +2,7 @@
     class: ['myg-tabs mdc-tab-bar', options.dig(:nav_html, :class)].join(' ')
 } %>
 <% wrapper_html = {
-    class: ['myg-tabs--panels', options.dig(:wrapper_html, :class)].join(' ')
+    class: ['myg-tabs__panels', options.dig(:wrapper_html, :class)].join(' ')
 } %>
 
 <%= content_tag 'nav', (options[:nav_html] || {}).merge(nav_html) do %>
@@ -20,15 +20,15 @@
 <% end %>
 <%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
     <% if options[:async] %>
-        <div class="myg-tabs--loader">
+        <div class="myg-tabs__loader">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800&gt;n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length&gt;a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
         </div>
-        <div class="myg-tabs--panel" id="myg-tabs--panel-success" role="tabpanel" aria-hidden="true"><%= options.dig(:success, :content) || render(partial: options.dig(:success, :partial), locals: options.dig(:success, :partial_locals)) %></div>
-        <div class="myg-tabs--panel" id="myg-tabs--panel-error" role="tabpanel" aria-hidden="true"><%= block %></div>
+        <div class="myg-tabs__panel" id="myg-tabs__panel--success" role="tabpanel" aria-hidden="true"><%= options.dig(:success, :content) || render(partial: options.dig(:success, :partial), locals: options.dig(:success, :partial_locals)) %></div>
+        <div class="myg-tabs__panel" id="myg-tabs__panel--error" role="tabpanel" aria-hidden="true"><%= block %></div>
     <% else %>
         <% options[:tabs]&.each do |tab| %>
             <% panel_html = {
-                class: ['myg-tabs--panel', options.dig(:panel_html, :class), ('myg-tabs--shown' if tab[:active])].join(' '),
+                class: ['myg-tabs__panel', options.dig(:panel_html, :class), ('-shown' if tab[:active])].join(' '),
                 id: tab[:id] || tab[:name].underscore,
                 role: 'tabpanel',
                 aria: {

data/app/views/mozaic/myg/_textarea.html.erb

@@ -4,7 +4,7 @@
 <% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
 <% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
 <% html = {
-    class: ['myg-textarea', options[:class]].join(' '),
+    class: ['myg-input__textarea', options[:class]].join(' '),
     name: name,
     id: id
 } %>

data/lib/generators/templates/install/javascripts/index.js.erb

@@ -7,7 +7,6 @@ import './drawer';
 import './dropdown';
 import './footer';
 import './form-field';
-import './input';
 import './menu';
 import './modal';
 import './progress';

data/lib/generators/templates/install/stylesheets/_myg.sass

@@ -41,30 +41,37 @@
 // @import "myg-toolbar/toolbar"
 // @import "myg-tooltip/tooltip"
 //
-// +myg-animate--classes
-// +myg-base--classes
-// +myg-badge--classes
-// +myg-button--classes
-// +myg-card--classes
-// +myg-checkbox--classes
-// +myg-drawer--classes
-// +myg-dropdown--classes
-// +myg-elevation--classes
-// +myg-font--classes
-// +myg-footer--classes
-// +myg-form-field--classes
-// +myg-grid--classes
-// +myg-input--classes
-// +myg-label--classes
-// +myg-layout--classes
-// +myg-list--classes
-// +myg-progress--classes
-// +myg-radio--classes
-// +myg-switch--classes
-// +myg-tabs--classes
-// +myg-text--classes
-// +myg-theme--classes
-// +myg-titlebar--classes
-// +myg-toast--classes
-// +myg-toolbar--classes
-// +myg-tooltip--classes
+// +myg__classes--animate
+// +myg__classes--base
+// +myg__classes--badge
+// +myg__classes--button
+// +myg__classes--card
+// +myg__classes--checkbox
+// +myg__classes--drawer
+// +myg__classes--dropdown
+// +myg__classes--elevation
+// +myg__classes--font
+// +myg__classes--footer
+// +myg__classes--form-field
+// +myg__classes--grid
+// +myg__classes--hint
+// +myg__classes--input
+// +myg__classes--label
+// +myg__classes--layout
+// +myg__classes--list
+// +myg__classes--progress
+// +myg__classes--radio
+// +myg__classes--tabs
+// +myg__classes--switch
+// +myg__classes--text
+// +myg__classes--theme
+// +myg__classes--titlebar
+// +myg__classes--toast
+// +myg__classes--toolbar
+// +myg__classes--tooltip
+//
+// +myg__mappings--button
+// +myg__mappings--input
+// +myg__mappings--label
+// +myg__mappings--layout
+// +myg__mappings--text

data/lib/generators/templates/install/stylesheets/_variables.sass

@@ -3,7 +3,6 @@
 @import "variables/_action-button"
 @import "variables/_animate"
 @import "variables/_base"
-@import "variables/_elevation"
 @import "variables/_font"
 @import "variables/_footer"
 @import "variables/_grid"

data/lib/generators/templates/install/stylesheets/theme/_default.scss

@@ -20,7 +20,7 @@ $myg-theme: (
         darker: #ecf2f7
     ),
     border: #dce2e7,
-    box-shadow: rgba(#000, .05),
+    box-shadow: rgba(#000, .16),
     error: #f6809a,
     success: #6adb83,
     overlay: (

data/lib/generators/templates/install/stylesheets/theme/theme.sass

@@ -1,2 +1,2 @@
 html
-    // +theme($myg-theme--custom)
+    // +myg-theme($myg-theme--custom)

data/lib/generators/templates/install/stylesheets/variables/_action-button.scss

@@ -1,3 +1,3 @@
 $myg-action-button: (
-    diameter: px(50)
-) !default;
+    diameter: myg__px(50)
+);

data/lib/generators/templates/install/stylesheets/variables/_animate.scss

@@ -1,5 +1,4 @@
-// Animations
-$myg-animate: (
+$myg-animate__animation: (
     shake: (
         duration: .82s,
         easing: cubic-bezier(.36,.07,.19,.97) both
@@ -8,11 +7,10 @@ $myg-animate: (
         duration: 3s,
         easing: ease-in-out
     )
-) !default;
+);
 
 
-// Transitions
-$myg-animate--transitions: (
+$myg-animate__transition: (
     duration: .15s,
     easing: ease-out
-) !default;
+);

data/lib/generators/templates/install/stylesheets/variables/_base.scss

@@ -1,12 +1,10 @@
-// Base
 $myg-base: (
     font-size: 16,
     pwa-display-mode: standalone
-) !default;
+);
 
 
-// Cursor
-$myg--cursors: (
+$myg__cursor: (
     default: default,
     text: text,
     pointer: pointer,
@@ -14,5 +12,6 @@ $myg--cursors: (
     move: move,
     grab: grab,
     progress: progress,
-    wait: wait
-) !default;
+    wait: wait,
+    not-allowed: not-allowed
+);

data/lib/generators/templates/install/stylesheets/variables/_font.scss

@@ -1,7 +1,6 @@
-// Family
 $myg-font: (
     default: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"),
     sans-serif: ("Inter UI", "Helvetica Neue", sans-serif),
     serif: ("Freight Text Pro", "Georgia", serif),
     monospace: ("Inconsolata", "Roboto Mono", "Courier New", monospace)
-) !default;
+);

data/lib/generators/templates/install/stylesheets/variables/_footer.scss

@@ -1,3 +1,3 @@
 $myg-footer: (
-    min-height: px(25)
-) !default;
+    min-height: myg__px(25)
+);

data/lib/generators/templates/install/stylesheets/variables/_grid.scss

@@ -1,15 +1,15 @@
-// Breakpoints
-$myg-grid--breakpoints: (
+$myg-grid__breakpoints: (
     phone: 512px,
     tablet: 768px,
     laptop: 1024px,
     large: 1280px,
     desktop: 1920px
-) !default;
-$myg-grid--columns: (
+);
+
+$myg-grid__grid--default-columns: (
     phone: 4,
     tablet: 4,
     laptop: 8,
     large: 12,
     desktop: 12
-) !default;
+);

data/lib/generators/templates/install/stylesheets/variables/_layout.scss

@@ -1,5 +1,4 @@
-// Layout
 $myg-layout: (
-    toolbar-height: px(55),
-    sidebar-width: minmax(33%, px(400))
-) !default;
+    toolbar-height: myg__px(55),
+    sidebar-width: minmax(33%, myg__px(400))
+);

data/lib/generators/templates/install/stylesheets/variables/_spacing.scss

@@ -1,6 +1 @@
-$myg-spacing: (
-    tn: px(15),
-    sm: px(20),
-    md: px(30),
-    lg: px(50)
-) !default;
+$myg-spacing__factor: 5;

data/lib/generators/templates/install/stylesheets/variables/_text.scss

@@ -1,26 +1,23 @@
-// Text Size
-$myg-text--size: (
-    p: (sm: px(14), base: px(16), lg: px(18), bg: px(20)),
-    h1: (sm: px(36), base: px(48), lg: px(64), bg: px(74)),
-    h2: (sm: px(21), base: px(24), lg: px(30), bg: px(36)),
-    h3: (sm: px(18), base: px(21), lg: px(24), bg: px(30)),
-    h4: (sm: px(16), base: px(18), lg: px(21), bg: px(24)),
-    h5: (sm: px(14), base: px(16), lg: px(18), bg: px(21)),
-    h6: (sm: px(13), base: px(14), lg: px(16), bg: px(18))
-) !default;
-$myg-text--size-mobile: (
-    p: (sm: px(14), base: px(16), lg: px(18), bg: px(20)),
-    h1: (sm: px(30), base: px(36), lg: px(40), bg: px(48)),
-    h2: (sm: px(18), base: px(21), lg: px(24), bg: px(30)),
-    h3: (sm: px(16), base: px(18), lg: px(21), bg: px(24)),
-    h4: (sm: px(16), base: px(17), lg: px(18), bg: px(21)),
-    h5: (sm: px(15), base: px(16), lg: px(17), bg: px(18)),
-    h6: (sm: px(13), base: px(14), lg: px(15), bg: px(16))
-) !default;
+$myg-text__size: (
+    p: (sm: myg__px(14), base: myg__px(16), lg: myg__px(18), bg: myg__px(20)),
+    h1: (sm: myg__px(36), base: myg__px(48), lg: myg__px(64), bg: myg__px(74)),
+    h2: (sm: myg__px(21), base: myg__px(24), lg: myg__px(30), bg: myg__px(36)),
+    h3: (sm: myg__px(18), base: myg__px(21), lg: myg__px(24), bg: myg__px(30)),
+    h4: (sm: myg__px(16), base: myg__px(18), lg: myg__px(21), bg: myg__px(24)),
+    h5: (sm: myg__px(14), base: myg__px(16), lg: myg__px(18), bg: myg__px(21)),
+    h6: (sm: myg__px(13), base: myg__px(14), lg: myg__px(16), bg: myg__px(18))
+);
+$myg-text__size--mobile: (
+    p: (sm: myg__px(14), base: myg__px(16), lg: myg__px(18), bg: myg__px(20)),
+    h1: (sm: myg__px(30), base: myg__px(36), lg: myg__px(40), bg: myg__px(48)),
+    h2: (sm: myg__px(18), base: myg__px(21), lg: myg__px(24), bg: myg__px(30)),
+    h3: (sm: myg__px(16), base: myg__px(18), lg: myg__px(21), bg: myg__px(24)),
+    h4: (sm: myg__px(16), base: myg__px(17), lg: myg__px(18), bg: myg__px(21)),
+    h5: (sm: myg__px(15), base: myg__px(16), lg: myg__px(17), bg: myg__px(18)),
+    h6: (sm: myg__px(13), base: myg__px(14), lg: myg__px(15), bg: myg__px(16))
+);
 
-
-// Text Family
-$myg-text--family: (
+$myg-text__family: (
     p: sans-serif,
     h1: sans-serif,
     h2: sans-serif,
@@ -28,23 +25,19 @@ $myg-text--family: (
     h4: sans-serif,
     h5: sans-serif,
     h6: sans-serif
-) !default;
-
-
-// Text Color
-$myg-text--color: (
-    p: color(text, base),
-    h1: color(text, darker),
-    h2: color(text, darker),
-    h3: color(text, darker),
-    h4: color(text, darker),
-    h5: color(text, darker),
-    h6: color(text, darker)
-) !default;
+);
 
+$myg-text__color: (
+    p: myg-theme__color(text, base),
+    h1: myg-theme__color(text, darker),
+    h2: myg-theme__color(text, darker),
+    h3: myg-theme__color(text, darker),
+    h4: myg-theme__color(text, darker),
+    h5: myg-theme__color(text, darker),
+    h6: myg-theme__color(text, darker)
+);
 
-// Text Weight
-$myg-text--weight: (
+$myg-text__weight: (
     p: normal,
     h1: bold,
     h2: bold,
@@ -52,4 +45,4 @@ $myg-text--weight: (
     h4: bold,
     h5: bold,
     h6: bold
-) !default;
+);

data/lib/generators/templates/install/stylesheets/variables/_theme.scss

@@ -1,17 +1,7 @@
-// Border Radius
-$border-radius: (
-    none: 0,
-    sm: px(3),
-    md: px(5),
-    lg: px(10)
-) !default;
-
-
-// Scrollbar
-$scrollbar: (
-    width: px(5),
+$myg-theme__scrollbar: (
+    width: myg__px(5),
     track-background: transparent,
-    thumb-border-radius: px(2.5),
-    thumb-background: color(border),
-    thumb-hover-background: color(text, dark)
-) !default;
+    thumb-border-radius: myg__px(2.5),
+    thumb-background: myg-theme__color(border),
+    thumb-hover-background: myg-theme__color(text, dark)
+);

data/lib/myg/version.rb

@@ -1,5 +1,5 @@
 module Myg
 
-    VERSION = '2.9.0'
+    VERSION = '2.10.0'
 
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: myg
 version: !ruby/object:Gem::Version
-  version: 2.9.0
+  version: 2.10.0
 platform: ruby
 authors:
 - Jonas Hübotter
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-04-16 00:00:00.000000000 Z
+date: 2018-05-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -159,7 +159,6 @@ files:
 - lib/generators/templates/install/stylesheets/variables/_action-button.scss
 - lib/generators/templates/install/stylesheets/variables/_animate.scss
 - lib/generators/templates/install/stylesheets/variables/_base.scss
-- lib/generators/templates/install/stylesheets/variables/_elevation.scss
 - lib/generators/templates/install/stylesheets/variables/_font.scss
 - lib/generators/templates/install/stylesheets/variables/_footer.scss
 - lib/generators/templates/install/stylesheets/variables/_grid.scss

data/lib/generators/templates/install/stylesheets/variables/_elevation.scss

@@ -1,5 +0,0 @@
-$myg-elevation: (
-    sm: 0 .0625em .3125em 0 color(box-shadow),
-    md: 0 .25em .9375em 0 color(box-shadow),
-    lg: 0 .4375em 2.5em 0 color(box-shadow)
-) !default;