github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 17:51:16 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Streamlining some breakpoint mixins

Browse Source
This commit is contained in:
Kris
2018-07-12 16:38:51 -04:00
parent a611db666b
commit b79fedd540
22 changed files with 56 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -18,7 +18,7 @@ $mobile-breakpoint: 700px;
.mobile-view & { .mobile-view & {
margin-top: 10px; margin-top: 10px;
} }
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
width: calc(100% + 10px); width: calc(100% + 10px);
margin-left: -10px; margin-left: -10px;
padding: 0 0 0 10px; padding: 0 0 0 10px;
@ -28,7 +28,7 @@ $mobile-breakpoint: 700px;
display: inline-flex; display: inline-flex;
width: calc(100% - 10px); width: calc(100% - 10px);
flex: 1 0 auto; flex: 1 0 auto;
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
white-space: nowrap; white-space: nowrap;
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -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 // Fade-out for horizontal scroll nav
&:before { &:before {
content: ""; content: "";
@ -414,7 +414,7 @@ $mobile-breakpoint: 700px;
clear: both; clear: both;
padding: 4px; padding: 4px;
} }
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
.select-kit.period-chooser .select-kit.period-chooser
.period-chooser-header .period-chooser-header
h2.selected-name h2.selected-name
@ -459,7 +459,7 @@ $mobile-breakpoint: 700px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
height: 100%; height: 100%;
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
width: calc(100% + 10px); width: calc(100% + 10px);
padding-left: 10px; padding-left: 10px;
margin-left: -10px; margin-left: -10px;
@ -501,7 +501,7 @@ $mobile-breakpoint: 700px;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
margin-left: -10px; margin-left: -10px;
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

2
app/assets/stylesheets/common/admin/admin_reports.scss
View File

@ -51,7 +51,7 @@
} }
} }
@include small-width { @include breakpoint(medium) {
flex-direction: column; flex-direction: column;
min-width: 100%; min-width: 100%;

6
app/assets/stylesheets/common/admin/api.scss
View File

@ -31,7 +31,7 @@ table.web-hooks.grid {
} }
} }
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
tbody { tbody {
tr { tr {
grid-template-columns: 0.5fr 1fr; grid-template-columns: 0.5fr 1fr;
@ -76,7 +76,7 @@ table.api-keys {
td.key { td.key {
font-size: $font-down-1; font-size: $font-down-1;
} }
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
tr { tr {
grid-template-columns: 0.25fr 1fr 1fr; grid-template-columns: 0.25fr 1fr 1fr;
} }
@ -156,7 +156,7 @@ table.api-keys {
.hook-event { .hook-event {
margin-bottom: 0.5em; margin-bottom: 0.5em;
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
width: 100%; width: 100%;
} }
} }

4
app/assets/stylesheets/common/admin/backups.scss
View File

@ -51,7 +51,7 @@ $rollback-darker: darken($rollback, 20%) !default;
} }
} }
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
td.backup-filename { td.backup-filename {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
@ -64,7 +64,7 @@ $rollback-darker: darken($rollback, 20%) !default;
grid-column-end: 4; grid-column-end: 4;
} }
} }
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
td.backup-controls { td.backup-controls {
text-align: left; text-align: left;
} }

10
app/assets/stylesheets/common/admin/dashboard_next.scss
View File

@ -14,7 +14,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@include small-width { @include breakpoint(medium) {
flex-direction: column; flex-direction: column;
} }
@ -30,7 +30,7 @@
margin-right: 1em; margin-right: 1em;
} }
@include small-width { @include breakpoint(medium) {
min-width: 100%; min-width: 100%;
&:last-child { &:last-child {
@ -43,7 +43,7 @@
} }
} }
@include small-width { @include breakpoint(medium) {
.section-column:last-child, .section-column:last-child,
.section-column:first-child { .section-column:first-child {
margin: 0; margin: 0;
@ -87,7 +87,7 @@
margin-bottom: 1em; margin-bottom: 1em;
} }
@include small-width { @include breakpoint(medium) {
.chart { .chart {
max-width: 100%; max-width: 100%;
} }
@ -267,7 +267,7 @@
min-width: 0; min-width: 0;
} }
@include small-width { @include breakpoint(medium) {
max-width: 100%; max-width: 100%;
} }

6
app/assets/stylesheets/common/admin/dashboard_previous.scss
View File

@ -74,7 +74,7 @@
box-sizing: border-box; box-sizing: border-box;
padding-right: 20px; padding-right: 20px;
min-width: 250px; min-width: 250px;
@include small-width { @include breakpoint(medium) {
max-width: unset; max-width: unset;
} }
.face { .face {
@ -260,10 +260,10 @@
} }
.referred-topic-title { .referred-topic-title {
width: 355px; width: 355px;
@include medium-width { @media all and (min-width: 1000px) and (max-width: 1139px) {
width: 305px; width: 305px;
} }
@include small-width { @include breakpoint(medium) {
width: 265px; width: 265px;
} }
} }

2
app/assets/stylesheets/common/admin/flagging.scss
View File

@ -190,7 +190,7 @@
white-space: nowrap; white-space: nowrap;
} }
} }
@media screen and (max-width: 768px) { @include breakpoint(tablet) {
td.topic-title { td.topic-title {
width: auto; width: auto;
max-width: 600px; max-width: 600px;

2
app/assets/stylesheets/common/admin/plugins.scss
View File

@ -12,7 +12,7 @@
grid-template-columns: 0.25fr repeat(4, 1fr); grid-template-columns: 0.25fr repeat(4, 1fr);
} }
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
tr { tr {
grid-template-columns: 0.25fr repeat(3, 1fr); grid-template-columns: 0.25fr repeat(3, 1fr);
} }

4
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -118,7 +118,7 @@
} }
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
table.staff-logs tr { table.staff-logs tr {
grid-template-columns: 1fr 1fr 0.5fr; grid-template-columns: 1fr 1fr 0.5fr;
td.staff-users { td.staff-users {
@ -418,7 +418,7 @@ table.search-logs-list {
} }
} }
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
tr { tr {
td.term { td.term {
grid-column-start: 1; grid-column-start: 1;

2
app/assets/stylesheets/common/base/activation.scss
View File

@ -2,7 +2,7 @@
// account or changing their email. // account or changing their email.
#simple-container { #simple-container {
@include border-radius-all(10px); border-radius: 10px;
background-color: $secondary; background-color: $secondary;
padding: 20px; padding: 20px;
width: 550px; width: 550px;

2
app/assets/stylesheets/common/base/discourse.scss
View File

@ -290,7 +290,7 @@ select {
} }
.message { .message {
@include border-radius-all(8px); border-radius: 8px;
background-color: $secondary; background-color: $secondary;
padding: 14px; padding: 14px;

8
app/assets/stylesheets/common/base/search.scss
View File

@ -22,7 +22,7 @@
.search-advanced { .search-advanced {
width: 70%; width: 70%;
@include small-width { @include breakpoint(medium) {
width: 65%; width: 65%;
} }
@ -102,7 +102,7 @@
.search-advanced-sidebar { .search-advanced-sidebar {
width: 30%; width: 30%;
@include small-width { @include breakpoint(medium) {
width: 35%; width: 35%;
} }
margin-left: 1em; margin-left: 1em;
@ -139,7 +139,7 @@
.search-advanced-title { .search-advanced-title {
background: $primary-low; background: $primary-low;
padding: 0.358em 1em; padding: 0.358em 1em;
@include small-width { @include breakpoint(medium) {
padding: 0.358em 0.5em; padding: 0.358em 0.5em;
} }
font-weight: 700; font-weight: 700;
@ -164,7 +164,7 @@
section.field { section.field {
margin-top: 5px; margin-top: 5px;
} }
@include small-width { @include breakpoint(medium) {
padding: 0.75em 0.5em; padding: 0.75em 0.5em;
.ac-wrap, .ac-wrap,
.choices, .choices,

10
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -153,7 +153,7 @@
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
padding: 0 10%; padding: 0 10%;
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
padding: 0 5%; padding: 0 5%;
} }
} }
@ -212,11 +212,11 @@
&:nth-of-type(3n) { &:nth-of-type(3n) {
margin-right: 0; margin-right: 0;
} }
@include small-width { @include breakpoint(medium) {
flex: 0 0 49%; flex: 0 0 49%;
margin-right: 0; margin-right: 0;
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
flex: 0 0 100%; flex: 0 0 100%;
} }
&:hover { &:hover {
@ -225,7 +225,7 @@
&:active { &:active {
box-shadow: none; box-shadow: none;
} }
@include mobile-portrait { @include breakpoint(mobile-small) {
width: 100%; width: 100%;
} }
} }
@ -274,7 +274,7 @@
margin-bottom: 1.5em; margin-bottom: 1.5em;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@include small-width { @include breakpoint(medium) {
justify-content: space-between; justify-content: space-between;
} }

2
app/assets/stylesheets/common/components/badges.scss
View File

@ -9,7 +9,7 @@
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
white-space: nowrap; white-space: nowrap;
@include border-radius-all(10px); border-radius: 10px;
} }
// Category badges // Category badges

51
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -5,27 +5,18 @@
// Media queries // Media queries
// -------------------------------------------------- // --------------------------------------------------
@mixin small-width { $breakpoints: (
@media all and (max-width: 850px) { mobile-small: 320px,
@content; mobile: 550px,
} tablet: 768px,
} medium: 850px,
large: 1000px,
extra-large: 1140px
);
@mixin medium-width { @mixin breakpoint($bp, $rule: max-width, $type: screen) {
@media all and (min-width: 1000px) and (max-width: 1139px) { @media #{$type} and (#{$rule}: map-get($breakpoints, $bp)) {
@content; @content;
}
}
@mixin large-width {
@media all and (min-width: 1140px) {
@content;
}
}
@mixin mobile-portrait {
@media all and (max-width: 320px) {
@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 //noinspection CssOptimizeSimilarProperties
@mixin linear-gradient($start-color, $end-color) { @mixin linear-gradient($start-color, $end-color) {
background-color: $start-color; background-color: $start-color;
@ -76,12 +53,6 @@
} }
} }
@mixin visible {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
// //
// -------------------------------------------------- // --------------------------------------------------

4
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -7,7 +7,7 @@
z-index: z("timeline"); z-index: z("timeline");
margin-left: 757px; margin-left: 757px;
@include large-width { @include breakpoint(extra-large, min-width) {
margin-left: 820px; margin-left: 820px;
} }
@media all and (min-width: 1250px) { @media all and (min-width: 1250px) {
@ -228,7 +228,7 @@
} }
.timeline-handle { .timeline-handle {
@include border-radius-all(0.8em); border-radius: 0.8em;
width: 0.35em; width: 0.35em;
background-color: dark-light-choose($tertiary-low, $tertiary-high); background-color: dark-light-choose($tertiary-low, $tertiary-high);
height: 100%; height: 100%;

2
app/assets/stylesheets/desktop/modal.scss
View File

@ -104,7 +104,7 @@
max-width: 48%; max-width: 48%;
} }
@media screen and (max-width: 550px) { @include breakpoint(mobile) {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 49%; min-width: 49%;
max-width: unset; max-width: unset;

2
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -229,7 +229,7 @@ button.dismiss-read {
/* Tablet (portrait) ----------- */ /* Tablet (portrait) ----------- */
@include small-width { @include breakpoint(medium) {
// slightly smaller font, tighten spacing on nav pills // slightly smaller font, tighten spacing on nav pills
.nav-pills { .nav-pills {
> li > a { > li > a {

4
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -785,7 +785,7 @@ $topic-avatar-width: 45px;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
right: 10px; right: 10px;
@include large-width { @include breakpoint(extra-large, min-width) {
right: auto; right: auto;
margin-left: 330px; margin-left: 330px;
left: 50%; left: 50%;
@ -837,7 +837,7 @@ $topic-avatar-width: 45px;
&[disabled] { &[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($tertiary, darken($tertiary, 20%)); @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);
} }
} }
} }

2
app/assets/stylesheets/desktop/user.scss
View File

@ -285,7 +285,7 @@
} }
&[type="text"] { &[type="text"] {
@include small-width { @include breakpoint(medium) {
width: 450px; width: 450px;
} }
} }

2
app/assets/stylesheets/mobile/header.scss
View File

@ -5,7 +5,7 @@
#site-text-logo { #site-text-logo {
font-size: $font-up-3; font-size: $font-up-3;
} }
@include mobile-portrait { @include breakpoint(mobile-small) {
#site-text-logo { #site-text-logo {
font-size: $font-up-2; font-size: $font-up-2;
} }

2
plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
View File

@ -108,7 +108,7 @@
text-align: center; text-align: center;
} }
@include small-width { @include breakpoint(medium) {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;