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

Improve the rule of scsslint

pull/613/merge^2
Daijiro Wachi 11 years ago
parent
6312263cdd
commit
dae7b62d30
15 changed files with 146 additions and 146 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. 4
      .scss-lint.yml
  2. 2
      sass/badges.scss
  3. 2
      sass/base.scss
  4. 2
      sass/buttons.scss
  5. 50
      sass/docs.scss
  6. 10
      sass/mixins.scss
  7. 10
      sass/popovers.scss
  8. 10
      sass/push.scss
  9. 36
      sass/ratchet.scss
  10. 90
      sass/ratchicons.scss
  11. 46
      sass/theme-android.scss
  12. 20
      sass/theme-ios.scss
  13. 6
      sass/toggles.scss
  14. 2
      sass/variables.scss

4
.scss-lint.yml
Unescape View File

@ -80,7 +80,7 @@ linters:
enabled: false enabled: false
SpaceAfterComma: SpaceAfterComma:
enabled: true enabled: false
SpaceAfterPropertyColon: SpaceAfterPropertyColon:
enabled: false enabled: false
@ -97,7 +97,7 @@ linters:
StringQuotes: StringQuotes:
enabled: true enabled: true
style: single_quotes # or double_quotes style: double_quotes
TrailingSemicolonAfterPropertyValue: TrailingSemicolonAfterPropertyValue:
enabled: true enabled: true

2
sass/badges.scss
Unescape View File

@ -8,7 +8,7 @@
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #333; color: #333;
background-color: rgba(0, 0, 0, .15); background-color: rgba(0,0,0,.15);
border-radius: 100px; border-radius: 100px;
// Inverted badges have no background. // Inverted badges have no background.

2
sass/base.scss
Unescape View File

@ -27,7 +27,7 @@ body {
a { a {
color: $primary-color; color: $primary-color;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links in webkit browsers. -webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers.
&:active { &:active {
color: darken($primary-color, 10%); color: darken($primary-color, 10%);

2
sass/buttons.scss
Unescape View File

@ -142,7 +142,7 @@ input[type="button"] {
.btn .badge { .btn .badge {
margin: -2px -4px -2px 4px; margin: -2px -4px -2px 4px;
font-size: 12px; font-size: 12px;
background-color: rgba(0, 0, 0, .15); background-color: rgba(0,0,0,.15);
} }
// Buttons with inverted badges // Buttons with inverted badges

50
sass/docs.scss
Unescape View File

@ -1,5 +1,5 @@
@import 'variables.scss'; @import "variables.scss";
@import 'mixins.scss'; @import "mixins.scss";
// Clearfix mixin for docs // Clearfix mixin for docs
@ -78,7 +78,7 @@ body {
} }
.version { .version {
margin-top: 15px; margin-top: 15px;
color: rgba(255, 255, 255, .5); color: rgba(255,255,255,.5);
text-align: center; text-align: center;
} }
} }
@ -117,7 +117,7 @@ body {
position: relative; position: relative;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255,255,255,.1);
} }
.docs-title { .docs-title {
position: absolute; position: absolute;
@ -145,7 +145,7 @@ body {
z-index: 20; z-index: 20;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
background-color: rgba(0, 0, 0, .9); background-color: rgba(0,0,0,.9);
opacity: 0; opacity: 0;
&.active { &.active {
@ -239,9 +239,9 @@ body {
padding-bottom: 10px; padding-bottom: 10px;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2); border: 1px solid rgba(0,0,0,.2);
border-radius: 3px; border-radius: 3px;
@include box-shadow(0 0 8px rgba(0, 0, 0, .05)); @include box-shadow(0 0 8px rgba(0,0,0,.05));
&.active { &.active {
display: block; display: block;
@ -252,13 +252,13 @@ body {
left: 30px; left: 30px;
width: 0; width: 0;
height: 0; height: 0;
content: ''; content: "";
} }
&:before { &:before {
top: -11px; top: -11px;
margin-left: -11px; margin-left: -11px;
border-right: 11px solid transparent; border-right: 11px solid transparent;
border-bottom: 11px solid rgba(0, 0, 0, .3); border-bottom: 11px solid rgba(0,0,0,.3);
border-left: 11px solid transparent; border-left: 11px solid transparent;
} }
&:after { &:after {
@ -302,7 +302,7 @@ body {
&:hover { &:hover {
background-color: #fff; background-color: #fff;
@include box-shadow(0 0 50px rgba(255, 255, 255, .3)); @include box-shadow(0 0 50px rgba(255,255,255,.3));
} }
&:active { &:active {
opacity: .5; opacity: .5;
@ -343,7 +343,7 @@ body {
font-size: 13px !important; font-size: 13px !important;
line-height: 18px !important; line-height: 18px !important;
background: transparent !important; background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, .1) !important; border-top: 1px solid rgba(255,255,255,.1) !important;
border-right: 0 !important; border-right: 0 !important;
border-bottom: 0 !important; border-bottom: 0 !important;
border-left: 0 !important; border-left: 0 !important;
@ -358,7 +358,7 @@ body {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
margin-left: 145px !important; margin-left: 145px !important;
color: rgba(255, 255, 255, .65) !important; color: rgba(255,255,255,.65) !important;
font-family: "Open Sans", sans-serif !important; font-family: "Open Sans", sans-serif !important;
} }
.carbonad-text { .carbonad-text {
@ -379,9 +379,9 @@ body {
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.carbonad { .carbonad {
width: 360px !important; width: 360px !important;
border-right: 1px solid rgba(255, 255, 255, .1) !important; border-right: 1px solid rgba(255,255,255,.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, .1) !important; border-bottom: 1px solid rgba(255,255,255,.1) !important;
border-left: 1px solid rgba(255, 255, 255, .1) !important; border-left: 1px solid rgba(255,255,255,.1) !important;
border-radius: 3px !important; border-radius: 3px !important;
} }
} }
@ -519,14 +519,14 @@ body {
// Overrides for the homepage's footer // Overrides for the homepage's footer
.docs-header .docs-footer { .docs-header .docs-footer {
margin-top: 0; margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid rgba(255,255,255,.1);
.docs-footer-text, .docs-footer-text,
.docs-footer-links { .docs-footer-links {
color: rgba(255, 255, 255, .5); color: rgba(255,255,255,.5);
a { a {
color: rgba(255, 255, 255, .8); color: rgba(255,255,255,.8);
} }
} }
} }
@ -686,7 +686,7 @@ code {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, .5); text-shadow: 0 0 10px rgba(0,0,0,.5);
color: #fff; color: #fff;
} }
.component-example-fullbleed, .component-example-fullbleed,
@ -827,8 +827,8 @@ code {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 11; z-index: 11;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0,0,0,.3);
content: ''; content: "";
} }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@ -867,7 +867,7 @@ code {
color: #fff; color: #fff;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, .5); text-shadow: 0 0 10px rgba(0,0,0,.5);
} }
} }
@ -890,7 +890,7 @@ code {
height: 813px; height: 813px;
margin-left: -20px; margin-left: -20px;
font-family: "Helvetica Neue", sans-serif; font-family: "Helvetica Neue", sans-serif;
background-image: url('../img/device-sprite.png'); background-image: url("../img/device-sprite.png");
background-size: 300%; background-size: 300%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
@ -1008,7 +1008,7 @@ hr {
// -------------------------------------------------- // --------------------------------------------------
.platform-ios { .platform-ios {
@import 'theme-ios.scss'; @import "theme-ios.scss";
.device { .device {
background-position: -395px 0; background-position: -395px 0;
@ -1019,7 +1019,7 @@ hr {
} }
} }
.platform-android { .platform-android {
@import 'theme-android.scss'; @import "theme-android.scss";
.device { .device {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;

10
sass/mixins.scss
Unescape View File

@ -23,7 +23,7 @@
&:before, &:before,
&:after { &:after {
display: table; // 2 display: table; // 2
content: ' '; // 1 content: " "; // 1
} }
&:after { &:after {
clear: both; clear: both;
@ -39,23 +39,23 @@
// Gradients // Gradients
@mixin linear-gradient($color-from, $color-to) { @mixin linear-gradient($color-from, $color-to) {
background-color: $color-from; // Old browsers background-color: $color-from; // Old browsers
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $color-from), color-stop(100%, $color-to)); // Chrome, Safari4+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+
background-image: -moz-linear-gradient(top, $color-from 0%, $color-to 100%); // FF3.6+ background-image: -moz-linear-gradient(top, $color-from 0%, $color-to 100%); // FF3.6+
background-image: -ms-linear-gradient(top, $color-from 0%, $color-to 100%); // IE10+ background-image: -ms-linear-gradient(top, $color-from 0%, $color-to 100%); // IE10+
background-image: -o-linear-gradient(top, $color-from 0%, $color-to 100%); // Opera 11.10+ background-image: -o-linear-gradient(top, $color-from 0%, $color-to 100%); // Opera 11.10+
background-image: linear-gradient(to bottom, $color-from 0%, $color-to 100%); // W3C background-image: linear-gradient(to bottom, $color-from 0%, $color-to 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=0); // IE6-9 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$color-from}",endColorstr="#{$color-to}",GradientType=0; // IE6-9
} }
@mixin directional-gradient($color-from, $color-to, $deg: 45deg) { @mixin directional-gradient($color-from, $color-to, $deg: 45deg) {
background-color: $color-from; // Old browsers background-color: $color-from; // Old browsers
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, $color-from), color-stop(100%, $color-to)); // Chrome, Safari4+ background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+
background-image: -webkit-linear-gradient(45deg, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ background-image: -webkit-linear-gradient(45deg, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+
background-image: -moz-linear-gradient(45deg, $color-from 0%, $color-to 100%); // FF3.6+ background-image: -moz-linear-gradient(45deg, $color-from 0%, $color-to 100%); // FF3.6+
background-image: -ms-linear-gradient(45deg, $color-from 0%, $color-to 100%); // IE10+ background-image: -ms-linear-gradient(45deg, $color-from 0%, $color-to 100%); // IE10+
background-image: -o-linear-gradient(45deg, $color-from 0%, $color-to 100%); // Opera 11.10+ background-image: -o-linear-gradient(45deg, $color-from 0%, $color-to 100%); // Opera 11.10+
background-image: linear-gradient(45deg, $color-from 0%, $color-to 100%); // W3C background-image: linear-gradient(45deg, $color-from 0%, $color-to 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=1); // IE6-9 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color-from}', endColorstr='#{$color-to}', GradientType=1 ); // IE6-9
} }

10
sass/popovers.scss
Unescape View File

@ -13,8 +13,8 @@
background-color: $chrome-color; background-color: $chrome-color;
border-radius: $border-radius; border-radius: $border-radius;
opacity: 0; opacity: 0;
@include box-shadow(0 0 15px rgba(0, 0, 0, .1)); @include box-shadow(0 0 15px rgba(0,0,0,.1));
@include transform(translate3d(0, -15px, 0)); @include transform(translate3d(0,-15px,0));
@include transition(all .25s linear); @include transition(all .25s linear);
// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
@ -25,7 +25,7 @@
width: 0; width: 0;
height: 0; height: 0;
margin-left: -15px; margin-left: -15px;
content: ''; content: "";
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid $chrome-color; border-bottom: 15px solid $chrome-color;
border-left: 15px solid transparent; border-left: 15px solid transparent;
@ -36,7 +36,7 @@
&.visible { &.visible {
opacity: 1; opacity: 1;
@include transform(translate3d(0, 0, 0)); @include transform(translate3d(0,0,0));
} }
// Give correct spacing to the content if there is a bar inside the popover. // Give correct spacing to the content if there is a bar inside the popover.
@ -55,7 +55,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 15; z-index: 15;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0,0,0,.3);
} }
// Block level buttons in popovers // Block level buttons in popovers

10
sass/push.scss
Unescape View File

@ -19,16 +19,16 @@
-webkit-transition: -webkit-transform .4s; -webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s; -moz-transition: -moz-transform .4s;
transition: transform .4s; transition: transform .4s;
@include transform(translate3d(0, 0, 0)); @include transform(translate3d(0,0,0));
&.left { &.left {
z-index: 1; z-index: 1;
@include transform(translate3d(-100%, 0, 0)); @include transform(translate3d(-100%,0,0));
} }
&.right { &.right {
z-index: 3; z-index: 3;
@include transform(translate3d(100%, 0, 0)); @include transform(translate3d(100%,0,0));
} }
} }
} }
@ -54,10 +54,10 @@
.navigate-left:after, .navigate-left:after,
.push-left:after { .push-left:after {
left: 15px; left: 15px;
content: '\e822'; content: "\e822";
} }
.navigate-right:after, .navigate-right:after,
.push-right:after{ .push-right:after{
right: 15px; right: 15px;
content: '\e826'; content: "\e826";
} }

36
sass/ratchet.scss
Unescape View File

@ -1,30 +1,30 @@
// Variables // Variables
@import 'variables.scss'; @import "variables.scss";
// Mixins // Mixins
@import 'mixins.scss'; @import "mixins.scss";
// Normalize & Base CSS // Normalize & Base CSS
@import 'normalize.scss'; @import "normalize.scss";
@import 'base.scss'; @import "base.scss";
@import 'type.scss'; @import "type.scss";
// Components // Components
@import 'buttons.scss'; @import "buttons.scss";
@import 'bars.scss'; @import "bars.scss";
@import 'badges.scss'; @import "badges.scss";
@import 'cards.scss'; @import "cards.scss";
@import 'table-views.scss'; @import "table-views.scss";
@import 'forms.scss'; @import "forms.scss";
@import 'segmented-controls.scss'; @import "segmented-controls.scss";
@import 'popovers.scss'; @import "popovers.scss";
// Javascript components // Javascript components
@import 'modals.scss'; @import "modals.scss";
@import 'sliders.scss'; @import "sliders.scss";
@import 'toggles.scss'; @import "toggles.scss";
@import 'push.scss'; @import "push.scss";
// Ratchicons // Ratchicons
@import 'ratchicons.scss'; @import "ratchicons.scss";

90
sass/ratchicons.scss
Unescape View File

@ -6,11 +6,11 @@
font-family: Ratchicons; font-family: Ratchicons;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
src: url('../fonts/ratchicons.eot'); src: url("../fonts/ratchicons.eot");
src: url('../fonts/ratchicons.eot?#iefix') format('embedded-opentype'), src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"),
url('../fonts/ratchicons.woff') format('woff'), url("../fonts/ratchicons.woff") format("woff"),
url('../fonts/ratchicons.ttf') format('truetype'), url("../fonts/ratchicons.ttf") format("truetype"),
url('../fonts/ratchicons.svg#svgFontName') format('svg'); url("../fonts/ratchicons.svg#svgFontName") format("svg");
} }
.icon { .icon {
@ -22,43 +22,43 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.icon-back { &:before { content: '\e80a'; } } .icon-back { &:before { content: "\e80a"; } }
.icon-bars { &:before { content: '\e80e'; } } .icon-bars { &:before { content: "\e80e"; } }
.icon-caret { &:before { content: '\e80f'; } } .icon-caret { &:before { content: "\e80f"; } }
.icon-check { &:before { content: '\e810'; } } .icon-check { &:before { content: "\e810"; } }
.icon-close { &:before { content: '\e811'; } } .icon-close { &:before { content: "\e811"; } }
.icon-code { &:before { content: '\e812'; } } .icon-code { &:before { content: "\e812"; } }
.icon-compose { &:before { content: '\e813'; } } .icon-compose { &:before { content: "\e813"; } }
.icon-download { &:before { content: '\e815'; } } .icon-download { &:before { content: "\e815"; } }
.icon-edit { &:before { content: '\e829'; } } .icon-edit { &:before { content: "\e829"; } }
.icon-forward { &:before { content: '\e82a'; } } .icon-forward { &:before { content: "\e82a"; } }
.icon-gear { &:before { content: '\e821'; } } .icon-gear { &:before { content: "\e821"; } }
.icon-home { &:before { content: '\e82b'; } } .icon-home { &:before { content: "\e82b"; } }
.icon-info { &:before { content: '\e82c'; } } .icon-info { &:before { content: "\e82c"; } }
.icon-list { &:before { content: '\e823'; } } .icon-list { &:before { content: "\e823"; } }
.icon-more-vertical { &:before { content: '\e82e'; } } .icon-more-vertical { &:before { content: "\e82e"; } }
.icon-more { &:before { content: '\e82f'; } } .icon-more { &:before { content: "\e82f"; } }
.icon-pages { &:before { content: '\e824'; } } .icon-pages { &:before { content: "\e824"; } }
.icon-pause { &:before { content: '\e830'; } } .icon-pause { &:before { content: "\e830"; } }
.icon-person { &:before { content: '\e832'; } } .icon-person { &:before { content: "\e832"; } }
.icon-play { &:before { content: '\e816'; } } .icon-play { &:before { content: "\e816"; } }
.icon-plus { &:before { content: '\e817'; } } .icon-plus { &:before { content: "\e817"; } }
.icon-refresh { &:before { content: '\e825'; } } .icon-refresh { &:before { content: "\e825"; } }
.icon-search { &:before { content: '\e819'; } } .icon-search { &:before { content: "\e819"; } }
.icon-share { &:before { content: '\e81a'; } } .icon-share { &:before { content: "\e81a"; } }
.icon-sound { &:before { content: '\e827'; } } .icon-sound { &:before { content: "\e827"; } }
.icon-sound2 { &:before { content: '\e828'; } } .icon-sound2 { &:before { content: "\e828"; } }
.icon-sound3 { &:before { content: '\e80b'; } } .icon-sound3 { &:before { content: "\e80b"; } }
.icon-sound4 { &:before { content: '\e80c'; } } .icon-sound4 { &:before { content: "\e80c"; } }
.icon-star-filled { &:before { content: '\e81b'; } } .icon-star-filled { &:before { content: "\e81b"; } }
.icon-star { &:before { content: '\e81c'; } } .icon-star { &:before { content: "\e81c"; } }
.icon-stop { &:before { content: '\e81d'; } } .icon-stop { &:before { content: "\e81d"; } }
.icon-trash { &:before { content: '\e81e'; } } .icon-trash { &:before { content: "\e81e"; } }
.icon-up-nav { &:before { content: '\e81f'; } } .icon-up-nav { &:before { content: "\e81f"; } }
.icon-up { &:before { content: '\e80d'; } } .icon-up { &:before { content: "\e80d"; } }
.icon-right-nav { &:before { content: '\e818'; } } .icon-right-nav { &:before { content: "\e818"; } }
.icon-right { &:before { content: '\e826'; } } .icon-right { &:before { content: "\e826"; } }
.icon-down-nav { &:before { content: '\e814'; } } .icon-down-nav { &:before { content: "\e814"; } }
.icon-down { &:before { content: '\e820'; } } .icon-down { &:before { content: "\e820"; } }
.icon-left-nav { &:before { content: '\e82d'; } } .icon-left-nav { &:before { content: "\e82d"; } }
.icon-left { &:before { content: '\e822'; } } .icon-left { &:before { content: "\e822"; } }

46
sass/theme-android.scss
Unescape View File

@ -1,4 +1,4 @@
@import 'mixins.scss'; @import "mixins.scss";
// //
// Android theme // Android theme
@ -90,7 +90,7 @@ a {
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: $border-radius; border-radius: $border-radius;
@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25)); @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25));
// Active & filled button styles // Active & filled button styles
&:active, &:active,
@ -98,7 +98,7 @@ a {
color: $text-color; color: $text-color;
background-color: $default-color; background-color: $default-color;
border: 0; border: 0;
@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2)); @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
} }
} }
@ -220,7 +220,7 @@ a {
// Buttons with badges // Buttons with badges
.btn { .btn {
.badge { .badge {
background-color: rgba(0, 0, 0, .15); background-color: rgba(0,0,0,.15);
&.badge-inverted { &.badge-inverted {
background-color: transparent; background-color: transparent;
@ -241,7 +241,7 @@ a {
height: $bar-base-height; height: $bar-base-height;
background-color: $chrome-color; background-color: $chrome-color;
border-bottom: $border-default; border-bottom: $border-default;
@include box-shadow(inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07)); @include box-shadow(inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07));
// Modifier class to dock any bar below .bar-nav // Modifier class to dock any bar below .bar-nav
&.bar-header-secondary { &.bar-header-secondary {
@ -496,7 +496,7 @@ input[type="color"],
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, .2);
@include box-shadow(0 1px 1px rgba(0, 0, 0, .1)); @include box-shadow(0 1px 1px rgba(0,0,0,.1));
} }
input[type="search"] { input[type="search"] {
@ -552,14 +552,14 @@ textarea,
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: $border-radius; border-radius: $border-radius;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .25)); @include box-shadow(0 1px 1px rgba(0,0,0,.25));
.control-item { .control-item {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: $text-color; color: $text-color;
border-left: 1px solid #999; border-left: 1px solid #999;
@include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2)); @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
// Remove border-left and shadow from first section // Remove border-left and shadow from first section
&:first-child { &:first-child {
@ -639,7 +639,7 @@ textarea,
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out; transition: transform .1s ease-in-out, opacity .2s ease-in-out;
@include box-shadow(0 0 3px rgba(0, 0, 0, .2)); @include box-shadow(0 0 3px rgba(0,0,0,.2));
@include transform(scale(.75)); @include transform(scale(.75));
&:before { &:before {
@ -692,7 +692,7 @@ textarea,
background-color: #bebebe; background-color: #bebebe;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 2px; border-radius: 2px;
@include box-shadow(inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1)); @include box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1));
} }
&:before { &:before {
top: 1px; top: 1px;
@ -711,7 +711,7 @@ textarea,
margin-right: 2px; margin-right: 2px;
background-color: $primary-color; background-color: $primary-color;
border-color: $primary-color; border-color: $primary-color;
@include transform(translate3d(50px, 0, 0)); @include transform(translate3d(50px,0,0));
} }
&:before { &:before {
right: 14px; right: 14px;
@ -728,28 +728,28 @@ textarea,
// Deprecated `push-left` and `push-right` as of 2.0.1 // Deprecated `push-left` and `push-right` as of 2.0.1
.navigate-left:after, .navigate-left:after,
.push-left:after { .push-left:after {
content: ''; content: "";
} }
.navigate-right:after, .navigate-right:after,
.push-right:after { .push-right:after {
content: ''; content: "";
} }
// Ratchicons for Android // Ratchicons for Android
// -------------------------------------------------- // --------------------------------------------------
.icon-caret:before { content: '\e800'; } .icon-caret:before { content: "\e800"; }
.icon-down:before, .icon-down:before,
.icon-down-nav:before { content: '\e801'; } .icon-down-nav:before { content: "\e801"; }
.icon-download:before { content: '\e802'; } .icon-download:before { content: "\e802"; }
.icon-left:before, .icon-left:before,
.icon-left-nav:before { content: '\e803'; } .icon-left-nav:before { content: "\e803"; }
.icon-more-vertical:before { content: '\e804'; } .icon-more-vertical:before { content: "\e804"; }
.icon-more:before { content: '\e805'; } .icon-more:before { content: "\e805"; }
.icon-right:before, .icon-right:before,
.icon-right-nav:before { content: '\e806'; } .icon-right-nav:before { content: "\e806"; }
.icon-search:before { content: '\e807'; } .icon-search:before { content: "\e807"; }
.icon-share:before { content: '\e808'; } .icon-share:before { content: "\e808"; }
.icon-up:before, .icon-up:before,
.icon-up-nav:before { content: '\e809'; } .icon-up-nav:before { content: "\e809"; }

20
sass/theme-ios.scss
Unescape View File

@ -1,4 +1,4 @@
@import 'mixins.scss'; @import "mixins.scss";
// //
// iOS theme // iOS theme
@ -14,7 +14,7 @@
// //
// Main theme colors // Main theme colors
$primary-color: #007aff !global; $primary-color: #007aff !global;
$chrome-color: rgba(247, 247, 247, .98) !global; $chrome-color: rgba(247,247,247,.98) !global;
// Action colors // Action colors
$default-color: #929292 !global; $default-color: #929292 !global;
@ -161,7 +161,7 @@ p {
// Buttons with badges // Buttons with badges
.btn { .btn {
.badge { .badge {
background-color: rgba(0, 0, 0, .15); background-color: rgba(0,0,0,.15);
&.badge-inverted { &.badge-inverted {
background-color: transparent; background-color: transparent;
@ -182,7 +182,7 @@ p {
.bar { .bar {
background-color: $chrome-color; background-color: $chrome-color;
border-bottom: 0; border-bottom: 0;
@include box-shadow(0 0 1px rgba(0, 0, 0, .85)); @include box-shadow(0 0 1px rgba(0,0,0,.85));
// Modifier class to dock any bar below .bar-nav // Modifier class to dock any bar below .bar-nav
&.bar-header-secondary { &.bar-header-secondary {
@ -352,7 +352,7 @@ input[type="color"],
input[type="search"] { input[type="search"] {
height: 34px; height: 34px;
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, .1); background-color: rgba(0,0,0,.1);
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
} }
@ -494,7 +494,7 @@ textarea,
// Popovers with `bar-nav` // Popovers with `bar-nav`
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, .15); border-bottom: 1px solid rgba(0,0,0,.15);
} }
// Popovers with `table-views` // Popovers with `table-views`
@ -532,7 +532,7 @@ textarea,
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
@include box-shadow(0 3px 3px rgba(0, 0, 0, .08)); @include box-shadow(0 3px 3px rgba(0,0,0,.08));
} }
&:before { &:before {
display: none; display: none;
@ -544,7 +544,7 @@ textarea,
@include box-shadow(inset 0 0 0 13px $positive-color); @include box-shadow(inset 0 0 0 13px $positive-color);
.toggle-handle { .toggle-handle {
@include transform(translate3d(17px, 0, 0)); @include transform(translate3d(17px,0,0));
} }
.toggle-handle { .toggle-handle {
@ -585,7 +585,7 @@ textarea,
// Overlay animation for the slide transition // Overlay animation for the slide transition
@at-root { @at-root {
@-webkit-keyframes fadeOverlay { @-webkit-keyframes fadeOverlay {
from { @include box-shadow(0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0)); } from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
to { @include box-shadow(0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1)); } to { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
} }
} }

6
sass/toggles.scss
Unescape View File

@ -36,7 +36,7 @@
font-size: 13px; font-size: 13px;
color: #999; color: #999;
text-transform: uppercase; text-transform: uppercase;
content: 'Off'; content: "Off";
} }
// Active state for toggle // Active state for toggle
@ -46,13 +46,13 @@
.toggle-handle { .toggle-handle {
border-color: $positive-color; border-color: $positive-color;
@include transform(translate3d(44px, 0, 0)); @include transform(translate3d(44px,0,0));
} }
&:before { &:before {
right: auto; right: auto;
left: 15px; left: 15px;
color: #fff; color: #fff;
content: 'On'; content: "On";
} }
} }
// Hide the checkbox // Hide the checkbox

2
sass/variables.scss
Unescape View File

@ -48,7 +48,7 @@ $button-font-size: 12px !default;
// Transitions // Transitions
// -------------------------------------------------- // --------------------------------------------------
$timing-fuction: cubic-bezier(.1, .5, .1, 1) !default; // Inspired by @c2prods $timing-fuction: cubic-bezier(.1,.5,.1,1) !default; // Inspired by @c2prods
// Borders // Borders

Write Preview
Loading…
Cancel
Save