mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Upgrade to latest Sass and stylelint configuration, with needed refactorings 

- Tweak stylesheets for compatibility with latest stylelint configuration
- Move stylelint config to JS for ease of copying rules with main config
- Enforce scss/no-global-function-names by refactoring code with sass-migrator
- Run Sass code through sass-migrator
- Change stylelint configuration and code to enforce font-family-no-missing-generic-family-keyword
- Manually switch to math.div where migrator used * 0.5
pull/7668/merge
Thibaud Colas 2021-12-23 02:42:22 +00:00 zatwierdzone przez LB (Ben Johnston)
rodzic 7d7a03f9f2
commit 23bc6b2670
45 zmienionych plików z 226 dodań i 183 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
.stylelintignore 100644
Wyświetl plik

@ -0,0 +1,3 @@
node_modules
venv
build

7
.stylelintrc.js 100644
Wyświetl plik

@ -0,0 +1,7 @@
module.exports = {
extends: '@wagtail/stylelint-config-wagtail',
rules: {
// Would be valuable for strict BEM components but is too hard to enforce with legacy code.
'no-descending-specificity': null,
},
};

6
.stylelintrc.yaml
Wyświetl plik

@ -1,6 +0,0 @@
ignoreFiles:
- node_modules
- build/**/*
- venv/**/*
extends:
- '@wagtail/stylelint-config-wagtail'

10
client/scss/components/_button.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:color";
// Core button style // Core button style
// Note that these styles include methods to render buttons the same x-browser, described here: // Note that these styles include methods to render buttons the same x-browser, described here:
// http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights // http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
@ -214,6 +215,7 @@
} }
} }
// stylelint-disable-next-line no-duplicate-selectors
&:hover { &:hover {
background-color: $color-button-hover; background-color: $color-button-hover;
color: $color-white; color: $color-white;
@ -302,12 +304,6 @@
border: 0; border: 0;
} }
&.button--icon {
.icon {
@include svg-icon(1.5em);
}
}
&.button-strokeonhover { &.button-strokeonhover {
border: 1px solid transparent; border: 1px solid transparent;
@ -597,7 +593,7 @@ button {
background-color: $color-white; background-color: $color-white;
padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
margin-bottom: 1em; margin-bottom: 1em;
border: 1px solid lighten($color-grey-4, 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5 border: 1px solid color.adjust($color-grey-4, $lightness: 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
} }
&.moving { &.moving {

2
client/scss/components/_chooser.scss
Wyświetl plik

@ -36,7 +36,7 @@ overridden here? hmm.
// TODO: [icon-font] remove when the Wagtail icon font is removed // TODO: [icon-font] remove when the Wagtail icon font is removed
&:before { &:before {
vertical-align: middle; vertical-align: middle;
font-family: wagtail; font-family: $font-wagtail-icons;
content: ''; content: '';
// position: relative // position: relative
display: inline-block; display: inline-block;

1
client/scss/components/_dropdown.legacy.scss
Wyświetl plik

@ -329,6 +329,7 @@
} }
// Transitions // Transitions
// stylelint-disable-next-line no-duplicate-selectors
.dropdown ul { .dropdown ul {
@include transition(opacity 0.2s linear); @include transition(opacity 0.2s linear);
} }

4
client/scss/components/_footer.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:math";
.footer { .footer {
$border-curvature: 3px; $border-curvature: 3px;
@include transition(bottom 0.5s ease 1s); @include transition(bottom 0.5s ease 1s);
@ -82,7 +84,7 @@
.meta { .meta {
float: right; float: right;
text-align: right; text-align: right;
padding: 7px $grid-gutter-width / 2; padding: 7px math.div($grid-gutter-width, 2);
font-size: 0.85em; font-size: 0.85em;
p { p {

22
client/scss/components/_forms.scss
Wyświetl plik

@ -1,3 +1,6 @@
@use "sass:map";
@use "sass:math";
// stylelint-disable scss/comment-no-empty
// These are the generic stylings for forms of any type. // These are the generic stylings for forms of any type.
// If you're styling something specific to the page editing interface, // If you're styling something specific to the page editing interface,
// it probably ought to go in layouts/page-editor.scss // it probably ought to go in layouts/page-editor.scss
@ -92,8 +95,8 @@ select::-ms-expand {
top: 1px; top: 1px;
bottom: 0; bottom: 0;
width: 1.5em; width: 1.5em;
font-family: wagtail; font-family: $font-wagtail-icons;
content: map-get($icons, 'arrow-down'); content: map.get($icons, 'arrow-down');
border: 1px solid $color-input-border; border: 1px solid $color-input-border;
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
text-align: center; text-align: center;
@ -134,9 +137,9 @@ select::-ms-expand {
} }
&::before { &::before {
font-family: wagtail; font-family: $font-wagtail-icons;
vertical-align: -10%; vertical-align: -10%;
content: map-get($icons, 'cross'); content: map.get($icons, 'cross');
} }
} }
@ -191,7 +194,7 @@ label.required:after {
&:before, &:before,
&:after { &:after {
font-family: wagtail; font-family: $font-wagtail-icons;
position: absolute; position: absolute;
top: 0.5em; top: 0.5em;
line-height: 100%; line-height: 100%;
@ -246,19 +249,19 @@ label.required:after {
.date_field, .date_field,
.date_time_field { .date_time_field {
.input:before { .input:before {
content: map-get($icons, 'date'); content: map.get($icons, 'date');
} }
} }
.time_field { .time_field {
.input:before { .input:before {
content: map-get($icons, 'time'); content: map.get($icons, 'time');
} }
} }
.url_field { .url_field {
.input:before { .input:before {
content: map-get($icons, 'link'); content: map.get($icons, 'link');
} }
} }
@ -345,7 +348,7 @@ li.inline .field {
// solve gutter issues of inline fields // solve gutter issues of inline fields
ul.inline li:first-child, ul.inline li:first-child,
li.inline:first-child { li.inline:first-child {
margin-left: -$grid-gutter-width / 2; margin-left: math.div(-$grid-gutter-width, 2);
} }
// search-bars // search-bars
@ -380,6 +383,7 @@ li.inline:first-child {
} }
// Transitions // Transitions
// stylelint-disable-next-line no-duplicate-selectors
.help { .help {
@include transition(opacity 0.2s ease); @include transition(opacity 0.2s ease);
} }

6
client/scss/components/_header.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:math";
header { header {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
@ -67,7 +69,7 @@ header {
.breadcrumb { .breadcrumb {
margin-left: -$desktop-nice-padding; margin-left: -$desktop-nice-padding;
margin-right: -$desktop-nice-padding; margin-right: -$desktop-nice-padding;
padding-left: $desktop-nice-padding / 2; padding-left: math.div($desktop-nice-padding, 2);
} }
} }
} }
@ -77,7 +79,7 @@ header {
.breadcrumb { .breadcrumb {
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left: $desktop-nice-padding / 2; // rather than padding-left: revert; padding-left: math.div($desktop-nice-padding, 2); // rather than padding-left: revert;
} }
} }

16
client/scss/components/_help-block.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:color";
@use "sass:map";
// Help text formatters // Help text formatters
.help-block { .help-block {
padding: 1em; padding: 1em;
@ -26,17 +28,17 @@
position: relative; position: relative;
&:before { &:before {
font-family: wagtail; font-family: $font-wagtail-icons;
position: absolute; position: absolute;
left: 1em; left: 1em;
top: 0.7em; top: 0.7em;
content: map-get($icons, 'help'); content: map.get($icons, 'help');
font-size: 1.4em; font-size: 1.4em;
} }
} }
.help-info { .help-info {
background-color: lighten($color-blue, 30%); background-color: color.adjust($color-blue, $lightness: 30%);
&:before { &:before {
color: $color-blue; color: $color-blue;
@ -44,20 +46,20 @@
} }
.help-warning { .help-warning {
background-color: lighten($color-orange, 30%); background-color: color.adjust($color-orange, $lightness: 30%);
&:before { &:before {
color: $color-orange; color: $color-orange;
content: map-get($icons, 'warning'); content: map.get($icons, 'warning');
} }
} }
.help-critical { .help-critical {
background-color: lighten($color-red, 40%); background-color: color.adjust($color-red, $lightness: 40%);
&:before { &:before {
color: $color-red; color: $color-red;
content: map-get($icons, 'warning'); content: map.get($icons, 'warning');
} }
} }

8
client/scss/components/_icons.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:string";
// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin. // The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
@font-face { @font-face {
font-family: 'wagtail'; font-family: 'wagtail';
@ -29,12 +30,14 @@
@include icon(); // from _mixins.scss @include icon(); // from _mixins.scss
} }
// stylelint-disable-next-line no-duplicate-selectors
.icon:after, .icon:after,
.hallotoolbar [class^='icon-']:after, .hallotoolbar [class^='icon-']:after,
.hallotoolbar [class^='icon-']:after { .hallotoolbar [class^='icon-']:after {
text-align: right; text-align: right;
} }
// stylelint-disable-next-line no-duplicate-selectors
.hallotoolbar [class^='icon-'], .hallotoolbar [class^='icon-'],
.hallotoolbar [class*=' icon-']:before, .hallotoolbar [class*=' icon-']:before,
.hallotoolbar [class*=' icon-']:before, .hallotoolbar [class*=' icon-']:before,
@ -50,13 +53,13 @@
@each $icon, $content in $icons { @each $icon, $content in $icons {
.icon-#{$icon}:before { .icon-#{$icon}:before {
content: quote(#{$content}); content: string.quote(#{$content});
} }
} }
@each $icon, $content in $icons-after { @each $icon, $content in $icons-after {
.icon-#{$icon}:after { .icon-#{$icon}:after {
content: quote(#{$content}); content: string.quote(#{$content});
} }
} }
@ -155,6 +158,7 @@ svg.icon-spinner { // TODO: leave only class when iconfont styles are removed
} }
} }
// stylelint-disable-next-line no-duplicate-selectors
.icon { .icon {
&.initial { &.initial {
@include svg-icon(1em); @include svg-icon(1em);

3
client/scss/components/_indicator.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:math";
// ============================================================================= // =============================================================================
// Indicator light // Indicator light
// ============================================================================= // =============================================================================
@ -42,7 +43,7 @@ $c-indicator-margin: 0.25rem;
&:before { &:before {
content: ''; content: '';
width: $c-indicator-size / 2; width: math.div($c-indicator-size, 2);
height: $c-indicator-size; height: $c-indicator-size;
position: absolute; position: absolute;
top: 0; top: 0;

6
client/scss/components/_listing.scss
Wyświetl plik

@ -253,6 +253,7 @@ ul.listing {
} }
} }
// stylelint-disable-next-line no-duplicate-selectors
.button-secondary { .button-secondary {
background-color: $color-white; background-color: $color-white;
} }
@ -450,6 +451,7 @@ ul.listing {
word-wrap: break-word; word-wrap: break-word;
} }
// stylelint-disable-next-line no-duplicate-selectors
ul.listing { ul.listing {
border-top: 1px dashed $color-input-border; border-top: 1px dashed $color-input-border;
margin-bottom: 2em; margin-bottom: 2em;
@ -534,9 +536,6 @@ table.listing {
ul { ul {
@include unlist(); @include unlist();
}
ul {
margin-top: -1.7em; margin-top: -1.7em;
} }
@ -739,6 +738,7 @@ table.listing {
} }
} }
// stylelint-disable no-duplicate-selectors
// Transitions // Transitions
.listing { .listing {

5
client/scss/components/_loading-mask.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:map";
// Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction // Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
.loading-mask { .loading-mask {
&.loading { &.loading {
@ -26,9 +27,9 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
margin: -15px 0 0 -15px; margin: -15px 0 0 -15px;
font-family: wagtail; font-family: $font-wagtail-icons;
animation: spin-wag 0.5s infinite linear; animation: spin-wag 0.5s infinite linear;
content: map-get($icons, 'spinner'); content: map.get($icons, 'spinner');
z-index: 2; z-index: 2;
color: $color-teal; color: $color-teal;
} }

8
client/scss/components/_main-nav.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:map";
.nav-wrapper { .nav-wrapper {
position: relative; position: relative;
margin-left: -$menu-width; margin-left: -$menu-width;
@ -257,10 +259,10 @@
} }
&:before { &:before {
font-family: wagtail; font-family: $font-wagtail-icons;
font-weight: 200; font-weight: 200;
text-transform: none; text-transform: none;
content: map-get($icons, 'search'); content: map.get($icons, 'search');
display: block; display: block;
height: 100%; height: 100%;
line-height: 3.3em; line-height: 3.3em;
@ -508,6 +510,7 @@ body.explorer-open {
z-index: 5; z-index: 5;
} }
// stylelint-disable-next-line no-duplicate-selectors
.nav-wrapper { .nav-wrapper {
z-index: 2; z-index: 2;
} }
@ -520,6 +523,7 @@ body.explorer-open {
// .content-wrapper { // .content-wrapper {
// z-index: 3; // z-index: 3;
// } // }
// stylelint-disable-next-line no-duplicate-selectors
.nav-submenu { .nav-submenu {
z-index: 6; z-index: 6;
} }

1
client/scss/components/_messages.scss
Wyświetl plik

@ -1,6 +1,5 @@
// Messages are specific to Django's 'Messaging' system which adds messages into the session, // Messages are specific to Django's 'Messaging' system which adds messages into the session,
// for display on the next page visited. These appear as an animated banner at the top of the page. // for display on the next page visited. These appear as an animated banner at the top of the page.
//
// For inline help text, see typography.scss // For inline help text, see typography.scss
.messages { .messages {
position: relative; position: relative;

6
client/scss/components/_status-tag.scss
Wyświetl plik

@ -1,11 +1,13 @@
@use "sass:color";
.status-tag { .status-tag {
border-radius: 2px; border-radius: 2px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
text-transform: uppercase; text-transform: uppercase;
padding: 0 0.5em; padding: 0 0.5em;
border: 1px solid lighten($color-grey-2, 30%); border: 1px solid color.adjust($color-grey-2, $lightness: 30%);
color: lighten($color-grey-2, 30%); color: color.adjust($color-grey-2, $lightness: 30%);
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
line-height: 19px; line-height: 19px;
font-size: 0.8em; font-size: 0.8em;

7
client/scss/components/_switch.scss
Wyświetl plik

@ -1,9 +1,11 @@
@use "sass:math";
$switch-width: 40px; $switch-width: 40px;
$switch-height: 20px; $switch-height: 20px;
$switch-border: 2px; $switch-border: 2px;
$switch-outline: 3px; $switch-outline: 3px;
$switch-border-radius: ($switch-height + $switch-border * 2) / 2; $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
$switch-outline-radius: $switch-border-radius + $switch-outline; $switch-outline-radius: $switch-border-radius + $switch-outline;
// All the greys in Wagtail are really dark or really bright // All the greys in Wagtail are really dark or really bright
@ -67,9 +69,6 @@ $switch-color-middle-grey: #777;
[type=checkbox]:disabled + &__toggle::after { [type=checkbox]:disabled + &__toggle::after {
opacity: 0.5; opacity: 0.5;
}
[type=checkbox]:disabled + &__toggle::after {
box-shadow: none; box-shadow: none;
} }

6
client/scss/components/_tag.scss
Wyświetl plik

@ -1,18 +1,18 @@
@use "sass:map";
// free tagging tags from taggit // free tagging tags from taggit
.tag { .tag {
border-radius: 2px; border-radius: 2px;
background-color: $color-teal; background-color: $color-teal;
padding-right: 0.5em;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
color: $color-white; color: $color-white;
line-height: 2em; line-height: 2em;
white-space: nowrap; white-space: nowrap;
&:before { &:before {
font-family: wagtail; font-family: $font-wagtail-icons;
display: inline-block; display: inline-block;
color: $color-white; color: $color-white;
content: map-get($icons, 'tag'); content: map.get($icons, 'tag');
padding-right: 0.5em; padding-right: 0.5em;
} }

11
client/scss/elements/_forms.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:map";
// These are the generic stylings for forms of any type. // These are the generic stylings for forms of any type.
// If you're styling something specific to the page editing interface, // If you're styling something specific to the page editing interface,
// it probably ought to go in layouts/page-editor.scss // it probably ought to go in layouts/page-editor.scss
@ -168,7 +169,7 @@ input[type=radio] {
input[type=radio]:before { input[type=radio]:before {
border-radius: 100%; border-radius: 100%;
font-family: wagtail; font-family: $font-wagtail-icons;
font-style: normal; font-style: normal;
text-align: center; text-align: center;
position: absolute; position: absolute;
@ -176,7 +177,7 @@ input[type=radio]:before {
left: -2px; left: -2px;
cursor: pointer; cursor: pointer;
display: block; display: block;
content: map-get($icons, 'radio-full'); content: map.get($icons, 'radio-full');
width: 1em; width: 1em;
height: 1em; height: 1em;
line-height: 1.1em; line-height: 1.1em;
@ -187,7 +188,7 @@ input[type=radio]:before {
} }
input[type=radio]:checked:before { input[type=radio]:checked:before {
content: map-get($icons, 'radio-full'); content: map.get($icons, 'radio-full');
color: $color-teal; color: $color-teal;
} }
@ -199,7 +200,7 @@ input[type=checkbox] {
} }
input[type=checkbox]:before { input[type=checkbox]:before {
font-family: wagtail; font-family: $font-wagtail-icons;
font-style: normal; font-style: normal;
text-align: center; text-align: center;
position: absolute; position: absolute;
@ -216,7 +217,7 @@ input[type=checkbox]:before {
} }
input[type=checkbox]:checked:before { input[type=checkbox]:checked:before {
content: map-get($icons, 'tick'); content: map.get($icons, 'tick');
} }
input[type=checkbox][disabled]:before { input[type=checkbox][disabled]:before {

14
client/scss/overrides/_vendor.datetimepicker.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:map";
.xdsoft_datetimepicker { .xdsoft_datetimepicker {
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4); box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4);
background: $color-white; background: $color-white;
@ -68,7 +70,7 @@
&:before { &:before {
font-size: 1.5em; font-size: 1.5em;
font-family: wagtail; font-family: $font-wagtail-icons;
width: 1em; width: 1em;
line-height: 1.3em; line-height: 1.3em;
text-align: center; text-align: center;
@ -84,7 +86,7 @@
float: left; float: left;
&:before { &:before {
content: map-get($icons, 'arrow-left'); content: map.get($icons, 'arrow-left');
} }
} }
@ -93,7 +95,7 @@
margin-left: 5px; margin-left: 5px;
&:before { &:before {
content: map-get($icons, 'home'); content: map.get($icons, 'home');
} }
} }
@ -101,7 +103,7 @@
float: right; float: right;
&:before { &:before {
content: map-get($icons, 'arrow-right'); content: map.get($icons, 'arrow-right');
} }
} }
@ -127,11 +129,11 @@
} }
.xdsoft_prev:before { .xdsoft_prev:before {
content: map-get($icons, 'arrow-up'); content: map.get($icons, 'arrow-up');
} }
.xdsoft_next:before { .xdsoft_next:before {
content: map-get($icons, 'arrow-down'); content: map.get($icons, 'arrow-down');
} }
.xdsoft_time_box { .xdsoft_time_box {

5
client/scss/overrides/_vendor.tagit.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:map";
// taggit tagging // taggit tagging
.tagit { .tagit {
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
@ -31,10 +32,10 @@
} }
.ui-icon-close:before { .ui-icon-close:before {
font-family: wagtail; font-family: $font-wagtail-icons;
display: block; display: block;
color: $color-grey-3; color: $color-grey-3;
content: map-get($icons, 'cross'); content: map.get($icons, 'cross');
} }
.ui-icon-close:hover:before { .ui-icon-close:hover:before {

7
client/scss/settings/_variables.icons.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:map";
$icons: ( $icons: (
'arrow-down-big': '\e030', 'arrow-down-big': '\e030',
'arrow-down': '\e01a', 'arrow-down': '\e01a',
@ -84,7 +85,7 @@ $icons: (
); );
$icons-after: ( $icons-after: (
'arrow-down-after': map-get($icons, 'arrow-down'), 'arrow-down-after': map.get($icons, 'arrow-down'),
'arrow-right-after': map-get($icons, 'arrow-right'), 'arrow-right-after': map.get($icons, 'arrow-right'),
'arrow-up-after': map-get($icons, 'arrow-up'), 'arrow-up-after': map.get($icons, 'arrow-up'),
); );

45
client/scss/settings/_variables.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:color";
// paths // paths
// We can't use absolute paths here, because those are dependent on Django's // We can't use absolute paths here, because those are dependent on Django's
@ -48,13 +49,13 @@ $color-white: #fff;
$color-black: #000; $color-black: #000;
// darker to lighter // darker to lighter
$color-grey-1: darken($color-white, 80); $color-grey-1: color.adjust($color-white, $lightness: -80%);
$color-grey-2: darken($color-white, 70); $color-grey-2: color.adjust($color-white, $lightness: -70%);
$color-grey-3: darken($color-white, 15); $color-grey-3: color.adjust($color-white, $lightness: -15%);
$color-grey-4: darken($color-white, 10); $color-grey-4: color.adjust($color-white, $lightness: -10%);
$color-grey-5: darken($color-white, 2); $color-grey-5: color.adjust($color-white, $lightness: -2%);
$color-menu-text: darken($color-white, 20); $color-menu-text: color.adjust($color-white, $lightness: -20%);
$color-thead-bg: $color-grey-5; $color-thead-bg: $color-grey-5;
$color-header-bg: $color-teal; $color-header-bg: $color-teal;
@ -63,16 +64,16 @@ $color-fieldset-hover: $color-grey-5;
$color-input-border: $color-grey-4; $color-input-border: $color-grey-4;
$color-input-focus: var(--color-input-focus); $color-input-focus: var(--color-input-focus);
$color-input-focus-border: var(--color-input-focus-border); $color-input-focus-border: var(--color-input-focus-border);
$color-input-error-bg: lighten(saturate($color-red, 28), 45); $color-input-error-bg: color.adjust(color.adjust($color-red, $saturation: 28%), $lightness: 45%);
$color-button: $color-teal; $color-button: $color-teal;
$color-button-hover: $color-teal-darker; $color-button-hover: $color-teal-darker;
$color-button-yes: $color-green-dark; $color-button-yes: $color-green-dark;
$color-button-yes-hover: darken($color-button-yes, 8%); $color-button-yes-hover: color.adjust($color-button-yes, $lightness: -8%);
$color-button-no: $color-red-dark; $color-button-no: $color-red-dark;
$color-button-no-hover: darken($color-button-no, 20%); $color-button-no-hover: color.adjust($color-button-no, $lightness: -20%);
$color-button-warning: $color-orange-dark; $color-button-warning: $color-orange-dark;
$color-button-warning-hover: darken($color-button-warning, 20%); $color-button-warning-hover: color.adjust($color-button-warning, $lightness: -20%);
$color-link: $color-teal-darker; $color-link: $color-teal-darker;
$color-link-hover: $color-teal-dark; $color-link-hover: $color-teal-dark;
@ -81,8 +82,8 @@ $color-link-hover: $color-teal-dark;
// because it shouldn’t be reused for anything else in the UI. // because it shouldn’t be reused for anything else in the UI.
$color-focus-outline: #ffbf47; $color-focus-outline: #ffbf47;
$color-text-base: darken($color-white, 85); $color-text-base: color.adjust($color-white, $lightness: -85%);
$color-text-input: darken($color-white, 90); $color-text-input: color.adjust($color-white, $lightness: -90%);
// Color states // Color states
$color-state-live: #59b524; $color-state-live: #59b524;
@ -98,6 +99,8 @@ $system-color-button-text: ButtonText;
// Fonts // Fonts
$font-sans: Open Sans, Arial, sans-serif; $font-sans: Open Sans, Arial, sans-serif;
$font-serif: Roboto Slab, Georgia, serif; $font-serif: Roboto Slab, Georgia, serif;
// Legacy icon font, to be removed in the near future.
$font-wagtail-icons: wagtail;
// misc sizing // misc sizing
$thumbnail-width: 130px; $thumbnail-width: 130px;
@ -123,12 +126,12 @@ $draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;
$object-title-height: 40px; $object-title-height: 40px;
// Nav // Nav
$nav-grey-1: darken($color-white, 80); $nav-grey-1: color.adjust($color-white, $lightness: -80%);
$nav-grey-2: darken($color-white, 60); $nav-grey-2: color.adjust($color-white, $lightness: -60%);
$nav-grey-3: #262626; $nav-grey-3: #262626;
$nav-item-hover-bg: rgba(100, 100, 100, 0.15); $nav-item-hover-bg: rgba(100, 100, 100, 0.15);
$nav-item-active-bg: darken($color-white, 90); $nav-item-active-bg: color.adjust($color-white, $lightness: -90%);
$nav-submenu-bg: darken($color-white, 85); $nav-submenu-bg: color.adjust($color-white, $lightness: -85%);
$nav-footer-account-bg: $nav-item-active-bg; $nav-footer-account-bg: $nav-item-active-bg;
$nav-footer-submenu-bg: $nav-submenu-bg; $nav-footer-submenu-bg: $nav-submenu-bg;
$nav-footer-closed-height: 50px; $nav-footer-closed-height: 50px;
@ -136,14 +139,14 @@ $nav-footer-submenu-height: 77px;
$nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height; $nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height;
// Nav search // Nav search
$nav-search-color: darken($color-white, 20); $nav-search-color: color.adjust($color-white, $lightness: -20%);
$nav-search-border: darken($color-white, 40); $nav-search-border: color.adjust($color-white, $lightness: -40%);
$nav-search-bg: $nav-grey-1; $nav-search-bg: $nav-grey-1;
$nav-search-hover-bg: $nav-item-hover-bg; $nav-search-hover-bg: $nav-item-hover-bg;
$nav-search-focus-color: $color-white; $nav-search-focus-color: $color-white;
$nav-search-focus-bg: $nav-item-hover-bg; $nav-search-focus-bg: $nav-item-hover-bg;
// Form Errors // Form Errors
$color-text-error: change-color($color-red, $saturation: 69, $lightness: 52); $color-text-error: color.change($color-red, $saturation: 69%, $lightness: 52%);
$color-text-error-forced-color: change-color($color-red, $saturation: 100, $lightness: 50); $color-text-error-forced-color: color.change($color-red, $saturation: 100%, $lightness: 50%);
$color-text-warning-forced-color: change-color($color-orange, $saturation: 100, $lightness: 70); $color-text-warning-forced-color: color.change($color-orange, $saturation: 100%, $lightness: 70%);

14
client/scss/tools/_functions.breakpoints.scss
Wyświetl plik

@ -1,30 +1,28 @@
@use "sass:list";
@use "sass:map";
// Based upon the fine work and thoughts from Bootstrap v4. // Based upon the fine work and thoughts from Bootstrap v4.
//
// Copyright 2011-2018 The Bootstrap Authors // Copyright 2011-2018 The Bootstrap Authors
// Copyright 2011-2018 Twitter, Inc. // Copyright 2011-2018 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) // Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
// Name of the next breakpoint, or null for the last breakpoint. // Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm) // >> breakpoint-next(sm)
// md // md
@function breakpoint-next($name) { @function breakpoint-next($name) {
$breakpoint-names: map-keys($breakpoints); $breakpoint-names: map.keys($breakpoints);
$n: index($breakpoint-names, $name); $n: list.index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
} }
// Minimum breakpoint width. Null for the smallest (first) breakpoint. // Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm) // >> breakpoint-min(sm)
// 50em // 50em
@function breakpoint-min($name) { @function breakpoint-min($name) {
$min: map-get($breakpoints, $name); $min: map.get($breakpoints, $name);
@return if($min != 0, $min, null); @return if($min != 0, $min, null);
} }
// Maximum breakpoint width. Null for the largest (last) breakpoint. // Maximum breakpoint width. Null for the largest (last) breakpoint.
//
// >> breakpoint-max(sm) // >> breakpoint-max(sm)
// 56.1875em // 56.1875em
@function breakpoint-max($name) { @function breakpoint-max($name) {

1
client/scss/tools/_mixins.breakpoints.scss
Wyświetl plik

@ -1,5 +1,4 @@
// Based upon the fine work and thoughts from Bootstrap v4. // Based upon the fine work and thoughts from Bootstrap v4.
//
// Copyright 2011-2018 The Bootstrap Authors // Copyright 2011-2018 The Bootstrap Authors
// Copyright 2011-2018 Twitter, Inc. // Copyright 2011-2018 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) // Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

8
client/scss/tools/_mixins.general.scss
Wyświetl plik

@ -87,7 +87,7 @@
@mixin icon () { @mixin icon () {
@include font-smoothing; @include font-smoothing;
font-family: 'wagtail'; font-family: $font-wagtail-icons;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
@ -101,12 +101,6 @@
margin-right: 0.2em; margin-right: 0.2em;
} }
@mixin svg-icon ($size: 1.5em, $position: text-top) {
width: $size;
height: $size;
vertical-align: $position;
}
// Applies given rules on hover, except for touch screens. // Applies given rules on hover, except for touch screens.
// Relies on feature detection to add a no-touch class on the html element. // Relies on feature detection to add a no-touch class on the html element.
@mixin hover { @mixin hover {

16
client/scss/tools/_mixins.grid.scss
Wyświetl plik

@ -1,5 +1,7 @@
@use "sass:math";
// Utility variable - you should never need to modify this // Utility variable - you should never need to modify this
$padding: $grid-gutter-width * 0.5; $padding: math.div($grid-gutter-width, 2);
// Our row container // Our row container
@mixin row($padding: 0) { @mixin row($padding: 0) {
@ -22,32 +24,32 @@ $padding: $grid-gutter-width * 0.5;
box-sizing: border-box; box-sizing: border-box;
display: inline; display: inline;
float: left; float: left;
width: 100% * ($x / $grid-columns); width: 100% * math.div($x, $grid-columns);
padding-right: $padding; padding-right: $padding;
padding-left: $padding; padding-left: $padding;
} }
@mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) { @mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
box-sizing: border-box; box-sizing: border-box;
width: 100% * ($x / $grid-columns); width: 100% * math.div($x, $grid-columns);
} }
// Push adds left padding // Push adds left padding
@mixin push($offset: 1, $grid-columns: $grid-columns) { @mixin push($offset: 1, $grid-columns: $grid-columns) {
margin-left: 100% * ($offset / $grid-columns); margin-left: 100% * math.div($offset, $grid-columns);
} }
@mixin push-padding($offset: 1, $grid-columns: $grid-columns) { @mixin push-padding($offset: 1, $grid-columns: $grid-columns) {
padding-left: 100% * ($offset / $grid-columns); padding-left: 100% * math.div($offset, $grid-columns);
} }
// Pull adds right padding // Pull adds right padding
@mixin pull($offset: 1, $grid-columns: $grid-columns) { @mixin pull($offset: 1, $grid-columns: $grid-columns) {
margin-right: 100% * ($offset / $grid-columns); margin-right: 100% * math.div($offset, $grid-columns);
} }
@mixin pull-padding($offset: 1, $grid-columns: $grid-columns) { @mixin pull-padding($offset: 1, $grid-columns: $grid-columns) {
padding-right: 100% * ($offset / $grid-columns); padding-right: 100% * math.div($offset, $grid-columns);
} }
// only used in places where padding not applied to same elements as row or row-flush // only used in places where padding not applied to same elements as row or row-flush

55
client/scss/tools/_various.colors.scss
Wyświetl plik

@ -1,17 +1,22 @@
@use "sass:math";
@use "sass:color";
@use "sass:list";
@use "sass:meta";
// $color is either a color or an hsl tuple // $color is either a color or an hsl tuple
@mixin define-color($name, $color) { @mixin define-color($name, $color) {
$h: null; $h: null;
$s: null; $s: null;
$l: null; $l: null;
@if type-of($color) == color { @if meta.type-of($color) == color {
$h: hue($color) / 1deg; // Cast to unitless $h: math.div(color.hue($color), 1deg); // Cast to unitless
$s: saturation($color); $s: color.saturation($color);
$l: lightness($color); $l: color.lightness($color);
} @else { } @else {
$h: nth($color, 1); $h: list.nth($color, 1);
$s: nth($color, 2); $s: list.nth($color, 2);
$l: nth($color, 3); $l: list.nth($color, 3);
} }
--#{$name}-hue: #{$h}; --#{$name}-hue: #{$h};
@ -25,38 +30,38 @@
} }
@function css-darken($hsl-tuple, $darken-by) { @function css-darken($hsl-tuple, $darken-by) {
$h: nth($hsl-tuple, 1); $h: list.nth($hsl-tuple, 1);
$s: nth($hsl-tuple, 2); $s: list.nth($hsl-tuple, 2);
$l: nth($hsl-tuple, 3); $l: list.nth($hsl-tuple, 3);
@return ($h, $s, calc(#{$l} - #{$darken-by + 0%})); @return ($h, $s, calc(#{$l} - #{$darken-by + 0%}));
} }
@function css-lighten($hsl-tuple, $lighten-by) { @function css-lighten($hsl-tuple, $lighten-by) {
$h: nth($hsl-tuple, 1); $h: list.nth($hsl-tuple, 1);
$s: nth($hsl-tuple, 2); $s: list.nth($hsl-tuple, 2);
$l: nth($hsl-tuple, 3); $l: list.nth($hsl-tuple, 3);
@return ($h, $s, calc(#{$l} + #{$lighten-by + 0%})); @return ($h, $s, calc(#{$l} + #{$lighten-by + 0%}));
} }
@function css-saturate($hsl-tuple, $saturate-by) { @function css-saturate($hsl-tuple, $saturate-by) {
$h: nth($hsl-tuple, 1); $h: list.nth($hsl-tuple, 1);
$s: nth($hsl-tuple, 2); $s: list.nth($hsl-tuple, 2);
$l: nth($hsl-tuple, 3); $l: list.nth($hsl-tuple, 3);
@return ($h, calc(#{$s} + #{$saturate-by + 0%}), $l); @return ($h, calc(#{$s} + #{$saturate-by + 0%}), $l);
} }
@function css-desaturate($hsl-tuple, $desaturate-by) { @function css-desaturate($hsl-tuple, $desaturate-by) {
$h: nth($hsl-tuple, 1); $h: list.nth($hsl-tuple, 1);
$s: nth($hsl-tuple, 2); $s: list.nth($hsl-tuple, 2);
$l: nth($hsl-tuple, 3); $l: list.nth($hsl-tuple, 3);
@return ($h, calc(#{$s} - #{$desaturate-by + 0%}), $l); @return ($h, calc(#{$s} - #{$desaturate-by + 0%}), $l);
} }
@function css-adjust-hue($hsl-tuple, $adjust-by) { @function css-adjust-hue($hsl-tuple, $adjust-by) {
$h: nth($hsl-tuple, 1); $h: list.nth($hsl-tuple, 1);
$s: nth($hsl-tuple, 2); $s: list.nth($hsl-tuple, 2);
$l: nth($hsl-tuple, 3); $l: list.nth($hsl-tuple, 3);
@return (calc(#{$h} + #{$adjust-by}), $s, $l); @return (calc(#{$h} + #{$adjust-by}), $s, $l);
} }
@function css-transparentize($hsl-tuple, $alpha) { @function css-transparentize($hsl-tuple, $alpha) {
$h: nth($hsl-tuple, 1); $h: list.nth($hsl-tuple, 1);
$s: nth($hsl-tuple, 2); $s: list.nth($hsl-tuple, 2);
$l: nth($hsl-tuple, 3); $l: list.nth($hsl-tuple, 3);
@return ($h, $s, $l, $alpha); @return ($h, $s, $l, $alpha);
} }

1
client/src/components/CommentApp/main.scss
Wyświetl plik

@ -144,6 +144,7 @@ $box-padding: 10px;
pointer-events: none; pointer-events: none;
} }
// stylelint-disable no-invalid-position-at-import-rule
@import 'components/CommentHeader/style'; @import 'components/CommentHeader/style';
@import 'components/Comment/style'; @import 'components/Comment/style';
@import 'components/CommentReply/style'; @import 'components/CommentReply/style';

3
client/src/components/Draftail/blocks/ImageBlock.scss
Wyświetl plik

@ -1,3 +1,4 @@
@use "sass:color";
@mixin wagtail-label-overrides { @mixin wagtail-label-overrides {
float: none; float: none;
width: initial; width: initial;
@ -24,7 +25,7 @@
color: $color-text-base; color: $color-text-base;
&[readonly] { &[readonly] {
color: transparentize($color-text-base, 0.5); color: color.adjust($color-text-base, $alpha: -0.5);
} }
} }

6
client/src/components/Explorer/Explorer.scss
Wyświetl plik

@ -5,6 +5,8 @@ $c-explorer-secondary: #a5a5a5;
$c-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1); $c-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
$menu-footer-height: 50px; $menu-footer-height: 50px;
@use "sass:map";
@import 'ExplorerItem'; @import 'ExplorerItem';
.explorer__wrapper, .explorer__wrapper,
@ -181,8 +183,8 @@ $menu-footer-height: 50px;
top: $margin + 3px; top: $margin + 3px;
bottom: 0; bottom: 0;
width: 2em; width: 2em;
font-family: wagtail; font-family: $font-wagtail-icons;
content: map-get($icons, 'arrow-down'); content: map.get($icons, 'arrow-down');
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
pointer-events: none; pointer-events: none;

1
client/src/components/Hallo/_halloeditor.scss
Wyświetl plik

@ -55,6 +55,7 @@
font-family: inherit; font-family: inherit;
} }
// stylelint-disable-next-line no-duplicate-selectors
h2 { h2 {
font-size: 2em; font-size: 2em;
line-height: 1.2em; line-height: 1.2em;

1
client/src/components/Hallo/_richtext-image.scss
Wyświetl plik

@ -1,7 +1,6 @@
// These styles correspond to the image formats defined in wagtailimages/formats.py, // These styles correspond to the image formats defined in wagtailimages/formats.py,
// so that images displayed in the rich text field receive more or less the same // so that images displayed in the rich text field receive more or less the same
// styling that they would receive on the site front-end. // styling that they would receive on the site front-end.
//
// Wagtail installations that define their own image formats (in a myapp.image_formats module) // Wagtail installations that define their own image formats (in a myapp.image_formats module)
// should ideally use the insert_editor_css hook to pass in their own custom CSS to have those // should ideally use the insert_editor_css hook to pass in their own custom CSS to have those
// images render within the rich text area in the same styles that would appear on the front-end. // images render within the rich text area in the same styles that would appear on the front-end.

6
client/src/components/PageExplorer/PageExplorer.scss
Wyświetl plik

@ -5,6 +5,8 @@ $c-page-explorer-secondary: #a5a5a5;
$c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1); $c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
$menu-footer-height: 50px; $menu-footer-height: 50px;
@use "sass:map";
@import 'PageExplorerItem'; @import 'PageExplorerItem';
.c-page-explorer { .c-page-explorer {
@ -141,8 +143,8 @@ $explorer-header-horizontal-padding: 10px;
top: $margin + 3px; top: $margin + 3px;
bottom: 0; bottom: 0;
width: 2em; width: 2em;
font-family: wagtail; font-family: $font-wagtail-icons;
content: map-get($icons, 'arrow-down'); content: map.get($icons, 'arrow-down');
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
pointer-events: none; pointer-events: none;

2
client/src/components/Sidebar/Sidebar.scss
Wyświetl plik

@ -113,7 +113,7 @@
} }
} }
// stylelint-disable no-invalid-position-at-import-rule
@import 'SidebarPanel'; @import 'SidebarPanel';
@import 'menu/MenuItem'; @import 'menu/MenuItem';
@import 'menu/SubMenuItem'; @import 'menu/SubMenuItem';

4
client/src/components/StreamField/scss/_variables.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:math";
$grid-gutter-width: 30px !default; $grid-gutter-width: 30px !default;
$header-padding-horizontal: 4px !default; $header-padding-horizontal: 4px !default;
$header-padding-vertical: 6px; $header-padding-vertical: 6px;
@ -9,7 +11,7 @@ $add-button-size: 34px !default;
$add-button-font-size: 24px !default; $add-button-font-size: 24px !default;
$type-button-padding-vertical: 10px !default; $type-button-padding-vertical: 10px !default;
$type-button-padding-horizontal: 10px !default; $type-button-padding-horizontal: 10px !default;
$children-container-padding: $add-button-size / 2 !default; $children-container-padding: math.div($add-button-size, 2) !default;
$content-padding-horizontal: 24px !default; $content-padding-horizontal: 24px !default;
$content-padding-vertical: 16px !default; $content-padding-vertical: 16px !default;
$action-font-size: 18px; $action-font-size: 18px;

10
client/src/components/StreamField/scss/components/c-sf-add-panel.scss
Wyświetl plik

@ -1,15 +1,17 @@
@use "sass:math";
.c-sf-add-panel { .c-sf-add-panel {
position: relative; position: relative;
padding: $grid-gutter-width / 4 padding: $grid-gutter-width * 0.25
0 0
$grid-gutter-width; $grid-gutter-width;
border-radius: $border-radius; border-radius: $border-radius;
user-select: none; user-select: none;
@media (min-width: $screen-l-min) { @media (min-width: $screen-l-min) {
padding: $grid-gutter-width / 4 padding: $grid-gutter-width * 0.25
$grid-gutter-width * 2 $grid-gutter-width * 2
$add-button-size - $grid-gutter-width / 2; $add-button-size - math.div($grid-gutter-width, 2);
} }
&__group-title { &__group-title {
@ -22,7 +24,7 @@
flex-flow: row wrap; flex-flow: row wrap;
margin-left: -$add-panel-gutter; margin-left: -$add-panel-gutter;
margin-right: -$add-panel-gutter; margin-right: -$add-panel-gutter;
margin-bottom: $grid-gutter-width / 2; margin-bottom: math.div($grid-gutter-width, 2);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;

4
client/src/components/StreamField/scss/components/c-sf-block.scss
Wyświetl plik

@ -1,11 +1,11 @@
// TODO: Reduce nesting further by splitting out more components. // TODO: Reduce nesting further by splitting out more components.
// // ---
// There's quite a lot of nesting in here which makes parsing some segments difficult. // There's quite a lot of nesting in here which makes parsing some segments difficult.
// Some of this is to deal with the fact that .c-sf-block can contain many .c-sf-block's and so is // Some of this is to deal with the fact that .c-sf-block can contain many .c-sf-block's and so is
// legitimate. A lot of these would ideally be their own components (eg the actions) however there // legitimate. A lot of these would ideally be their own components (eg the actions) however there
// is a lot of interdependency of the elements which makes this hard // is a lot of interdependency of the elements which makes this hard
// without fairly intensive rethinking of the HTML. // without fairly intensive rethinking of the HTML.
// // ---
// However, the new classes adequately sanitise streamfield only CSS so am leaving this for // However, the new classes adequately sanitise streamfield only CSS so am leaving this for
// now to avoid blocking the release of the new Streamfield. -@jonnyscholes // now to avoid blocking the release of the new Streamfield. -@jonnyscholes
.c-sf-block { .c-sf-block {

8
client/src/components/StreamField/scss/components/c-sf-container.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:math";
.c-sf-container { .c-sf-container {
position: relative; position: relative;
display: flex; display: flex;
@ -26,7 +28,7 @@
.c-sf-add-button { .c-sf-add-button {
width: $add-button-size; width: $add-button-size;
height: 0; height: 0;
transform: translate(-100%, -$add-button-size / 2); transform: translate(-100%, math.div(-$add-button-size, 2));
overflow: visible; overflow: visible;
} }
} }
@ -36,7 +38,7 @@
// opportunity for this is probably as part of Wagtails general CSS overhaul. -@jonnyscholes // opportunity for this is probably as part of Wagtails general CSS overhaul. -@jonnyscholes
.field { .field {
+ .field { + .field {
padding-top: $grid-gutter-width / 2; padding-top: math.div($grid-gutter-width, 2);
} }
// TODO: #CSSoverhaul global label styles need to be removed. These styles come from global // TODO: #CSSoverhaul global label styles need to be removed. These styles come from global
@ -65,7 +67,7 @@
&__label { &__label {
display: block; display: block;
font-weight: bold; font-weight: bold;
margin-bottom: $grid-gutter-width / 4; margin-bottom: $grid-gutter-width * 0.25;
} }
&.required > label::after { &.required > label::after {

30
wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss
Wyświetl plik

@ -1,3 +1,7 @@
@use "sass:color";
@use "sass:map";
@use "sass:math";
@import 'wagtailadmin/scss/helpers'; @import 'wagtailadmin/scss/helpers';
.page-editor { .page-editor {
@ -176,7 +180,7 @@
top: $object-title-height; top: $object-title-height;
margin-top: 0; margin-top: 0;
margin-bottom: -1em; margin-bottom: -1em;
padding: 1em ($grid-gutter-width / 2) 1em 3em; padding: 1em math.div($grid-gutter-width, 2) 1em 3em;
opacity: 1; opacity: 1;
.icon-help { .icon-help {
@ -220,9 +224,9 @@
&:before { &:before {
@include font-smoothing; @include font-smoothing;
text-shadow: none; text-shadow: none;
font-family: wagtail; font-family: $font-wagtail-icons;
text-transform: none; text-transform: none;
content: map-get($icons, 'arrow-down'); content: map.get($icons, 'arrow-down');
text-align: center; text-align: center;
display: block; display: block;
position: absolute; position: absolute;
@ -320,7 +324,7 @@
// special panel for the publishing fields, requires a bit more pizzazz // special panel for the publishing fields, requires a bit more pizzazz
&.publishing { &.publishing {
> .title-wrapper:before { > .title-wrapper:before {
content: map-get($icons, 'date'); content: map.get($icons, 'date');
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.4em; line-height: 1.4em;
width: 1.4em; width: 1.4em;
@ -329,7 +333,7 @@
&.privacy { &.privacy {
> .title-wrapper:before { > .title-wrapper:before {
content: map-get($icons, 'view'); content: map.get($icons, 'view');
} }
} }
@ -393,7 +397,7 @@
} }
&:hover:before { &:hover:before {
background-color: darken($color-salmon, 5%); background-color: color.adjust($color-salmon, $lightness: -5%);
} }
} }
} }
@ -410,7 +414,7 @@
.title-wrapper { .title-wrapper {
&:before { &:before {
content: map-get($icons, 'collapse-up'); content: map.get($icons, 'collapse-up');
cursor: pointer; cursor: pointer;
} }
} }
@ -418,7 +422,7 @@
&.collapsed { &.collapsed {
.title-wrapper { .title-wrapper {
&:before { &:before {
content: map-get($icons, 'collapse-down'); content: map.get($icons, 'collapse-down');
} }
} }
} }
@ -472,8 +476,8 @@ footer .preview {
height: 3em; height: 3em;
} }
background-color: lighten($color-grey-2, 10%); background-color: color.adjust($color-grey-2, $lightness: 10%);
border-color: lighten($color-grey-2, 10%); border-color: color.adjust($color-grey-2, $lightness: 10%);
&:hover { &:hover {
background-color: $color-grey-2; background-color: $color-grey-2;
@ -486,8 +490,8 @@ footer .preview {
input[type=submit], input[type=submit],
button, button,
.button { .button {
background-color: lighten($color-grey-2, 10%); background-color: color.adjust($color-grey-2, $lightness: 10%);
border-color: lighten($color-grey-2, 10%); border-color: color.adjust($color-grey-2, $lightness: 10%);
&:hover { &:hover {
background-color: $color-grey-2; background-color: $color-grey-2;
@ -497,7 +501,7 @@ footer .preview {
ul, ul,
.dropdown-toggle { .dropdown-toggle {
background-color: lighten($color-grey-2, 10%); background-color: color.adjust($color-grey-2, $lightness: 10%);
} }
.dropdown-toggle:hover, .dropdown-toggle:hover,

3
wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss
Wyświetl plik

@ -47,9 +47,6 @@
float: unset; float: unset;
display: block; display: block;
width: unset; width: unset;
}
label {
padding-top: 1.2em; padding-top: 1.2em;
} }
} }

19
wagtail/admin/static_src/wagtailadmin/scss/userbar.scss
Wyświetl plik

@ -1,3 +1,8 @@
@use "sass:color";
@use "sass:map";
@use "sass:math";
@use "sass:string";
@import 'wagtailadmin/scss/helpers'; @import 'wagtailadmin/scss/helpers';
// ============================================================================= // =============================================================================
@ -70,13 +75,13 @@ $positions: (
@each $icon, $content in $icons { @each $icon, $content in $icons {
.#{$namespace}-icon-#{$icon}:before { .#{$namespace}-icon-#{$icon}:before {
content: quote(#{$content}); content: string.quote(#{$content});
} }
} }
@each $icon, $content in $icons-after { @each $icon, $content in $icons-after {
.#{$namespace}-icon-#{$icon}:after { .#{$namespace}-icon-#{$icon}:after {
content: quote(#{$content}); content: string.quote(#{$content});
} }
} }
@ -247,7 +252,7 @@ $positions: (
} }
& + & { & + & {
border-top: 1px solid darken($color-grey-1, 3%); border-top: 1px solid color.adjust($color-grey-1, $lightness: -3%);
} }
@ -318,9 +323,9 @@ $positions: (
// ============================================================================= // =============================================================================
@each $pos, $attrs in $positions { @each $pos, $attrs in $positions {
$vertical: map-get($attrs, vertical); $vertical: map.get($attrs, vertical);
$horizontal: map-get($attrs, horizontal); $horizontal: map.get($attrs, horizontal);
$arrow: map-get($attrs, arrow); $arrow: map.get($attrs, arrow);
.#{$namespace}-userbar--#{$pos} { .#{$namespace}-userbar--#{$pos} {
#{$vertical}: $position; #{$vertical}: $position;
@ -342,7 +347,7 @@ $positions: (
.#{$namespace}-userbar-items:after { .#{$namespace}-userbar-items:after {
#{$vertical}: 2px; #{$vertical}: 2px;
#{$horizontal}: $size-home-button / 2 - $width-arrow / 2; #{$horizontal}: math.div($size-home-button, 2) - math.div($width-arrow, 2);
border-#{$arrow}-color: $color-grey-1; border-#{$arrow}-color: $color-grey-1;
@if $vertical == 'bottom' { @if $vertical == 'bottom' {

4
wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss
Wyświetl plik

@ -59,10 +59,6 @@ section {
color: $color-salmon-light; color: $color-salmon-light;
} }
.color-red-text {
color: $color-red;
}
.color-green-text { .color-green-text {
color: $color-green; color: $color-green;
} }

4
wagtail/images/static_src/wagtailimages/scss/add-multiple.scss
Wyświetl plik

@ -1,3 +1,5 @@
@use "sass:color";
@import 'wagtailadmin/scss/helpers'; @import 'wagtailadmin/scss/helpers';
.replace-file-input { .replace-file-input {
@ -94,7 +96,7 @@
width: 1em; width: 1em;
font-size: 10em; font-size: 10em;
line-height: 1.4em; line-height: 1.4em;
color: lighten($color-grey-4, 4%); color: color.adjust($color-grey-4, $lightness: 4%);
} }
canvas, canvas,