require -webkit prefix for safari

CenturyLinkLabs · Nov 13, 2014 · 8e04852 · 8e04852
1 parent 4fb640c
commit 8e04852
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/app/assets/stylesheets/panamax.css.scss b/app/assets/stylesheets/panamax.css.scss
@@ -2,6 +2,7 @@
 @import 'ctl_base_ui/colors';
 @import 'ctl_base_ui/mixins';
 @import 'ctl_base_ui/icons';
+@import 'panamax/mixins';
 
 
 body {
@@ -811,7 +812,7 @@ pre.prettyprint {
   }
 }
 .tab-container {
-  display: flex;
+  @include flexbox();
   border-collapse: separate;
   border-spacing: 10px 0;
   width: 100%;
@@ -822,10 +823,10 @@ pre.prettyprint {
   }
 
   .column {
-    flex-grow: 1;
-    flex-shrink: 1;
     box-sizing: border-box;
     vertical-align: top;
+    @include flex-grow(1);
+    @include flex-shrink(1);
     @include transition('all 0.6s');
 
     .title {
@@ -860,9 +861,9 @@ pre.prettyprint {
   }
 
   .tabs {
-    flex-basis: 185px;
     clear: both;
     position: relative;
+    @include flex-basis('185px');
 
     .tab, .hide {
       width: 185px;
@@ -944,7 +945,7 @@ pre.prettyprint {
     }
 
     &.slim {
-      flex-basis: 40px;
+      @include flex-basis('40px');
 
       .tab {
         width: 40px;
@@ -961,6 +962,6 @@ pre.prettyprint {
   }
 
   .cards {
-    flex-basis: 510px;
+    @include flex-basis('510px');
   }
 }
diff --git a/app/assets/stylesheets/panamax/_mixins.scss b/app/assets/stylesheets/panamax/_mixins.scss
@@ -0,0 +1,19 @@
+@mixin flexbox() {
+  display: flex;
+  display: -webkit-flex;
+}
+
+@mixin flex-grow($amount) {
+  flex-grow: #{$amount};
+  -webkit-flex-grow: #{$amount};
+}
+
+@mixin flex-shrink($amount) {
+  flex-shrink: #{$amount};
+  -webkit-flex-shrink: #{$amount};
+}
+
+@mixin flex-basis($size) {
+  flex-basis: #{$size};
+  -webkit-flex-basis: #{$size};
+}
diff --git a/app/assets/stylesheets/panamax/deployments.css.scss b/app/assets/stylesheets/panamax/deployments.css.scss
@@ -4,6 +4,7 @@
 @import 'ctl_base_ui/colors';
 @import 'ctl_base_ui/typography';
 @import 'extensions';
+@import 'mixins';
 
 #deployments_flow {
   h2.template-name {
@@ -99,9 +100,9 @@
       }
 
       .cards {
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: auto;
+        @include flex-grow(1);
+        @include flex-shrink(1);
+        @include flex-basis('auto');
       }
 
       .card {

diff --git a/app/assets/stylesheets/panamax/service_tabs.css.scss b/app/assets/stylesheets/panamax/service_tabs.css.scss
@@ -2,11 +2,12 @@
 @import 'ctl_base_ui/colors';
 @import 'ctl_base_ui/icons';
 @import 'panamax/buttons';
+@import 'mixins';
 
 .tab-container {
   .column {
-    flex-grow: 0;
-    flex-shrink: 0;
+    @include flex-grow(0);
+    @include flex-shrink(0);
   }
 
   .card {
@@ -29,12 +30,13 @@
   }
 
   .cards {
-    flex-basis: 510px;
+    @include flex-basis('510px');
   }
 
   .docker-run {
-    flex-grow: 1;
-    flex-shrink: 1;
+    @include flex-grow(1);
+    @include flex-shrink(1);
+
     * {
       box-sizing: border-box;
     }