Permalink
Browse files

fix: Ripple updates its size now more often. Works better now with lo…

…adchecker
  • Loading branch information...
MikeMitterer committed Feb 26, 2015
1 parent 40d415d commit a263034f8857b29ab4c38f53b5497ca73c0d5c0b
Showing with 1,478 additions and 888 deletions.
  1. +0 −2 WskMaterial.iml
  2. +26 −41 example/accordion/web/demo.css
  3. +1 −7 example/accordion/web/demo.scss
  4. +30 −41 example/accordion/web/index.html
  5. +21 −54 example/animation/web/demo.css
  6. +4 −3 example/animation/web/index.html
  7. +3 −7 example/button/web/demo.css
  8. +4 −3 example/button/web/index.html
  9. +8 −28 example/card/web/demo.css
  10. +4 −3 example/card/web/index.html
  11. +27 −62 example/checkbox/web/demo.css
  12. +4 −3 example/checkbox/web/index.html
  13. +3 −15 example/column-layout/web/demo.css
  14. +4 −3 example/column-layout/web/index.html
  15. +3 −7 example/dropdown-menu/web/demo.css
  16. +4 −3 example/dropdown-menu/web/index.html
  17. +4 −3 example/footer/web/index.html
  18. +4 −9 example/icon-toggle/web/demo.css
  19. +4 −3 example/icon-toggle/web/index.html
  20. +2 −2 example/index.html
  21. +2 −5 example/item/web/demo.css
  22. +4 −3 example/item/web/index.html
  23. +52 −181 example/layout/web/demo.css
  24. +4 −3 example/layout/web/index.html
  25. +1 −2 example/list/web/demo.css
  26. +4 −3 example/list/web/index.html
  27. +4 −3 example/palette/web/index.html
  28. +7 −15 example/radio/web/demo.css
  29. +4 −3 example/radio/web/index.html
  30. +11 −34 example/shadow/web/demo.css
  31. +4 −3 example/shadow/web/index.html
  32. +20 −55 example/slider/web/demo.css
  33. +4 −3 example/slider/web/index.html
  34. +25 −154 example/spinner/web/demo.css
  35. +4 −3 example/spinner/web/index.html
  36. +9 −20 example/switch/web/demo.css
  37. +4 −3 example/switch/web/index.html
  38. +12 −7 example/tabs/web/demo.css
  39. +4 −3 example/tabs/web/index.html
  40. +9 −20 example/textfield/web/demo.css
  41. +4 −3 example/textfield/web/index.html
  42. +4 −3 example/tooltip/web/index.html
  43. +4 −3 example/typography/web/index.html
  44. +5 −4 lib/sass/accordion/_accordion.scss
  45. +1,056 −0 lib/sass/accordion/demo.css
  46. +26 −38 lib/sass/accordion/demo.html
  47. +1 −7 lib/sass/accordion/demo.scss
  48. +16 −0 lib/sass/demo/_demo.scss
  49. +10 −5 lib/src/components/MaterialRipple.dart
  50. +4 −3 tools/gensamples.dart
View
@@ -5,8 +5,6 @@
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.pub" />
<excludeFolder url="file://$MODULE_DIR$/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/accordion/.pub" />
- <excludeFolder url="file://$MODULE_DIR$/example/accordion/build" />
<excludeFolder url="file://$MODULE_DIR$/example/accordion/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/accordion/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/animation/packages/wsk_material" />
@@ -552,6 +552,17 @@ body > h2 {
background: #f5f5f5;
padding: 20px; }
+/*
+ Some global styles for all the samples
+-------------------------------------------------------------------------- */
+.sample {
+ padding-bottom: 2em; }
+ .sample > h1, .sample > h2, .sample > h3, .sample > h4, .sample > h5, .sample > h6 {
+ padding-top: 0.6em;
+ padding-bottom: 0.3em; }
+ .sample > h1:first-child, .sample > h2:first-child, .sample > h3:first-child, .sample > h4:first-child, .sample > h5:first-child, .sample > h6:first-child {
+ padding-top: 0; }
+
/* We're splitting fonts into "preferred" and "performance" in order to optimize
page loading. For important text, such as the body, we want it to load
immediately and not wait for the web font load, whereas for other sections,
@@ -963,14 +974,11 @@ dt {
pointer-events: none;
position: absolute;
top: 0;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
width: 50px;
overflow: hidden; }
.wsk-ripple.is-animating {
- -webkit-transition: -webkit-transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
- transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
+ transition: transform 0.6s cubic-bezier(0, 0, 0.2, 1), width 0.6s cubic-bezier(0, 0, 0.2, 1), height 0.6s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }
/* Animation Variables */
/* Accordion */
@@ -980,35 +988,21 @@ dt {
border-top: 1px solid #ddd;
/* Labels */
/* Panel Content */ }
- .wsk-accordion input[name='wsk-accordion'] {
+ .wsk-accordion input[name^='wsk-accordion'] {
display: none; }
.wsk-accordion label {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
height: 48px;
padding-left: 16px;
position: relative;
border-bottom: 1px solid #ddd;
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
font-size: 16px;
- -webkit-transition: all 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
- transition: all 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
+ transition: all 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
.debug .wsk-accordion label {
border: 1px solid red; }
.wsk-accordion label:hover {
@@ -1017,8 +1011,7 @@ dt {
position: absolute;
top: 20.8px;
right: 16px;
- -webkit-transition: 0.3s ease-in-out;
- transition: 0.3s ease-in-out;
+ transition: 0.3s ease-in-out;
font-weight: 100;
font-size: 60%;
color: rgba(0, 0, 0, 0.6); }
@@ -1029,20 +1022,17 @@ dt {
position: absolute;
height: 100%;
width: 100%;
- left: 0px;
- top: 0px;
+ left: 0;
+ top: 0;
z-index: 1;
overflow: hidden; }
.wsk-accordion label .wsk-accordion__ripple-container .wsk-ripple {
background: #2196f3; }
.wsk-accordion input:checked + label {
color: black; }
.wsk-accordion input:checked + label i {
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-transition: 0.3s ease-in-out;
- transition: 0.3s ease-in-out;
+ transform: rotate(90deg);
+ transition: 0.3s ease-in-out;
color: #1e88e5; }
.debug .wsk-accordion input:checked + label i {
border: 1px solid red; }
@@ -1051,8 +1041,7 @@ dt {
max-height: 0;
position: relative;
padding: 0 16px;
- -webkit-transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
- transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
+ transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
.wsk-accordion .wsk-accordion--content .wsk-accordion--header {
padding: 8px 0;
color: rgba(0, 0, 0, 0.8);
@@ -1061,11 +1050,7 @@ dt {
padding: 0;
color: rgba(0, 0, 0, 0.6); }
-input[name='wsk-accordion']:checked ~ .wsk-accordion--content {
+input[name^='wsk-accordion']:checked ~ .wsk-accordion--content {
max-height: 500px;
border-bottom: 1px solid #ddd;
- -webkit-transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
- transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
-
-.accordion.sample .preview-block > h1, .accordion.sample .preview-block > h2, .accordion.sample .preview-block > h3, .accordion.sample .preview-block > h4, .accordion.sample .preview-block > h5, .accordion.sample .preview-block > h6 {
- padding-bottom: 0.5em; }
+ transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
@@ -1,10 +1,4 @@
@import "packages/wsk_material/sass/styleguide_demo_bp";
+@import "packages/wsk_material/sass/demo/demo";
@import "packages/wsk_material/sass/accordion/accordion";
-.accordion.sample {
- .preview-block {
- & > h1, & > h2,& > h3,& > h4,& > h5,& > h6 {
- padding-bottom: 0.5em;
- }
- }
-}
@@ -5,40 +5,27 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Animations</title>
+ <title>Accordion</title>
<link rel="stylesheet" href="demo.css">
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- <style>
- div.loading { visibility: hidden; }
- body.wsk-upgrading > * { visibility: hidden; }
- body.wsk-upgrading div.loading { visibility: visible; }
-
- .accordion.sample .preview-block {
- padding-bottom: 20px;
- }
- </style>
-
<style>
- div.loading { visibility: hidden; }
- body.wsk-upgrading > * { visibility: hidden; }
- body.wsk-upgrading div.loading { visibility: visible; }
+ /* Autogenerated with gensamples.dart */
+ div.loading { display: none; }
+ body.wsk-upgrading > * { display: none; }
+ body.wsk-upgrading div.loading { display: block; }
</style>
</head>
-<body class="wsk-upgrading accordion sample"> <div class="loading">Loading...</div>
-<div class="preview-block">
- <h5>Only one panel is open</h5>
+ <body class="wsk-upgrading"> <div class="loading">Loading...</div>
+<div class="preview-block sample">
+ <h5>Multiple multiple sections can be open at the same time</h5>
<div class="wsk-accordion wsk-js-accordion wsk-js-ripple-effect">
<!-- Panel 1 -->
<div>
- <input type="radio" name="wsk-accordion" id="panel-1" >
- <label class="wsk-accordion__label" for="panel-1">Panel 1<i class="fa fa-chevron-right"></i>
- <span class="wsk-accordion__ripple-container wsk-js-ripple-effect">
- <span class="wsk-ripple"></span>
- </span>
- </label>
+ <input type="checkbox" name="wsk-accordion" id="panel-1-check">
+ <label class="wsk-accordion__label" for="panel-1-check">Panel 1<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
@@ -47,8 +34,8 @@ <h5 class="wsk-accordion--header">Header</h5>
<!-- Panel 2 -->
<div>
- <input type="radio" name="wsk-accordion" id="panel-2">
- <label class="wsk-accordion__label" for="panel-2">Panel 2<i class="fa fa-chevron-right"></i></label>
+ <input type="checkbox" name="wsk-accordion" id="panel-2-check">
+ <label class="wsk-accordion__label" for="panel-2-check">Panel 2<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
@@ -57,8 +44,8 @@ <h5 class="wsk-accordion--header">Header</h5>
<!-- Panel 3 -->
<div>
- <input type="radio" name="wsk-accordion" id="panel-3" >
- <label class="wsk-accordion__label" for="panel-3">Panel 3<i class="fa fa-chevron-right"></i></label>
+ <input type="checkbox" name="wsk-accordion" id="panel-3-check">
+ <label class="wsk-accordion__label" for="panel-3-check">Panel 3<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
@@ -67,24 +54,27 @@ <h5 class="wsk-accordion--header">Header</h5>
<!-- Panel 4 -->
<div>
- <input type="radio" name="wsk-accordion" id="panel-4" >
- <label class="wsk-accordion__label" for="panel-4">Panel 4<i class="fa fa-chevron-right"></i></label>
+ <input type="checkbox" name="wsk-accordion" id="panel-4-check">
+ <label class="wsk-accordion__label" for="panel-4-check">Panel 4<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda odio provident ullam culpa rem tempora voluptatem inventore facere adipisci doloribus dolorum ad maxime itaque quasi animi aliquid voluptates rerum expedita? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui culpa amet neque nostrum cumque eaque corrupti ad accusantium? Consectetur reiciendis ad earum aspernatur at quibusdam cupiditate rerum ipsam consequatur suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem explicabo exercitationem unde harum? Iste nobis quae animi illum laborum incidunt hic illo ad repellat repudiandae et alias facere magni.</p>
</div>
</div>
</div><!-- .wsk-accordion -->
</div>
-
-<div class="preview-block">
- <h5>Multiple panels can be open</h5>
+<div class="preview-block sample">
+ <h5>Only one section is open</h5>
<div class="wsk-accordion wsk-js-accordion wsk-js-ripple-effect">
<!-- Panel 1 -->
<div>
- <input type="checkbox" name="wsk-accordion" id="panel-1-check">
- <label class="wsk-accordion__label" for="panel-1-check">Panel 1<i class="fa fa-chevron-right"></i></label>
+ <input type="radio" name="wsk-accordion" id="panel-1" >
+ <label class="wsk-accordion__label" for="panel-1">Panel 1<i class="fa fa-chevron-right"></i>
+ <span class="wsk-accordion__ripple-container wsk-js-ripple-effect">
+ <span class="wsk-ripple"></span>
+ </span>
+ </label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p>
@@ -93,8 +83,8 @@ <h5 class="wsk-accordion--header">Header</h5>
<!-- Panel 2 -->
<div>
- <input type="checkbox" name="wsk-accordion" id="panel-2-check">
- <label class="wsk-accordion__label" for="panel-2-check">Panel 2<i class="fa fa-chevron-right"></i></label>
+ <input type="radio" name="wsk-accordion" id="panel-2">
+ <label class="wsk-accordion__label" for="panel-2">Panel 2<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p>
@@ -103,8 +93,8 @@ <h5 class="wsk-accordion--header">Header</h5>
<!-- Panel 3 -->
<div>
- <input type="checkbox" name="wsk-accordion" id="panel-3-check">
- <label class="wsk-accordion__label" for="panel-3-check">Panel 3<i class="fa fa-chevron-right"></i></label>
+ <input type="radio" name="wsk-accordion" id="panel-3" >
+ <label class="wsk-accordion__label" for="panel-3">Panel 3<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
@@ -113,15 +103,14 @@ <h5 class="wsk-accordion--header">Header</h5>
<!-- Panel 4 -->
<div>
- <input type="checkbox" name="wsk-accordion" id="panel-4-check">
- <label class="wsk-accordion__label" for="panel-4-check">Panel 4<i class="fa fa-chevron-right"></i></label>
+ <input type="radio" name="wsk-accordion" id="panel-4" >
+ <label class="wsk-accordion__label" for="panel-4">Panel 4<i class="fa fa-chevron-right"></i></label>
<div class="wsk-accordion--content">
<h5 class="wsk-accordion--header">Header</h5>
<p class="wsk-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda odio provident ullam culpa rem tempora voluptatem inventore facere adipisci doloribus dolorum ad maxime itaque quasi animi aliquid voluptates rerum expedita? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui culpa amet neque nostrum cumque eaque corrupti ad accusantium? Consectetur reiciendis ad earum aspernatur at quibusdam cupiditate rerum ipsam consequatur suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem explicabo exercitationem unde harum? Iste nobis quae animi illum laborum incidunt hic illo ad repellat repudiandae et alias facere magni.</p>
</div>
</div>
</div><!-- .wsk-accordion -->
-
</div>
<!-- build:js(app/styleguide/animation/) ../../scripts/main.min.js -->
<!-- <script src="../wskComponentHandler.js"></script> -->
Oops, something went wrong.

0 comments on commit a263034

Please sign in to comment.