forked from treehouse/mastodon
Support overriding media queries for deciding between single-column/multi-column layouts with a class
parent
8b23bf7cbd
commit
a70468aa56
|
@ -179,7 +179,7 @@ export default class UI extends React.PureComponent {
|
|||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<div className='ui' ref={this.setRef}>
|
||||
<div className='ui auto-columns' ref={this.setRef}>
|
||||
<TabsBar />
|
||||
<ColumnsAreaContainer singleColumn={isMobile(width)}>
|
||||
<WrappedSwitch>
|
||||
|
|
|
@ -10,3 +10,25 @@
|
|||
height: $size;
|
||||
background-size: $size $size;
|
||||
}
|
||||
|
||||
@mixin single-column($media, $parent: '&') {
|
||||
.auto-columns #{$parent} {
|
||||
@media #{$media} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
.single-column #{$parent} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin multi-columns($media, $parent: '&') {
|
||||
.auto-columns #{$parent} {
|
||||
@media #{$media} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
.multi-columns #{$parent} {
|
||||
@content;
|
||||
}
|
||||
}
|
|
@ -9,7 +9,7 @@
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
@include single-column('screen and (max-width: 700px)') {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
@ -148,7 +148,7 @@
|
|||
order: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@include single-column('screen and (max-width: 480px)') {
|
||||
.details {
|
||||
display: block;
|
||||
}
|
||||
|
@ -230,7 +230,7 @@
|
|||
color: lighten($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
@include single-column('screen and (max-width: 360px)') {
|
||||
padding: 30px 20px;
|
||||
|
||||
a,
|
||||
|
@ -258,7 +258,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
@include single-column('screen and (max-width: 700px)') {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
@ -1330,7 +1330,7 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
@include multi-columns('screen and (min-width: 360px)', $parent: null) {
|
||||
.columns-area {
|
||||
padding: 10px;
|
||||
}
|
||||
|
@ -1386,7 +1386,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
@include multi-columns('screen and (min-width: 360px)', $parent: null) {
|
||||
.tabs-bar {
|
||||
margin: 10px;
|
||||
margin-bottom: 0;
|
||||
|
@ -1397,7 +1397,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@include single-column('screen and (max-width: 1024px)', $parent: null) {
|
||||
.column,
|
||||
.drawer {
|
||||
width: 100%;
|
||||
|
@ -1414,7 +1414,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
|
||||
.columns-area {
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -1540,7 +1540,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@include multi-columns('screen and (min-width: 600px)', $parent: null) {
|
||||
.tabs-bar__link {
|
||||
span {
|
||||
display: inline;
|
||||
|
@ -1548,7 +1548,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
@include multi-columns('screen and (min-width: 1025px)', $parent: null) {
|
||||
.tabs-bar {
|
||||
display: none;
|
||||
}
|
||||
|
@ -1737,7 +1737,7 @@
|
|||
}
|
||||
|
||||
&.hidden-on-mobile {
|
||||
@media screen and (max-width: 1024px) {
|
||||
@include single-column('screen and (max-width: 1024px)') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -2114,7 +2114,7 @@ button.icon-button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
&.hidden-on-mobile {
|
||||
@media screen and (max-width: 1024px) {
|
||||
@include single-column('screen and (max-width: 1024px)') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
@ -3073,7 +3073,7 @@ button.icon-button.active i.fa-retweet {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
@include single-column('screen and (max-width: 550px)', $parent: null) {
|
||||
.onboarding-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -3209,7 +3209,7 @@ button.icon-button.active i.fa-retweet {
|
|||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@include single-column('screen and (max-width: 400px)', $parent: null) {
|
||||
.onboarding-modal__page-one {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
@ -3284,7 +3284,7 @@ button.icon-button.active i.fa-retweet {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) and (max-height: 600px) {
|
||||
@include single-column('screen and (max-width: 320px) and (max-height: 600px)', $parent: null) {
|
||||
.onboarding-modal__page p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
@include single-column('screen and (max-width: 700px)') {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@
|
|||
margin-bottom: 0;
|
||||
cursor: default;
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
@include single-column('screen and (max-width: 360px)') {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
@import 'application';
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
@include multi-columns('screen and (min-width: 1300px)', $parent: null) {
|
||||
.column {
|
||||
flex-grow: 1 !important;
|
||||
max-width: 400px;
|
||||
|
|
Loading…
Reference in New Issue