From b79fedd54019252c1d9f5413714aa533448f5790 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 12 Jul 2018 16:38:51 -0400
Subject: [PATCH] Streamlining some breakpoint mixins

---
 .../stylesheets/common/admin/admin_base.scss  | 12 ++---
 .../common/admin/admin_reports.scss           |  2 +-
 app/assets/stylesheets/common/admin/api.scss  |  6 +--
 .../stylesheets/common/admin/backups.scss     |  4 +-
 .../common/admin/dashboard_next.scss          | 10 ++--
 .../common/admin/dashboard_previous.scss      |  6 +--
 .../stylesheets/common/admin/flagging.scss    |  2 +-
 .../stylesheets/common/admin/plugins.scss     |  2 +-
 .../stylesheets/common/admin/staff_logs.scss  |  4 +-
 .../stylesheets/common/base/activation.scss   |  2 +-
 .../stylesheets/common/base/discourse.scss    |  2 +-
 .../stylesheets/common/base/search.scss       |  8 +--
 .../stylesheets/common/base/user-badges.scss  | 10 ++--
 .../stylesheets/common/components/badges.scss |  2 +-
 .../stylesheets/common/foundation/mixins.scss | 51 ++++---------------
 .../stylesheets/common/topic-timeline.scss    |  4 +-
 app/assets/stylesheets/desktop/modal.scss     |  2 +-
 .../stylesheets/desktop/topic-list.scss       |  2 +-
 .../stylesheets/desktop/topic-post.scss       |  4 +-
 app/assets/stylesheets/desktop/user.scss      |  2 +-
 app/assets/stylesheets/mobile/header.scss     |  2 +-
 .../common/discourse-local-dates.scss         |  2 +-
 22 files changed, 56 insertions(+), 85 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 04e7f08c0b9..6862be012bc 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -18,7 +18,7 @@ $mobile-breakpoint: 700px;
   .mobile-view & {
     margin-top: 10px;
   }
-  @media screen and (max-width: 768px) {
+  @include breakpoint(tablet) {
     width: calc(100% + 10px);
     margin-left: -10px;
     padding: 0 0 0 10px;
@@ -28,7 +28,7 @@ $mobile-breakpoint: 700px;
     display: inline-flex;
     width: calc(100% - 10px);
     flex: 1 0 auto;
-    @media screen and (max-width: 768px) {
+    @include breakpoint(tablet) {
       white-space: nowrap;
       overflow-x: scroll;
       -webkit-overflow-scrolling: touch;
@@ -47,7 +47,7 @@ $mobile-breakpoint: 700px;
       }
     }
   }
-  @media screen and (max-width: 768px) {
+  @include breakpoint(tablet) {
     // Fade-out for horizontal scroll nav
     &:before {
       content: "";
@@ -414,7 +414,7 @@ $mobile-breakpoint: 700px;
     clear: both;
     padding: 4px;
   }
-  @media screen and (max-width: 768px) {
+  @include breakpoint(tablet) {
     .select-kit.period-chooser
       .period-chooser-header
       h2.selected-name
@@ -459,7 +459,7 @@ $mobile-breakpoint: 700px;
     overflow: hidden;
     padding: 0;
     height: 100%;
-    @media screen and (max-width: 768px) {
+    @include breakpoint(tablet) {
       width: calc(100% + 10px);
       padding-left: 10px;
       margin-left: -10px;
@@ -501,7 +501,7 @@ $mobile-breakpoint: 700px;
     margin: 0;
     white-space: nowrap;
     overflow-x: auto;
-    @media screen and (max-width: 768px) {
+    @include breakpoint(tablet) {
       margin-left: -10px;
       overflow-x: scroll;
       -webkit-overflow-scrolling: touch;
diff --git a/app/assets/stylesheets/common/admin/admin_reports.scss b/app/assets/stylesheets/common/admin/admin_reports.scss
index 88f6421ced1..8fab3da17ff 100644
--- a/app/assets/stylesheets/common/admin/admin_reports.scss
+++ b/app/assets/stylesheets/common/admin/admin_reports.scss
@@ -51,7 +51,7 @@
       }
     }
 
-    @include small-width {
+    @include breakpoint(medium) {
       flex-direction: column;
       min-width: 100%;
 
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index a85e294df43..3017ff8b239 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -31,7 +31,7 @@ table.web-hooks.grid {
       }
     }
   }
-  @media screen and (max-width: 550px) {
+  @include breakpoint(mobile) {
     tbody {
       tr {
         grid-template-columns: 0.5fr 1fr;
@@ -76,7 +76,7 @@ table.api-keys {
   td.key {
     font-size: $font-down-1;
   }
-  @media screen and (max-width: 768px) {
+  @include breakpoint(tablet) {
     tr {
       grid-template-columns: 0.25fr 1fr 1fr;
     }
@@ -156,7 +156,7 @@ table.api-keys {
 
     .hook-event {
       margin-bottom: 0.5em;
-      @media screen and (max-width: 550px) {
+      @include breakpoint(mobile) {
         width: 100%;
       }
     }
diff --git a/app/assets/stylesheets/common/admin/backups.scss b/app/assets/stylesheets/common/admin/backups.scss
index 2d26a847b59..26611b02d1a 100644
--- a/app/assets/stylesheets/common/admin/backups.scss
+++ b/app/assets/stylesheets/common/admin/backups.scss
@@ -51,7 +51,7 @@ $rollback-darker: darken($rollback, 20%) !default;
         }
       }
     }
-    @media screen and (max-width: 550px) {
+    @include breakpoint(mobile) {
       td.backup-filename {
         grid-column-start: 1;
         grid-column-end: 3;
@@ -64,7 +64,7 @@ $rollback-darker: darken($rollback, 20%) !default;
         grid-column-end: 4;
       }
     }
-    @media screen and (max-width: 768px) {
+    @include breakpoint(tablet) {
       td.backup-controls {
         text-align: left;
       }
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index 17529aef194..e49893f894a 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -14,7 +14,7 @@
     display: flex;
     justify-content: space-between;
 
-    @include small-width {
+    @include breakpoint(medium) {
       flex-direction: column;
     }
 
@@ -30,7 +30,7 @@
         margin-right: 1em;
       }
 
-      @include small-width {
+      @include breakpoint(medium) {
         min-width: 100%;
 
         &:last-child {
@@ -43,7 +43,7 @@
       }
     }
 
-    @include small-width {
+    @include breakpoint(medium) {
       .section-column:last-child,
       .section-column:first-child {
         margin: 0;
@@ -87,7 +87,7 @@
       margin-bottom: 1em;
     }
 
-    @include small-width {
+    @include breakpoint(medium) {
       .chart {
         max-width: 100%;
       }
@@ -267,7 +267,7 @@
     min-width: 0;
   }
 
-  @include small-width {
+  @include breakpoint(medium) {
     max-width: 100%;
   }
 
diff --git a/app/assets/stylesheets/common/admin/dashboard_previous.scss b/app/assets/stylesheets/common/admin/dashboard_previous.scss
index b31e1616384..b610e064a64 100644
--- a/app/assets/stylesheets/common/admin/dashboard_previous.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_previous.scss
@@ -74,7 +74,7 @@
     box-sizing: border-box;
     padding-right: 20px;
     min-width: 250px;
-    @include small-width {
+    @include breakpoint(medium) {
       max-width: unset;
     }
     .face {
@@ -260,10 +260,10 @@
   }
   .referred-topic-title {
     width: 355px;
-    @include medium-width {
+    @media all and (min-width: 1000px) and (max-width: 1139px) {
       width: 305px;
     }
-    @include small-width {
+    @include breakpoint(medium) {
       width: 265px;
     }
   }
diff --git a/app/assets/stylesheets/common/admin/flagging.scss b/app/assets/stylesheets/common/admin/flagging.scss
index e3ad1b0db8b..4c17bdf795a 100644
--- a/app/assets/stylesheets/common/admin/flagging.scss
+++ b/app/assets/stylesheets/common/admin/flagging.scss
@@ -190,7 +190,7 @@
       white-space: nowrap;
     }
   }
-  @media screen and (max-width: 768px) {
+  @include breakpoint(tablet) {
     td.topic-title {
       width: auto;
       max-width: 600px;
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
index a92c787bc18..cedcc9dcc65 100644
--- a/app/assets/stylesheets/common/admin/plugins.scss
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -12,7 +12,7 @@
         grid-template-columns: 0.25fr repeat(4, 1fr);
       }
     }
-    @media screen and (max-width: 550px) {
+    @include breakpoint(mobile) {
       tr {
         grid-template-columns: 0.25fr repeat(3, 1fr);
       }
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 5dc425fa4d2..6b440d73b72 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -118,7 +118,7 @@
     }
   }
 
-  @media screen and (max-width: 550px) {
+  @include breakpoint(mobile) {
     table.staff-logs tr {
       grid-template-columns: 1fr 1fr 0.5fr;
       td.staff-users {
@@ -418,7 +418,7 @@ table.search-logs-list {
       }
     }
   }
-  @media screen and (max-width: 550px) {
+  @include breakpoint(mobile) {
     tr {
       td.term {
         grid-column-start: 1;
diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss
index ba0aa79df0b..50be61caacd 100644
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@@ -2,7 +2,7 @@
 // account or changing their email.
 
 #simple-container {
-  @include border-radius-all(10px);
+  border-radius: 10px;
   background-color: $secondary;
   padding: 20px;
   width: 550px;
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 69a262968ab..a2f54c184e0 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -290,7 +290,7 @@ select {
 }
 
 .message {
-  @include border-radius-all(8px);
+  border-radius: 8px;
   background-color: $secondary;
   padding: 14px;
 
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 44f85951a0c..1d030cf2a9f 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -22,7 +22,7 @@
 
   .search-advanced {
     width: 70%;
-    @include small-width {
+    @include breakpoint(medium) {
       width: 65%;
     }
 
@@ -102,7 +102,7 @@
 
   .search-advanced-sidebar {
     width: 30%;
-    @include small-width {
+    @include breakpoint(medium) {
       width: 35%;
     }
     margin-left: 1em;
@@ -139,7 +139,7 @@
     .search-advanced-title {
       background: $primary-low;
       padding: 0.358em 1em;
-      @include small-width {
+      @include breakpoint(medium) {
         padding: 0.358em 0.5em;
       }
       font-weight: 700;
@@ -164,7 +164,7 @@
       section.field {
         margin-top: 5px;
       }
-      @include small-width {
+      @include breakpoint(medium) {
         padding: 0.75em 0.5em;
         .ac-wrap,
         .choices,
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 22d961b193d..1ac4bab3ecb 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -153,7 +153,7 @@
       display: flex;
       flex: 1 1 auto;
       padding: 0 10%;
-      @media screen and (max-width: 550px) {
+      @include breakpoint(mobile) {
         padding: 0 5%;
       }
     }
@@ -212,11 +212,11 @@
     &:nth-of-type(3n) {
       margin-right: 0;
     }
-    @include small-width {
+    @include breakpoint(medium) {
       flex: 0 0 49%;
       margin-right: 0;
     }
-    @media screen and (max-width: 550px) {
+    @include breakpoint(mobile) {
       flex: 0 0 100%;
     }
     &:hover {
@@ -225,7 +225,7 @@
     &:active {
       box-shadow: none;
     }
-    @include mobile-portrait {
+    @include breakpoint(mobile-small) {
       width: 100%;
     }
   }
@@ -274,7 +274,7 @@
   margin-bottom: 1.5em;
   display: flex;
   flex-wrap: wrap;
-  @include small-width {
+  @include breakpoint(medium) {
     justify-content: space-between;
   }
 
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 181268994f8..a8a9d6517b6 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -9,7 +9,7 @@
   display: inline-block;
   font-weight: normal;
   white-space: nowrap;
-  @include border-radius-all(10px);
+  border-radius: 10px;
 }
 
 // Category badges
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index f7050f524c1..da989232b98 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -5,27 +5,18 @@
 // Media queries
 // --------------------------------------------------
 
-@mixin small-width {
-  @media all and (max-width: 850px) {
-    @content;
-  }
-}
+$breakpoints: (
+  mobile-small: 320px,
+  mobile: 550px,
+  tablet: 768px,
+  medium: 850px,
+  large: 1000px,
+  extra-large: 1140px
+);
 
-@mixin medium-width {
-  @media all and (min-width: 1000px) and (max-width: 1139px) {
-    @content;
-  }
-}
-
-@mixin large-width {
-  @media all and (min-width: 1140px) {
-    @content;
-  }
-}
-
-@mixin mobile-portrait {
-  @media all and (max-width: 320px) {
-    @content;
+@mixin breakpoint($bp, $rule: max-width, $type: screen) {
+  @media #{$type} and (#{$rule}: map-get($breakpoints, $bp)) {
+      @content;
   }
 }
 
@@ -45,20 +36,6 @@
   }
 }
 
-// Border radius
-
-@mixin border-radius-all($radius) {
-  border-radius: $radius;
-}
-
-// Box shadow
-
-@mixin box-shadow($shadow) {
-  box-shadow: $shadow;
-}
-
-// Linear gradient
-
 //noinspection CssOptimizeSimilarProperties
 @mixin linear-gradient($start-color, $end-color) {
   background-color: $start-color;
@@ -76,12 +53,6 @@
   }
 }
 
-@mixin visible {
-  opacity: 1;
-  visibility: visible;
-  transition-delay: 0s;
-}
-
 //
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 0f770e10469..e2ffa9d3b75 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -7,7 +7,7 @@
   z-index: z("timeline");
   margin-left: 757px;
 
-  @include large-width {
+  @include breakpoint(extra-large, min-width) {
     margin-left: 820px;
   }
   @media all and (min-width: 1250px) {
@@ -228,7 +228,7 @@
     }
 
     .timeline-handle {
-      @include border-radius-all(0.8em);
+      border-radius: 0.8em;
       width: 0.35em;
       background-color: dark-light-choose($tertiary-low, $tertiary-high);
       height: 100%;
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index be756b56fc4..88ede5345c7 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -104,7 +104,7 @@
         max-width: 48%;
       }
 
-      @media screen and (max-width: 550px) {
+      @include breakpoint(mobile) {
         flex: 1 1 auto;
         min-width: 49%;
         max-width: unset;
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 45f86443e96..6f1554aad5d 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -229,7 +229,7 @@ button.dismiss-read {
 
 /* Tablet (portrait) ----------- */
 
-@include small-width {
+@include breakpoint(medium) {
   // slightly smaller font, tighten spacing on nav pills
   .nav-pills {
     > li > a {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 1ff48a835c5..b52b9580f6a 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -785,7 +785,7 @@ $topic-avatar-width: 45px;
   padding: 5px;
   margin-bottom: 5px;
   right: 10px;
-  @include large-width {
+  @include breakpoint(extra-large, min-width) {
     right: auto;
     margin-left: 330px;
     left: 50%;
@@ -837,7 +837,7 @@ $topic-avatar-width: 45px;
     &[disabled] {
       text-shadow: 0 1px 0 rgba($primary, 0.2);
       @include linear-gradient($tertiary, darken($tertiary, 20%));
-      @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.33));
+      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index c55f9cc3c02..bcf73c5b479 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -285,7 +285,7 @@
     }
 
     &[type="text"] {
-      @include small-width {
+      @include breakpoint(medium) {
         width: 450px;
       }
     }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 3b392e1768a..d77d3859b38 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -5,7 +5,7 @@
 #site-text-logo {
   font-size: $font-up-3;
 }
-@include mobile-portrait {
+@include breakpoint(mobile-small) {
   #site-text-logo {
     font-size: $font-up-2;
   }
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
index 03d434e9b19..ea97b3d649d 100644
--- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
+++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
@@ -108,7 +108,7 @@
         text-align: center;
       }
 
-      @include small-width {
+      @include breakpoint(medium) {
         flex-direction: column;
         align-items: flex-start;