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

fixing up the android theme a tad

pull/253/head
connors 11 years ago
parent
7a78c89482
commit
9f3680c4b9
5 changed files with 312 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      dist/android-theme.css
  2. 133
      docs-assets/css/docs.css
  3. 8
      lib/sass/docs.scss
  4. 134
      lib/sass/theme-android.scss
  5. 1
      lib/sass/theme-ios.scss

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

@ -11,57 +11,74 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
line-height: 21px;
font-size: 18px;
line-height: 22px;
color: #222222;
}
.content {
background: #dddddd;
background: -moz-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: -o-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: linear-gradient(to bottom, #dddddd 0%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
background-color: #f2f2f2;
}
.bar-nav ~ .content {
padding-top: 50px;
}
.bar-tab ~ .content {
padding-bottom: 50px;
}
.bar-header-secondary ~ .content {
padding-top: 100px;
}
.bar {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #565656;
border-bottom: 1px solid #b1b1b1;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.bar.bar-header-secondary {
top: 51px;
}
.bar-tab {
height: 70px;
border-top: 1px solid #565656;
height: 50px;
border-top: 1px solid #b1b1b1;
border-bottom: 0;
box-shadow: inset 0 2px 0 #d2d2d2, 0 -3px 3px rgba(0, 0, 0, 0.07);
}
.title {
position: static;
padding-left: 10px;
line-height: 50px;
color: #9a9a9a;
text-align: left;
}
.popover .bar-nav {
border-bottom: 1px solid #565656;
border-bottom: 1px solid #b1b1b1;
}
.card {
border-color: #d9d9d9;
border-radius: 2px;
}
.table-view .table-view-cell {
border-bottom: 1px solid #565656;
border-bottom: 1px solid #d9d9d9;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
.popover .table-view {
@ -110,10 +127,12 @@ textarea,
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
}
.input-group input:last-child {
@ -121,23 +140,26 @@ textarea,
}
.input-row {
border-bottom: 0;
border-bottom: 1px solid #d9d9d9;
}
.input-row:last-child,
.input-row label + input {
background-image: none;
border-bottom: 0;
}
.btn {
border: 1px solid #565656;
color: #9a9a9a;
background-color: #dddddd;
border-radius: 3px;
color: #222222;
background-color: #cecece;
border: 0;
border-radius: 2px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.btn:active, .btn.active {
color: #fff;
background-color: #9a9a9a;
color: #222222;
border: 0;
background-color: #999999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.bar .btn {
@ -155,58 +177,86 @@ textarea,
.btn-primary {
color: #fff;
border: 1px solid #33b5e5;
border: 0;
background-color: #33b5e5;
}
.btn-primary:active, .btn-primary.active {
border: 1px solid #1a9bcb;
color: #fff;
border: 0;
background-color: #1a9bcb;
}
.btn-positive {
color: #fff;
border: 1px solid #99cc00;
border: 0;
background-color: #99cc00;
}
.btn-positive:active, .btn-positive.active {
border: 1px solid #739900;
color: #fff;
border: 0;
background-color: #739900;
}
.btn-negative {
color: #fff;
border: 1px solid #ff4444;
border: 0;
background-color: #ff4444;
}
.btn-negative:active, .btn-negative.active {
border: 1px solid #ff1111;
color: #fff;
border: 0;
background-color: #ff1111;
}
.btn-outlined {
border: 1px solid #999999;
background-color: transparent;
box-shadow: none;
}
.btn-outlined.btn-primary {
border: 1px solid #33b5e5;
color: #33b5e5;
}
.btn-outlined.btn-primary:active {
border: 1px solid #33b5e5;
background-color: #33b5e5;
}
.btn-outlined.btn-positive {
border: 1px solid #99cc00;
color: #99cc00;
}
.btn-outlined.btn-positive:active {
border: 1px solid #99cc00;
background-color: #99cc00;
}
.btn-outlined.btn-negative {
border: 1px solid #ff4444;
color: #ff4444;
}
.btn-outlined.btn-negative:active {
border: 1px solid #ff4444;
background-color: #ff4444;
}
.btn-outlined:active {
border: 1px solid #999999;
background-color: #999999;
box-shadow: none;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
box-shadow: none;
}
.btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
box-shadow: none;
}
.btn-link:active, .btn-link.active {
color: #1a9bcb;
background-color: transparent;
box-shadow: none;
}
.bar-nav .btn-link {
@ -218,7 +268,8 @@ textarea,
}
.badge.badge-inverted {
color: #9a9a9a;
color: #999999;
background-color: transparent;
}
.badge-primary {
@ -227,6 +278,7 @@ textarea,
}
.badge-primary.badge-inverted {
color: #33b5e5;
background-color: transparent;
}
.badge-positive {
@ -235,6 +287,7 @@ textarea,
}
.badge-positive.badge-inverted {
color: #99cc00;
background-color: transparent;
}
.badge-negative {
@ -243,6 +296,17 @@ textarea,
}
.badge-negative.badge-inverted {
color: #ff4444;
background-color: transparent;
}
.btn .badge {
background-color: rgba(0, 0, 0, 0.15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.segmented-control {
@ -270,7 +334,7 @@ textarea,
}
.toggle .toggle-handle {
border: 1px solid #565656;
border: 1px solid #b1b1b1;
}
.toggle:active .toggle-handle {
width: 35px;

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

@ -1200,51 +1200,64 @@ hr {
}
.platform-android body {
font-family: "Roboto", sans-serif;
font-size: 17px;
line-height: 21px;
font-size: 18px;
line-height: 22px;
color: #222222;
}
.platform-android .content {
background: #dddddd;
background: -moz-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: -o-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
background: linear-gradient(to bottom, #dddddd 0%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
background-color: #f2f2f2;
}
.platform-android .bar-nav ~ .content {
padding-top: 50px;
}
.platform-android .bar-tab ~ .content {
padding-bottom: 50px;
}
.platform-android .bar-header-secondary ~ .content {
padding-top: 100px;
}
.platform-android .bar {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #565656;
border-bottom: 1px solid #b1b1b1;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.platform-android .bar.bar-header-secondary {
top: 51px;
}
.platform-android .bar-tab {
height: 70px;
border-top: 1px solid #565656;
height: 50px;
border-top: 1px solid #b1b1b1;
border-bottom: 0;
box-shadow: inset 0 2px 0 #d2d2d2, 0 -3px 3px rgba(0, 0, 0, 0.07);
}
.platform-android .title {
position: static;
padding-left: 10px;
line-height: 50px;
color: #9a9a9a;
text-align: left;
}
.platform-android .popover .bar-nav {
border-bottom: 1px solid #565656;
border-bottom: 1px solid #b1b1b1;
}
.platform-android .card {
border-color: #d9d9d9;
border-radius: 2px;
}
.platform-android .table-view .table-view-cell {
border-bottom: 1px solid #565656;
border-bottom: 1px solid #d9d9d9;
}
.platform-android .table-view .table-view-cell:last-child {
background-image: none;
}
.platform-android .table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
.platform-android .popover .table-view {
border-radius: 12px;
@ -1287,29 +1300,34 @@ hr {
}
.platform-android .input-group {
padding: 0;
border: 0;
}
.platform-android .input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
}
.platform-android .input-group input:last-child {
background-image: none;
}
.platform-android .input-row {
border-bottom: 0;
border-bottom: 1px solid #d9d9d9;
}
.platform-android .input-row:last-child,
.platform-android .input-row label + input {
background-image: none;
border-bottom: 0;
}
.platform-android .btn {
border: 1px solid #565656;
color: #9a9a9a;
background-color: #dddddd;
border-radius: 3px;
color: #222222;
background-color: #cecece;
border: 0;
border-radius: 2px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.platform-android .btn:active, .platform-android .btn.active {
color: #fff;
background-color: #9a9a9a;
color: #222222;
border: 0;
background-color: #999999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-android .bar .btn {
padding-top: 9px;
@ -1325,54 +1343,82 @@ hr {
}
.platform-android .btn-primary {
color: #fff;
border: 1px solid #33b5e5;
border: 0;
background-color: #33b5e5;
}
.platform-android .btn-primary:active, .platform-android .btn-primary.active {
border: 1px solid #1a9bcb;
color: #fff;
border: 0;
background-color: #1a9bcb;
}
.platform-android .btn-positive {
color: #fff;
border: 1px solid #99cc00;
border: 0;
background-color: #99cc00;
}
.platform-android .btn-positive:active, .platform-android .btn-positive.active {
border: 1px solid #739900;
color: #fff;
border: 0;
background-color: #739900;
}
.platform-android .btn-negative {
color: #fff;
border: 1px solid #ff4444;
border: 0;
background-color: #ff4444;
}
.platform-android .btn-negative:active, .platform-android .btn-negative.active {
border: 1px solid #ff1111;
color: #fff;
border: 0;
background-color: #ff1111;
}
.platform-android .btn-outlined {
border: 1px solid #999999;
background-color: transparent;
box-shadow: none;
}
.platform-android .btn-outlined.btn-primary {
border: 1px solid #33b5e5;
color: #33b5e5;
}
.platform-android .btn-outlined.btn-primary:active {
border: 1px solid #33b5e5;
background-color: #33b5e5;
}
.platform-android .btn-outlined.btn-positive {
border: 1px solid #99cc00;
color: #99cc00;
}
.platform-android .btn-outlined.btn-positive:active {
border: 1px solid #99cc00;
background-color: #99cc00;
}
.platform-android .btn-outlined.btn-negative {
border: 1px solid #ff4444;
color: #ff4444;
}
.platform-android .btn-outlined.btn-negative:active {
border: 1px solid #ff4444;
background-color: #ff4444;
}
.platform-android .btn-outlined:active {
border: 1px solid #999999;
background-color: #999999;
box-shadow: none;
}
.platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active {
color: #fff;
box-shadow: none;
}
.platform-android .btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
box-shadow: none;
}
.platform-android .btn-link:active, .platform-android .btn-link.active {
color: #1a9bcb;
background-color: transparent;
box-shadow: none;
}
.platform-android .bar-nav .btn-link {
color: #33b5e5;
@ -1382,7 +1428,8 @@ hr {
opacity: .6;
}
.platform-android .badge.badge-inverted {
color: #9a9a9a;
color: #999999;
background-color: transparent;
}
.platform-android .badge-primary {
color: #fff;
@ -1390,6 +1437,7 @@ hr {
}
.platform-android .badge-primary.badge-inverted {
color: #33b5e5;
background-color: transparent;
}
.platform-android .badge-positive {
color: #fff;
@ -1397,6 +1445,7 @@ hr {
}
.platform-android .badge-positive.badge-inverted {
color: #99cc00;
background-color: transparent;
}
.platform-android .badge-negative {
color: #fff;
@ -1404,6 +1453,16 @@ hr {
}
.platform-android .badge-negative.badge-inverted {
color: #ff4444;
background-color: transparent;
}
.platform-android .btn .badge {
background-color: rgba(0, 0, 0, 0.15);
}
.platform-android .btn .badge.badge-inverted {
background-color: transparent;
}
.platform-android .btn:active .badge {
color: #fff;
}
.platform-android .segmented-control {
background-color: transparent;
@ -1428,7 +1487,7 @@ hr {
border-bottom: 15px solid #dddddd;
}
.platform-android .toggle .toggle-handle {
border: 1px solid #565656;
border: 1px solid #b1b1b1;
}
.platform-android .toggle:active .toggle-handle {
width: 35px;
@ -1445,8 +1504,16 @@ hr {
background-image: url("../img/android.png");
}
.platform-android .device .device-content {
font-size: 18px;
line-height: 22px;
background-color: #f2f2f2;
}
.platform-android .device .content {
top: 50px;
}
.platform-android .bar ~ .content {
padding: 0;
}
@-webkit-keyframes fadeOverlay {
from {

8
lib/sass/docs.scss
Unescape View File

@ -778,8 +778,16 @@ hr {
background-image: url("../img/android.png");
.device-content {
font-size: 18px;
line-height: 22px;
background-color: #f2f2f2;
}
.content {
top: 50px;
}
}
.bar ~ .content {
padding: 0;
}
}

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

@ -14,28 +14,29 @@
// Type (Change to Roboto)
$font-family-default: 'Roboto', sans-serif;
$font-size-default: 17px;
$font-size-default: 18px;
$font-weight: 500;
$font-weight-light: 400;
$line-height-default: 21px;
$line-height-default: 22px;
// Colors
// Main theme colors
$primary-color: #33b5e5;
$chrome-color: #dddddd;
$text-color: #222;
// Action colors
$default-color: #9a9a9a;
$default-color: #999;
$positive-color: #99cc00;
$negative-color: #ff4444;
// Bars
$bar-base-height: 50px;
$bar-tab-height: 70px;
$bar-tab-height: 50px;
// Borders
$border-default: 1px solid #565656;
$border-radius: 0;
$border-default: 1px solid #b1b1b1;
$border-radius: 2px;
// Base
@ -45,10 +46,23 @@ body {
font-family: $font-family-default;
font-size: $font-size-default;
line-height: $line-height-default;
color: $text-color;
}
.content {
@include gradient($chrome-color,lighten($chrome-color, 10%));
background-color: #f2f2f2;
}
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
// Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content {
padding-top: $bar-base-height;
}
.bar-tab ~ .content {
padding-bottom: $bar-tab-height;
}
.bar-header-secondary ~ .content {
padding-top: $bar-base-height*2;
}
// Bars
@ -58,6 +72,7 @@ body {
height: $bar-base-height;
background-color: $chrome-color;
border-bottom: $border-default;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07);
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
@ -68,13 +83,13 @@ body {
height: $bar-tab-height;
border-top: $border-default;
border-bottom: 0;
box-shadow: inset 0 2px 0 #d2d2d2, 0 -3px 3px rgba(0,0,0,.07);
}
// Left aligned text in the .bar-nav
.title {
position: static;
padding-left: 10px;
line-height: $bar-base-height;
color: $default-color;
text-align: left;
}
@ -86,13 +101,21 @@ body {
border-bottom: $border-default;
}
//
// Cards
// --------------------------------------------------
.card {
border-color: #d9d9d9;
border-radius: $border-radius;
}
// Table views
// --------------------------------------------------
.table-view {
.table-view-cell {
border-bottom: $border-default;
border-bottom: 1px solid #d9d9d9;
// Remove the border from the last table view item
&:last-child {
@ -102,8 +125,13 @@ body {
// Table view dividers
.table-view-divider {
padding-top: 25px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border-top: 0;
border-bottom: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
}
@ -157,9 +185,11 @@ textarea,
// -------------------------------------------------------------------
.input-group {
padding: 0;
border: 0;
}
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
@ -171,12 +201,12 @@ textarea,
// To use labels with input groups, wrap a label and an input in an .input-row
.input-row {
border-bottom: 0;
border-bottom: 1px solid #d9d9d9;
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child,
.input-row label + input {
background-image: none;
border-bottom: 0;
}
@ -184,16 +214,19 @@ textarea,
// --------------------------------------------------
.btn {
border: $border-default;
color: $default-color;
background-color: $chrome-color;
border-radius: 3px;
color: $text-color;
background-color: #cecece;
border: 0;
border-radius: $border-radius;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25);
// Active & filled button styles
&:active,
&.active {
color: #fff;
color: $text-color;
border: 0;
background-color: $default-color;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
}
.bar {
@ -220,12 +253,13 @@ textarea,
// Primary button (Default color is blue)
.btn-primary {
color: #fff;
border: 1px solid $primary-color;
border: 0;
background-color: $primary-color;
&:active,
&.active {
border: 1px solid darken($primary-color, 10%);
color: #fff;
border: 0;
background-color: darken($primary-color, 10%);
}
}
@ -233,12 +267,13 @@ textarea,
// Positive button (Default color is green)
.btn-positive {
color: #fff;
border: 1px solid $positive-color;
border: 0;
background-color: $positive-color;
&:active,
&.active {
border: 1px solid darken($positive-color, 10%);
color: #fff;
border: 0;
background-color: darken($positive-color, 10%);
}
}
@ -246,34 +281,61 @@ textarea,
// Negative button (Default color is red)
.btn-negative {
color: #fff;
border: 1px solid $negative-color;
border: 0;
background-color: $negative-color;
&:active,
&.active {
border: 1px solid darken($negative-color, 10%);
color: #fff;
border: 0;
background-color: darken($negative-color, 10%);
}
}
// Outlined buttons
.btn-outlined {
border: 1px solid $default-color;
background-color: transparent;
box-shadow: none;
&.btn-primary {
border: 1px solid $primary-color;
color: $primary-color;
&:active {
border: 1px solid $primary-color;
background-color: $primary-color;
}
}
&.btn-positive {
border: 1px solid $positive-color;
color: $positive-color;
&:active {
border: 1px solid $positive-color;
background-color: $positive-color;
}
}
&.btn-negative {
border: 1px solid $negative-color;
color: $negative-color;
&:active {
border: 1px solid $negative-color;
background-color: $negative-color;
}
}
// Active states
&:active {
border: 1px solid $default-color;
background-color: $default-color;
box-shadow: none;
}
&.btn-primary:active,
&.btn-positive:active,
&.btn-negative:active {
color: #fff;
box-shadow: none;
}
}
@ -282,11 +344,13 @@ textarea,
color: $primary-color;
background-color: transparent;
border: none;
box-shadow: none;
&:active,
&.active {
color: darken($primary-color, 10%);
background-color: transparent;
box-shadow: none;
}
}
@ -312,6 +376,7 @@ textarea,
.badge {
&.badge-inverted {
color: $default-color;
background-color: transparent;
}
}
@ -326,6 +391,7 @@ textarea,
&.badge-inverted {
color: $primary-color;
background-color: transparent;
}
}
@ -336,6 +402,7 @@ textarea,
&.badge-inverted {
color: $positive-color;
background-color: transparent;
}
}
@ -346,6 +413,23 @@ textarea,
&.badge-inverted {
color: $negative-color;
background-color: transparent;
}
}
// Badges in buttons
.btn {
.badge {
background-color: rgba(0,0,0,.15);
&.badge-inverted {
background-color: transparent;
}
}
// Active states
&:active .badge {
color: #fff;
}
}
@ -388,10 +472,6 @@ textarea,
}
//
// Modal styles
// --------------------------------------------------
//
// Toggles styles
// --------------------------------------------------

1
lib/sass/theme-ios.scss
Unescape View File

@ -39,7 +39,6 @@ a {
}
// Bars
// --------------------------------------------------

Write Preview
Loading…
Cancel
Save