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;
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,

4
dist/android-theme.css vendored

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

47
dist/ratchet.css vendored

@ -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 {

66
index.html

@ -90,54 +90,54 @@ layout: default
<div class="component-example component-example-fullbleed">
<header class="bar-nav">
<a class="button">
<a class="button pull-left">
Left
</a>
<h1 class="title">Title</h1>
<a class="button">
<a class="button pull-right">
Right
</a>
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %}
<header class="bar-nav">
<a class="button">
<a class="button pull-left">
Left
</a>
<h1 class="title">Title</h1>
<a class="button">
<a class="button pull-right">
Right
</a>
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
</article>
<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>
<div class="component-example component-example-fullbleed">
<header class="bar-nav">
<a class="button-prev">
Previous
<a class="button pull-left">
Left
</a>
<h1 class="title">Title</h1>
<a class="button-next">
Next
<a class="button pull-right">
Right
</a>
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %}
<header class="bar-nav">
<a class="button-prev">
Previous
<a class="button pull-left">
Left
</a>
<h1 class="title">Title</h1>
<a class="button-next">
Next
<a class="button pull-right">
Right
</a>
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
@ -149,9 +149,12 @@ layout: default
<div class="component-example component-example-fullbleed">
<header class="bar-nav">
<a class="button">
<a class="button pull-left">
Left
</a>
<a class="button pull-right">
Right
</a>
<ul class="segmented-controller">
<li class="selected">
<a>One</a>
@ -162,18 +165,21 @@ layout: default
<li>
<a>Three</a>
</li>
<li>
<a>Four</a>
</li>
</ul>
<a class="button">
Right
</a>
</header>
</div>
{% highlight html %}
<header class="bar-nav">
<a class="button">
<a class="button pull-left">
Left
</a>
<a class="button pull-right">
Right
</a>
<ul class="segmented-controller">
<li class="selected">
<a>One</a>
@ -185,9 +191,6 @@ layout: default
<a>Three</a>
</li>
</ul>
<a class="button">
Right
</a>
</header>
{% endhighlight %}
@ -871,13 +874,12 @@ document
<div class="component-example">
<div id="myPopover" class="popover">
<header class="bar-nav">
<a class="button">
<a class="button pull-left">
Left
</a>
<h3 class="title">Popover title</h3>
<a class="button">
</a><a class="button pull-right">
Right
</a>
<h3 class="title">Popover title</h3>
</header>
<ul class="table-view">
<li class="table-view-cell">Item1</li>
@ -895,13 +897,13 @@ document
{% highlight html %}
<div id="popover" class="popover">
<header class="bar-nav">
<a class="button">
<a class="button pull-left">
Left
</a>
<h3 class="title">Popover title</h3>
<a class="button">
<a class="button pull-right">
Right
</a>
<h3 class="title">Popover title</h3>
</header>
<ul class="table-view">
<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-nav {
top: 0;
display: -webkit-box;
display: box;
@include box-orient(horizontal);
}
// Centered text in the .bar-nav

22
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;

25
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;
}

3
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;

Loading…
Cancel
Save