Optimize css for mobile device performance (#130)

Author: Joshua Smith

style/bb/drawer.css

@@ -215,7 +215,6 @@ section[data-type="sidebar"] [role="toolbar"] {
   left: 0;
   width: 80%;
   right: auto;
-  z-index: 101;
 }
 
 section[data-type="sidebar"][data-position="right"] [role="toolbar"] {

style/bb/tabs.css

@@ -22,33 +22,33 @@
 
 /* Items calcs */
 [role="tablist"][data-items="2"] > [role="tab"] {
-  width: calc(100% / 2);
     width: -moz-calc(100% / 2);
     width: -webkit-calc(100% / 2);
+  width: calc(100% / 2);
 }
 
 [role="tablist"][data-items="3"] > [role="tab"] {
-  width: calc(100% / 3);
     width: -moz-calc(100% / 3);
     width: -webkit-calc(100% / 3);
+  width: calc(100% / 3);
 }
 
 [role="tablist"][data-items="4"] > [role="tab"] {
-  width: calc(100% / 3);
     width: -moz-calc(100% / 3);
     width: -webkit-calc(100% / 3);
+  width: calc(100% / 3);
 }
 
 [role="tablist"][data-items="4.1"] > [role="tab"] {
-  width: calc(100% / 4.1);
     width: -moz-calc(100% / 4.1);
     width: -webkit-calc(100% / 4.1);
+  width: calc(100% / 4.1);
 }
 
 [role="tablist"][data-items="5"] > [role="tab"] {
-  width: calc(100% / 5);
     width: -moz-calc(100% / 5);
     width: -webkit-calc(100% / 5);
+  width: calc(100% / 5);
 }
 
 [role="tablist"] > [role="tab"] > a {
@@ -61,10 +61,10 @@
   background: #C7C7C7;
   position: relative;
   color: #737373;
-  transition: all .5s;
     -moz-transition: all .5s;
     -webkit-transition: all .5s;
     -o-transition: all .5s;
+  transition: all .5s;
   font-weight: bold;
 }
 
@@ -94,11 +94,10 @@
 /* Hidden */
 [role="tablist"] > [role="tab"].hidden {
   visibility: hidden;
-  opacity: 0;
-  transition: all .5s;
     -moz-transition: all .5s;
     -webkit-transition: all .5s;
     -o-transition: all .5s;
+  transition: all .5s;
 }
 
 /* Selected state */
@@ -126,49 +125,47 @@
   left: 0;
   visibility: hidden;
   width: 100%;
-  height: calc(100% - 4rem);
     height: -moz-calc(100% - 4rem);
     height: -webkit-calc(100% - 4rem);
+  height: calc(100% - 4rem);
   display: block;
   overflow: auto;
-  opacity: .4;
-  transform: translateX(-102%);
     -moz-transform: translateX(-102%);
     -webkit-transform: translateX(-102%);
     -o-transform: translateX(-102%);
     -ms-transform: translateX(-102%);
+  transform: translateX(-102%);
   background: #EEE;
-  transition: all .4s;
     -moz-transition: all .4s;
     -webkit-transition: all .4s;
     -o-transition: all .4s;
+  transition: all .4s;
 }
 
 .current [role="tablist"] .selected [role="tabpanel"], .parent [role="tablist"] .selected [role="tabpanel"], .active [role="tablist"] .selected [role="tabpanel"] {
   visibility: visible;
-  opacity: 1;
-  transform: none;
     -moz-transform: none;
     -webkit-transform: none;
     -o-transform: none;
     -ms-transform: none;
+  transform: none;
 }
 
 [role="tablist"] .selected [role="tabpanel"] {
   opacity: 1;
-  transform: none;
     -moz-transform: none;
     -webkit-transform: none;
     -o-transform: none;
     -ms-transform: none;
+  transform: none;
 }
 
 [role="tablist"] .selected ~ [role="tab"] [role="tabpanel"] {
-  transform: translateX(102%);
     -moz-transform: translateX(102%);
     -webkit-transform: translateX(102%);
     -o-transform: translateX(102%);
     -ms-transform: translateX(102%);
+  transform: translateX(102%);
 }
 
 /* Position bottom */
@@ -179,9 +176,9 @@
 [role="tablist"].bottom  > [role="tab"] > a {
   position: relative;
   height: 4rem;
-  top: calc(100% - 4rem);
     top: -moz-calc(100% - 4rem);
     top: -webkit-calc(100% - 4rem);
+  top: calc(100% - 4rem);
 }
 
 [role="tablist"].bottom [role="tabpanel"] {
@@ -215,9 +212,9 @@
 [role="tablist"][data-type="filter"] > [role="tab"] {
   float: left;
   text-align: center;
-  box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   color: #737272;
   border-bottom: solid 1px #999;
 }

style/bb/toolbars.css

@@ -8,7 +8,6 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: 100;
   background-color: #1d1d1d;
 }
 

style/desktop.css

@@ -9,9 +9,11 @@
     bottom: 20%;
     box-shadow: 0 0 20px black;
     padding: 5px;
-    opacity: 0;
-    transform: translateY(120%);
-      -webkit-transform: translateY(120%);
+      -webkit-transform: translateY(150%);
+      -moz-transform: translateY(150%);
+      -o-transform: translateY(150%);
+      -ms-transform: translateY(150%);
+    transform: translateY(150%);
     z-index: 102 !important;
   }
   section[role="dialog"] + .background, form[role="dialog"] + .background {
@@ -28,17 +30,23 @@
     content: "";
     opacity: 0;
     visibility: hidden;
-    transition: opacity .4s, visibility .4s 0s;
+      -moz-transition: opacity .4s, visibility .4s 0s;
       -webkit-transition: opacity .4s, visibility .4s 0s;
+      -o-transition: opacity .4s, visibility .4s 0s;
+      -ms-transition: opacity .4s, visibility .4s 0s;
+    transition: opacity .4s, visibility .4s 0s;
   }
   section[role="dialog"].current + .background,
   section[role="dialog"].parent + .background,
   form[role="dialog"].current + .background,
   form[role="dialog"].parent + .background {
     opacity: 1;
     visibility: visible;
-    transition: opacity .4s, visibility 0s;
+      -moz-transition: opacity .4s, visibility 0s;
       -webkit-transition: opacity .4s, visibility 0s;
+      -o-transition: opacity .4s, visibility 0s;
+      -ms-transition: opacity .4s, visibility 0s;
+    transition: opacity .4s, visibility 0s;
   }
   [role="main"].header-only {
     overflow: auto;
@@ -73,6 +81,10 @@
       -o-transform: translateX(-250px) !important;
       -ms-transform: translateX(-250px) !important;    
     transform: translateX(-250px) !important;
-  }
+  }  
 
+  /* Misc */    
+  .firetext {
+    text-align: left !important;      
+  }
 }

style/regions.css

@@ -13,52 +13,48 @@ section[role="region"], section[role="dialog"] {
   left: 0px;
   right: 0px;  
   background-color: #eee;  
-  transition: all .4s ease;
     -moz-transition: all .4s ease;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
+  transition: all .4s ease;
 }
 
 section[role="region"] {
   visibility: hidden;
-  opacity: .99;  
-  transform: translateX(-100%);
     -moz-transform: translateX(-100%);
     -webkit-transform: translateX(-100%);
     -o-transform: translateX(-100%); 
     -ms-transform: translateX(-100%); 
+  transform: translateX(-100%);
 }
 
 section[role="region"].current,
 [role="region"].parent,
 [role="dialog"].parent {
   visibility: visible;
-  opacity: 1;
-  z-index: 100;  
-  transform: none;
+  z-index: 100; 
     -moz-transform: none;
     -webkit-transform: none;
     -o-transform: none;
-    -ms-transform: none;
+    -ms-transform: none; 
+  transform: none;
 }
 
 section[role="region"].current ~ section[role="region"] {  
-  opacity: .99;  
-  transform: translateX(100%);
     -moz-transform: translateX(100%);
     -webkit-transform: translateX(100%);
     -o-transform: translateX(100%);
     -ms-transform: translateX(100%);
+  transform: translateX(100%);
 }
 
 section[role="dialog"] {
   visibility: hidden;
-  opacity: .99;
-  transform: translateY(100%);
     -moz-transform: translateY(100%);
     -webkit-transform: translateY(100%);
     -o-transform: translateY(100%);
     -ms-transform: translateY(100%);
+  transform: translateY(100%);
 }
 
 section[role="dialog"] + .background {
@@ -68,45 +64,42 @@ section[role="dialog"] + .background {
 section[role="dialog"].current {
   z-index: 101;
   visibility: visible;
-  opacity: 1;
-  transform: none;
     -moz-transform: none;
     -webkit-transform: none;
     -o-transform: none;
     -ms-transform: none;
+  transform: none;
 }
 
 /* Handle sidebars */
 [data-type="sidebar"] {
-  opacity: 0;
   visibility: collapse;
-  transition: opacity .4s, .4s visibility 0s;
-    -moz-transition: opacity .4s, .4s visibility 0s;
-    -webkit-transition: opacity .4s, .4s visibility 0s;
-    -o-transition: opacity .4s, .4s visibility 0s;
+    -moz-transition: .4s visibility 0s;
+    -webkit-transition: .4s visibility 0s;
+    -o-transition: 4s visibility 0s;
+  transition: .4s visibility 0s;
 }
 
 [data-type="sidebar"].active {
-  opacity: 1;
   visibility: visible;
-  transition: opacity .4s, 0s visibility 0s;
-    -moz-transition: opacity .4s, 0s visibility 0s;
-    -webkit-transition: opacity .4s, 0s visibility 0s;
-    -o-transition: opacity .4s, 0s visibility 0s;
+    -moz-transition: 0s visibility 0s;
+    -webkit-transition: 0s visibility 0s;
+    -o-transition: 0s visibility 0s;
+  transition: 0s visibility 0s;
 }
 
 [data-state="drawer"].current {
-  transform: translateX(80%) !important;
     -moz-transform: translateX(80%) !important;
     -webkit-transform: translateX(80%) !important;
     -o-transform: translateX(80%) !important;
     -ms-transform: translateX(80%) !important;
+  transform: translateX(80%) !important;
 }
 
 [data-state="drawer"][data-position="right"].current {
-  transform: translateX(-80%) !important;
     -moz-transform: translateX(-80%) !important;
     -webkit-transform: translateX(-80%) !important;
     -o-transform: translateX(-80%) !important;
     -ms-transform: translateX(-80%) !important;
+  transform: translateX(-80%) !important;
 }