diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..5ac85e27 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 100, + "singleQuote": true +} diff --git a/demo/arrows/index.html b/demo/arrows/index.html index becbbea8..ddceb7fe 100644 --- a/demo/arrows/index.html +++ b/demo/arrows/index.html @@ -19,6 +19,11 @@ .c-arrow.u-visibility-visible:before, .c-arrow.u-visibility-visible:after { display: inline-block !important; } .u-z-index-0 { z-index: 0 !important; } + + .menu-container { + transform: translateZ(0); + position: absolute; + } @@ -45,20 +50,22 @@ - +
+ +
diff --git a/demo/buttons/index.html b/demo/buttons/index.html index 323d3999..5fa9e057 100644 --- a/demo/buttons/index.html +++ b/demo/buttons/index.html @@ -16,6 +16,16 @@ +
@@ -41,20 +51,22 @@ - +
+ +
@@ -220,13 +232,13 @@

Groups

-
-
@@ -668,62 +685,68 @@

Header

- +
+ +
@@ -749,51 +772,55 @@

Header

Products - +
+ +
@@ -813,51 +840,55 @@

Header

Products - +
+ +
@@ -886,21 +917,23 @@

Header

diff --git a/demo/chrome/index.js b/demo/chrome/index.js index e723a7c9..21db8549 100644 --- a/demo/chrome/index.js +++ b/demo/chrome/index.js @@ -14,7 +14,7 @@ $(document).ready(function() { '.c-chrome__body__header__item', '.c-chrome__nav__fab', '.c-chrome__nav__item', - '.c-chrome__subnav__item', + '.c-chrome__subnav__item' ].forEach(Garden.handleFocus); Garden.customClasses.push('.c-chrome'); @@ -24,7 +24,12 @@ $(document).ready(function() { var value = $(this).val(); var $nav = $('.c-chrome__nav:not(.c-playground .c-chrome__nav)'); - if (value.toUpperCase() === $(this).attr('value').toUpperCase()) { + if ( + value.toUpperCase() === + $(this) + .attr('value') + .toUpperCase() + ) { $nav.removeClass('c-chrome__nav--dark c-chrome__nav--light').css('backgroundColor', ''); } else { updateNavColor($nav, value); @@ -36,7 +41,9 @@ $(document).ready(function() { }); $('.js-standalone').click(function() { - $('.c-chrome__body__header:not(.c-playground .c-chrome__body__header)').toggleClass('c-chrome__body__header--standalone'); + $('.c-chrome__body__header:not(.c-playground .c-chrome__body__header)').toggleClass( + 'c-chrome__body__header--standalone' + ); }); $(document).on('click', '.c-chrome__nav__item:not(.c-chrome__nav__item--logo)', function() { @@ -55,7 +62,9 @@ $(document).ready(function() { if ($this.hasClass('c-chrome__subnav__item--header')) { $this.toggleClass('is-expanded'); - $this.next('.c-chrome__subnav__panel').toggleClass('is-hidden', !$this.hasClass('is-expanded')); + $this + .next('.c-chrome__subnav__panel') + .toggleClass('is-hidden', !$this.hasClass('is-expanded')); } else { var $parent = $this.closest('.c-chrome__subnav'); @@ -71,6 +80,10 @@ $(document).ready(function() { $(document).on('click', '.c-chrome__body__header__item', function() { var $this = $(this); var $menu = $this.find('.c-menu'); + var $icon = $this.find('svg, img'); + var $container = $menu.parent('.menu-container'); + var $offset = $icon.is('img') ? -3 : 5; + var y = $icon.outerHeight() + $offset; if ($menu.length) { if ($menu.hasClass('is-open')) { @@ -81,6 +94,8 @@ $(document).ready(function() { $this.addClass('is-active'); } + $container.css('transform', 'translate3d(0, ' + y + 'px, 0)'); + return false; } }); diff --git a/demo/chrome/page.html b/demo/chrome/page.html index 30567b0b..3c01fc8d 100644 --- a/demo/chrome/page.html +++ b/demo/chrome/page.html @@ -21,6 +21,11 @@ @@ -94,51 +99,55 @@ Products - +
+ +
diff --git a/demo/forms/checkbox/index.html b/demo/forms/checkbox/index.html index 73798ccb..fe210b1c 100644 --- a/demo/forms/checkbox/index.html +++ b/demo/forms/checkbox/index.html @@ -17,6 +17,11 @@ @@ -43,41 +48,43 @@ - + + +
diff --git a/demo/forms/dropdown/index.html b/demo/forms/dropdown/index.html index 192369b1..88420520 100644 --- a/demo/forms/dropdown/index.html +++ b/demo/forms/dropdown/index.html @@ -19,15 +19,22 @@ @@ -54,47 +61,49 @@ - + + + + @@ -120,18 +129,24 @@

Dropdown

- +
+ +
- +
+
+ +
+
two
@@ -158,12 +173,14 @@

Dropdown

- +
+ +
diff --git a/demo/forms/dropdown/index.js b/demo/forms/dropdown/index.js index 6e18f59b..a5cd56bd 100644 --- a/demo/forms/dropdown/index.js +++ b/demo/forms/dropdown/index.js @@ -1,27 +1,32 @@ $(document).ready(function() { - $('.c-txt__input--select').click(function() { - var $this = $(this); - var $menu = $(this).parent().siblings('.c-menu'); - - $this.toggleClass('is-open'); - $menu.toggleClass('is-open', $this.hasClass('is-open')); - - if ($menu.hasClass('is-open')) { - $menu.parent('.u-position-relative').css('zIndex', 1); - $menu.attr('aria-hidden', false); - } else { - $menu.attr('aria-hidden', true); - $menu.parent('.u-position-relative').css('zIndex', ''); - } - - return false; - }).blur(function() { - var $menu = $(this).parent().siblings('.c-menu'); + $('.c-txt__input--select') + .click(function() { + var $this = $(this); + var $parent = $this.closest('.u-position-relative'); + var $menu = $parent.find('.c-menu'); + + $this.toggleClass('is-open'); + $menu.toggleClass('is-open', $this.hasClass('is-open')); + + if ($menu.hasClass('is-open')) { + $parent.css('zIndex', 1); + $menu.attr('aria-hidden', false); + } else { + $menu.attr('aria-hidden', true); + $parent.css('zIndex', ''); + } - $(this).removeClass('is-open'); - $menu.removeClass('is-open').attr('aria-hidden', true); - $menu.parent('.u-position-relative').css('zIndex', ''); - }); + return false; + }) + .blur(function() { + var $this = $(this); + var $parent = $this.closest('.u-position-relative'); + var $menu = $parent.find('.c-menu'); + + $this.removeClass('is-open'); + $menu.removeClass('is-open').attr('aria-hidden', true); + $parent.css('zIndex', ''); + }); $('.c-txt__input--select[contenteditable]').focus(function() { var $this = $(this); diff --git a/demo/forms/range/index.html b/demo/forms/range/index.html index ec1f84fa..39149b96 100644 --- a/demo/forms/range/index.html +++ b/demo/forms/range/index.html @@ -17,6 +17,11 @@ @@ -43,47 +48,49 @@ - + + +
diff --git a/demo/forms/text/index.html b/demo/forms/text/index.html index a4736832..925a15d0 100644 --- a/demo/forms/text/index.html +++ b/demo/forms/text/index.html @@ -19,6 +19,11 @@ @@ -45,53 +50,55 @@ - + + + diff --git a/demo/index.html b/demo/index.html index 046522cd..b5160da0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,6 +19,17 @@ +