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

make btn links easier to tap

pull/253/head
connors 11 years ago
parent
e84a1b1476
commit
d4216b0386
5 changed files with 66 additions and 40 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. 10
      dist/android-theme.css
  2. 34
      dist/ratchet.css
  3. 10
      docs-assets/css/docs.css
  4. 35
      lib/sass/bars.scss
  5. 13
      lib/sass/theme-android.scss

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

@ -221,6 +221,10 @@ a:active {
color: #33b5e5; color: #33b5e5;
opacity: .6; opacity: .6;
} }
.bar-nav .btn-link .icon {
top: 2px;
padding: 0;
}
.bar .segmented-control { .bar .segmented-control {
top: 7px; top: 7px;
@ -230,9 +234,11 @@ a:active {
padding-top: 13px; padding-top: 13px;
padding-bottom: 13px; padding-bottom: 13px;
} }
.bar .title .icon-caret { .bar .title .icon {
top: 10px;
padding: 0; padding: 0;
}
.bar .title .icon.icon-caret {
top: 10px;
color: #777; color: #777;
} }

34
dist/ratchet.css vendored
Unescape View File

@ -567,34 +567,34 @@ input[type="button"] {
} }
.bar-nav .btn-link { .bar-nav .btn-link {
padding: 0;
margin-top: 0; margin-top: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 16px; font-size: 16px;
color: #428bca; color: #428bca;
line-height: 44px; line-height: 44px;
border: none; border: 0;
background-color: transparent;
} }
.bar-nav .btn-link:active, .bar-nav .btn-link.active { .bar-nav .btn-link:active, .bar-nav .btn-link.active {
color: #3071a9; color: #3071a9;
} }
.bar-nav .btn-link .icon { .bar-nav .btn-link .icon {
padding-right: 0; top: 2px;
padding-left: 0; padding: 0;
} }
.bar-nav .btn-link.pull-left { .bar-nav .btn-link.pull-left {
margin-left: 5px; margin-left: -10px;
} }
.bar-nav .btn-link.pull-left .icon { .bar-nav .btn-link.pull-left .icon {
margin-right: -3px; margin-right: -4px;
margin-left: -10px; margin-left: -4px;
} }
.bar-nav .btn-link.pull-right { .bar-nav .btn-link.pull-right {
margin-right: 5px; margin-right: -10px;
} }
.bar-nav .btn-link.pull-right .icon { .bar-nav .btn-link.pull-right .icon {
margin-right: -10px; margin-right: -4px;
margin-left: -3px; margin-left: -4px;
} }
.bar .btn-block { .bar .btn-block {
@ -616,13 +616,13 @@ input[type="button"] {
.bar .icon { .bar .icon {
position: relative; position: relative;
padding: 10px; padding: 10px 13px;
z-index: 20; z-index: 20;
font-size: 24px; font-size: 24px;
} }
.bar > .icon { .bar > .icon {
padding-right: 5px; padding-right: 8px;
padding-left: 5px; padding-left: 8px;
} }
.bar > .icon.pull-left { .bar > .icon.pull-left {
margin-left: -10px; margin-left: -10px;
@ -630,9 +630,11 @@ input[type="button"] {
.bar > .icon.pull-right { .bar > .icon.pull-right {
margin-right: -10px; margin-right: -10px;
} }
.bar .title .icon-caret { .bar .title .icon {
top: 4px;
padding: 0; padding: 0;
}
.bar .title .icon.icon-caret {
top: 4px;
margin-left: -5px; margin-left: -5px;
} }

10
docs-assets/css/docs.css
Unescape View File

@ -1397,6 +1397,10 @@ hr {
color: #33b5e5; color: #33b5e5;
opacity: .6; opacity: .6;
} }
.platform-android .bar-nav .btn-link .icon {
top: 2px;
padding: 0;
}
.platform-android .bar .segmented-control { .platform-android .bar .segmented-control {
top: 7px; top: 7px;
} }
@ -1404,9 +1408,11 @@ hr {
padding-top: 13px; padding-top: 13px;
padding-bottom: 13px; padding-bottom: 13px;
} }
.platform-android .bar .title .icon-caret { .platform-android .bar .title .icon {
top: 10px;
padding: 0; padding: 0;
}
.platform-android .bar .title .icon.icon-caret {
top: 10px;
color: #777; color: #777;
} }
.platform-android .bar input[type="search"] { .platform-android .bar input[type="search"] {

35
lib/sass/bars.scss
Unescape View File

@ -140,13 +140,13 @@
// Nav bars with link buttons (Line the text up with content) // Nav bars with link buttons (Line the text up with content)
.bar-nav .btn-link { .bar-nav .btn-link {
padding: 0;
margin-top: 0; margin-top: 0;
padding-top: 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;
border: none; border: 0;
background-color: transparent;
&:active, &:active,
&.active { &.active {
@ -155,23 +155,23 @@
// 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 {
padding-right: 0; top: 2px;
padding-left: 0; padding: 0;
} }
&.pull-left { &.pull-left {
margin-left: 5px; margin-left: -10px;
.icon { .icon {
margin-right: -3px; margin-right: -4px;
margin-left: -10px; margin-left: -4px;
} }
} }
&.pull-right { &.pull-right {
margin-right: 5px; margin-right: -10px;
.icon { .icon {
margin-right: -10px; margin-right: -4px;
margin-left: -3px; margin-left: -4px;
} }
} }
} }
@ -215,13 +215,13 @@
.bar { .bar {
.icon { .icon {
position: relative; position: relative;
padding: 10px; padding: 10px 13px;
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 { > .icon {
padding-right: 5px; padding-right: 8px;
padding-left: 5px; padding-left: 8px;
// Offset the bar's side padding // Offset the bar's side padding
&.pull-left { &.pull-left {
@ -232,9 +232,12 @@
} }
} }
// Handle carets in the titles // Handle carets in the titles
.title .icon-caret { .title .icon {
top: 4px;
padding: 0; padding: 0;
&.icon-caret {
top: 4px;
margin-left: -5px; margin-left: -5px;
} }
} }
}

13
lib/sass/theme-android.scss
Unescape View File

@ -316,6 +316,12 @@ a {
color: $primary-color; color: $primary-color;
opacity: .6; opacity: .6;
} }
// Make sure link buttons w/ icons line up with the content correctly
.icon {
top: 2px;
padding: 0;
}
} }
} }
@ -333,12 +339,15 @@ a {
padding-bottom: 13px; padding-bottom: 13px;
} }
// Handle carets in the titles // Handle carets in the titles
.title .icon-caret { .title .icon {
top: 10px;
padding: 0; padding: 0;
&.icon-caret {
top: 10px;
color: #777; color: #777;
} }
} }
}
// Standard bars with search forms // Standard bars with search forms
// //

Write Preview
Loading…
Cancel
Save