Browse Source

coming back to the android theme. super rough right now.

pull/245/head
connors 11 years ago
parent
commit
b6c74af9e1
  1. 2
      _includes/header.html
  2. 4
      assets/css/docs.css
  3. 152
      dist/android-theme.css
  4. 5
      lib/sass/badges.scss
  5. 156
      lib/sass/theme-android.scss

2
_includes/header.html

@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="dist/ratchet.css"> <link rel="stylesheet" href="dist/ratchet.css">
<link rel="stylesheet" href="dist/ios-theme.css"> <link rel="stylesheet" href="dist/android-theme.css">
<link rel="stylesheet" href="assets/css/docs.css"> <link rel="stylesheet" href="assets/css/docs.css">
<link rel="stylesheet" href="assets/css/pygments.css"> <link rel="stylesheet" href="assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

4
assets/css/docs.css

@ -314,14 +314,14 @@ h6 {
height: 548px; height: 548px;
overflow: hidden; overflow: hidden;
background-color: #efeff4; background-color: #efeff4;
/*background: rgb(0,0,0); background: rgb(0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); 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-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: -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: -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: -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%); 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 );*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );
} }
.iphone .content, .iphone .content,

152
dist/android-theme.css vendored

@ -24,8 +24,8 @@
background-color: #111111; background-color: #111111;
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
} }
[class*="bar-"] [class*="button"] { [class*="bar-"].bar-header-secondary {
line-height: 50px; top: 51px;
} }
.bar-tab { .bar-tab {
@ -35,6 +35,7 @@
} }
.title { .title {
position: static;
padding-left: 10px; padding-left: 10px;
line-height: 50px; line-height: 50px;
color: white; color: white;
@ -46,10 +47,7 @@
} }
.table-view .table-view-cell { .table-view .table-view-cell {
border-bottom: 0; border-bottom: 1px solid #565656;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
background-image: none; background-image: none;
@ -125,110 +123,132 @@ textarea,
} }
[class*="button"] { [class*="button"] {
border: 1px solid white; border: 1px solid #565656;
color: white; color: white;
background-color: transparent; background-color: #111111;
-webkit-transition: background-color, opacity, color; border-radius: 3px;
transition: background-color, opacity, color; }
-webkit-transition-duration: 0.2s; [class*="button"]:active, [class*="button"].active {
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
color: #fff; color: #fff;
background-color: white; background-color: white;
} }
.button-primary { [class*="bar-"] [class*="button"] {
padding-top: 9px;
padding-bottom: 9px;
}
[class*="bar-"] .button-link {
padding: 0;
color: #33b5e5; color: #33b5e5;
border: 1px solid #33b5e5; line-height: 50px;
}
[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active {
color: #1a9bcb;
} }
.button-primary:active, .button-primary.active, .button-primary.button-filled {
.button-primary {
color: #fff;
border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
} }
.button-primary:active, .button-primary.active {
border: 1px solid #1a9bcb;
background-color: #1a9bcb;
}
.button-positive { .button-positive {
color: #81c700; color: #fff;
border: 1px solid #81c700; border: 1px solid #81c700;
}
.button-positive:active, .button-positive.active, .button-positive.button-filled {
background-color: #81c700; background-color: #81c700;
} }
.button-positive:active, .button-positive.active {
border: 1px solid #609400;
background-color: #609400;
}
.button-negative { .button-negative {
color: #f20754; color: #fff;
border: 1px solid #f20754; border: 1px solid #f20754;
}
.button-negative:active, .button-negative.active, .button-negative.button-filled {
background-color: #f20754; background-color: #f20754;
} }
.button-negative:active, .button-negative.active {
border: 1px solid #c00643;
background-color: #c00643;
}
.button-link { .button-outlined {
color: #33b5e5; background-color: transparent;
} }
.button-link:active, .button-link.active { .button-outlined.button-primary {
color: #33b5e5; color: #33b5e5;
} }
.button-outlined.button-positive {
color: #81c700;
}
.button-outlined.button-negative {
color: #f20754;
}
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
color: #fff;
}
.button-link:active, .button-link.active { .button-link {
color: #33b5e5; color: #33b5e5;
opacity: .3; background-color: transparent;
border: none;
}
.button-link:active, .button-link.active {
color: #1a9bcb;
background-color: transparent;
} }
.bar-nav [class*="button"] { .bar-nav .button-link {
color: #33b5e5; color: #33b5e5;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
} }
.bar-nav .button-prev:before, .bar-nav .button-link:active {
.bar-nav .button-prev:after, color: #33b5e5;
.bar-nav .button-next:before, opacity: .6;
.bar-nav .button-next:after {
background-color: #33b5e5;
} }
[class*="badge"] { [class*="badge"].badge-inverted {
color: white;
}
[class*="badge"].badge-filled {
color: white; color: white;
} }
.badge-primary { .badge-primary {
color: #33b5e5;
}
.badge-primary.badge-filled {
color: #fff; color: #fff;
background-color: #33b5e5; background-color: #33b5e5;
} }
.badge-primary.badge-inverted {
color: #33b5e5;
}
.badge-positive { .badge-positive {
color: #81c700;
}
.badge-positive.badge-filled {
color: #fff; color: #fff;
background-color: #81c700; background-color: #81c700;
} }
.badge-positive.badge-inverted {
color: #81c700;
}
.badge-negative { .badge-negative {
color: #f20754;
}
.badge-negative.badge-filled {
color: #fff; color: #fff;
background-color: #f20754; background-color: #f20754;
} }
.badge-negative.badge-inverted {
color: #f20754;
}
.segmented-controller { .segmented-controller {
background-color: transparent; background-color: transparent;
border: 1px solid #33b5e5; border: 1px solid #33b5e5;
border-radius: 3px;
} }
.segmented-controller li { .segmented-controller li {
border-left: 1px solid #33b5e5; border-left: 1px solid #33b5e5;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
} }
.segmented-controller li > a { .segmented-controller li > a {
padding-top: 9px;
padding-bottom: 10px;
color: #33b5e5; color: #33b5e5;
} }
.segmented-controller li.selected { .segmented-controller li.selected {
@ -237,42 +257,20 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.popover:after { .popover:after {
border-bottom: 15px solid #111111; border-bottom: 15px solid #111111;
} }
.toggle {
border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-property: box-shadow, border;
transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.toggle .toggle-handle { .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid #565656;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-webkit-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width;
} }
.toggle:active .toggle-handle { .toggle:active .toggle-handle {
width: 35px; width: 35px;
} }
.toggle.active { .toggle.active {
border: 2px solid #81c700; border: 2px solid #81c700;
background-color: transparent; background-color: #81c700;
-webkit-box-shadow: inset 0 0 0 13px #81c700;
box-shadow: inset 0 0 0 13px #81c700;
}
.toggle.active:active .toggle-handle,
.toggle.active .toggle-handle:active {
-webkit-transform: translate3d(10px, 0, 0) !important;
transform: translate3d(10px, 0, 0) !important;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #81c700; border-color: #81c700;

5
lib/sass/badges.scss

@ -83,3 +83,8 @@
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;
} }
// Badges in table-views
// --------------------------------------------------

156
lib/sass/theme-android.scss

@ -51,8 +51,9 @@ $border-radius: 0;
background-color: $chrome-color; background-color: $chrome-color;
border-bottom: $border-default; border-bottom: $border-default;
[class*="button"] { // Modifier class to dock any bar below .bar-nav
line-height: $bar-base-height; &.bar-header-secondary {
top: $bar-base-height + 1;
} }
} }
.bar-tab { .bar-tab {
@ -62,6 +63,7 @@ $border-radius: 0;
} }
// Left aligned text in the .bar-nav // Left aligned text in the .bar-nav
.title { .title {
position: static;
padding-left: 10px; padding-left: 10px;
line-height: $bar-base-height; line-height: $bar-base-height;
color: $default-color; color: $default-color;
@ -82,17 +84,15 @@ $border-radius: 0;
.table-view { .table-view {
.table-view-cell { .table-view-cell {
border-bottom: 0; border-bottom: $border-default;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
// Remove the border from the last table view item // Remove the border from the last table view item
&:last-child { &:last-child {
background-image: none; background-image: none;
} }
} }
// Table view dividers
// --------------------------------------------------
// Table view dividers
.table-view-divider { .table-view-divider {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
@ -176,21 +176,34 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
[class*="button"] { [class*="button"] {
border: 1px solid $default-color; border: $border-default;
color: $default-color; color: $default-color;
background-color: transparent; background-color: $chrome-color;
@include transition(background-color, opacity, color); border-radius: 3px;
@include transition-duration(.2s);
@include transition-timing-function(linear);
// Active & filled button styles // Active & filled button styles
&:active, &:active,
&.active, &.active {
&.button-filled {
color: #fff; color: #fff;
background-color: $default-color; background-color: $default-color;
} }
} }
[class*="bar-"] {
[class*="button"] {
padding-top: 9px;
padding-bottom: 9px;
}
.button-link {
padding: 0;
color: $primary-color;
line-height: $bar-base-height;
&:active,
&.active {
color: darken($primary-color, 10%);
}
}
}
// Other button types // Other button types
@ -198,56 +211,74 @@ textarea,
// Primary button (Default color is blue) // Primary button (Default color is blue)
.button-primary { .button-primary {
color: $primary-color; color: #fff;
border: 1px solid $primary-color; border: 1px solid $primary-color;
background-color: $primary-color;
&:active, &:active,
&.active, &.active {
&.button-filled { border: 1px solid darken($primary-color, 10%);
background-color: $primary-color; background-color: darken($primary-color, 10%);
} }
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.button-positive { .button-positive {
color: $positive-color; color: #fff;
border: 1px solid $positive-color; border: 1px solid $positive-color;
background-color: $positive-color;
&:active, &:active,
&.active, &.active {
&.button-filled { border: 1px solid darken($positive-color, 10%);
background-color: $positive-color; background-color: darken($positive-color, 10%);
} }
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.button-negative { .button-negative {
color: $negative-color; color: #fff;
border: 1px solid $negative-color; border: 1px solid $negative-color;
background-color: $negative-color;
&:active, &:active,
&.active, &.active {
&.button-filled { border: 1px solid darken($negative-color, 10%);
background-color: $negative-color; background-color: darken($negative-color, 10%);
} }
} }
// Link button (Buttons that look like links) // Outlined buttons
.button-link { .button-outlined {
color: $primary-color; background-color: transparent;
&:active, &.button-primary {
&.active {
color: $primary-color; color: $primary-color;
} }
&.button-positive {
color: $positive-color;
}
&.button-negative {
color: $negative-color;
}
// Active states
&.button-primary:active,
&.button-positive:active,
&.button-negative:active {
color: #fff;
}
} }
// Link button (Buttons that look like links) // Link button (Buttons that look like links)
.button-link { .button-link {
color: $primary-color;
background-color: transparent;
border: none;
&:active, &:active,
&.active { &.active {
color: $primary-color; color: darken($primary-color, 10%);
opacity: .3; background-color: transparent;
} }
} }
@ -255,19 +286,13 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.bar-nav { .bar-nav {
[class*="button"] { .button-link {
color: $primary-color; color: $primary-color;
@include transition(opacity .2s linear);
}
// Directional buttons in nav bars
// --------------------------------------------------
.button-prev:before, &:active {
.button-prev:after, color: $primary-color;
.button-next:before, opacity: .6;
.button-next:after { }
background-color: $primary-color;
} }
} }
@ -277,9 +302,7 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
[class*="badge"] { [class*="badge"] {
color: $default-color; &.badge-inverted {
&.badge-filled {
color: $default-color; color: $default-color;
} }
} }
@ -290,31 +313,31 @@ textarea,
// Main badge // Main badge
.badge-primary { .badge-primary {
color: $primary-color;
&.badge-filled {
color: #fff; color: #fff;
background-color: $primary-color; background-color: $primary-color;
&.badge-inverted {
color: $primary-color;
} }
} }
// Positive badge // Positive badge
.badge-positive { .badge-positive {
color: $positive-color;
&.badge-filled {
color: #fff; color: #fff;
background-color: $positive-color; background-color: $positive-color;
&.badge-inverted {
color: $positive-color;
} }
} }
// Negative badge // Negative badge
.badge-negative { .badge-negative {
color: $negative-color;
&.badge-filled {
color: #fff; color: #fff;
background-color: $negative-color; background-color: $negative-color;
&.badge-inverted {
color: $negative-color;
} }
} }
@ -326,13 +349,15 @@ textarea,
.segmented-controller { .segmented-controller {
background-color: transparent; background-color: transparent;
border: 1px solid $primary-color; border: 1px solid $primary-color;
border-radius: 3px;
li { li {
border-left: 1px solid $primary-color; border-left: 1px solid $primary-color;
@include transition(background-color .1s linear);
// Link that fills each section // Link that fills each section
> a { > a {
padding-top: 9px;
padding-bottom: 10px;
color: $primary-color; color: $primary-color;
} }
@ -350,7 +375,6 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
@include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
&:after { &:after {
border-bottom: 15px solid $chrome-color; border-bottom: 15px solid $chrome-color;
@ -366,16 +390,9 @@ textarea,
// Toggles styles // Toggles styles
// -------------------------------------------------- // --------------------------------------------------
.toggle { .toggle {
border: 2px solid #e6e6e6;
@include box-shadow(inset 0 0 0 0 #e1e1e1);
@include transition-property(box-shadow, border);
@include transition-duration(.2s);
// Sliding handle // Sliding handle
.toggle-handle { .toggle-handle {
border: 1px solid rgba(0, 0, 0, .2); border: $border-default;
@include box-shadow(0 3px 3px rgba(0,0,0,.08));
@include transition-property(-webkit-transform, border, width);
} }
&:active .toggle-handle { &:active .toggle-handle {
width: 35px; width: 35px;
@ -383,14 +400,7 @@ textarea,
// Active state for toggle // Active state for toggle
&.active { &.active {
border: 2px solid $positive-color; border: 2px solid $positive-color;
background-color: transparent; background-color: $positive-color;
@include box-shadow(inset 0 0 0 13px $positive-color);
// Handle when the handle and the container is active
&:active .toggle-handle,
.toggle-handle:active {
@include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
}
.toggle-handle { .toggle-handle {
border-color: $positive-color; border-color: $positive-color;

Loading…
Cancel
Save