Psion-fanatic/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[UI] Refactored layout classes.

Browse source
This commit is contained in:
Fabio Manganiello 2023-10-16 01:12:05 +02:00
parent d1afb88b80
commit c88a9da3e6
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 154 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
platypush/backend/http/webapp/src/components/Media/Controls.vue
View file

@ -476,22 +476,4 @@ button {
flex-grow: 1;
margin: 0 .5em;
}
.mobile {
@include from($tablet) {
display: none;
}
}
.tablet {
@media screen and (max-width: $tablet), screen and (min-width: $desktop - 1) {
display: none;
}
}
.desktop {
@include until($desktop) {
display: none;
}
}
</style>

63
platypush/backend/http/webapp/src/style/layout.scss
View file

@ -12,6 +12,12 @@ $widths: (
xxl: $fullhd,
);
$width-ranges: (
tablet: ($tablet, $desktop),
desktop: ($desktop, $widescreen),
widescreen: ($widescreen, $fullhd),
);
@for $i from 1 through 12 {
.col-#{$i} {
float: left;
@ -88,6 +94,24 @@ $widths: (
}
}
@mixin from($device) {
@media screen and (min-width: $device) {
@content;
}
}
@mixin until($device) {
@media screen and (max-width: calc(#{$device} - 1px)) {
@content;
}
}
@mixin between($from, $until) {
@media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
@content;
}
}
@each $size, $width in $widths {
@media screen and (min-width: $width) {
@for $i from 1 through 12 {
@ -131,21 +155,41 @@ $widths: (
}
}
@mixin from($device) {
@media screen and (min-width: $device) {
@content;
@each $name, $range in $width-ranges {
.#{$name} {
&.from {
@include until(nth($range, 1)) {
display: none;
}
}
&.until {
@include from(nth($range, 2)) {
display: none;
}
}
&.only {
@include until(nth($range, 1)) {
display: none;
}
@include from(nth($range, 2)) {
display: none;
}
}
}
}
@mixin until($device) {
@media screen and (max-width: calc(#{$device} - 1px)) {
@content;
.mobile {
@include from($tablet) {
display: none;
}
}
@mixin between($from, $until) {
@media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
@content;
.fullhd {
@include until($fullhd) {
display: none;
}
}
@ -182,3 +226,4 @@ $widths: (
align-items: center;
justify-content: center;
}