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

starting the android theme

pull/245/head
connors 11 years ago
parent
c75bcfd66f
commit
3a17885411
9 changed files with 699 additions and 9 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. 3
      Gruntfile.js
  2. 2
      _includes/header.html
  3. 10
      assets/css/docs.css
  4. 268
      dist/android-theme.css
  5. 4
      dist/ios-theme.css
  6. 2
      dist/ratchet.css
  7. 2
      lib/sass/base.scss
  8. 402
      lib/sass/theme-android.scss
  9. 15
      lib/sass/theme-ios.scss

3
Gruntfile.js
Unescape View File

@ -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'
}
}
},

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-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]-->

10
assets/css/docs.css
Unescape View File

@ -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,

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

@ -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,<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 {
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;
}

4
dist/ios-theme.css vendored
Unescape View File

@ -8,6 +8,10 @@
* =====================================================
*/
.content {
background-color: #efeff4;
}
[class*="bar-"] {
border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98);

2
dist/ratchet.css vendored
Unescape View File

@ -253,7 +253,7 @@ strong {
bottom: 0;
left: 0;
overflow: auto;
background-color: #efeff4;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}

2
lib/sass/base.scss
Unescape View File

@ -36,7 +36,7 @@ strong {
bottom: 0;
left: 0;
overflow: auto;
background-color: #efeff4;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}

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

@ -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;
}
}
}

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

@ -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
// --------------------------------------------------

Write Preview
Loading…
Cancel
Save