brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [04/13] incubator-brooklyn git commit: css fixes to support safari
Date Mon, 19 Jan 2015 23:00:24 GMT
css fixes to support safari


Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/4c6d4b71
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/4c6d4b71
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/4c6d4b71

Branch: refs/heads/master
Commit: 4c6d4b71738f7b76987afae1f990927116f0c169
Parents: 783e638
Author: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Authored: Thu Jan 15 16:24:42 2015 +0000
Committer: Alex Heneveld <alex.heneveld@cloudsoftcorp.com>
Committed: Thu Jan 15 16:33:00 2015 +0000

----------------------------------------------------------------------
 docs/style/css/base.scss | 49 +++++++++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 13 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/4c6d4b71/docs/style/css/base.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss
index 6d2b9fa..663d596 100644
--- a/docs/style/css/base.scss
+++ b/docs/style/css/base.scss
@@ -66,13 +66,25 @@ a[id]:empty, a[name]:empty {
 }
 /* GENERAL UTILS
    ----------------------------------------------------------------------- */
+
+@mixin flex() {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+
+@mixin transform($tfn) {
+  -webkit-transform: #{$tfn};
+  -moz-transform: #{$tfn};
+  -o-transform: #{$tfn};
+  transform: #{$tfn};
+}
    
 @mixin flip() {
-  transform: scaleX(-1);
   filter: FlipH;
-  -webkit-transform: scaleX(-1);
-  -moz-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
+  @include transform('scaleX(-1)');
   -ms-filter: "FlipH";
 }
 
@@ -206,9 +218,13 @@ a.header-literal-anchor { display: inline !important; }
    squashing the main container instead */
 .container-and-sidebars {
     width: 100%;
-    display: flex;
+    @include flex();
 }
 .container-between-sidebars {
+    -webkit-box-flex: 1 100%;
+    -webkit-flex: 1 100%;
+    -webkit-flex-flex: 1 100%;
+    flex: 1 100%;
     flex: 10 1 100%;
     display: inline-block;
     width: auto;
@@ -216,6 +232,10 @@ a.header-literal-anchor { display: inline !important; }
     margin-right: auto;
 }
 .container-sidebar {
+    -webkit-box-flex: 0 auto;
+    -webkit-flex: 0 auto;
+    -webkit-flex-flex: 0 auto;
+    flex: 0 auto;
     flex: 0 0 auto;
 }
 .container-sidebar-right { 
@@ -456,8 +476,8 @@ code {
 }
 .clipboard_button {
   font-size: 18px;
-  transform: translateY(-2px);
   color: $vibrant_fg_green;
+  @include transform('translateY(-2px)');
 }
 .clipboard_button:hover, .clipboard_button.zeroclipboard-is-hover {
   color: $a_hover_color;
@@ -487,7 +507,7 @@ code {
   display: inline-block;
   @include nowrap();
   padding: 3px 7px;
-  transform: translateX(-50%);
+  @include transform('translateX(-50%)');
 }
 
 
@@ -495,8 +515,8 @@ code {
    ----------------------------------------------------------------------- */
 
 div.search_right {
-  float: right; 
-  transform: translateY(-12px);
+  float: right;
+  @include transform('translateY(-12px)');
   padding-right: 5%; 
   padding-bottom: 18px;
   font-size: 75%;
@@ -628,7 +648,8 @@ div.annotated_blueprint {
       width: auto;
       height: 100%;
       div.block {
-        display: flex;
+        @include flex();
+        -webkit-align-items: center;
         align-items: center;
         z-index: -10;
       }
@@ -649,10 +670,11 @@ div.annotated_blueprint {
           // seems we have to use abs positioning because other techniques
           // (translation, negative margins, etc) don't show up outside the scroll-x
           position: absolute;
-          transform: translateX(-100%) translateY(-50%);
+          @include transform('translateX(-100%) translateY(-50%)');
           width: $annotation_width;
           
-          display: flex;
+          @include flex();
+          -webkit-align-items: center;
           align-items: center;
           div.annotations {
             // positioning and sizing
@@ -740,7 +762,8 @@ div.annotated_blueprint {
       position: relative;
       width: 0;
       height: 0;
-      display: flex;
+      @include flex();
+      -webkit-align-items: top;
       align-items: top;
     }
     div.initial_notice > div > div {


Mime
View raw message