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

refactoring icons and buttons in bars

pull/253/head
connors 11 years ago
parent
323fd280f9
commit
9337fccbce
8 changed files with 127 additions and 242 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. 27
      dist/android-theme.css
  2. 72
      dist/ratchet.css
  3. 26
      docs/assets/css/docs.css
  4. 8
      docs/components.html
  5. 27
      docs/dist/android-theme.css
  6. 72
      docs/dist/ratchet.css
  7. 103
      sass/bars.scss
  8. 32
      sass/theme-android.scss

27
dist/android-theme.css vendored
Unescape View File

@ -197,12 +197,13 @@ a:active {
} }
.bar .btn { .bar .btn {
margin-top: 7px;
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.bar .btn-link { .bar .btn-link {
padding-top: 0; margin-top: 0;
padding-bottom: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
@ -210,27 +211,7 @@ a:active {
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }
.bar .btn-link.pull-left { .bar .btn-link .icon {
padding-left: 12px;
padding-right: 0;
}
.bar .btn-link.pull-right {
padding-left: 0;
padding-right: 12px;
}
.bar-nav .btn {
margin-top: 7px;
}
.bar-nav .btn-link {
margin-top: 0;
color: #33b5e5;
}
.bar-nav .btn-link:active {
color: #33b5e5;
opacity: .6;
}
.bar-nav .btn-link .icon {
top: 2px; top: 2px;
padding: 0; padding: 0;
} }

72
dist/ratchet.css vendored
Unescape View File

@ -552,50 +552,31 @@ input[type="button"] {
font-size: 11px; font-size: 11px;
} }
.bar-nav .btn { .bar .btn {
position: relative; position: relative;
z-index: 20; z-index: 20;
padding: 6px 12px; padding: 6px 12px;
margin-top: 8px; margin-top: 8px;
font-weight: 400; font-weight: 400;
} }
.bar-nav .btn.pull-right { .bar .btn.pull-right {
margin-left: 10px; margin-left: 10px;
} }
.bar-nav .btn.pull-left { .bar .btn.pull-left {
margin-right: 10px; margin-right: 10px;
} }
.bar-nav .btn-link { .bar .btn-link {
margin-top: 0; margin-top: 0;
padding-top: 0; padding: 0;
padding-bottom: 0;
font-size: 16px; font-size: 16px;
color: #428bca; color: #428bca;
line-height: 44px; line-height: 44px;
border: 0; border: 0;
} }
.bar-nav .btn-link:active, .bar-nav .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #3071a9; color: #3071a9;
} }
.bar-nav .btn-link .icon {
top: 2px;
padding: 0;
}
.bar-nav .btn-link.pull-left {
margin-left: -10px;
}
.bar-nav .btn-link.pull-left .icon {
margin-right: -5px;
margin-left: -7px;
}
.bar-nav .btn-link.pull-right {
margin-right: -10px;
}
.bar-nav .btn-link.pull-right .icon {
margin-right: -7px;
margin-left: -5px;
}
.bar .btn-block { .bar .btn-block {
padding: 7px 0 6px; padding: 7px 0 6px;
@ -604,31 +585,28 @@ input[type="button"] {
font-size: 16px; font-size: 16px;
} }
.bar input[type="search"] { .bar .btn-nav.pull-left {
height: 29px; margin-left: -5px;
margin: 6px 0;
} }
.bar .btn-nav.pull-left .icon-left-nav {
.bar .segmented-control { margin-right: -3px;
top: 8px; }
margin: 0 auto; .bar .btn-nav.pull-right {
margin-right: -5px;
}
.bar .btn-nav.pull-right .icon-right-nav {
margin-left: -3px;
} }
.bar .icon { .bar .icon {
position: relative; position: relative;
padding: 10px 13px; padding: 10px 0;
z-index: 20; z-index: 20;
font-size: 24px; font-size: 24px;
} }
.bar > .icon { .bar .btn .icon {
padding-right: 5px; top: 2px;
padding-left: 5px; padding: 0;
}
.bar > .icon.pull-left {
margin-left: -10px;
}
.bar > .icon.pull-right {
margin-right: -10px;
} }
.bar .title .icon { .bar .title .icon {
padding: 0; padding: 0;
@ -638,6 +616,16 @@ input[type="button"] {
margin-left: -5px; margin-left: -5px;
} }
.bar input[type="search"] {
height: 29px;
margin: 6px 0;
}
.bar .segmented-control {
top: 8px;
margin: 0 auto;
}
.badge { .badge {
display: inline-block; display: inline-block;
padding: 2px 9px; padding: 2px 9px;

26
docs/assets/css/docs.css
Unescape View File

@ -1374,12 +1374,13 @@ hr {
text-align: left; text-align: left;
} }
.platform-android .bar .btn { .platform-android .bar .btn {
margin-top: 7px;
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.platform-android .bar .btn-link { .platform-android .bar .btn-link {
padding-top: 0; margin-top: 0;
padding-bottom: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
@ -1387,26 +1388,7 @@ hr {
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active { .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }
.platform-android .bar .btn-link.pull-left { .platform-android .bar .btn-link .icon {
padding-left: 12px;
padding-right: 0;
}
.platform-android .bar .btn-link.pull-right {
padding-left: 0;
padding-right: 12px;
}
.platform-android .bar-nav .btn {
margin-top: 7px;
}
.platform-android .bar-nav .btn-link {
margin-top: 0;
color: #33b5e5;
}
.platform-android .bar-nav .btn-link:active {
color: #33b5e5;
opacity: .6;
}
.platform-android .bar-nav .btn-link .icon {
top: 2px; top: 2px;
padding: 0; padding: 0;
} }

8
docs/components.html
Unescape View File

@ -127,11 +127,11 @@ title: Components · Ratchet
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="btn btn-link pull-left"> <a class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span> <span class="icon icon-left-nav"></span>
Left Left
</a> </a>
<a class="btn btn-link pull-right"> <a class="btn btn-link btn-nav pull-right">
Right Right
<span class="icon icon-right-nav"></span> <span class="icon icon-right-nav"></span>
</a> </a>
@ -141,11 +141,11 @@ title: Components &middot; Ratchet
{% highlight html %} {% highlight html %}
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="btn btn-link pull-left"> <a class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span> <span class="icon icon-left-nav"></span>
Left Left
</a> </a>
<a class="btn btn-link pull-right"> <a class="btn btn-link btn-nav pull-right">
Right Right
<span class="icon icon-right-nav"></span> <span class="icon icon-right-nav"></span>
</a> </a>

27
docs/dist/android-theme.css vendored
Unescape View File

@ -197,12 +197,13 @@ a:active {
} }
.bar .btn { .bar .btn {
margin-top: 7px;
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.bar .btn-link { .bar .btn-link {
padding-top: 0; margin-top: 0;
padding-bottom: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
@ -210,27 +211,7 @@ a:active {
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }
.bar .btn-link.pull-left { .bar .btn-link .icon {
padding-left: 12px;
padding-right: 0;
}
.bar .btn-link.pull-right {
padding-left: 0;
padding-right: 12px;
}
.bar-nav .btn {
margin-top: 7px;
}
.bar-nav .btn-link {
margin-top: 0;
color: #33b5e5;
}
.bar-nav .btn-link:active {
color: #33b5e5;
opacity: .6;
}
.bar-nav .btn-link .icon {
top: 2px; top: 2px;
padding: 0; padding: 0;
} }

72
docs/dist/ratchet.css vendored
Unescape View File

@ -552,50 +552,31 @@ input[type="button"] {
font-size: 11px; font-size: 11px;
} }
.bar-nav .btn { .bar .btn {
position: relative; position: relative;
z-index: 20; z-index: 20;
padding: 6px 12px; padding: 6px 12px;
margin-top: 8px; margin-top: 8px;
font-weight: 400; font-weight: 400;
} }
.bar-nav .btn.pull-right { .bar .btn.pull-right {
margin-left: 10px; margin-left: 10px;
} }
.bar-nav .btn.pull-left { .bar .btn.pull-left {
margin-right: 10px; margin-right: 10px;
} }
.bar-nav .btn-link { .bar .btn-link {
margin-top: 0; margin-top: 0;
padding-top: 0; padding: 0;
padding-bottom: 0;
font-size: 16px; font-size: 16px;
color: #428bca; color: #428bca;
line-height: 44px; line-height: 44px;
border: 0; border: 0;
} }
.bar-nav .btn-link:active, .bar-nav .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #3071a9; color: #3071a9;
} }
.bar-nav .btn-link .icon {
top: 2px;
padding: 0;
}
.bar-nav .btn-link.pull-left {
margin-left: -10px;
}
.bar-nav .btn-link.pull-left .icon {
margin-right: -5px;
margin-left: -7px;
}
.bar-nav .btn-link.pull-right {
margin-right: -10px;
}
.bar-nav .btn-link.pull-right .icon {
margin-right: -7px;
margin-left: -5px;
}
.bar .btn-block { .bar .btn-block {
padding: 7px 0 6px; padding: 7px 0 6px;
@ -604,31 +585,28 @@ input[type="button"] {
font-size: 16px; font-size: 16px;
} }
.bar input[type="search"] { .bar .btn-nav.pull-left {
height: 29px; margin-left: -5px;
margin: 6px 0;
} }
.bar .btn-nav.pull-left .icon-left-nav {
.bar .segmented-control { margin-right: -3px;
top: 8px; }
margin: 0 auto; .bar .btn-nav.pull-right {
margin-right: -5px;
}
.bar .btn-nav.pull-right .icon-right-nav {
margin-left: -3px;
} }
.bar .icon { .bar .icon {
position: relative; position: relative;
padding: 10px 13px; padding: 10px 0;
z-index: 20; z-index: 20;
font-size: 24px; font-size: 24px;
} }
.bar > .icon { .bar .btn .icon {
padding-right: 5px; top: 2px;
padding-left: 5px; padding: 0;
}
.bar > .icon.pull-left {
margin-left: -10px;
}
.bar > .icon.pull-right {
margin-right: -10px;
} }
.bar .title .icon { .bar .title .icon {
padding: 0; padding: 0;
@ -638,6 +616,16 @@ input[type="button"] {
margin-left: -5px; margin-left: -5px;
} }
.bar input[type="search"] {
height: 29px;
margin: 6px 0;
}
.bar .segmented-control {
top: 8px;
margin: 0 auto;
}
.badge { .badge {
display: inline-block; display: inline-block;
padding: 2px 9px; padding: 2px 9px;

103
sass/bars.scss
Unescape View File

@ -120,10 +120,10 @@
} }
// Nav bars with buttons // Bars with buttons
// -------------------------------------------------- // --------------------------------------------------
.bar-nav .btn { .bar .btn {
position: relative; position: relative;
z-index: 20; // Position the buttons on top of .title z-index: 20; // Position the buttons on top of .title
padding: 6px 12px; padding: 6px 12px;
@ -138,11 +138,10 @@
} }
} }
// Nav bars with link buttons (Line the text up with content) // Bars with link buttons (Line the text up with content)
.bar-nav .btn-link { .bar .btn-link {
margin-top: 0; margin-top: 0;
padding-top: 0; padding: 0;
padding-bottom: 0;
font-size: 16px; font-size: 16px;
color: $primary-color; color: $primary-color;
line-height: $bar-base-height; line-height: $bar-base-height;
@ -152,34 +151,9 @@
&.active { &.active {
color: darken($primary-color, 10%); color: darken($primary-color, 10%);
} }
// Make sure link buttons w/ icons line up with the content correctly
.icon {
top: 2px;
padding: 0;
}
&.pull-left {
margin-left: -10px;
.icon {
margin-right: -5px;
margin-left: -7px;
}
}
&.pull-right {
margin-right: -10px;
.icon {
margin-right: -7px;
margin-left: -5px;
}
}
} }
// Bars with block buttons // Bars with block buttons
// --------------------------------------------------
// Add proper padding // Add proper padding
.bar .btn-block { .bar .btn-block {
padding: 7px 0 6px; padding: 7px 0 6px;
@ -188,24 +162,24 @@
font-size: 16px; // Scale down font size to fit in bar. font-size: 16px; // Scale down font size to fit in bar.
} }
// Nav buttons (Only applicable within bars)
//
// Buttons inside bar that sit closer against the viewport.
.bar .btn-nav {
&.pull-left {
margin-left: -5px;
// Bars for search forms .icon-left-nav {
// -------------------------------------------------- margin-right: -3px;
// Position/size search bar within the bar
.bar input[type="search"] {
height: 29px;
margin: 6px 0;
} }
}
&.pull-right {
margin-right: -5px;
.icon-right-nav {
// Bars with segmented controls margin-left: -3px;
// -------------------------------------------------- }
}
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 8px;
margin: 0 auto;
} }
@ -215,22 +189,17 @@
.bar { .bar {
.icon { .icon {
position: relative; position: relative;
padding: 10px 13px; padding: 10px 0;
z-index: 20; // Position the buttons on top of .title z-index: 20; // Position the buttons on top of .title
font-size: 24px; font-size: 24px;
} }
> .icon {
padding-right: 5px;
padding-left: 5px;
// Offset the bar's side padding // Handle the larger icons in btns.
&.pull-left { .btn .icon {
margin-left: -10px; top: 2px;
} padding: 0;
&.pull-right {
margin-right: -10px;
}
} }
// Handle carets in the titles // Handle carets in the titles
.title .icon { .title .icon {
padding: 0; padding: 0;
@ -241,3 +210,23 @@
} }
} }
} }
// Bars for search forms
// --------------------------------------------------
// Position/size search bar within the bar
.bar input[type="search"] {
height: 29px;
margin: 6px 0;
}
// Bars with segmented controls
// --------------------------------------------------
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 8px;
margin: 0 auto;
}

32
sass/theme-android.scss
Unescape View File

@ -287,12 +287,13 @@ a {
// Bars with buttons // Bars with buttons
.bar { .bar {
.btn { .btn {
margin-top: 7px;
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.btn-link { .btn-link {
padding-top: 0; margin-top: 0;
padding-bottom: 0; padding: 0;
color: $primary-color; color: $primary-color;
font-size: $font-size-default; font-size: $font-size-default;
line-height: 49px; line-height: 49px;
@ -302,32 +303,6 @@ a {
color: darken($primary-color, 10%); color: darken($primary-color, 10%);
} }
// Offset the bar's side padding
&.pull-left {
padding-left: 12px;
padding-right: 0;
}
&.pull-right {
padding-left: 0;
padding-right: 12px;
}
}
}
// Nav bars with buttons
.bar-nav {
.btn {
margin-top: 7px;
}
.btn-link {
margin-top: 0;
color: $primary-color;
&:active {
color: $primary-color;
opacity: .6;
}
// Make sure link buttons w/ icons line up with the content correctly // Make sure link buttons w/ icons line up with the content correctly
.icon { .icon {
top: 2px; top: 2px;
@ -349,6 +324,7 @@ a {
padding-top: 13px; padding-top: 13px;
padding-bottom: 13px; padding-bottom: 13px;
} }
// Handle carets in the titles // Handle carets in the titles
.title .icon { .title .icon {
padding: 0; padding: 0;

Write Preview
Loading…
Cancel
Save