codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

FIX: normalize transform usage, fix slideout on safari

Browse source
This commit is contained in:
Sam 2015-08-26 09:58:37 +10:00
parent 01406c65a6
commit a7d1c220e1
5 changed files with 23 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/common/base/hamburger.scss
View file

@ -7,7 +7,7 @@
height: 100%; height: 100%;
overflow: auto; overflow: auto;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
transform: translateX(0); @include transform(translateX(0));
box-shadow: 4px 0 4px 5px rgba(0,0,0, .25); box-shadow: 4px 0 4px 5px rgba(0,0,0, .25);
padding: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em;
@ -60,5 +60,5 @@
} }
#hamburger-menu.slideright { #hamburger-menu.slideright {
transform: translateX(330px); @include transform(translateX(330px));
} }

11
app/assets/stylesheets/common/base/magnific-popup.scss
View file

@ -600,8 +600,7 @@ button {
// Scale navigation arrows and reduce padding from sides // Scale navigation arrows and reduce padding from sides
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
.mfp-arrow { .mfp-arrow {
transform: scale(0.75); @include transform(scale(0.75));
-webkit-transform: scale(0.75);
} }
.mfp-arrow-left { .mfp-arrow-left {
transform-origin: 0; transform-origin: 0;
@ -667,9 +666,7 @@ button {
&.mfp-ready { &.mfp-ready {
.mfp-content { .mfp-content {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); @include transform(scale(1));
-ms-transform: scale(1);
transform: scale(1);
} }
&.mfp-bg { &.mfp-bg {
opacity: 0.8; opacity: 0.8;
@ -680,9 +677,7 @@ button {
&.mfp-removing { &.mfp-removing {
.mfp-content { .mfp-content {
-webkit-transform: scale(.8); @include transform(scale(.8));
-ms-transform: scale(.8);
transform: scale(.8);
opacity: 0; opacity: 0;
} }
&.mfp-bg { &.mfp-bg {

4
app/assets/stylesheets/common/base/modal.scss
View file

@ -50,8 +50,8 @@
} }
@-webkit-keyframes slidein { @-webkit-keyframes slidein {
from { transform: translateY(-20%); } from { -webkit-transform: translateY(-20%); }
to { transform: translateY(0); } to { -webkit-transform: translateY(0); }
} }
.modal-outer-container { .modal-outer-container {

13
app/assets/stylesheets/common/foundation/mixins.scss
View file

@ -100,3 +100,16 @@
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%); border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
background-color: blend-primary-secondary(5%); background-color: blend-primary-secondary(5%);
} }
// We definately need -webkit for latest iPhone and Safari
// When we deprecate IE9 we should clean up just to have webkit and non prefixed
// ms is left around for ie9
// moz is for firefox 15 (do we even work with that?)
// -o would be for opera 11.5
@mixin transform($transforms) {
-o-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}

9
app/assets/stylesheets/desktop/user-card.scss
View file

@ -20,14 +20,11 @@ $user_card_background: #222;
transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s;
opacity: 0; opacity: 0;
-webkit-transform: scale(.9); @include transform(scale(.9));
-ms-transform: scale(.9);
transform: scale(.9);
&.show { &.show {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); @include transform(scale(1));
-ms-transform: scale(1);
transform: scale(1);
} }
.card-content { .card-content {