V1.0

mildrenben · Apr 28, 2015 · 4d7a47d · 4d7a47d
1 parent f208a67
commit 4d7a47d
Show file tree

Hide file tree

Showing 28 changed files with 1,295 additions and 677 deletions.
diff --git a/prod/css/buttons.css b/prod/css/buttons.css
@@ -3,10 +3,11 @@
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   position: relative;
   cursor: pointer;
-  background-size: 1%;
+  background-size: 0;
   background-repeat: no-repeat;
   background-position: 50% 50%;
-  transition: all 0.4s cubic-bezier(.64, .09, .08, 1);
+  transition: background-color 0.3s cubic-bezier(.64, .09, .08, 1), box-shadow 0.3s cubic-bezier(.64, .09, .08, 1);
+  will-change: background-size, background-image;
   padding: 10px 20px;
   display: inline-block;
   font-family: Roboto;
@@ -29,7 +30,8 @@
   width: 50px;
   height: 50px;
   background-image: radial-gradient(circle, #ffeb3b 1%, #fff387 15%, transparent 30%);
-  background-color: #ffeb3b; }
+  background-color: #ffeb3b;
+  will-change: box-shadow, background-color; }
   .btn--float:hover {
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     background-color: #ffee55; }
@@ -39,7 +41,8 @@
   background-color: #28e1bd;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   background-image: radial-gradient(circle, #28e1bd 1%, #6bebd1 15%, transparent 30%);
-  background-color: #28e1bd; }
+  background-color: #28e1bd;
+  will-change: box-shadow, background-color; }
   .btn--raised:hover {
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     background-color: #3ee4c4; }

diff --git a/prod/css/collapsible.css b/prod/css/collapsible.css
@@ -49,5 +49,6 @@ label[for^="collapsible-"] {
   -webkit-transform-origin: 0 0;
           transform-origin: 0 0;
   height: 0;
+  will-change: height, transform;
   transition: all 0.3s ease;
   padding-left: 20px; }
diff --git a/prod/css/form.css b/prod/css/form.css
@@ -9,6 +9,7 @@ input[type="email"], input[type="text"], input[type="password"], input[type="tex
   border: none;
   padding: 10px 0;
   border-bottom: solid 1px #1abc9c;
+  will-change: background-position;
   transition: all 0.3s cubic-bezier(.64, .09, .08, 1);
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 96%);
   background-position: -200px 0;
@@ -26,7 +27,8 @@ input[type="email"], input[type="text"], input[type="password"], input[type="tex
               transform: translateY(-20px);
       visibility: visible !important; }
 input::-webkit-input-placeholder {
-  transition: all 0.2s cubic-bezier(.64, .09, .08, 1); }
+  transition: all 0.2s cubic-bezier(.64, .09, .08, 1);
+  will-change: transform, color, font-size; }
 
 input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]) {
   position: relative;
@@ -38,7 +40,6 @@ input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([i
     border: solid 2px #1abc9c;
     border-radius: 3px;
     background: white;
-    transition: all 0.3s cubic-bezier(.64, .09, .08, 1);
     position: absolute; }
   input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):after {
     content: '✓';
@@ -61,7 +62,8 @@ input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([i
         -ms-flex-pack: center;
             justify-content: center;
     opacity: 0;
-    transition: opacity 0.3s cubic-bezier(.64, .09, .08, 1); }
+    transition: opacity 0.3s cubic-bezier(.64, .09, .08, 1);
+    will-change: opacity; }
   input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):checked:after {
     opacity: 1; }
   input[type="checkbox"]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id^="lightbox-"]):focus {
@@ -89,6 +91,7 @@ input[type="radio"] {
     background-position: 50% 50%;
     background-repeat: no-repeat;
     transition: all 0.3s cubic-bezier(.64, .09, .08, 1);
+    will-change: background-size;
     z-index: 2; }
   input[type="radio"]:after {
     content: '';
@@ -172,7 +175,8 @@ input[type=range]::-ms-thumb {
   height: 6px;
   margin-top: 12px;
   background: #9e9e9e;
-  transition: all 0.3s ease; }
+  transition: background 0.3s cubic-bezier(.64, .09, .08, 1);
+  will-change: background; }
   .toggle + label:after {
     position: absolute;
     content: '';
@@ -185,4 +189,5 @@ input[type=range]::-ms-thumb {
     margin-top: -4px;
     margin-left: -1px;
     transition: all 0.3s ease;
+    will-change: background, margin-left;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.09); }
diff --git a/prod/css/general.css b/prod/css/general.css
@@ -1,2 +1,3 @@
 body {
-  background: #efefef; }
+  background: #efefef;
+  line-height: 130%; }