Browse Source

refactoring icons and buttons in bars

pull/253/head
connors 11 years ago
parent
commit
9337fccbce
  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

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

72
dist/ratchet.css vendored

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

26
docs/assets/css/docs.css

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

8
docs/components.html

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

27
docs/dist/android-theme.css vendored

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

72
docs/dist/ratchet.css vendored

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

103
sass/bars.scss

@ -120,10 +120,10 @@
}
// Nav bars with buttons
// Bars with buttons
// --------------------------------------------------
.bar-nav .btn {
.bar .btn {
position: relative;
z-index: 20; // Position the buttons on top of .title
padding: 6px 12px;
@ -138,11 +138,10 @@
}
}
// Nav bars with link buttons (Line the text up with content)
.bar-nav .btn-link {
// Bars with link buttons (Line the text up with content)
.bar .btn-link {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
padding: 0;
font-size: 16px;
color: $primary-color;
line-height: $bar-base-height;
@ -152,34 +151,9 @@
&.active {
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
// --------------------------------------------------
// Add proper padding
.bar .btn-block {
padding: 7px 0 6px;
@ -188,24 +162,24 @@
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
// --------------------------------------------------
// Position/size search bar within the bar
.bar input[type="search"] {
height: 29px;
margin: 6px 0;
.icon-left-nav {
margin-right: -3px;
}
}
&.pull-right {
margin-right: -5px;
// Bars with segmented controls
// --------------------------------------------------
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 8px;
margin: 0 auto;
.icon-right-nav {
margin-left: -3px;
}
}
}
@ -215,22 +189,17 @@
.bar {
.icon {
position: relative;
padding: 10px 13px;
padding: 10px 0;
z-index: 20; // Position the buttons on top of .title
font-size: 24px;
}
> .icon {
padding-right: 5px;
padding-left: 5px;
// Offset the bar's side padding
&.pull-left {
margin-left: -10px;
}
&.pull-right {
margin-right: -10px;
}
// Handle the larger icons in btns.
.btn .icon {
top: 2px;
padding: 0;
}
// Handle carets in the titles
.title .icon {
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

@ -287,12 +287,13 @@ a {
// Bars with buttons
.bar {
.btn {
margin-top: 7px;
padding-top: 9px;
padding-bottom: 9px;
}
.btn-link {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
padding: 0;
color: $primary-color;
font-size: $font-size-default;
line-height: 49px;
@ -302,32 +303,6 @@ a {
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
.icon {
top: 2px;
@ -349,6 +324,7 @@ a {
padding-top: 13px;
padding-bottom: 13px;
}
// Handle carets in the titles
.title .icon {
padding: 0;

Loading…
Cancel
Save