From f39ee355208cca2a2a83d0dee74cc6ed82eadf79 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:23:07 -0800 Subject: [PATCH] how about we don't use flex-box. awww yis --- assets/css/docs.css | 8 ++++ dist/android-theme.css | 4 -- dist/ratchet.css | 47 ++++++-------------- index.html | 66 +++++++++++++++-------------- lib/sass/bars.scss | 3 -- lib/sass/buttons.scss | 22 +++------- lib/sass/segmented-controllers.scss | 25 ++++------- lib/sass/theme-android.scss | 3 -- 8 files changed, 69 insertions(+), 109 deletions(-) diff --git a/assets/css/docs.css b/assets/css/docs.css index 0c1436c..f36d0c2 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -314,6 +314,14 @@ h6 { height: 548px; overflow: hidden; background-color: #efeff4; + /*background: rgb(0,0,0); + background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); + background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/ } .iphone .content, diff --git a/dist/android-theme.css b/dist/android-theme.css index 6e4129d..e3101f5 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -34,10 +34,6 @@ bottom: 71px; } -.bar-nav { - display: block; -} - .bar-tab { height: 70px; border-top: 1px solid #565656; diff --git a/dist/ratchet.css b/dist/ratchet.css index 90db69f..790592d 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -311,10 +311,6 @@ strong { .bar-nav { top: 0; - display: -webkit-box; - display: box; - -webkit-box-orient: horizontal; - box-orient: horizontal; } .title { @@ -702,22 +698,15 @@ select { color: #428bca; background-color: transparent; border: 0; - -webkit-box-flex: 0; - box-flex: 0; } -.bar-nav .title + [class*="button"]:last-child, -.bar-nav .button + [class*="button"]:last-child, .bar-nav [class*="button"].pull-right { - position: absolute; - top: 5px; - right: 10px; + margin-left: 10px; +} +.bar-nav [class*="button"].pull-left { + margin-right: 10px; } .bar-nav .button:active, .bar-nav .button.active, -.bar-nav .button-prev:active, -.bar-nav .button-prev.active, -.bar-nav .button-next:active, -.bar-nav .button-next.active, .bar-nav .button-primary:active, .bar-nav .button-primary.active { color: #428bca; @@ -826,10 +815,8 @@ input[type="button"] { } .segmented-controller { - display: -webkit-box; - display: box; + display: table; padding: 0; - margin: 0 0 10px 0; overflow: hidden; font-size: 12px; font-weight: 400; @@ -837,20 +824,19 @@ input[type="button"] { background-color: white; border: 1px solid #428bca; border-radius: 4px; - -webkit-box-orient: horizontal; - box-orient: horizontal; } .segmented-controller li { + display: table-cell; overflow: hidden; + width: 1%; text-align: center; white-space: nowrap; border-left: 1px solid #428bca; - -webkit-box-flex: 1; - box-flex: 1; } .segmented-controller li > a { display: block; - padding: 6px 16px 7px; + padding-top: 6px; + padding-bottom: 7px; overflow: hidden; line-height: 1; color: #428bca; @@ -877,18 +863,9 @@ input[type="button"] { } [class*="bar-"] .segmented-controller { - margin: 3px 0; - -webkit-box-flex: 1; - box-flex: 1; -} - -.bar-nav .segmented-controller { - margin-bottom: 4px; -} - -[class*="bar-"] .segmented-controller + [class*="button"], -[class*="bar-"] [class*="button"] + .segmented-controller { - margin-left: 10px; + margin-top: 3px; + margin-right: auto; + margin-left: auto; } .popover { diff --git a/index.html b/index.html index 6eac635..bfe44ea 100644 --- a/index.html +++ b/index.html @@ -90,54 +90,54 @@ layout: default
- + Left -

Title

- + Right +

Title

{% highlight html %}
- + Left -

Title

- + Right +

Title

{% endhighlight %}
-

Title bar with directional buttons

+

Title bar with icons

Directional buttons in a title bar should be used for navigational purposes.

- - Previous + + Left -

Title

- - Next + + Right +

Title

{% highlight html %}
- - Previous + + Left -

Title

- - Next + + Right +

Title

{% endhighlight %} @@ -149,9 +149,12 @@ layout: default
- + Left + + Right +
  • One @@ -162,18 +165,21 @@ layout: default
  • Three
    • +
  • + Four +
- - Right -
{% highlight html %}
- + Left + + Right +
  • One @@ -185,9 +191,6 @@ layout: default Three
- - Right -
{% endhighlight %} @@ -871,13 +874,12 @@ document
- + Left - -

Popover title

- + Right +

Popover title

  • Item1
    • @@ -895,13 +897,13 @@ document {% highlight html %}
    - + Left -

    Popover title

    - + Right +

    Popover title

    • Item1
      • diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 4197013..50ddaa0 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -41,9 +41,6 @@ // Bar docked to top of viewport for showing page title and actions .bar-nav { top: 0; - display: -webkit-box; - display: box; - @include box-orient(horizontal); } // Centered text in the .bar-nav diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 3422b10..7760f1e 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -117,26 +117,18 @@ color: $primary-color; background-color: transparent; border: 0; - @include box-flex(0); - } - - // Hacky way to right align buttons outside of flex-box system - // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option - .title + [class*="button"]:last-child, - .button + [class*="button"]:last-child, - [class*="button"].pull-right { - position: absolute; - top: 5px; // Offsets the bar's vertical padding - right: $bar-side-spacing; + + &.pull-right { + margin-left: $bar-side-spacing; + } + &.pull-left { + margin-right: $bar-side-spacing; + } } // Override standard button active states .button:active, .button.active, - .button-prev:active, - .button-prev.active, - .button-next:active, - .button-next.active, .button-primary:active, .button-primary.active { color: $primary-color; diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index d505af8..9b8c16f 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -3,10 +3,8 @@ // -------------------------------------------------- .segmented-controller { - display: -webkit-box; - display: box; + display: table; padding: 0; - margin: 0 0 10px 0; overflow: hidden; font-size: 12px; font-weight: $font-weight-light; @@ -14,20 +12,21 @@ background-color: $chrome-color; border: 1px solid $primary-color; border-radius: 4px; - @include box-orient(horizontal); // Section within controller li { + display: table-cell; overflow: hidden; + width: 1%; text-align: center; white-space: nowrap; border-left: 1px solid $primary-color; - @include box-flex(1); // Link that fills each section > a { display: block; - padding: 6px 16px 7px; + padding-top: 6px; + padding-bottom: 7px; overflow: hidden; line-height: 1; color: $primary-color; @@ -70,15 +69,7 @@ // Remove standard segmented bottom margin [class*="bar-"] .segmented-controller { - margin: 3px 0; - @include box-flex(1); -} -.bar-nav .segmented-controller { - margin-bottom: 4px; -} - -// Add margins between segmented controllers and buttons -[class*="bar-"] .segmented-controller + [class*="button"], -[class*="bar-"] [class*="button"] + .segmented-controller { - margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons + margin-top: 3px; + margin-right: auto; + margin-left: auto; } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index f7bbc0d..b813e6a 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -66,9 +66,6 @@ $border-radius: 0; bottom: $bar-tab-height + 1; } } -.bar-nav { - display: block; -} .bar-tab { height: $bar-tab-height; border-top: $border-default;