Streamlining some breakpoint mixins

2018-07-12 16:38:51 -04:00 · 2018-07-12 16:38:51 -04:00 · b79fedd540
parent a611db666b
commit b79fedd540
22 changed files with 56 additions and 85 deletions
--- 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;
--- 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%;

--- 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%;
      }
    }
--- 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;
      }
--- 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%;
  }

--- 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;
    }
  }
--- 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;
--- 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);
      }
--- 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;
--- 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;
--- 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;

--- 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,
--- 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;
  }

--- 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
--- 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;
-}
-
 //
 // --------------------------------------------------

--- 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%;
--- 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;
--- 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 {
--- 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);
    }
  }
 }
--- 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;
      }
    }
--- 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;
  }
--- 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;