Browse Source

how about we don't use flex-box. awww yis

pull/245/head
connors 11 years ago
parent
commit
f39ee35520
  1. 8
      assets/css/docs.css
  2. 4
      dist/android-theme.css
  3. 47
      dist/ratchet.css
  4. 66
      index.html
  5. 3
      lib/sass/bars.scss
  6. 22
      lib/sass/buttons.scss
  7. 25
      lib/sass/segmented-controllers.scss
  8. 3
      lib/sass/theme-android.scss

8
assets/css/docs.css

@ -314,6 +314,14 @@ h6 {
height: 548px; height: 548px;
overflow: hidden; overflow: hidden;
background-color: #efeff4; 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, .iphone .content,

4
dist/android-theme.css vendored

@ -34,10 +34,6 @@
bottom: 71px; bottom: 71px;
} }
.bar-nav {
display: block;
}
.bar-tab { .bar-tab {
height: 70px; height: 70px;
border-top: 1px solid #565656; border-top: 1px solid #565656;

47
dist/ratchet.css vendored

@ -311,10 +311,6 @@ strong {
.bar-nav { .bar-nav {
top: 0; top: 0;
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
} }
.title { .title {
@ -702,22 +698,15 @@ select {
color: #428bca; color: #428bca;
background-color: transparent; background-color: transparent;
border: 0; 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 { .bar-nav [class*="button"].pull-right {
position: absolute; margin-left: 10px;
top: 5px; }
right: 10px; .bar-nav [class*="button"].pull-left {
margin-right: 10px;
} }
.bar-nav .button:active, .bar-nav .button:active,
.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,
.bar-nav .button-primary.active { .bar-nav .button-primary.active {
color: #428bca; color: #428bca;
@ -826,10 +815,8 @@ input[type="button"] {
} }
.segmented-controller { .segmented-controller {
display: -webkit-box; display: table;
display: box;
padding: 0; padding: 0;
margin: 0 0 10px 0;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
@ -837,20 +824,19 @@ input[type="button"] {
background-color: white; background-color: white;
border: 1px solid #428bca; border: 1px solid #428bca;
border-radius: 4px; border-radius: 4px;
-webkit-box-orient: horizontal;
box-orient: horizontal;
} }
.segmented-controller li { .segmented-controller li {
display: table-cell;
overflow: hidden; overflow: hidden;
width: 1%;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border-left: 1px solid #428bca; border-left: 1px solid #428bca;
-webkit-box-flex: 1;
box-flex: 1;
} }
.segmented-controller li > a { .segmented-controller li > a {
display: block; display: block;
padding: 6px 16px 7px; padding-top: 6px;
padding-bottom: 7px;
overflow: hidden; overflow: hidden;
line-height: 1; line-height: 1;
color: #428bca; color: #428bca;
@ -877,18 +863,9 @@ input[type="button"] {
} }
[class*="bar-"] .segmented-controller { [class*="bar-"] .segmented-controller {
margin: 3px 0; margin-top: 3px;
-webkit-box-flex: 1; margin-right: auto;
box-flex: 1; margin-left: auto;
}
.bar-nav .segmented-controller {
margin-bottom: 4px;
}
[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 10px;
} }
.popover { .popover {

66
index.html

@ -90,54 +90,54 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button">
Right Right
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button">
Right Right
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">Title bar with directional buttons</h3> <h3 class="component-title">Title bar with icons</h3>
<p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p> <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button-prev"> <a class="button pull-left">
Previous Left
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button-next"> Right
Next
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button-prev"> <a class="button pull-left">
Previous Left
</a> </a>
<h1 class="title">Title</h1> <a class="button pull-right">
<a class="button-next"> Right
Next
</a> </a>
<h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -149,9 +149,12 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<a class="button pull-right">
Right
</a>
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="selected"> <li class="selected">
<a>One</a> <a>One</a>
@ -162,18 +165,21 @@ layout: default
<li> <li>
<a>Three</a> <a>Three</a>
</li> </li>
<li>
<a>Four</a>
</li>
</ul> </ul>
<a class="button">
Right
</a>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<a class="button pull-right">
Right
</a>
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="selected"> <li class="selected">
<a>One</a> <a>One</a>
@ -185,9 +191,6 @@ layout: default
<a>Three</a> <a>Three</a>
</li> </li>
</ul> </ul>
<a class="button">
Right
</a>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -871,13 +874,12 @@ document
<div class="component-example"> <div class="component-example">
<div id="myPopover" class="popover"> <div id="myPopover" class="popover">
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a><a class="button pull-right">
<h3 class="title">Popover title</h3>
<a class="button">
Right Right
</a> </a>
<h3 class="title">Popover title</h3>
</header> </header>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell">Item1</li> <li class="table-view-cell">Item1</li>
@ -895,13 +897,13 @@ document
{% highlight html %} {% highlight html %}
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar-nav"> <header class="bar-nav">
<a class="button"> <a class="button pull-left">
Left Left
</a> </a>
<h3 class="title">Popover title</h3> <a class="button pull-right">
<a class="button">
Right Right
</a> </a>
<h3 class="title">Popover title</h3>
</header> </header>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell">Item1</li> <li class="table-view-cell">Item1</li>

3
lib/sass/bars.scss

@ -41,9 +41,6 @@
// Bar docked to top of viewport for showing page title and actions // Bar docked to top of viewport for showing page title and actions
.bar-nav { .bar-nav {
top: 0; top: 0;
display: -webkit-box;
display: box;
@include box-orient(horizontal);
} }
// Centered text in the .bar-nav // Centered text in the .bar-nav

22
lib/sass/buttons.scss

@ -117,26 +117,18 @@
color: $primary-color; color: $primary-color;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@include box-flex(0);
} &.pull-right {
margin-left: $bar-side-spacing;
// 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 &.pull-left {
.title + [class*="button"]:last-child, margin-right: $bar-side-spacing;
.button + [class*="button"]:last-child, }
[class*="button"].pull-right {
position: absolute;
top: 5px; // Offsets the bar's vertical padding
right: $bar-side-spacing;
} }
// Override standard button active states // Override standard button active states
.button:active, .button:active,
.button.active, .button.active,
.button-prev:active,
.button-prev.active,
.button-next:active,
.button-next.active,
.button-primary:active, .button-primary:active,
.button-primary.active { .button-primary.active {
color: $primary-color; color: $primary-color;

25
lib/sass/segmented-controllers.scss

@ -3,10 +3,8 @@
// -------------------------------------------------- // --------------------------------------------------
.segmented-controller { .segmented-controller {
display: -webkit-box; display: table;
display: box;
padding: 0; padding: 0;
margin: 0 0 10px 0;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: 12px;
font-weight: $font-weight-light; font-weight: $font-weight-light;
@ -14,20 +12,21 @@
background-color: $chrome-color; background-color: $chrome-color;
border: 1px solid $primary-color; border: 1px solid $primary-color;
border-radius: 4px; border-radius: 4px;
@include box-orient(horizontal);
// Section within controller // Section within controller
li { li {
display: table-cell;
overflow: hidden; overflow: hidden;
width: 1%;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border-left: 1px solid $primary-color; border-left: 1px solid $primary-color;
@include box-flex(1);
// Link that fills each section // Link that fills each section
> a { > a {
display: block; display: block;
padding: 6px 16px 7px; padding-top: 6px;
padding-bottom: 7px;
overflow: hidden; overflow: hidden;
line-height: 1; line-height: 1;
color: $primary-color; color: $primary-color;
@ -70,15 +69,7 @@
// Remove standard segmented bottom margin // Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller { [class*="bar-"] .segmented-controller {
margin: 3px 0; margin-top: 3px;
@include box-flex(1); margin-right: auto;
} margin-left: auto;
.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
} }

3
lib/sass/theme-android.scss

@ -66,9 +66,6 @@ $border-radius: 0;
bottom: $bar-tab-height + 1; bottom: $bar-tab-height + 1;
} }
} }
.bar-nav {
display: block;
}
.bar-tab { .bar-tab {
height: $bar-tab-height; height: $bar-tab-height;
border-top: $border-default; border-top: $border-default;

Loading…
Cancel
Save