From 3a178854119b06d42abca45cdccd18ec2e4f94d1 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 10:30:00 -0800 Subject: [PATCH] starting the android theme --- Gruntfile.js | 3 +- _includes/header.html | 2 +- assets/css/docs.css | 10 +- dist/android-theme.css | 268 ++++++++++++++++++++++++ dist/ios-theme.css | 4 + dist/ratchet.css | 2 +- lib/sass/base.scss | 2 +- lib/sass/theme-android.scss | 402 ++++++++++++++++++++++++++++++++++++ lib/sass/theme-ios.scss | 15 +- 9 files changed, 699 insertions(+), 9 deletions(-) create mode 100644 dist/android-theme.css create mode 100644 lib/sass/theme-android.scss diff --git a/Gruntfile.js b/Gruntfile.js index 50da3de..ef1fb35 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -46,7 +46,8 @@ module.exports = function(grunt) { files: { '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss', '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss', - '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss' + '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss', + '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss' } } }, diff --git a/_includes/header.html b/_includes/header.html index 9c2b79f..4dc447a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/assets/css/docs.css b/assets/css/docs.css index 0c1436c..a43c4bf 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -313,7 +313,15 @@ h6 { width: 320px; height: 548px; overflow: hidden; - background-color: #efeff4; + background-color: $chrome-color; + background: rgb(0,0,0); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */ } .iphone .content, diff --git a/dist/android-theme.css b/dist/android-theme.css new file mode 100644 index 0000000..326b3af --- /dev/null +++ b/dist/android-theme.css @@ -0,0 +1,268 @@ +/* + * ===================================================== + * Ratchet v2.0.0 + * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton + * Licensed under http://www.opensource.org/licenses/MIT + * + * Designed and built by @connors, @dhg, and @fat. + * ===================================================== + */ + +.content { + background-color: #111111; +} + +[class*="bar-"] { + height: 50px; + background-color: #111111; + border-bottom: 1px solid #565656; +} + +.bar-tab { + height: 70px; + border-top: 1px solid #565656; +} + +.title { + padding-left: 10px; + line-height: 50px; + color: white; + text-align: left; +} + +.popover .bar-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} + +.table-view .table-view-cell { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} +.table-view .table-view-cell:last-child { + background-image: none; +} +.table-view .table-view-divider { + border-top: 0; + border-bottom: 0; +} + +.popover .table-view { + border-radius: 12px; +} + +select, +textarea, +input[type="text"], +input[type=search], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"], +.input-group { + height: 40px; + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +input[type=search] { + height: 34px; + text-align: center; + background-color: rgba(0, 0, 0, 0.1); + border: 0; + border-radius: 6px; +} + +input[type=search]:focus { + text-align: left; +} + +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; +} + +.input-group input { + border: 0; +} + +.input-group input:last-child { + background-image: none; +} + +.input-row { + border-bottom: 0; +} + +.input-row:last-child, +.input-row label + input { + background-image: none; +} + +[class*="button"] { + border: 1px solid white; + 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 { + color: #fff; + background-color: white; +} + +.button-primary { + color: #33b5e5; + border: 1px solid #33b5e5; +} +.button-primary:active, .button-primary.active, .button-primary.button-filled { + background-color: #33b5e5; +} + +.button-positive { + color: #81c700; + border: 1px solid #81c700; +} +.button-positive:active, .button-positive.active, .button-positive.button-filled { + background-color: #81c700; +} + +.button-negative { + color: #f20754; + border: 1px solid #f20754; +} +.button-negative:active, .button-negative.active, .button-negative.button-filled { + background-color: #f20754; +} + +.button-link { + color: #33b5e5; +} +.button-link:active, .button-link.active { + color: #33b5e5; +} + +.button-link:active, .button-link.active { + color: #33b5e5; + opacity: .3; +} + +.bar-nav [class*="button"] { + 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; +} + +[class*="badge"] { + color: white; +} +[class*="badge"].badge-filled { + color: white; +} + +.badge-primary { + color: #33b5e5; +} +.badge-primary.badge-filled { + color: #fff; + background-color: #33b5e5; +} + +.badge-positive { + color: #81c700; +} +.badge-positive.badge-filled { + color: #fff; + background-color: #81c700; +} + +.badge-negative { + color: #f20754; +} +.badge-negative.badge-filled { + color: #fff; + background-color: #f20754; +} + +.segmented-controller { + background-color: transparent; + border: 1px solid #33b5e5; +} +.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 { + color: #33b5e5; +} +.segmented-controller li.selected { + background-color: #33b5e5; +} + +.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; +} +.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; +} +.toggle.active .toggle-handle { + border-color: #81c700; +} diff --git a/dist/ios-theme.css b/dist/ios-theme.css index b188aa4..e57d16c 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -8,6 +8,10 @@ * ===================================================== */ +.content { + background-color: #efeff4; +} + [class*="bar-"] { border-bottom: 0; background-color: rgba(247, 247, 247, 0.98); diff --git a/dist/ratchet.css b/dist/ratchet.css index 8bc9141..86cc086 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -253,7 +253,7 @@ strong { bottom: 0; left: 0; overflow: auto; - background-color: #efeff4; + background-color: #fff; -webkit-overflow-scrolling: touch; } diff --git a/lib/sass/base.scss b/lib/sass/base.scss index 86a7cc2..884256f 100644 --- a/lib/sass/base.scss +++ b/lib/sass/base.scss @@ -36,7 +36,7 @@ strong { bottom: 0; left: 0; overflow: auto; - background-color: #efeff4; + background-color: #fff; -webkit-overflow-scrolling: touch; } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss new file mode 100644 index 0000000..47b67e7 --- /dev/null +++ b/lib/sass/theme-android.scss @@ -0,0 +1,402 @@ +@import "mixins.scss"; + +// +// Android theme +// The visual and interaction styles for Android +// +// -------------------------------------------------- + + +// Variables +// -------------------------------------------------- + +// Type (Change to Roboto) +$font-family-default: "Helvetica Neue", Helvetica, sans-serif; +$font-size-default: 17px; +$font-weight: 500; +$font-weight-light: 400; +$line-height-default: 21px; + +// Colors +// Main theme colors +$primary-color: #33b5e5; +$chrome-color: #111; + +// Action colors +$default-color: #fff; +$positive-color: #81c700; +$negative-color: #f20754; + +// Bars +$bar-base-height: 50px; +$bar-tab-height: 70px; + +// Borders +$border-default: 1px solid #565656; +$border-radius: 0; + + +// Base +// -------------------------------------------------- + +.content { + background-color: $chrome-color; + background: rgb(0,0,0); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(68,68,68,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ +} + +// Bars +// -------------------------------------------------- + +[class*="bar-"] { + height: $bar-base-height; + background-color: $chrome-color; + border-bottom: $border-default; +} +.bar-tab { + height: $bar-tab-height; + border-top: $border-default; +} +// Left aligned text in the .bar-nav +.title { + padding-left: 10px; + line-height: $bar-base-height; + color: $default-color; + text-align: left; +} + + +// Nav bar in popovers +// -------------------------------------------------- + +.popover .bar-nav { + border-bottom: 1px solid rgba(0,0,0,.15); +} + + +// Table views +// -------------------------------------------------- + +.table-view { + .table-view-cell { + border-bottom: 0; + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. + + // Remove the border from the last table view item + &:last-child { + background-image: none; + } + } + // Table view dividers + // -------------------------------------------------- + + .table-view-divider { + border-top: 0; + border-bottom: 0; + } +} + +.popover .table-view { + border-radius: 12px; +} + + +// Forms +// -------------------------------------------------- + +select, +textarea, +input[type="text"], +input[type=search], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"], +.input-group { + height: 40px; + padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); +} + +// Rounded search input +input[type=search] { + height: 34px; + text-align: center; + background-color: rgba(0,0,0,.1); + border: 0; + border-radius: 6px; +} +input[type=search]:focus { + text-align: left; +} +select, +textarea, +.input-group { + height: auto; +} + +// Input groups (cluster multiple inputs together into a single group) +// ------------------------------------------------------------------- +.input-group { + padding: 0; +} +.input-group input { + border: 0; +} +// Remove bottom border on last input to avoid double bottom border +.input-group input:last-child { + background-image: none; +} + +// Input groups with labels +// -------------------------------------------------- + +// To use labels with input groups, wrap a label and an input in an .input-row +.input-row { + border-bottom: 0; +} +// Remove bottom border on last input-row to avoid double bottom border +.input-row:last-child, +.input-row label + input { + background-image: none; +} + + +// Buttons +// -------------------------------------------------- + +[class*="button"] { + border: 1px solid $default-color; + color: $default-color; + background-color: transparent; + @include transition(background-color, opacity, color); + @include transition-duration(.2s); + @include transition-timing-function(linear); + + // Active & filled button styles + &:active, + &.active, + &.button-filled { + color: #fff; + background-color: $default-color; + } +} + + +// Other button types +// -------------------------------------------------- + +// Primary button (Default color is blue) +.button-primary { + color: $primary-color; + border: 1px solid $primary-color; + + &:active, + &.active, + &.button-filled { + background-color: $primary-color; + } +} + +// Positive button (Default color is green) +.button-positive { + color: $positive-color; + border: 1px solid $positive-color; + + &:active, + &.active, + &.button-filled { + background-color: $positive-color; + } +} + +// Negative button (Default color is red) +.button-negative { + color: $negative-color; + border: 1px solid $negative-color; + + &:active, + &.active, + &.button-filled { + background-color: $negative-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + color: $primary-color; + + &:active, + &.active { + color: $primary-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + &:active, + &.active { + color: $primary-color; + opacity: .3; + } +} + +// Buttons in nav bars +// -------------------------------------------------- + +.bar-nav { + [class*="button"] { + 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; + } +} + + +// +// Badges +// -------------------------------------------------- + +[class*="badge"] { + color: $default-color; + + &.badge-filled { + color: $default-color; + } +} + + +// Badge modifiers +// -------------------------------------------------- + +// Main badge +.badge-primary { + color: $primary-color; + + &.badge-filled { + color: #fff; + background-color: $primary-color; + } +} + +// Positive badge +.badge-positive { + color: $positive-color; + + &.badge-filled { + color: #fff; + background-color: $positive-color; + } +} + +// Negative badge +.badge-negative { + color: $negative-color; + + &.badge-filled { + color: #fff; + background-color: $negative-color; + } +} + + +// +// Segmented controllers +// -------------------------------------------------- + +.segmented-controller { + background-color: transparent; + border: 1px solid $primary-color; + + li { + border-left: 1px solid $primary-color; + @include transition(background-color .1s linear); + + // Link that fills each section + > a { + color: $primary-color; + } + + // Selected segment of controller + &.selected { + background-color: $primary-color; + } + } +} + + +// +// Popovers +// -------------------------------------------------- + +.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; + } +} + + +// +// Modal styles +// -------------------------------------------------- + +// +// 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); + } + &:active .toggle-handle { + width: 35px; + } + // 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. + } + + .toggle-handle { + border-color: $positive-color; + } + } +} diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 68ed64d..f6e33f9 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -2,14 +2,15 @@ // // iOS theme -// Provides the visual and interaction style from iOS +// The visual and interaction styles from iOS // // -------------------------------------------------- -// Colors +// Variables // -------------------------------------------------- +// Colors // Main theme colors $primary-color: #007aff; $chrome-color: rgba(247,247,247,.98); @@ -19,12 +20,18 @@ $default-color: #929292; $positive-color: #4cd964; $negative-color: #dd524d; - // iOS style transitions -// -------------------------------------------------- $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods +// Base +// -------------------------------------------------- + +.content { + background-color: #efeff4; +} + + // Bars // --------------------------------------------------