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

stop using the mixin for transform transitions. mixin breaks

pull/213/head
connors 11 years ago
parent
9ceabf47ac
commit
fcfa8b08d0
13 changed files with 89 additions and 63 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. 6
      dist/ratchet-theme-android.css
  2. 15
      dist/ratchet-theme-ios.css
  3. 22
      dist/ratchet.css
  4. 29
      docs/assets/css/docs.css
  5. 6
      docs/dist/ratchet-theme-android.css
  6. 15
      docs/dist/ratchet-theme-ios.css
  7. 22
      docs/dist/ratchet.css
  8. 6
      sass/docs.scss
  9. 10
      sass/modals.scss
  10. 4
      sass/push.scss
  11. 4
      sass/theme-android.scss
  12. 9
      sass/theme-ios.scss
  13. 4
      sass/toggles.scss

6
dist/ratchet-theme-android.css vendored
Unescape View File

@ -448,14 +448,14 @@ textarea,
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-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;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.popover:before {
display: none;

15
dist/ratchet-theme-ios.css vendored
Unescape View File

@ -361,9 +361,12 @@ textarea,
.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;
-moz-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;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@ -408,11 +411,11 @@ textarea,
}
.toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
-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;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width;
}
.toggle:before {
display: none;

22
dist/ratchet.css vendored
Unescape View File

@ -1072,22 +1072,22 @@ select {
min-height: 100%;
overflow: hidden;
background-color: #fff;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
}
.modal.active {
opacity: 1;
height: 100%;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.25s;
-moz-transition: -webkit-transform 0.25s;
transition: -webkit-transform 0.25s;
}
.slider {
@ -1140,8 +1140,8 @@ select {
border: 1px solid #ddd;
border-radius: 100px;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
@ -1184,9 +1184,9 @@ select {
}
.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

29
docs/assets/css/docs.css
Unescape View File

@ -355,12 +355,12 @@ body {
height: 44px;
background-color: #fff;
border-bottom: 1px solid #ddd;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
-webkit-transform: translate3d(0, -55px, 0);
-ms-transform: translate3d(0, -55px, 0);
transform: translate3d(0, -55px, 0);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
}
.docs-component-toolbar.visible {
-webkit-transform: translateY(0);
@ -379,7 +379,7 @@ body {
}
.docs-examples {
margin-top: 30px;
margin-top: 50px;
margin-bottom: 50px;
}
@ -1439,9 +1439,12 @@ hr {
}
.platform-ios .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;
-moz-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;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.platform-ios .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@ -1481,11 +1484,11 @@ hr {
}
.platform-ios .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
-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;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width;
}
.platform-ios .toggle:before {
display: none;
@ -1940,14 +1943,14 @@ hr {
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-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;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.platform-android .popover:before {
display: none;

6
docs/dist/ratchet-theme-android.css vendored
Unescape View File

@ -448,14 +448,14 @@ textarea,
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-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;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.popover:before {
display: none;

15
docs/dist/ratchet-theme-ios.css vendored
Unescape View File

@ -361,9 +361,12 @@ textarea,
.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;
-moz-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;
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98);
@ -408,11 +411,11 @@ textarea,
}
.toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
-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;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width;
}
.toggle:before {
display: none;

22
docs/dist/ratchet.css vendored
Unescape View File

@ -1072,22 +1072,22 @@ select {
min-height: 100%;
overflow: hidden;
background-color: #fff;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-moz-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
}
.modal.active {
opacity: 1;
height: 100%;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.25s;
-moz-transition: -webkit-transform 0.25s;
transition: -webkit-transform 0.25s;
}
.slider {
@ -1140,8 +1140,8 @@ select {
border: 1px solid #ddd;
border-radius: 100px;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
@ -1184,9 +1184,9 @@ select {
}
.content.sliding {
z-index: 2;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
transition: transform .4s;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

6
sass/docs.scss
Unescape View File

@ -352,8 +352,10 @@ body {
height: 44px;
background-color: #fff;
border-bottom: 1px solid #ddd;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
@include transform(translate3d(0, -55px, 0));
@include transition(-webkit-transform .5s);
&.visible {
@include transform(translateY(0));
@ -374,7 +376,7 @@ body {
// --------------------------------------------------
.docs-examples {
margin-top: 30px;
margin-top: 50px;
margin-bottom: 50px;
}
.docs-example-group {

10
sass/modals.scss
Unescape View File

@ -10,15 +10,19 @@
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: #fff;
background-color: #fff;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
@include transform(translate3d(0, 100%, 0));
@include transition(-webkit-transform .25s, opacity 1ms .25s);
// Active modal
&.active {
opacity: 1;
height: 100%;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
@include transform(translate3d(0, 0, 0));
@include transition(-webkit-transform .25s);
}
}

4
sass/push.scss
Unescape View File

@ -16,7 +16,9 @@
// Slide animation
&.sliding {
z-index: 2;
@include transition(-webkit-transform .4s);
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
transition: transform .4s;
@include transform(translate3d(0, 0, 0));
&.left {

4
sass/theme-android.scss
Unescape View File

@ -607,9 +607,11 @@ textarea,
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-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;
transition: transform .1s ease-in-out, opacity .2s ease-in-out;
@include box-shadow(0 0 3px rgba(0,0,0,.2));
@include transform(scale(.75));
@include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
&:before {
display: none;

9
sass/theme-ios.scss
Unescape View File

@ -479,7 +479,10 @@ textarea,
.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);
-webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
@include transition(-webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
&:before {
border-bottom: 15px solid $chrome-color;
@ -528,8 +531,10 @@ textarea,
// Sliding handle
.toggle-handle {
border: 1px solid rgba(0, 0, 0, .2);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
@include box-shadow(0 3px 3px rgba(0,0,0,.08));
@include transition-property(-webkit-transform, border, width);
}
&:before {
display: none;

4
sass/toggles.scss
Unescape View File

@ -24,7 +24,9 @@
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
@include transition-property(-webkit-transform, border, width);
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
@include transition-duration(.2s);
}
&:before {

Write Preview
Loading…
Cancel
Save