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

Adding mixins.

pull/216/head
connors 12 years ago
parent
2ac06451ee
commit
19970e9805
15 changed files with 104 additions and 110 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. 69
      dist/ratchet.css
  2. 1
      dist/theme-classic.css
  3. 17
      lib/sass/bars.scss
  4. 9
      lib/sass/base.scss
  5. 17
      lib/sass/buttons.scss
  6. 6
      lib/sass/chevrons.scss
  7. 8
      lib/sass/forms.scss
  8. 16
      lib/sass/modals.scss
  9. 9
      lib/sass/popovers.scss
  10. 30
      lib/sass/push.scss
  11. 4
      lib/sass/ratchet.scss
  12. 11
      lib/sass/segmented-controllers.scss
  13. 3
      lib/sass/sliders.scss
  14. 4
      lib/sass/theme-classic.scss
  15. 10
      lib/sass/toggles.scss

69
dist/ratchet.css vendored
Unescape View File

@ -254,13 +254,13 @@ strong {
left: 0;
overflow: auto;
background-color: #efeff4;
-webkit-overflow-scrolling: touch;
-webkit-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: .2s, .2s;
transition-duration: .2s, .2s;
-webkit-transition-duration: 0.2s, 0.2s;
transition-duration: 0.2s, 0.2s;
-webkit-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-overflow-scrolling: touch;
}
.content > * {
@ -292,6 +292,7 @@ strong {
height: 44px;
padding: 5px 10px;
background-color: rgba(247, 247, 247, 0.98);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
[class*="bar-"].bar-header-secondary {
@ -301,6 +302,7 @@ strong {
bottom: 0;
}
[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard {
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
@ -342,6 +344,7 @@ strong {
bottom: 0;
height: 50px;
padding: 0;
-webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
}
@ -385,6 +388,7 @@ strong {
padding-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 12px 12px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.popover .bar-nav .title + [class*="button"]:last-child {
@ -517,8 +521,8 @@ input[type="color"],
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
-webkit-appearance: none;
outline: none;
-webkit-appearance: none;
}
input[type=search] {
@ -544,8 +548,7 @@ select {
height: auto;
font-size: 14px;
background-color: #f8f8f8;
background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
@ -564,6 +567,7 @@ select {
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -620,8 +624,12 @@ select {
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
color: #fff;
background-color: #929292;
-webkit-transition: background-color .1s linear, opacity .1s linear;
transition: background-color .1s linear, opacity .1s linear;
-webkit-transition: background-color, opacity;
transition: background-color, opacity;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
opacity: .6;
@ -668,8 +676,8 @@ select {
line-height: 44px;
color: #007aff;
border: 0;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
@ -874,7 +882,8 @@ input[type="button"] {
}
.segmented-controller li.selected {
background-color: #007aff;
transition: background-color .2s linear;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.segmented-controller li.selected > a {
color: #fff;
@ -916,8 +925,8 @@ input[type="button"] {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-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 {
position: absolute;
@ -958,16 +967,18 @@ input[type="button"] {
background-color: #fff;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transition: -webkit-transform 0.25s, transform 0.25s, opacity 1ms 0.25s;
transition: -webkit-transform 0.25s, transform 0.25s, opacity 1ms 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
}
.modal.active {
opacity: 1;
height: 100%;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
-webkit-transition: -webkit-transform 0.25s, transform 0.25s;
transition: -webkit-transform 0.25s, transform 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@ -1018,9 +1029,14 @@ input[type="button"] {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 100px;
-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: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
-webkit-transition-property: -webkit-transform, border;
transition-property: -webkit-transform, border;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.toggle.active {
background-color: #4cd964;
@ -1035,25 +1051,26 @@ input[type="button"] {
.content.fade {
left: 0;
opacity: 0;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.content.fade.in {
opacity: 1;
}
.content.slide {
z-index: 2;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
}
.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay;
animation-name: fadeOverlay;
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
}
.content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse;
@ -1072,10 +1089,12 @@ input[type="button"] {
@-webkit-keyframes fadeOverlay {
from {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
}
to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
}
}

1
dist/theme-classic.css vendored
Unescape View File

@ -21,6 +21,7 @@
.bar-nav {
top: 20px;
-webkit-box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
}

17
lib/sass/bars.scss
Unescape View File

@ -10,7 +10,7 @@
height: $bar-base-height;
padding: 5px $bar-side-spacing;
background-color: $chrome-color;
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
&.bar-header-secondary {
@ -25,7 +25,7 @@
// Flip border position to top for footer bars
&.bar-footer.bar-standard,
&.bar-footer-secondary.bar-standard {
box-shadow: 0 0 1px rgba(0,0,0,.85);
@include box-shadow(0 0 1px rgba(0,0,0,.85));
}
}
@ -38,8 +38,7 @@
top: 0;
display: -webkit-box;
display: box;
-webkit-box-orient: horizontal;
box-orient: horizontal;
@include box-orient(horizontal);
}
// Centered text in the .bar-nav
@ -79,7 +78,7 @@
bottom: 0;
height: $bar-tab-height;
padding: 0;
box-shadow: 0 0px 1px rgba(0,0,0,.85);
@include box-shadow(0 0px 1px rgba(0,0,0,.85));
}
// Wrapper for individual tab
@ -90,8 +89,7 @@
padding: 0;
margin: 0;
list-style: none;
-webkit-box-orient: horizontal;
box-orient: horizontal;
@include box-orient(horizontal);
}
// Navigational tab
@ -99,8 +97,7 @@
height: 100%;
padding-top: 9px;
text-align: center;
-webkit-box-flex: 1;
box-flex: 1;
@include box-flex(1);
.icon {
width: 24px;
@ -128,7 +125,7 @@
padding-left: 15px;
border-bottom: 1px solid rgba(0,0,0,.15);
border-radius: 12px 12px 0 0;
box-shadow: none;
@include box-shadow(none);
.title + [class*="button"]:last-child {
right: 15px;

9
lib/sass/base.scss
Unescape View File

@ -37,13 +37,10 @@ strong {
left: 0;
overflow: auto;
background-color: #efeff4;
-webkit-transition-property: top, bottom;
transition-property: top, bottom;
-webkit-transition-duration: .2s, .2s;
transition-duration: .2s, .2s;
-webkit-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-overflow-scrolling: touch;
@include transition-property(top, bottom);
@include transition-duration(.2s, .2s);
@include transition-timing-function(linear, linear);
}
// Hack to force all relatively and absolutely positioned elements still render while scrolling

17
lib/sass/buttons.scss
Unescape View File

@ -24,8 +24,9 @@
&.button-filled {
color: #fff;
background-color: $default-color;
-webkit-transition: background-color .1s linear, opacity .1s linear;
transition: background-color .1s linear, opacity .1s linear;
@include transition(background-color, opacity);
@include transition-duration(.2s);
@include transition-timing-function(linear);
}
// Disabled styles & filled button active styles
@ -100,10 +101,8 @@
line-height: $bar-base-height;
color: $primary-color;
border: 0;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
@include transition(opacity .2s linear);
@include box-flex(0);
}
// Hacky way to right align buttons outside of flex-box system
@ -184,13 +183,11 @@
// Rotate the chevrons
.button-prev:before,
.button-next:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
@include transform(rotate(-45deg));
}
.button-prev:after,
.button-next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
@include transform(rotate(45deg));
}
}

6
lib/sass/chevrons.scss
Unescape View File

@ -20,12 +20,10 @@
// Position and rotate respective halves of the chevron
&:before {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
@include transform(rotate(45deg));
}
&:after {
top: 8px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
@include transform(rotate(-45deg));
}
}

8
lib/sass/forms.scss
Unescape View File

@ -36,8 +36,8 @@ input[type="color"],
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
-webkit-appearance: none;
outline: none;
-webkit-appearance: none;
}
// Fully round search input
@ -65,9 +65,7 @@ select {
height: auto;
font-size: 14px;
background-color: #f8f8f8;
background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .1));
}
@ -91,7 +89,7 @@ select {
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
box-shadow: none;
@include box-shadow(none);
}
// Remove bottom border on last input to avoid double bottom border

16
lib/sass/modals.scss
Unescape View File

@ -11,20 +11,16 @@
min-height: 100%;
overflow: hidden;
background-color: #fff;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transition-timing-function: $timing-fuction;
@include transform(translate3d(0, 100%, 0));
@include transition(-webkit-transform .25s, transform .25s, opacity 1ms .25s);
@include transition-timing-function($timing-fuction);
// Active modal
&.active {
opacity: 1;
height: 100%;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
-webkit-transition-timing-function: $timing-fuction;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
@include transition(-webkit-transform .25s, transform .25s);
@include transition-timing-function($timing-fuction);
@include transform(translate3d(0, 0, 0));
}
}

9
lib/sass/popovers.scss
Unescape View File

@ -14,10 +14,8 @@
border-radius: 12px;
opacity: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
@include transform(translate3d(0, -15px, 0));
@include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
&:after {
@ -38,8 +36,7 @@
&.visible {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
@include transform(translate3d(0, 0, 0));
}
}

30
lib/sass/push.scss
Unescape View File

@ -8,8 +8,7 @@
&.fade {
left: 0;
opacity: 0;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
@include transition(opacity .2s ease-in-out);
&.in {
opacity: 1;
@ -19,42 +18,35 @@
// Slide animation iOS7
&.slide {
z-index: 2;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-timing-function: $timing-fuction;
@include transition(-webkit-transform .4s);
@include transform(translate3d(0, 0, 0));
@include transition-timing-function ($timing-fuction);
// Adding the overlay
&.sliding-in,
&.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay;
animation-name: fadeOverlay;
-webkit-animation-duration: .4s;
animation-duration: .4s;
@include animation-name(fadeOverlay);
@include animation-duration(.4s);
}
&.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse;
animation-direction: reverse;
@include animation-direction(reverse);
}
&.left {
z-index: 1;
-webkit-transform: translate3d(-20%, 0, 0); // Creates the parallax effect
transform: translate3d(-20%, 0, 0);
@include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
}
&.right {
z-index: 3;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
@include transform(translate3d(100%, 0, 0));
}
}
}
// Overlay animation for the slide transition
@-webkit-keyframes fadeOverlay {
from { box-shadow: 0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0); }
to { box-shadow: 0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1); }
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)); }
}

4
lib/sass/ratchet.scss
Unescape View File

@ -1,6 +1,10 @@
// Variables
@import "variables.scss";
// Mixins
@import "mixins.scss";
// Normalize & Base CSS
@import "normalize.scss";
@import "base.scss";

11
lib/sass/segmented-controllers.scss
Unescape View File

@ -14,8 +14,7 @@
background-color: transparent;
border: 1px solid $primary-color;
border-radius: 4px;
-webkit-box-orient: horizontal;
box-orient: horizontal;
@include box-orient(horizontal);
// Section within controller
li {
@ -23,8 +22,7 @@
text-align: center;
white-space: nowrap;
border-left: 1px solid $primary-color;
-webkit-box-flex: 1;
box-flex: 1;
@include box-flex(1);
// Link that fills each section
> a {
@ -49,7 +47,7 @@
// Selected segment of controller
&.selected {
background-color: $primary-color;
transition: background-color .2s linear;
@include transition(background-color .2s linear);
// Set color of links to white
> a {
@ -74,8 +72,7 @@
// Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller {
margin: 3px 0;
-webkit-box-flex: 1;
box-flex: 1;
@include box-flex(1);
}
.bar-nav .segmented-controller {
margin-bottom: 4px;

3
lib/sass/sliders.scss
Unescape View File

@ -20,8 +20,7 @@
padding: 0;
font-size: 0; // Remove spaces from inline-block children
white-space: nowrap;
-webkit-transition: all 0 linear;
transition: all 0 linear;
@include transition(all 0 linear);
// Individual slide
> li {

4
lib/sass/theme-classic.scss
Unescape View File

@ -1,3 +1,5 @@
@import "mixins.scss";
//
// Variable overrides
// --------------------------------------------------
@ -34,7 +36,7 @@ $negative-color: #e71e1e;
}
.bar-nav {
top: 20px;
box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
@include box-shadow(0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85));
}
[class*="bar-"].bar-header-secondary {
top: 64px;

10
lib/sass/toggles.scss
Unescape View File

@ -21,9 +21,10 @@
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 100px;
box-shadow: 0 3px 3px rgba(0,0,0,.08);
-webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
@include box-shadow(0 3px 3px rgba(0,0,0,.08));
@include transition-property(-webkit-transform, border);
@include transition-duration(.1s);
@include transition-timing-function(ease-in-out);
}
// Active state for toggle
@ -35,7 +36,6 @@
// Active state for toggle handle
&.active .toggle-handle {
border-color: $positive-color;
-webkit-transform: translate3d(17px,0,0);
transform: translate3d(17px,0,0);
@include transform(translate3d(17px,0,0));
}
}
Write Preview
Loading…
Cancel
Save