Fixed inconsistent use of media query breakpoints

- @largest* should only be used by max-width queries - @*Breakpoint should only be used by min-width queries
Semantic-Org · Oct 14, 2015 · 0952017 · 0952017
1 parent 76678c1
commit 0952017
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less
@@ -132,7 +132,7 @@
 }
 
 /* Inside grid */
-@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
+@media only screen and (max-width : @largestMobileScreen) {
 
   .ui.stackable.grid .ui.vertical.divider,
   .ui.grid .stackable.row .ui.vertical.divider {

diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less
@@ -392,7 +392,7 @@
 ---------------*/
 
 /* Tablet Or Below */
-@media only screen and (max-width: @computerBreakpoint) {
+@media only screen and (max-width: @largestTabletScreen) {
 
 .ui[class*="tablet stackable"].steps {
   display: inline-flex;

diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
@@ -211,7 +211,7 @@
 }
 
 /* Tablet and Mobile */
-@media only screen and (max-width : @computerBreakpoint) {
+@media only screen and (max-width : @largestTabletScreen) {
   .ui.modal > .header {
     padding-right: @closeHitbox;
   }
@@ -313,7 +313,7 @@
 }
 
 /* Tablet and Mobile */
-@media only screen and (max-width : @computerBreakpoint) {
+@media only screen and (max-width : @largestTabletScreen) {
   .ui.basic.modal > .close {
     color: @basicInnerCloseColor;
   }
@@ -371,7 +371,7 @@
   z-index: auto;
 }
 
-@media only screen and (max-width : @computerBreakpoint) {
+@media only screen and (max-width : @largestTabletScreen) {
   .modals.dimmer .ui.scrolling.modal {
     margin-top: @mobileScrollingMargin !important;
     margin-bottom: @mobileScrollingMargin !important;

diff --git a/src/definitions/views/ad.less b/src/definitions/views/ad.less
@@ -225,7 +225,7 @@
   display: none;
 }
 
-@media only screen and (max-width : (@tabletBreakpoint - 1)) {
+@media only screen and (max-width : @largestMobileScreen) {
   .ui.mobile.ad {
     display: block;
   }