moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2025-02-12 05:00:19 -05:00
Code Issues Releases Wiki Activity

Merge pull request #206 from whiteout-io/dev/WO-772

Browse Source 
fix wrong respond-to breakpoints
This commit is contained in:
Tankred Hase 2014-12-01 10:47:26 +01:00
commit a999d26c29
6 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/sass/blocks/layout/_app.scss
View File

@ -28,7 +28,7 @@
display: none; display: none;
} }
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
transform: translateX(-100%); transform: translateX(-100%);
} }
@include respond-to(lg) { @include respond-to(lg) {
@ -45,7 +45,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
&:after { &:after {
display: block; display: block;
content: ''; content: '';
@ -87,7 +87,7 @@
} }
// Animation // Animation
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
will-change: transform; will-change: transform;
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.15s ease-out; transition: transform 0.15s ease-out;
@ -99,7 +99,7 @@
// Modifier to open sidebar // Modifier to open sidebar
&--show-aside { &--show-aside {
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
transform: translateX($aside-width); transform: translateX($aside-width);
.app__container:after { .app__container:after {
transform: none; transform: none;

10
src/sass/blocks/layout/_mail-list-wrapper.scss
View File

@ -35,7 +35,15 @@
// Modifier to open sidebar // Modifier to open sidebar
&--show-aside { &--show-aside {
@include respond-to(not-md) { @include respond-to(smaller-md) {
.mail-list-wrapper__aside {
display: block;
}
.mail-list-wrapper__container {
display: none;
}
}
@include respond-to(lg) {
.mail-list-wrapper__aside { .mail-list-wrapper__aside {
display: block; display: block;
} }

4
src/sass/blocks/views/_mail-list.scss
View File

@ -7,7 +7,7 @@
// do not share any common styles between large and other screens // do not share any common styles between large and other screens
// because styling is very different // because styling is very different
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -152,7 +152,7 @@
// do not share any common styles between large and other screens // do not share any common styles between large and other screens
// because styling is very different // because styling is very different
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
$padding-horizontal: 30px; $padding-horizontal: 30px;
$padding-vertical: 11px; $padding-vertical: 11px;

2
src/sass/blocks/views/_read.scss
View File

@ -161,7 +161,7 @@
} }
} }
} }
@include respond-to(sm-only) { @include respond-to(smaller-md) {
&--stripped { &--stripped {
.read__addresses > * { .read__addresses > * {
display: none; display: none;

4
src/sass/mixins/_responsive.scss
View File

@ -7,8 +7,8 @@ $mediaqueries: (
md: "(min-width: #{$screen-md-min})", md: "(min-width: #{$screen-md-min})",
md-only: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})", md-only: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})",
lg: "(min-width: #{$screen-lg-min})", lg: "(min-width: #{$screen-lg-min})",
not-md: "(max-width: #{$screen-sm-max}), (min-width: #{$screen-lg-min})", smaller-md: "(max-width: #{$screen-sm-max})",
not-lg: "(max-width: #{$screen-md-max})" smaller-lg: "(max-width: #{$screen-md-max})",
); );
// Central Media Query Mixin // Central Media Query Mixin

6
src/sass/utilities/_responsive.scss
View File

@ -6,7 +6,7 @@
} }
} }
.u-visible-md { .u-visible-md {
@include respond-to(sm-only) { @include respond-to(smaller-md) {
display: none !important; display: none !important;
} }
@include respond-to(lg) { @include respond-to(lg) {
@ -14,13 +14,13 @@
} }
} }
.u-visible-lg { .u-visible-lg {
@include respond-to(not-lg) { @include respond-to(smaller-lg) {
display: none !important; display: none !important;
} }
} }
.u-hidden-sm { .u-hidden-sm {
@include respond-to(sm-only) { @include respond-to(smaller-md) {
display: none !important; display: none !important;
} }
} }