Updated styles with autoprefix

gokulkrishh · Sep 1, 2016 · 9a3742d · 9a3742d
1 parent 9bd3146
commit 9a3742d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -24,6 +24,12 @@ li {
   margin: 0;
 }
 
+.no-select {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 /* MAIN styles */
 
 body {
@@ -56,6 +62,8 @@ header {
   top: 0;
   background-color: #1E88E5;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.19);
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   overflow: hidden;
   z-index: 1;
@@ -73,8 +81,14 @@ header.offline {
   width: 48px;
   height: 48px;
   margin: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
   cursor: pointer;
 }
@@ -87,6 +101,7 @@ header.offline {
 .header-title {
   color: #fff;
   font-size: 20px;
+  -ms-flex-item-align: center;
   align-self: center;
 }
 
@@ -99,13 +114,18 @@ header.offline {
   bottom: 0;
   box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.4);
   z-index: 1;
+  -webkit-transition: -webkit-transform 0.33s cubic-bezier(0, 0, 0.30, 1);
+  transition: -webkit-transform 0.33s cubic-bezier(0, 0, 0.30, 1);
   transition: transform 0.33s cubic-bezier(0, 0, 0.30, 1);
+  transition: transform 0.33s cubic-bezier(0, 0, 0.30, 1), -webkit-transform 0.33s cubic-bezier(0, 0, 0.30, 1);
+  -webkit-transform: translateX(-103%);
   transform: translateX(-103%);
   will-change: transform;
   z-index: 2;
 }
 
 .menu.show {
+  -webkit-transform: translateX(0);
   transform: translateX(0);
 }
 
@@ -118,6 +138,7 @@ header.offline {
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.3);
+  -webkit-transition: opacity 0.15s cubic-bezier(0, 0, 0.30, 1);
   transition: opacity 0.15s cubic-bezier(0, 0, 0.30, 1);
   visibility: hidden;
   opacity: 0;
@@ -173,9 +194,16 @@ header.offline {
   background: #323232;
   color: #fff;
   margin: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-transition: bottom 0.33s cubic-bezier(0, 0, 0.30, 1);
   transition: bottom 0.33s cubic-bezier(0, 0, 0.30, 1);
   will-change: transform;
   font-weight: 500;
@@ -219,7 +247,6 @@ button {
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38);
   -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38);
   -o-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38);
-  user-select: none;
   -webkit-user-select: none;
 }
 
@@ -241,9 +268,6 @@ button:disabled {
   border-radius: 8px;
   background: rgb(195, 195, 195);
   -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  -moz-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  -ms-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  -o-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   vertical-align: middle;
   cursor: pointer;
@@ -258,12 +282,8 @@ button:disabled {
   width: 22px;
   height: 22px;
   background: #fff;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
   border-radius: 50%;
   -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  -moz-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.51);
   -webkit-box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.51);

diff --git a/index.html b/index.html
@@ -24,12 +24,12 @@
   <div class="app-layout">
     <header>
       <span class="header-icon">
-        <svg class="menu-icon" width="24px" height="24px" viewBox="0 0 48 48" fill="#fff">
+        <svg class="menu-icon no-select" width="24px" height="24px" viewBox="0 0 48 48" fill="#fff">
           <path d="M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"></path>
         </svg>
       </span>
 
-      <span class="header-title">Progressive Web App</span>
+      <span class="header-title no-select">Progressive Web App</span>
     </header>
 
     <div class="menu">
@@ -44,7 +44,7 @@
       <p class="custom-button">
         <input id="turn-on-notification" type="checkbox" hidden="hidden" class="custom-input" data-checked="">
         <label for="turn-on-notification" class="custom-checkbox"></label>
-        <button class="btn-notification" id="send-push" disabled>Send Push Notification</button>
+        <button class="btn-notification no-select" id="send-push" disabled>Send Push Notification</button>
       </p>
 
       <div class="card-container">
@@ -61,8 +61,8 @@
     </div>
 
     <div class="snack-bar">
-      <p class="snack-bar-msg">App is offline!</p>
-      <div class="snack-bar-action">hide</div>
+      <p class="snack-bar-msg no-select">App is offline!</p>
+      <div class="snack-bar-action no-select">hide</div>
     </div>
   </div>