playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

pull/245/head
connors 11 years ago
parent
f11bf17d2d
commit
f39ee35520
8 changed files with 69 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save