Merge pull request #458 from taigaio/issue/2567/issue-list-small-screen
Add responsive behavior for very small screensstable
commit
c178ca37d5
|
@ -2,17 +2,18 @@
|
||||||
// - I know, I know, but look it closer, it makes sense
|
// - I know, I know, but look it closer, it makes sense
|
||||||
// - Oh, I see. It's ok for this time...
|
// - Oh, I see. It's ok for this time...
|
||||||
|
|
||||||
$break-small: 320px;
|
@mixin breakpoint($point) {
|
||||||
$break-large: 1024px;
|
@if $point == desktop {
|
||||||
|
@media (min-width: 1200px) { @content ; }
|
||||||
|
}
|
||||||
|
@else if $point == laptop {
|
||||||
|
@media (max-width: 1200px) { @content ; }
|
||||||
|
}
|
||||||
|
@else if $point == tablet {
|
||||||
|
@media (max-width: 767px) { @content ; }
|
||||||
|
}
|
||||||
|
@else if $point == mobileonly {
|
||||||
|
@media (max-width: 480px) { @content ; }
|
||||||
|
|
||||||
@mixin respond-to($media) {
|
|
||||||
@if $media == handhelds {
|
|
||||||
@media only screen and (max-width: $break-small) { @content; }
|
|
||||||
}
|
|
||||||
@if $media == medium-screens {
|
|
||||||
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
|
|
||||||
}
|
|
||||||
@if $media == wide-screens {
|
|
||||||
@media only screen and (min-width: $break-large) { @content; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,4 +111,19 @@
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.level-field,
|
||||||
|
.created-field {
|
||||||
|
@include breakpoint(laptop) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.level-field,
|
||||||
|
.created-field,
|
||||||
|
.assigned-field {
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue