[UI] Refactored layout classes.

platypush/backend/http/webapp/src/components/Media/Controls.vue

@@ -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>

platypush/backend/http/webapp/src/style/layout.scss

@@ -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;
       }
     }
 
-@mixin until($device) {
-    @media screen and (max-width: calc(#{$device} - 1px)) {
-        @content;
+    &.until {
+      @include from(nth($range, 2)) {
+        display: none;
       }
     }
 
-@mixin between($from, $until) {
-    @media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
-        @content;
+    &.only {
+      @include until(nth($range, 1)) {
+        display: none;
+      }
+
+      @include from(nth($range, 2)) {
+        display: none;
+      }
+    }
+  }
+}
+
+.mobile {
+  @include from($tablet) {
+    display: none;
+  }
+}
+
+.fullhd {
+  @include until($fullhd) {
+    display: none;
   }
 }
 
@@ -182,3 +226,4 @@ $widths: (
   align-items: center;
   justify-content: center;
 }
+