fix: Indicator (Chevron by default) in AccordionComponent has on indi…

…cator-cssClass now
MikeMitterer · Feb 26, 2015 · f63a862 · f63a862
1 parent 0d6a926
commit f63a862
Show file tree

Hide file tree

Showing 23 changed files with 736 additions and 255 deletions.
diff --git a/example/accordion/web/demo.css b/example/accordion/web/demo.css
@@ -974,11 +974,14 @@ dt {
   pointer-events: none;
   position: absolute;
   top: 0;
-  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
   width: 50px;
   overflow: hidden; }
   .wsk-ripple.is-animating {
-    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); }
+    -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); }
 
 /* Animation Variables */
 /* Accordion */
@@ -991,31 +994,46 @@ dt {
   .wsk-accordion input[name^='wsk-accordion'] {
     display: none; }
   .wsk-accordion label {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
+    -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;
     height: 48px;
     padding-left: 16px;
     position: relative;
     border-bottom: 1px solid #ddd;
     color: rgba(0, 0, 0, 0.6);
     cursor: pointer;
     font-size: 16px;
-    transition: all 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
+    -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); }
     .debug .wsk-accordion label {
       border: 1px solid red; }
     .wsk-accordion label:hover {
       color: black; }
-    .wsk-accordion label i {
+    .wsk-accordion label i.indicator {
       position: absolute;
       top: 20.8px;
       right: 16px;
-      transition: 0.3s ease-in-out;
+      -webkit-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); }
-      .debug .wsk-accordion label i {
+      .debug .wsk-accordion label i.indicator {
         border: 1px solid green; }
     .wsk-accordion label .wsk-accordion__ripple-container {
       display: block;
@@ -1030,18 +1048,22 @@ dt {
         background: #2196f3; }
   .wsk-accordion input:checked + label {
     color: black; }
-    .wsk-accordion input:checked + label i {
-      transform: rotate(90deg);
-      transition: 0.3s ease-in-out;
+    .wsk-accordion input:checked + label i.indicator {
+      -webkit-transform: rotate(90deg);
+          -ms-transform: rotate(90deg);
+              transform: rotate(90deg);
+      -webkit-transition: 0.3s ease-in-out;
+              transition: 0.3s ease-in-out;
       color: #1e88e5; }
-      .debug .wsk-accordion input:checked + label i {
+      .debug .wsk-accordion input:checked + label i.indicator {
         border: 1px solid red; }
   .wsk-accordion .wsk-accordion--content {
     overflow: auto;
     max-height: 0;
     position: relative;
     padding: 0 16px;
-    transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
+    -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); }
     .wsk-accordion .wsk-accordion--content .wsk-accordion--header {
       padding: 8px 0;
       color: rgba(0, 0, 0, 0.8);
@@ -1053,4 +1075,5 @@ dt {
 input[name^='wsk-accordion']:checked ~ .wsk-accordion--content {
   max-height: 500px;
   border-bottom: 1px solid #ddd;
-  transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87); }
+  -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); }
diff --git a/example/accordion/web/index.html b/example/accordion/web/index.html
@@ -25,7 +25,7 @@ <h5>Multiple multiple sections can be open at the same time</h5>
     <!-- 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>
+      <label class="wsk-accordion__label" for="panel-1-check">Panel 1<i class="fa fa-chevron-right indicator"></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>
@@ -35,7 +35,7 @@ <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>
+      <label class="wsk-accordion__label" for="panel-2-check">Panel 2<i class="fa fa-chevron-right indicator"></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>
@@ -45,7 +45,7 @@ <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>
+      <label class="wsk-accordion__label" for="panel-3-check">Panel 3<i class="fa fa-chevron-right indicator"></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>
@@ -55,7 +55,7 @@ <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>
+      <label class="wsk-accordion__label" for="panel-4-check">Panel 4<i class="fa fa-chevron-right indicator"></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>
@@ -70,7 +70,7 @@ <h5>Only one section is open</h5>
     <!-- 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>
+      <label class="wsk-accordion__label" for="panel-1">Panel 1<i class="fa fa-chevron-right indicator"></i>
             <span class="wsk-accordion__ripple-container wsk-js-ripple-effect">
               <span class="wsk-ripple"></span>
             </span>
@@ -84,7 +84,7 @@ <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>
+      <label class="wsk-accordion__label" for="panel-2">Panel 2<i class="fa fa-chevron-right indicator"></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>
@@ -94,7 +94,7 @@ <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>
+      <label class="wsk-accordion__label" for="panel-3">Panel 3<i class="fa fa-chevron-right indicator"></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>
@@ -104,7 +104,7 @@ <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>
+      <label class="wsk-accordion__label" for="panel-4">Panel 4<i class="fa fa-chevron-right indicator"></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>

diff --git a/example/animation/web/demo.css b/example/animation/web/demo.css
@@ -968,26 +968,40 @@ dt {
   height: 186px; }
 
 .wsk-card--heading {
-  align-items: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   background: #1976d2 none repeat scroll 0 0/auto padding-box border-box;
   border: 0 none white;
   color: white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   font-size: 24px;
   height: 96px;
   justify-items: stretch;
   line-height: normal;
   outline: white none 0;
   padding: 8px 16px;
-  perspective-origin: 165px 56px;
+  -webkit-perspective-origin: 165px 56px;
+          perspective-origin: 165px 56px;
   text-decoration: none solid white;
-  transform-origin: 165px 56px;
+  -webkit-transform-origin: 165px 56px;
+      -ms-transform-origin: 165px 56px;
+          transform-origin: 165px 56px;
   width: 100%; }
 
 .wsk-card--heading-text {
-  align-self: center;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
   border: 0 none white;
   color: white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   font-size: inherit;
   font-weight: 300;
@@ -997,7 +1011,9 @@ dt {
   outline: white none 0;
   overflow: hidden;
   text-decoration: none solid white;
-  transform-origin: 149px 48px;
+  -webkit-transform-origin: 149px 48px;
+      -ms-transform-origin: 149px 48px;
+          transform-origin: 149px 48px;
   width: 90%; }
 
 .wsk-card--caption {
@@ -1009,7 +1025,8 @@ dt {
   line-height: normal;
   outline: white none 0;
   padding: 8px 16px;
-  perspective-origin: 165px 16px;
+  -webkit-perspective-origin: 165px 16px;
+          perspective-origin: 165px 16px;
   text-decoration: none solid white;
   width: 100%; }
 
@@ -1047,10 +1064,13 @@ dt {
   line-height: 50px;
   outline: #303f9f none 0;
   padding: 0 16px;
-  perspective-origin: 165px 25px;
+  -webkit-perspective-origin: 165px 25px;
+          perspective-origin: 165px 25px;
   text-decoration: none solid #303f9f;
   text-transform: uppercase;
-  transform-origin: 165px 25px;
+  -webkit-transform-origin: 165px 25px;
+      -ms-transform-origin: 165px 25px;
+          transform-origin: 165px 25px;
   width: 100%; }
 
 .wsk-shadow--z1 {
@@ -1097,33 +1117,45 @@ dt {
 
 .demo-position-1 {
   left: -102px;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
 
 .demo-position-2 {
   left: 20px;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 
 .demo-position-3 {
   left: 180px;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
 
 .demo-position-4 {
   left: 302px;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
 
 .demo-position-5 {
   left: 180px;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 
 .demo-position-6 {
   left: 20px;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
 
 .demo-paper-card {
   background-color: red;
@@ -1133,4 +1165,5 @@ dt {
   width: 100px;
   position: absolute;
   top: 50px;
-  transition-property: left; }
+  -webkit-transition-property: left;
+          transition-property: left; }
diff --git a/example/button/web/demo.css b/example/button/web/demo.css
@@ -978,11 +978,14 @@ dt {
   pointer-events: none;
   position: absolute;
   top: 0;
-  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
   width: 50px;
   overflow: hidden; }
   .wsk-ripple.is-animating {
-    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); }
+    -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); }
 
 /**
  *
@@ -1009,7 +1012,8 @@ dt {
   letter-spacing: 0.04em;
   overflow: hidden;
   will-change: box-shadow, transform;
-  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+          transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   cursor: pointer; }
   .wsk-button::-moz-focus-inner {