mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-04 21:44:44 +00:00
Define proper breakpoint definitions rather then typing @media (#4860)
This commit is contained in:
Janneke Janssen
Thibaud Colas
parent
1efad238e1
commit
487f1f47b8
31 changed files with 263 additions and 224 deletions
|
|
@ -19,6 +19,7 @@ Changelog
|
|||
* Fix: Allow custom logos of any height in the admin menu (Meteor0id)
|
||||
* Fix: Allow nav menu to take up all available space instead of scrolling (Meteor0id)
|
||||
* Fix: Redirects now return 404 when destination is unspecified or a page with no site (Hillary Jeffrey)
|
||||
* Fix: Refactor all breakpoint definitions, removing style overlaps (Janneke Janssen)
|
||||
|
||||
|
||||
2.3 LTS (23.10.2018)
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
$breakpoint-small: $breakpoint-mobile - 0.0625em;
|
||||
$breakpoint-medium: $breakpoint-mobile;
|
||||
|
||||
@mixin small {
|
||||
@media only screen and (max-width: $breakpoint-small) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin medium {
|
||||
@media only screen and (min-width: $breakpoint-medium) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,38 +3,38 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
.u-hidden\@medium {
|
||||
@include medium {
|
||||
.u-hidden\@sm {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-hidden\@small {
|
||||
@include small {
|
||||
.u-hidden\@xs {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-inline\@medium {
|
||||
@include medium {
|
||||
.u-inline\@sm {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-inline\@small {
|
||||
@include small {
|
||||
.u-inline\@xs {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-block\@medium {
|
||||
@include medium {
|
||||
.u-block\@sm {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-block\@small {
|
||||
@include small {
|
||||
.u-block\@xs {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// Wagtail CMS main stylesheet
|
||||
// =============================================================================
|
||||
|
||||
@import 'tools.breakpoints';
|
||||
@import 'objects';
|
||||
@import 'components';
|
||||
@import 'utilities';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ $menu-footer-height: 50px;
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: 485px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
|
|
@ -37,7 +37,7 @@ $menu-footer-height: 50px;
|
|||
overflow: hidden;
|
||||
background: $c-explorer-bg;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 2px 2px 5px $c-explorer-bg-active;
|
||||
}
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@ $menu-footer-height: 50px;
|
|||
color: $c-explorer-secondary;
|
||||
}
|
||||
|
||||
@include small {
|
||||
@include media-breakpoint-down(xs) {
|
||||
.explorer-open & {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@ $menu-footer-height: 50px;
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1em 1.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -122,7 +122,7 @@ $menu-footer-height: 50px;
|
|||
padding: 1em;
|
||||
color: $color-white;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1em 1.75em;
|
||||
}
|
||||
}
|
||||
|
|
@ -148,7 +148,7 @@ $menu-footer-height: 50px;
|
|||
background: $c-explorer-bg-active;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1em 1.75em;
|
||||
height: $menu-footer-height;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
background: $c-explorer-bg-active;
|
||||
}
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1.45em 1.75em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
&.full {
|
||||
margin-left: $mobile-nice-padding;
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: $desktop-nice-padding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ Bug fixes
|
|||
* Allow nav menu to take up all available space instead of scrolling (Meteor0id)
|
||||
* Users without the edit permission no longer see "Edit" links in list of pages waiting for moderation (Justin Focus, Fedor Selitsky)
|
||||
* Redirects now return 404 when destination is unspecified or a page with no site (Hillary Jeffrey)
|
||||
* Refactor all breakpoint definitions, removing style overlaps (Janneke Janssen)
|
||||
|
||||
|
||||
Upgrade considerations
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ $padding: $grid-gutter-width * 0.5;
|
|||
padding-left: $mobile-nice-padding;
|
||||
padding-right: $mobile-nice-padding;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-left: $desktop-nice-padding;
|
||||
padding-right: $desktop-nice-padding;
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@ $padding: $grid-gutter-width * 0.5;
|
|||
margin-left: $mobile-nice-padding;
|
||||
margin-right: $mobile-nice-padding;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: $desktop-nice-padding;
|
||||
margin-right: $desktop-nice-padding;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,129 +1,2 @@
|
|||
// =============================================================================
|
||||
// Mixins
|
||||
// =============================================================================
|
||||
|
||||
@import '../../../../../client/scss/tools.breakpoints';
|
||||
|
||||
// Please note that the mixins partial shouldn't include any classes. This is so
|
||||
// it can be included in any file without accidentally producing output
|
||||
|
||||
// Turns on font-smoothing when used. Use sparingly.
|
||||
@mixin font-smoothing {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unlist() {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// remove list styles, but only for the immediate element -
|
||||
// allow nested lists inside it to keep the default style
|
||||
|
||||
@mixin unlistimmediate() {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
|
||||
> li {
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition($transition...) {
|
||||
body.ready & {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin visuallyhidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin visuallyvisible {
|
||||
clip: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
overflow: visible;
|
||||
position: initial;
|
||||
}
|
||||
|
||||
|
||||
@mixin icon () {
|
||||
@include font-smoothing;
|
||||
font-family: 'wagtail';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
speak: none;
|
||||
text-decoration: none;
|
||||
width: 1.3em;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
@mixin webfont($fontname, $filestub, $weight, $style:normal) {
|
||||
@font-face {
|
||||
font-family: '#{$fontname}';
|
||||
src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
|
||||
url('#{$font-root}#{$filestub}.woff') format('woff');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies given rules on hover, except for touch screens.
|
||||
// Relies on feature detection to add a no-touch class on the html element.
|
||||
@mixin hover {
|
||||
.no-touch &:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@import 'wagtailadmin/scss/mixins/breakpoints';
|
||||
@import 'wagtailadmin/scss/mixins/general';
|
||||
|
|
|
|||
|
|
@ -19,10 +19,13 @@ $mobile-nice-padding: 20px;
|
|||
$desktop-nice-padding: 50px;
|
||||
|
||||
// screen breakpoints
|
||||
$breakpoint-mobile: 50em; // 800px
|
||||
$breakpoint-desktop-small: 56.25em; // 900px
|
||||
$breakpoint-desktop-large: 75em; // 1200px
|
||||
$breakpoint-desktop-larger: 100em; // 1600px
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 50em, // 800px
|
||||
md: 56.25em, // 900px
|
||||
lg: 75em, // 1200px
|
||||
xl: 100em, // 1440px
|
||||
);
|
||||
|
||||
// colours
|
||||
$color-teal: #007d7e;
|
||||
|
|
|
|||
|
|
@ -439,7 +439,7 @@ input[type=checkbox]:checked:before {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: 0.95em;
|
||||
padding: 0 1.4em;
|
||||
height: 3em;
|
||||
|
|
@ -605,7 +605,7 @@ a.button {
|
|||
line-height: 1.85em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
line-height: 2.9em;
|
||||
}
|
||||
}
|
||||
|
|
@ -617,7 +617,7 @@ input[type=button],
|
|||
button {
|
||||
padding: 0 1em;
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
&.button-small {
|
||||
height: 2em;
|
||||
}
|
||||
|
|
@ -1177,7 +1177,7 @@ button {
|
|||
@include transition(opacity 0.2s ease);
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
label {
|
||||
@include column(2);
|
||||
padding-top: 1.2em;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ header {
|
|||
&.no-border {
|
||||
border: 0;
|
||||
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
// To all hamburger menu to be visible
|
||||
padding-left: $desktop-nice-padding;
|
||||
padding-top: 11px;
|
||||
|
|
@ -110,7 +110,7 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
header {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
|
|
@ -157,7 +157,7 @@ header {
|
|||
}
|
||||
|
||||
.header-title {
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding-left: $mobile-nav-indent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -448,9 +448,6 @@ table.listing {
|
|||
position: absolute;
|
||||
right: 10%;
|
||||
top: 2em;
|
||||
// @media screen and (min-width: $breakpoint-desktop-larger) {
|
||||
// right: 20em;
|
||||
// }
|
||||
}
|
||||
|
||||
.locked-indicator {
|
||||
|
|
@ -564,7 +561,7 @@ table.listing {
|
|||
}
|
||||
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.listing {
|
||||
&.horiz > li {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
// Desktop styling (override mobile styling):
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.logo {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.inner {
|
||||
background: $nav-grey-1;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
// On medium, make it possible for the nav links to scroll.
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
}
|
||||
|
||||
.submenu-trigger:after {
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
// The menus are collapsible on desktop only.
|
||||
content: map-get($icons, arrow-right);
|
||||
width: auto;
|
||||
|
|
@ -268,7 +268,7 @@ body.explorer-open {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.wrapper,
|
||||
body.nav-open .wrapper {
|
||||
transform: none;
|
||||
|
|
@ -493,8 +493,8 @@ body.explorer-open {
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: none),
|
||||
all and (min-width: $breakpoint-mobile) and (-ms-high-contrast: active) {
|
||||
@media all and (min-width: breakpoint-min(sm)) and (-ms-high-contrast: none),
|
||||
all and (min-width: breakpoint-min(sm)) and (-ms-high-contrast: active) {
|
||||
body.explorer-open {
|
||||
.wrapper {
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.messages > ul > li {
|
||||
padding-left: 1.6em;
|
||||
padding-right: 3em;
|
||||
|
|
|
|||
|
|
@ -109,15 +109,15 @@ $zindex-modal-background: 500;
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.modal-dialog {
|
||||
padding: 0 0 2em $menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-desktop-larger) {
|
||||
@include media-breakpoint-up(xl) {
|
||||
.modal-dialog {
|
||||
max-width: $breakpoint-desktop-larger;
|
||||
max-width: 100em;
|
||||
padding: 0 0 2em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -365,7 +365,7 @@ li.sequence-member {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
li {
|
||||
@include column(2);
|
||||
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.tab-nav {
|
||||
// For cases where tab-nav should merge with header
|
||||
&.merged {
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
// To allow tabs on the edit page to be editable
|
||||
.tab-nav li:first-of-type {
|
||||
padding-left: 1.6em;
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@ body {
|
|||
}
|
||||
|
||||
footer {
|
||||
// @include transition(all 0.2s ease);
|
||||
@include transition(bottom 0.5s ease 1s);
|
||||
@include row();
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
|
@ -167,7 +166,7 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
.actions,
|
||||
.preview,
|
||||
.preview .dropdown {
|
||||
|
|
@ -185,12 +184,6 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
$width-1440px: 90em;
|
||||
|
||||
@media screen and (min-width: $width-1440px) {
|
||||
width: $width-1440px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
|
|
@ -326,7 +319,7 @@ footer,
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.col1 {
|
||||
@include column(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,14 +63,14 @@ a.button.page404__button { // more specific to override standard button styles
|
|||
}
|
||||
|
||||
// SMALL DESKTOP CHANGES:
|
||||
@media screen and (max-width: $breakpoint-desktop-small) { // 900px
|
||||
@include media-breakpoint-down(sm) {
|
||||
.wagtail-logo-container__desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// MOBILE CHANGES:
|
||||
@media screen and (max-width: $breakpoint-mobile) { // 800px
|
||||
@include media-breakpoint-down(xs) {
|
||||
.page404__text-container {
|
||||
width: 400px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ header {
|
|||
padding: 0;
|
||||
|
||||
// make way for the nav-menu button on mobile
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
position: relative;
|
||||
left: $mobile-nav-indent;
|
||||
}
|
||||
|
|
@ -55,15 +55,15 @@ header {
|
|||
font-size: 6em;
|
||||
float: left;
|
||||
|
||||
@media screen and (max-width: $breakpoint-desktop-large) {
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-desktop-small) {
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 4.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,15 +82,15 @@ header {
|
|||
line-height: 1em;
|
||||
font-weight: 300;
|
||||
|
||||
@media screen and (max-width: $breakpoint-desktop-large) {
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-desktop-small) {
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ input[type=checkbox]:before {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.content-wrapper {
|
||||
float: none;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.breadcrumb {
|
||||
margin: -1.2em 0 2em;
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-top: -1.8em;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
.header-title {
|
||||
padding-left: 3.1em;
|
||||
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding-left: 0;
|
||||
margin-left: -28px;
|
||||
// Because it's nested within tab-merged which we've given padding
|
||||
|
|
@ -345,7 +345,7 @@ $object-title-height: 40px;
|
|||
footer .preview {
|
||||
button,
|
||||
.button {
|
||||
@media screen and (max-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -387,7 +387,7 @@ footer .preview {
|
|||
}
|
||||
}
|
||||
|
||||
@include medium {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.object {
|
||||
fieldset {
|
||||
// Override column mixin for column items.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
// Based upon the fine work and thoughts from Bootstrap v4.
|
||||
//
|
||||
// Copyright 2011-2018 The Bootstrap Authors
|
||||
// Copyright 2011-2018 Twitter, Inc.
|
||||
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
@function breakpoint-next($name) {
|
||||
$breakpoint-names: map-keys($breakpoints);
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm)
|
||||
// 50em
|
||||
@function breakpoint-min($name) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
//
|
||||
// >> breakpoint-max(sm)
|
||||
// 56.1875em
|
||||
@function breakpoint-max($name) {
|
||||
$next: breakpoint-next($name);
|
||||
@return if($next, breakpoint-min($next) - 0.0625em, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name) {
|
||||
$min: breakpoint-min($name);
|
||||
@if $min {
|
||||
@media screen and (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name) {
|
||||
$max: breakpoint-max($name);
|
||||
@if $max {
|
||||
@media screen and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
126
wagtail/admin/static_src/wagtailadmin/scss/mixins/_general.scss
Normal file
126
wagtail/admin/static_src/wagtailadmin/scss/mixins/_general.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
// =============================================================================
|
||||
// Mixins
|
||||
// =============================================================================
|
||||
// Please note that the mixins partial shouldn't include any classes. This is so
|
||||
// it can be included in any file without accidentally producing output
|
||||
|
||||
// Turns on font-smoothing when used. Use sparingly.
|
||||
@mixin font-smoothing {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unlist() {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// remove list styles, but only for the immediate element -
|
||||
// allow nested lists inside it to keep the default style
|
||||
|
||||
@mixin unlistimmediate() {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
|
||||
> li {
|
||||
list-style-type: none;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition($transition...) {
|
||||
body.ready & {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin visuallyhidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin visuallyvisible {
|
||||
clip: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
overflow: visible;
|
||||
position: initial;
|
||||
}
|
||||
|
||||
|
||||
@mixin icon () {
|
||||
@include font-smoothing;
|
||||
font-family: 'wagtail';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
speak: none;
|
||||
text-decoration: none;
|
||||
width: 1.3em;
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
@mixin webfont($fontname, $filestub, $weight, $style:normal) {
|
||||
@font-face {
|
||||
font-family: '#{$fontname}';
|
||||
src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
|
||||
url('#{$font-root}#{$filestub}.woff') format('woff');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies given rules on hover, except for touch screens.
|
||||
// Relies on feature detection to add a no-touch class on the html element.
|
||||
@mixin hover {
|
||||
.no-touch &:hover {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,14 +7,14 @@
|
|||
<a href="{% url 'wagtailadmin_home' %}" class="logo" title="Wagtail v.{% wagtail_version %}">
|
||||
{% block branding_logo %}
|
||||
{# Mobile-only logo: #}
|
||||
<div class="wagtail-logo-container__mobile u-hidden@medium">
|
||||
<div class="wagtail-logo-container__mobile u-hidden@sm">
|
||||
<img class="wagtail-logo wagtail-logo__full" src="{% static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
|
||||
</div>
|
||||
|
||||
{# Desktop logo (animated): #}
|
||||
{% include "wagtailadmin/shared/animated_logo.html" %}
|
||||
{% endblock %}
|
||||
<span class="u-hidden@medium">{% trans "Dashboard" %}</span>
|
||||
<span class="u-hidden@sm">{% trans "Dashboard" %}</span>
|
||||
</a>
|
||||
|
||||
{% menu_search %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% load wagtailadmin_tags static %}
|
||||
|
||||
<div class="wagtail-logo-container__desktop u-hidden@small">
|
||||
<div class="wagtail-logo-container__desktop u-hidden@xs">
|
||||
<img class="wagtail-logo wagtail-logo__body" src="{% static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
|
||||
<img class="wagtail-logo wagtail-logo__tail" src="{% static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
|
||||
<img class="wagtail-logo wagtail-logo__eye--open" src="{% static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
|
||||
.breadcrumb {
|
||||
margin: -1.2em 0 2em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.breadcrumb {
|
||||
margin-top: -1.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
|
||||
.content header {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -139,7 +140,7 @@ p.no-results {
|
|||
}
|
||||
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
.changelist-filter {
|
||||
float: right;
|
||||
padding: 0 1.5%;
|
||||
|
|
@ -175,8 +176,7 @@ p.no-results {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: $breakpoint-desktop-large) {
|
||||
@include media-breakpoint-up(lg) {
|
||||
.result-list.col9 {
|
||||
width: 79%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue