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-status-bar-style" content="black">
<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/pygments.css">
<!--[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;
overflow: hidden;
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: -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: -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: 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,

152
dist/android-theme.css vendored

@ -24,8 +24,8 @@
background-color: #111111;
border-bottom: 1px solid #565656;
}
[class*="bar-"] [class*="button"] {
line-height: 50px;
[class*="bar-"].bar-header-secondary {
top: 51px;
}
.bar-tab {
@ -35,6 +35,7 @@
}
.title {
position: static;
padding-left: 10px;
line-height: 50px;
color: white;
@ -46,10 +47,7 @@
}
.table-view .table-view-cell {
border-bottom: 0;
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;
border-bottom: 1px solid #565656;
}
.table-view .table-view-cell:last-child {
background-image: none;
@ -125,110 +123,132 @@ textarea,
}
[class*="button"] {
border: 1px solid white;
border: 1px solid #565656;
color: white;
background-color: transparent;
-webkit-transition: background-color, opacity, color;
transition: background-color, opacity, color;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
background-color: #111111;
border-radius: 3px;
}
[class*="button"]:active, [class*="button"].active {
color: #fff;
background-color: white;
}
.button-primary {
[class*="bar-"] [class*="button"] {
padding-top: 9px;
padding-bottom: 9px;
}
[class*="bar-"] .button-link {
padding: 0;
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;
}
.button-primary:active, .button-primary.active {
border: 1px solid #1a9bcb;
background-color: #1a9bcb;
}
.button-positive {
color: #81c700;
color: #fff;
border: 1px solid #81c700;
}
.button-positive:active, .button-positive.active, .button-positive.button-filled {
background-color: #81c700;
}
.button-positive:active, .button-positive.active {
border: 1px solid #609400;
background-color: #609400;
}
.button-negative {
color: #f20754;
color: #fff;
border: 1px solid #f20754;
}
.button-negative:active, .button-negative.active, .button-negative.button-filled {
background-color: #f20754;
}
.button-negative:active, .button-negative.active {
border: 1px solid #c00643;
background-color: #c00643;
}
.button-link {
color: #33b5e5;
.button-outlined {
background-color: transparent;
}
.button-link:active, .button-link.active {
.button-outlined.button-primary {
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;
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;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.bar-nav .button-prev:before,
.bar-nav .button-prev:after,
.bar-nav .button-next:before,
.bar-nav .button-next:after {
background-color: #33b5e5;
.bar-nav .button-link:active {
color: #33b5e5;
opacity: .6;
}
[class*="badge"] {
color: white;
}
[class*="badge"].badge-filled {
[class*="badge"].badge-inverted {
color: white;
}
.badge-primary {
color: #33b5e5;
}
.badge-primary.badge-filled {
color: #fff;
background-color: #33b5e5;
}
.badge-primary.badge-inverted {
color: #33b5e5;
}
.badge-positive {
color: #81c700;
}
.badge-positive.badge-filled {
color: #fff;
background-color: #81c700;
}
.badge-positive.badge-inverted {
color: #81c700;
}
.badge-negative {
color: #f20754;
}
.badge-negative.badge-filled {
color: #fff;
background-color: #f20754;
}
.badge-negative.badge-inverted {
color: #f20754;
}
.segmented-controller {
background-color: transparent;
border: 1px solid #33b5e5;
border-radius: 3px;
}
.segmented-controller li {
border-left: 1px solid #33b5e5;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
.segmented-controller li > a {
padding-top: 9px;
padding-bottom: 10px;
color: #33b5e5;
}
.segmented-controller li.selected {
@ -237,42 +257,20 @@ textarea,
.popover {
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 {
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 {
border: 1px solid rgba(0, 0, 0, 0.2);
-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;
border: 1px solid #565656;
}
.toggle:active .toggle-handle {
width: 35px;
}
.toggle.active {
border: 2px solid #81c700;
background-color: transparent;
-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;
background-color: #81c700;
}
.toggle.active .toggle-handle {
border-color: #81c700;

5
lib/sass/badges.scss

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

156
lib/sass/theme-android.scss

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

Loading…
Cancel
Save