starting the android theme
This commit is contained in:
connors
Родитель
c75bcfd66f
Коммит
3a17885411
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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]-->
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -8,6 +8,10 @@
|
|||
* =====================================================
|
||||
*/
|
||||
|
||||
.content {
|
||||
background-color: #efeff4;
|
||||
}
|
||||
|
||||
[class*="bar-"] {
|
||||
border-bottom: 0;
|
||||
background-color: rgba(247, 247, 247, 0.98);
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ strong {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
background-color: #efeff4;
|
||||
background-color: #fff;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ strong {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
background-color: #efeff4;
|
||||
background-color: #fff;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче