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

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

pull/245/head
connors 11 years ago
parent
3ee68d66f3
commit
b6c74af9e1
5 changed files with 170 additions and 157 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. 2
      _includes/header.html
  2. 4
      assets/css/docs.css
  3. 152
      dist/android-theme.css
  4. 5
      lib/sass/badges.scss
  5. 164
      lib/sass/theme-android.scss

2
_includes/header.html
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

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

@ -50,9 +50,10 @@ $border-radius: 0;
height: $bar-base-height; height: $bar-base-height;
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; color: #fff;
background-color: $primary-color;
&.badge-filled { &.badge-inverted {
color: #fff; color: $primary-color;
background-color: $primary-color;
} }
} }
// Positive badge // Positive badge
.badge-positive { .badge-positive {
color: $positive-color; color: #fff;
background-color: $positive-color;
&.badge-filled { &.badge-inverted {
color: #fff; color: $positive-color;
background-color: $positive-color;
} }
} }
// Negative badge // Negative badge
.badge-negative { .badge-negative {
color: $negative-color; color: #fff;
background-color: $negative-color;
&.badge-filled { &.badge-inverted {
color: #fff; color: $negative-color;
background-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;

Write Preview
Loading…
Cancel
Save