github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-19 04:52:45 +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
Show Stats 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 & {
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;

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

@ -51,7 +51,7 @@
}
}
@include small-width {
@include breakpoint(medium) {
flex-direction: column;
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 {
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%;
}
}

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

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

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

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

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

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

@ -190,7 +190,7 @@
white-space: nowrap;
}
}
@media screen and (max-width: 768px) {
@include breakpoint(tablet) {
td.topic-title {
width: auto;
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);
}
}
@media screen and (max-width: 550px) {
@include breakpoint(mobile) {
tr {
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 {
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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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