kopia lustrzana https://github.com/wagtail/wagtail
Refactor all stylesheets to use CSS variables
Co-authored-by: Scott Cranfill <scott@scottcranfill.com>pull/8882/head
Thibaud Colas
rodzic
758a40d650
commit
5c362bf831
|
|
@ -85,7 +85,7 @@
|
|||
}
|
||||
|
||||
.num-objects-in-listing {
|
||||
color: $color-teal-light;
|
||||
color: theme('colors.secondary.100');
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-family: $font-sans;
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
background-color: #fff;
|
||||
background-color: $color-white;
|
||||
border-color: $color-teal;
|
||||
color: #262626;
|
||||
color: $color-grey-1;
|
||||
|
||||
&--selected {
|
||||
background-color: $color-teal;
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-yes-hover;
|
||||
background-color: $color-button-yes;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-warning-hover;
|
||||
background-color: $color-button-warning;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-no-hover;
|
||||
background-color: $color-button-no;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
line-height: 1.85em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: theme('colors.black-20');
|
||||
display: block;
|
||||
// Remove once we drop support for Safari 14.
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
}
|
||||
|
||||
.icon-wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: theme('colors.black-20');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
}
|
||||
|
||||
&.button-secondary {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid theme('colors.black-20');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -422,7 +422,7 @@ button.button.bicolor .icon-wrapper {
|
|||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-yes-hover;
|
||||
background-color: $color-button-yes;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -440,7 +440,7 @@ button.button.bicolor .icon-wrapper {
|
|||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-no-hover;
|
||||
background-color: $color-button-no;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -457,7 +457,7 @@ button.button.bicolor .icon-wrapper {
|
|||
line-height: 1.85em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: theme('colors.black-20');
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -512,7 +512,7 @@ button {
|
|||
background-color: $color-white;
|
||||
padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
|
||||
margin-bottom: 1em;
|
||||
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
|
||||
border: 1px solid theme('colors.grey.100');
|
||||
}
|
||||
|
||||
&.moving {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
li {
|
||||
float: none;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
border-color: theme('colors.white-15');
|
||||
border-style: solid;
|
||||
border-width: 1px 0 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
li button:focus {
|
||||
background-color: $color-black;
|
||||
forced-color-adjust: none;
|
||||
border: 4px solid #0ff;
|
||||
border: 4px solid currentColor;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
|
@ -126,12 +126,12 @@
|
|||
inset-inline-end: 1em;
|
||||
font-weight: 600;
|
||||
font-size: 0.8em;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
color: theme('colors.black-20');
|
||||
}
|
||||
}
|
||||
|
||||
&.open ul {
|
||||
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 3px 3px 0 theme('colors.black-20');
|
||||
opacity: 1;
|
||||
inset-inline-start: 0;
|
||||
display: block;
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
}
|
||||
|
||||
&.dropup ul {
|
||||
box-shadow: 0 -3px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 -3px 3px 0 theme('colors.black-20');
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
line-height: 2.8em;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-inline-start: 1px solid theme('colors.white-15');
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
padding: 0 0.5em;
|
||||
|
|
@ -299,7 +299,7 @@
|
|||
background-color: $color-white;
|
||||
|
||||
li {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-top: 1px solid theme('colors.black-10');
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -319,10 +319,6 @@
|
|||
|
||||
.dropdown-toggle {
|
||||
background-color: $color-button-warning;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-button-warning-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 0 2px theme('colors.white-50');
|
||||
}
|
||||
|
||||
&.footer__container--hidden {
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
|
||||
&__emphasise-span-tags span {
|
||||
color: $color-orange;
|
||||
color: theme('colors.warning.100');
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
|
|||
|
|
@ -122,11 +122,10 @@
|
|||
.error-message {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
color: $color-text-error;
|
||||
color: theme('colors.critical.200');
|
||||
|
||||
@media (forced-colors: $media-forced-colours) {
|
||||
forced-color-adjust: none;
|
||||
color: $color-text-error-forced-color;
|
||||
}
|
||||
|
||||
// UI-Redesign: to be added via js and styled here
|
||||
|
|
@ -152,7 +151,7 @@ li.focused > .help {
|
|||
.required .field > label:after,
|
||||
label.required:after {
|
||||
content: '*';
|
||||
color: $color-red;
|
||||
color: theme('colors.critical.200');
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-inline-start: 0.5em;
|
||||
|
|
@ -164,7 +163,7 @@ label.required:after {
|
|||
.error textarea,
|
||||
.error select,
|
||||
.error .tagit {
|
||||
border-color: $color-red;
|
||||
border-color: theme('colors.critical.200');
|
||||
background-color: $color-input-error-bg;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@
|
|||
background-color: $color-teal-darker;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background-color: $color-teal-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,26 +36,26 @@
|
|||
}
|
||||
|
||||
.help-info {
|
||||
background-color: color.adjust($color-blue, $lightness: 30%);
|
||||
background-color: theme('colors.info.50');
|
||||
|
||||
.icon-help {
|
||||
color: $color-blue;
|
||||
color: theme('colors.info.100');
|
||||
}
|
||||
}
|
||||
|
||||
.help-warning {
|
||||
background-color: color.adjust($color-orange, $lightness: 30%);
|
||||
background-color: theme('colors.warning.50');
|
||||
|
||||
.icon-warning {
|
||||
color: $color-orange;
|
||||
color: theme('colors.warning.100');
|
||||
}
|
||||
}
|
||||
|
||||
.help-critical {
|
||||
background-color: color.adjust($color-red, $lightness: 40%);
|
||||
background-color: theme('colors.critical.50');
|
||||
|
||||
.icon-warning {
|
||||
color: $color-red;
|
||||
color: theme('colors.critical.200');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use 'sass:string';
|
||||
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
font-family: $font-wagtail-icons;
|
||||
src: url('../fonts/wagtail.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
}
|
||||
|
||||
.icon.teal {
|
||||
color: $color-teal;
|
||||
color: $color-teal-darker;
|
||||
}
|
||||
|
||||
.icon.white {
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.icon:before,
|
||||
|
|
@ -163,5 +163,5 @@ svg.icon-spinner {
|
|||
margin-inline-end: 0.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
color: $color-red;
|
||||
color: theme('colors.critical.200');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ ul.listing {
|
|||
position: relative;
|
||||
|
||||
&.icon:after {
|
||||
opacity: 0.5;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,16 +89,12 @@ ul.listing {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fcfcfc;
|
||||
background-color: theme('colors.grey.50');
|
||||
}
|
||||
}
|
||||
|
||||
tr.selected {
|
||||
background-color: #c8eae9;
|
||||
|
||||
&:hover {
|
||||
background-color: #b5e3e2;
|
||||
}
|
||||
background-color: theme('colors.secondary.100');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -245,12 +240,12 @@ ul.listing {
|
|||
}
|
||||
|
||||
.button-secondary {
|
||||
border-color: $color-grey-3;
|
||||
border-color: $color-grey-4;
|
||||
background: $color-white;
|
||||
|
||||
&.no:hover {
|
||||
border-color: $color-button-no-hover;
|
||||
background-color: $color-button-no-hover;
|
||||
border-color: $color-button-no;
|
||||
background-color: $color-button-no;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
|
|
@ -471,7 +466,7 @@ table.listing {
|
|||
|
||||
.listing.full-width + .pagination {
|
||||
margin-top: 3em;
|
||||
border-top: 1px dashed #d9d9d9;
|
||||
border-top: 1px dashed theme('colors.grey.100');
|
||||
padding: 2em 50px 0;
|
||||
}
|
||||
|
||||
|
|
@ -560,8 +555,6 @@ table.listing {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fdfdfd;
|
||||
|
||||
img {
|
||||
border-color: $color-teal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
bottom: -5px;
|
||||
inset-inline-end: -5px;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
background-color: theme('colors.white-50');
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.capabilitymessage {
|
||||
display: block;
|
||||
background-color: $color-red;
|
||||
background-color: theme('colors.critical.200');
|
||||
color: $color-white;
|
||||
padding: 1em 2em;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -37,15 +37,16 @@
|
|||
}
|
||||
|
||||
.error {
|
||||
background-color: $color-red-dark;
|
||||
background-color: theme('colors.critical.200');
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: $color-orange-dark;
|
||||
color: $color-grey-1;
|
||||
background-color: theme('colors.warning.100');
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: $color-green-dark;
|
||||
background-color: theme('colors.positive.100');
|
||||
}
|
||||
|
||||
.success .button:hover {
|
||||
|
|
@ -53,11 +54,12 @@
|
|||
}
|
||||
|
||||
.button-secondary {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: $color-white;
|
||||
border-color: currentColor;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.status-msg {
|
||||
&.success {
|
||||
color: $color-green-dark;
|
||||
color: theme('colors.positive.100');
|
||||
}
|
||||
|
||||
&.failure {
|
||||
color: $color-red-dark;
|
||||
color: theme('colors.critical.200');
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: $color-orange-dark;
|
||||
color: theme('colors.warning.100');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.progress {
|
||||
border-radius: 1.2em;
|
||||
background-color: $color-teal-dark;
|
||||
background-color: $color-teal-darker;
|
||||
border: 1px solid $color-teal;
|
||||
opacity: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
&.button {
|
||||
background: $color-green-darker;
|
||||
border: $color-green-darker;
|
||||
background: theme('colors.positive.100');
|
||||
border: theme('colors.positive.100');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
// stylelint-disable-next-line property-disallowed-list
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.5em;
|
||||
border: 1px solid color.adjust($color-grey-2, $lightness: 30%);
|
||||
color: color.adjust($color-grey-2, $lightness: 30%);
|
||||
border: 1px solid theme('colors.grey.200');
|
||||
color: theme('colors.grey.400');
|
||||
-webkit-font-smoothing: auto;
|
||||
line-height: 19px;
|
||||
font-size: 0.8em;
|
||||
margin: 0 0.5em 0.5em;
|
||||
background: #fff url('#{$images-root}bg-dark-diag.svg');
|
||||
background: $color-white url('#{$images-root}bg-dark-diag.svg');
|
||||
|
||||
&.primary {
|
||||
color: $color-grey-2;
|
||||
border: 1px solid $color-grey-2;
|
||||
background: #fff;
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ a.tag:hover {
|
|||
}
|
||||
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
color: $color-grey-1;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
padding: 0 0 0.8em;
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@
|
|||
.tooltip-inner {
|
||||
max-width: 200px;
|
||||
padding: 3px 8px;
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #000;
|
||||
background-color: $color-black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -51,21 +51,21 @@
|
|||
bottom: 0;
|
||||
inset-inline-start: 50%;
|
||||
margin-inline-start: -5px;
|
||||
border-top-color: #000;
|
||||
border-top-color: $color-black;
|
||||
border-width: 5px 5px 0;
|
||||
}
|
||||
|
||||
.tooltip.top-left .tooltip-arrow {
|
||||
bottom: 0;
|
||||
inset-inline-start: 5px;
|
||||
border-top-color: #000;
|
||||
border-top-color: $color-black;
|
||||
border-width: 5px 5px 0;
|
||||
}
|
||||
|
||||
.tooltip.top-right .tooltip-arrow {
|
||||
inset-inline-end: 5px;
|
||||
bottom: 0;
|
||||
border-top-color: #000;
|
||||
border-top-color: $color-black;
|
||||
border-width: 5px 5px 0;
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
top: 50%;
|
||||
inset-inline-start: 0;
|
||||
margin-top: -5px;
|
||||
border-inline-end-color: #000;
|
||||
border-inline-end-color: $color-black;
|
||||
border-width: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
margin-top: -5px;
|
||||
border-inline-start-color: #000;
|
||||
border-inline-start-color: $color-black;
|
||||
border-width: 5px 0 5px 5px;
|
||||
}
|
||||
|
||||
|
|
@ -89,20 +89,20 @@
|
|||
top: 0;
|
||||
inset-inline-start: 50%;
|
||||
margin-inline-start: -5px;
|
||||
border-bottom-color: #000;
|
||||
border-bottom-color: $color-black;
|
||||
border-width: 0 5px 5px;
|
||||
}
|
||||
|
||||
.tooltip.bottom-left .tooltip-arrow {
|
||||
top: 0;
|
||||
inset-inline-start: 5px;
|
||||
border-bottom-color: #000;
|
||||
border-bottom-color: $color-black;
|
||||
border-width: 0 5px 5px;
|
||||
}
|
||||
|
||||
.tooltip.bottom-right .tooltip-arrow {
|
||||
top: 0;
|
||||
inset-inline-end: 5px;
|
||||
border-bottom-color: #000;
|
||||
border-bottom-color: $color-black;
|
||||
border-width: 0 5px 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
|
||||
&__task {
|
||||
display: inline-block;
|
||||
background-color: #f8ffff;
|
||||
border: 2px solid #7ebebe;
|
||||
background-color: theme('colors.secondary.50');
|
||||
border: 2px solid theme('colors.secondary.100');
|
||||
border-radius: 5px;
|
||||
color: #007d7e;
|
||||
color: $color-teal;
|
||||
box-sizing: border-box;
|
||||
width: $task-width;
|
||||
height: $task-height;
|
||||
|
|
|
|||
|
|
@ -66,11 +66,11 @@
|
|||
&__footer-link {
|
||||
@include transition(color 0.15s ease);
|
||||
font-size: theme('fontSize.14');
|
||||
color: theme('colors.teal.200');
|
||||
color: theme('colors.secondary.DEFAULT');
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: theme('colors.teal.600');
|
||||
color: theme('colors.secondary.600');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ body {
|
|||
content: '';
|
||||
position: fixed;
|
||||
transition: visibility 0s linear 0s, opacity 0.2s ease-out;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: theme('colors.white-50');
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ a {
|
|||
}
|
||||
|
||||
code {
|
||||
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
|
||||
background-color: $color-fieldset-hover;
|
||||
box-shadow: inset 0 0 4px 0 theme('colors.black-20');
|
||||
background-color: $color-white;
|
||||
font-family: $font-mono;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@ kbd {
|
|||
border-radius: 3px;
|
||||
font-family: $font-sans;
|
||||
border: 1px solid $color-grey-2;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: theme('colors.black-20');
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* stylelint-disable declaration-block-no-duplicate-properties, property-no-vendor-prefix */
|
||||
/* stylelint-disable declaration-block-no-duplicate-properties, property-no-vendor-prefix, scale-unlimited/declaration-strict-value */
|
||||
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
|
||||
.progress {
|
||||
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 0 5px 2px theme('colors.white-50');
|
||||
z-index: 4;
|
||||
top: 60%;
|
||||
inset-inline-start: 20%;
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
width: 1em;
|
||||
font-size: 10em;
|
||||
line-height: 1.4em;
|
||||
color: color.adjust($color-grey-4, $lightness: 4%);
|
||||
color: theme('colors.grey.100');
|
||||
}
|
||||
|
||||
canvas,
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
}
|
||||
|
||||
.upload-failure {
|
||||
border-color: $color-red;
|
||||
border-color: theme('colors.critical.200');
|
||||
|
||||
.preview {
|
||||
display: none;
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
}
|
||||
|
||||
.upload-server-error {
|
||||
border-color: $color-red;
|
||||
border-color: theme('colors.critical.200');
|
||||
|
||||
.preview {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.current-focal-point-indicator {
|
||||
@include transition(opacity 0.2s ease);
|
||||
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 1);
|
||||
box-shadow: 1px 1px 10px 0 $color-black;
|
||||
position: absolute;
|
||||
border: 3px solid $color-teal;
|
||||
opacity: 0.7;
|
||||
|
|
|
|||
|
|
@ -54,12 +54,12 @@
|
|||
padding: 0 15px;
|
||||
|
||||
h2 {
|
||||
background-color: #fafafa;
|
||||
background-color: $color-grey-5;
|
||||
font-size: 13px;
|
||||
line-height: 31px;
|
||||
margin-top: 0;
|
||||
padding-inline-start: 8px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-teal;
|
||||
color: $color-teal;
|
||||
text-decoration: none;
|
||||
|
|
@ -102,13 +102,13 @@
|
|||
&:hover {
|
||||
background-color: $color-teal-dark;
|
||||
border-color: $color-teal-dark;
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
li.selected a {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
color: #fff !important;
|
||||
color: $color-white !important;
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
border-color: $color-teal !important;
|
||||
background-color: $color-teal;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
|
||||
.pagination {
|
||||
margin-top: 3em;
|
||||
border-top: 1px dashed #d9d9d9;
|
||||
border-top: 1px dashed theme('colors.grey.100');
|
||||
padding: 2em 1em 0;
|
||||
|
||||
ul {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
height: $object-title-height;
|
||||
-webkit-font-smoothing: auto;
|
||||
background: $color-salmon-light;
|
||||
color: #200200;
|
||||
color: $color-text-base;
|
||||
padding: 0.9em 0 0.9em 5em;
|
||||
font-size: 0.95em;
|
||||
margin: 0;
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
&.required {
|
||||
> .title-wrapper label:after {
|
||||
content: '*';
|
||||
color: $color-red;
|
||||
color: theme('colors.critical.200');
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-inline-start: 0.5em;
|
||||
|
|
@ -233,10 +233,6 @@
|
|||
width: 1.8em;
|
||||
background-color: $color-salmon;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
background-color: color.adjust($color-salmon, $lightness: -5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -322,13 +318,8 @@ footer .preview {
|
|||
height: 3em;
|
||||
}
|
||||
|
||||
background-color: color.adjust($color-grey-2, $lightness: 10%);
|
||||
border-color: color.adjust($color-grey-2, $lightness: 10%);
|
||||
|
||||
&:hover {
|
||||
background-color: $color-grey-2;
|
||||
border-color: $color-grey-2;
|
||||
}
|
||||
background-color: $color-grey-2;
|
||||
border-color: $color-grey-2;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
|
@ -336,21 +327,15 @@ footer .preview {
|
|||
input[type='submit'],
|
||||
button,
|
||||
.button {
|
||||
background-color: color.adjust($color-grey-2, $lightness: 10%);
|
||||
border-color: color.adjust($color-grey-2, $lightness: 10%);
|
||||
|
||||
&:hover {
|
||||
background-color: $color-grey-2;
|
||||
border-color: $color-grey-2;
|
||||
}
|
||||
background-color: $color-grey-2;
|
||||
border-color: $color-grey-2;
|
||||
}
|
||||
|
||||
ul,
|
||||
.dropdown-toggle {
|
||||
background-color: color.adjust($color-grey-2, $lightness: 10%);
|
||||
background-color: $color-grey-2;
|
||||
}
|
||||
|
||||
.dropdown-toggle:hover,
|
||||
&.open > .button + .dropdown-toggle {
|
||||
background-color: $color-grey-2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
.workflow-progress-table {
|
||||
width: 100%;
|
||||
border-top: 1px solid rgb(229, 229, 229);
|
||||
border-bottom: 1px solid rgb(229, 229, 229);
|
||||
border-top: 1px solid $color-grey-3;
|
||||
border-bottom: 1px solid $color-grey-3;
|
||||
font-size: 0.8em;
|
||||
|
||||
td,
|
||||
|
|
@ -21,18 +21,18 @@
|
|||
&__left-column {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
color: $color-text-base;
|
||||
}
|
||||
|
||||
&--tasks {
|
||||
background-color: rgb(250, 250, 250);
|
||||
background-color: $color-grey-5;
|
||||
|
||||
.workflow-progress-table__left-column {
|
||||
background-color: rgb(245, 245, 245);
|
||||
background-color: $color-grey-4;
|
||||
}
|
||||
}
|
||||
|
||||
&--timeline tr {
|
||||
border-bottom: 1px solid rgb(229, 229, 229);
|
||||
border-bottom: 1px solid $color-grey-3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,76 +26,44 @@
|
|||
|
||||
// }
|
||||
.t-default .u-btn-current {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
border-color: $color-grey-4;
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
.t-default .u-btn-current:hover {
|
||||
background: $color-teal;
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
border-color: $color-teal;
|
||||
}
|
||||
|
||||
.t-default .u-btn-current:active {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current {
|
||||
background-color: $color-teal-darker;
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
border-color: theme('colors.black-35');
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current:hover {
|
||||
background-color: $color-teal-dark;
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current:active {
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: theme('colors.black-35');
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Dark theme
|
||||
// =============================================================================
|
||||
.t-dark .u-link {
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.t-dark .u-link:hover {
|
||||
color: #aaa;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.t-dark .u-background {
|
||||
background: #333;
|
||||
background: $color-grey-1;
|
||||
}
|
||||
|
||||
.t-dark .u-arrow:before {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Light theme
|
||||
// =============================================================================
|
||||
.t-light .u-link {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.t-light .u-link:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.t-light .u-background {
|
||||
background: #fff;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.t-light .u-arrow:before {
|
||||
border-bottom-color: #fff;
|
||||
border-bottom-color: $color-grey-1;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use 'sass:map';
|
||||
|
||||
.xdsoft_datetimepicker {
|
||||
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 5px 10px -5px theme('colors.black-35');
|
||||
background: $color-white;
|
||||
border: 1px solid $color-input-focus-border;
|
||||
padding: 8px;
|
||||
|
|
@ -137,15 +137,14 @@
|
|||
|
||||
.xdsoft_time_box {
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $color-grey-4;
|
||||
height: 170px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
> div > div {
|
||||
background: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
color: #666;
|
||||
background: $color-grey-5;
|
||||
border-top: 1px solid $color-grey-4;
|
||||
color: $color-grey-1;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -184,7 +183,7 @@
|
|||
}
|
||||
|
||||
> .xdsoft_select {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $color-grey-4;
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
top: 30px;
|
||||
|
|
@ -204,18 +203,12 @@
|
|||
|
||||
> div > .xdsoft_option:hover {
|
||||
color: $color-white;
|
||||
background: #ff8000;
|
||||
background: $color-salmon;
|
||||
}
|
||||
|
||||
> div > .xdsoft_option {
|
||||
padding: 2px 15px 2px 5px;
|
||||
}
|
||||
|
||||
> div > .xdsoft_option.xdsoft_current {
|
||||
background: #3af;
|
||||
color: $color-white;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,8 +235,8 @@
|
|||
td,
|
||||
th {
|
||||
width: 14.285%;
|
||||
border: 1px solid #ddd;
|
||||
color: #666;
|
||||
border: 1px solid $color-grey-4;
|
||||
color: $color-grey-1;
|
||||
font-size: 12px;
|
||||
text-align: end;
|
||||
padding: 5px 7px;
|
||||
|
|
@ -257,7 +250,7 @@
|
|||
}
|
||||
|
||||
th {
|
||||
background: #f1f1f1;
|
||||
background: $color-grey-5;
|
||||
font-weight: 700;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
|
|
@ -327,7 +320,7 @@
|
|||
|
||||
> .xdsoft_scroller {
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
background: #ccc !important;
|
||||
background: $color-grey-3 !important;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,6 @@
|
|||
}
|
||||
|
||||
.ui-icon-close:hover:before {
|
||||
color: $color-red;
|
||||
color: theme('colors.critical.200');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,57 +31,35 @@ $breakpoints: (
|
|||
);
|
||||
|
||||
// colours
|
||||
$color-teal-light: var(--color-primary-light);
|
||||
$color-teal-lighter: var(--color-primary-lighter);
|
||||
$color-teal: var(--color-primary);
|
||||
$color-teal-darker: var(--color-primary-darker);
|
||||
$color-teal-dark: var(--color-primary-dark);
|
||||
$color-teal: theme('colors.secondary.DEFAULT');
|
||||
$color-teal-darker: theme('colors.secondary.400');
|
||||
$color-teal-dark: theme('colors.secondary.600');
|
||||
|
||||
$color-blue: #71b2d4;
|
||||
$color-red: #cd3238;
|
||||
$color-red-dark: #b4191f;
|
||||
$color-orange: #e9b04d;
|
||||
$color-orange-dark: #bb5b03;
|
||||
$color-green: #189370;
|
||||
$color-green-dark: #157b57;
|
||||
$color-green-darker: #105d42; // White has AAA compatibility when this is used in bgd.
|
||||
$color-salmon: #f37e77;
|
||||
$color-salmon-light: #fcf2f2;
|
||||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
$color-white: theme('colors.white.DEFAULT');
|
||||
$color-black: theme('colors.black.DEFAULT');
|
||||
|
||||
// darker to lighter
|
||||
$color-grey-1: color.adjust($color-white, $lightness: -80%);
|
||||
$color-grey-2: color.adjust($color-white, $lightness: -70%);
|
||||
$color-grey-3: color.adjust($color-white, $lightness: -15%);
|
||||
$color-grey-4: color.adjust($color-white, $lightness: -10%);
|
||||
$color-grey-5: color.adjust($color-white, $lightness: -2%);
|
||||
$color-grey-1: theme('colors.grey.600');
|
||||
$color-grey-2: theme('colors.grey.400');
|
||||
$color-grey-3: theme('colors.grey.200');
|
||||
$color-grey-4: theme('colors.grey.100');
|
||||
$color-grey-5: theme('colors.grey.50');
|
||||
|
||||
$color-menu-text: color.adjust($color-white, $lightness: -20%);
|
||||
$color-menu-text: theme('colors.white-80');
|
||||
|
||||
$color-thead-bg: $color-grey-5;
|
||||
$color-header-bg: $color-teal;
|
||||
|
||||
$color-fieldset-hover: $color-grey-5;
|
||||
$color-fieldset-hover: $color-white;
|
||||
$color-input-border: $color-grey-4;
|
||||
$color-input-focus: var(--color-input-focus);
|
||||
$color-input-focus-border: var(--color-input-focus-border);
|
||||
$color-input-error-bg: color.adjust(
|
||||
color.adjust($color-red, $saturation: 28%),
|
||||
$lightness: 45%
|
||||
);
|
||||
$color-input-focus: theme('colors.secondary.50');
|
||||
$color-input-focus-border: theme('colors.secondary.100');
|
||||
$color-input-error-bg: theme('colors.critical.50');
|
||||
|
||||
$color-button: $color-teal;
|
||||
$color-button-hover: $color-teal-darker;
|
||||
$color-button-yes: $color-green-dark;
|
||||
$color-button-yes-hover: color.adjust($color-button-yes, $lightness: -8%);
|
||||
$color-button-no: $color-red-dark;
|
||||
$color-button-no-hover: color.adjust($color-button-no, $lightness: -20%);
|
||||
$color-button-warning: $color-orange-dark;
|
||||
$color-button-warning-hover: color.adjust(
|
||||
$color-button-warning,
|
||||
$lightness: -20%
|
||||
);
|
||||
$color-button-yes: theme('colors.positive.100');
|
||||
$color-button-no: theme('colors.critical.200');
|
||||
$color-button-warning: theme('colors.warning.100');
|
||||
|
||||
$color-link: $color-teal-darker;
|
||||
$color-link-hover: $color-teal-dark;
|
||||
|
|
@ -90,8 +68,8 @@ $color-link-hover: $color-teal-dark;
|
|||
// because it shouldn’t be reused for anything else in the UI.
|
||||
$color-focus-outline: #ffbf47;
|
||||
|
||||
$color-text-base: color.adjust($color-white, $lightness: -85%);
|
||||
$color-text-input: color.adjust($color-white, $lightness: -90%);
|
||||
$color-text-base: theme('colors.grey.600');
|
||||
$color-text-input: theme('colors.grey.600');
|
||||
|
||||
// System Colors
|
||||
$media-forced-colours: active;
|
||||
|
|
@ -127,16 +105,3 @@ $menu-transition-duration: 150ms;
|
|||
$focus-outline-width: 3px;
|
||||
|
||||
$object-title-height: 40px;
|
||||
|
||||
// Form Errors
|
||||
$color-text-error: color.change($color-red, $saturation: 69%, $lightness: 52%);
|
||||
$color-text-error-forced-color: color.change(
|
||||
$color-red,
|
||||
$saturation: 100%,
|
||||
$lightness: 50%
|
||||
);
|
||||
$color-text-warning-forced-color: color.change(
|
||||
$color-orange,
|
||||
$saturation: 100%,
|
||||
$lightness: 70%
|
||||
);
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
&__error {
|
||||
color: $color-white;
|
||||
background-color: $color-red-dark;
|
||||
background-color: theme('colors.critical.200');
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
padding-inline-start: 10px;
|
||||
|
|
@ -123,8 +123,8 @@
|
|||
float: right;
|
||||
margin-inline-start: 5px;
|
||||
color: $color-white;
|
||||
background-color: $color-red-very-dark;
|
||||
border-color: $color-red-very-dark;
|
||||
background-color: theme('colors.critical.200');
|
||||
border-color: $color-white;
|
||||
padding: 2px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 10px;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
&__date {
|
||||
color: $color-grey-25;
|
||||
color: theme('colors.grey.400');
|
||||
}
|
||||
|
||||
&__actions {
|
||||
|
|
@ -36,10 +36,6 @@
|
|||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-grey-7;
|
||||
}
|
||||
|
||||
> button,
|
||||
> details > summary {
|
||||
// Hides triangle on Firefox
|
||||
|
|
@ -82,18 +78,13 @@
|
|||
&--more {
|
||||
> button,
|
||||
> details > summary {
|
||||
color: #767676;
|
||||
|
||||
// stylelint-disable-next-line max-nesting-depth
|
||||
&:hover {
|
||||
color: $color-grey-25;
|
||||
}
|
||||
color: theme('colors.grey.400');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__more-actions {
|
||||
background-color: #333;
|
||||
background-color: $color-grey-1;
|
||||
color: $color-grey-5;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
|
@ -104,7 +95,7 @@
|
|||
&:before {
|
||||
content: '';
|
||||
border: 6px solid transparent;
|
||||
border-bottom-color: #333;
|
||||
border-bottom-color: $color-grey-1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
@ -115,16 +106,12 @@
|
|||
display: block;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
color: $color-white;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
width: 100px;
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
&__error {
|
||||
color: $color-white;
|
||||
background-color: $color-red-dark;
|
||||
background-color: theme('colors.critical.200');
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
padding-inline-start: 10px;
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
float: right;
|
||||
margin-inline-start: 5px;
|
||||
color: $color-white;
|
||||
background-color: $color-red-very-dark;
|
||||
border-color: $color-red-very-dark;
|
||||
background-color: theme('colors.critical.200');
|
||||
border-color: $color-white;
|
||||
padding: 2px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 10px;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
@import '../../../scss/settings/variables';
|
||||
|
||||
$color-red-very-dark: #901419;
|
||||
$color-amber-0: #e9b04d;
|
||||
$color-amber-1: #faecd5;
|
||||
|
||||
$color-grey-25: #626262;
|
||||
$color-grey-7: #f2f2f2;
|
||||
$color-grey-8: #fbfbfb;
|
||||
|
||||
$color-comment-separator: #e6e6e6;
|
||||
$color-comment-separator: theme('colors.grey.100');
|
||||
|
||||
$color-box-background: $color-white;
|
||||
$color-box-border: $color-grey-3;
|
||||
$color-box-border-focused: $color-grey-2;
|
||||
$color-box-text: $color-black;
|
||||
$color-textarea-background: $color-grey-8;
|
||||
$color-textarea-background-focused: #f2fcfc;
|
||||
$color-textarea-border: #ccc;
|
||||
$color-textarea-border-focused: #00b0b1;
|
||||
$color-textarea-background: theme('colors.grey.50');
|
||||
$color-textarea-background-focused: $color-input-focus;
|
||||
$color-textarea-border: $color-input-border;
|
||||
$color-textarea-border-focused: $color-input-focus-border;
|
||||
$color-textarea-placeholder-text: $color-grey-2;
|
||||
$box-border-radius: 5px;
|
||||
$box-padding: 10px;
|
||||
|
|
@ -35,8 +27,7 @@ $box-padding: 10px;
|
|||
color: $color-box-text;
|
||||
|
||||
&--focused {
|
||||
border-color: #bbb;
|
||||
box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 3px 2px 3px -1px theme('colors.black-10');
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -72,7 +63,7 @@ $box-padding: 10px;
|
|||
}
|
||||
|
||||
&__notice {
|
||||
background-color: $color-amber-1;
|
||||
background-color: theme('colors.warning.50');
|
||||
position: absolute;
|
||||
inset-inline-start: -$box-padding;
|
||||
bottom: 0;
|
||||
|
|
@ -81,7 +72,7 @@ $box-padding: 10px;
|
|||
box-sizing: border-box;
|
||||
|
||||
svg.icon {
|
||||
color: $color-amber-0;
|
||||
color: theme('colors.warning.100');
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-inline-end: 10px;
|
||||
|
|
@ -123,8 +114,8 @@ $box-padding: 10px;
|
|||
|
||||
&--red {
|
||||
color: $color-white;
|
||||
border: 1px solid $color-red-very-dark;
|
||||
background-color: $color-red-very-dark;
|
||||
border: 1px solid theme('colors.critical.200');
|
||||
background-color: theme('colors.critical.200');
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.Draftail-CommentControl .Draftail-ToolbarButton {
|
||||
color: theme('colors.teal.100');
|
||||
color: theme('colors.secondary.100');
|
||||
|
||||
.icon {
|
||||
width: 1.875rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
$draftail-editor-text: $color-text-input;
|
||||
$draftail-editor-chrome: theme('colors.primary.DEFAULT');
|
||||
$draftail-editor-chrome-text: $color-white;
|
||||
$draftail-editor-chrome-active: $color-white;
|
||||
// This needs to remain a Sass value due to a limitation in Draftail.
|
||||
// $draftail-editor-chrome-active: $color-white;
|
||||
$draftail-editor-chrome-active: #fff;
|
||||
$draftail-editor-chrome-accent: transparent;
|
||||
|
||||
$draftail-base-spacing: 0.375rem;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $tooltip-chrome-text: $draftail-tooltip-chrome-text;
|
|||
|
||||
$tooltip-z-index: $draftail-tooltip-z-index;
|
||||
|
||||
$tooltip-color-no: #f48880;
|
||||
$tooltip-color-no: theme('colors.critical.100');
|
||||
|
||||
@mixin arrow--top {
|
||||
margin-top: $tooltip-arrow-spacing;
|
||||
|
|
@ -51,7 +51,7 @@ $tooltip-color-no: #f48880;
|
|||
color: $tooltip-chrome-text;
|
||||
z-index: $tooltip-z-index;
|
||||
border-radius: $tooltip-radius;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 5px theme('colors.black-35');
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
color: $color-text-base;
|
||||
|
||||
&[readonly] {
|
||||
color: color.adjust($color-text-base, $alpha: -0.5);
|
||||
color: $color-grey-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $icon-size: 1em;
|
|||
}
|
||||
|
||||
.icon-warning {
|
||||
color: $color-red;
|
||||
color: theme('colors.critical.200');
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
$c-page-explorer-bg-active: rgba(0, 0, 0, 0.425);
|
||||
$c-page-explorer-secondary: #a5a5a5;
|
||||
$c-page-explorer-bg-active: theme('colors.black-50');
|
||||
$c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
$menu-footer-height: 50px;
|
||||
|
||||
|
|
@ -41,7 +40,7 @@ $menu-footer-height: 50px;
|
|||
$explorer-header-horizontal-padding: 10px;
|
||||
|
||||
.c-page-explorer__header {
|
||||
@apply w-bg-primary-200 w-text-white/85 w-border-b w-border-primary;
|
||||
@apply w-bg-primary-200 w-text-white-80 w-border-b w-border-primary;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
|
@ -67,13 +66,13 @@ $explorer-header-horizontal-padding: 10px;
|
|||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
@apply w-text-white/85;
|
||||
@apply w-text-white-80;
|
||||
margin-inline-end: 0.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.icon--explorer-header {
|
||||
@apply w-text-white/85 w-mr-2;
|
||||
@apply w-text-white-80 w-mr-2;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
|
@ -92,7 +91,6 @@ $explorer-header-horizontal-padding: 10px;
|
|||
|
||||
> select {
|
||||
padding: 5px 30px 5px 10px;
|
||||
border-color: #4c4e4d;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -138,11 +136,11 @@ $explorer-header-horizontal-padding: 10px;
|
|||
.c-page-explorer__see-more {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
background: theme('colors.black-35');
|
||||
color: $color-white;
|
||||
|
||||
&:focus {
|
||||
color: $c-page-explorer-secondary;
|
||||
color: theme('colors.white-80');
|
||||
background: $c-page-explorer-bg-active;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.c-page-explorer__item__link .icon {
|
||||
@apply w-text-white/85;
|
||||
@apply w-text-white-80;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-inline-end: 0.75rem;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.c-page-explorer__item__action {
|
||||
@apply w-text-white/85 w-transition hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
|
||||
@apply w-text-white-80 w-transition hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -51,6 +51,6 @@
|
|||
}
|
||||
|
||||
.c-page-explorer__meta {
|
||||
@apply w-flex w-gap-2 w-text-white/85;
|
||||
@apply w-flex w-gap-2 w-text-white-80;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.c-status {
|
||||
@apply w-bg-black/50 w-tracking-tight w-text-white/85;
|
||||
@apply w-bg-black-50 w-tracking-tight w-text-white-80;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
&--visible {
|
||||
visibility: visible;
|
||||
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 2px 0 2px theme('colors.black-35');
|
||||
}
|
||||
|
||||
// Showing the submenu options panel in mobile mode
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
color: $color-white;
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
text-shadow: -1px -1px 0 theme('colors.black-35');
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
&--active {
|
||||
@apply w-bg-primary-200;
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
text-shadow: -1px -1px 0 theme('colors.black-35');
|
||||
|
||||
> a {
|
||||
border-inline-start-color: $color-salmon;
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
&--visible {
|
||||
visibility: visible;
|
||||
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: 2px 0 2px theme('colors.black-35');
|
||||
}
|
||||
|
||||
// Don't apply this to nested submenus though
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
.sidebar-sub-menu-item {
|
||||
&--open {
|
||||
> a {
|
||||
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
|
||||
text-shadow: -1px -1px 0 theme('colors.black-35');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ $logo-size: 110px;
|
|||
position: relative;
|
||||
display: block;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
-webkit-font-smoothing: auto;
|
||||
margin: 4rem auto;
|
||||
text-align: center;
|
||||
|
|
@ -68,7 +67,7 @@ $logo-size: 110px;
|
|||
|
||||
// Bird wrapper
|
||||
&__icon-wrapper {
|
||||
@apply w-bg-white/15 w-relative w-overflow-hidden hover:w-overflow-visible;
|
||||
@apply w-bg-white-15 w-relative w-overflow-hidden hover:w-overflow-visible;
|
||||
margin: auto;
|
||||
width: $logo-size;
|
||||
height: $logo-size;
|
||||
|
|
@ -90,7 +89,6 @@ $logo-size: 110px;
|
|||
.sidebar-custom-branding {
|
||||
display: block;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
-webkit-font-smoothing: auto;
|
||||
position: relative;
|
||||
margin: 2em auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,32 @@
|
|||
@use './scss/index' with (
|
||||
$teal: $color-teal,
|
||||
$error-color: $color-red,
|
||||
$font-sans: $font-sans
|
||||
);
|
||||
$grid-gutter-width: 30px;
|
||||
$header-padding-horizontal: 4px;
|
||||
$header-padding-vertical: 6px;
|
||||
$header-gutter: 8px;
|
||||
$header-background: $color-grey-5;
|
||||
$block-margin-vertical: 4px;
|
||||
$block-margin-horizontal: 0;
|
||||
$add-button-size: 34px;
|
||||
$add-button-font-size: 1.5rem;
|
||||
$type-button-padding-vertical: 10px;
|
||||
$type-button-padding-horizontal: 10px;
|
||||
$children-container-padding: $add-button-size * 0.5;
|
||||
$content-padding-horizontal: 24px;
|
||||
$content-padding-vertical: 16px;
|
||||
$action-font-size: 1.125rem;
|
||||
$add-transition-duration: 0.3s;
|
||||
$hover-transition-duration: 0.3s;
|
||||
$bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
$border-radius: 3px;
|
||||
$header-text-color: $color-grey-2;
|
||||
$block-border-color: $color-grey-4;
|
||||
$block-border-color-focus: $color-grey-3;
|
||||
$block-hover-background: $color-grey-5;
|
||||
$error-border-color: theme('colors.critical.100');
|
||||
$error-background-color: $color-input-error-bg;
|
||||
$add-panel-gutter: 8px;
|
||||
|
||||
@import 'scss/components/c-sf-add-button';
|
||||
@import 'scss/components/c-sf-add-panel';
|
||||
@import 'scss/components/c-sf-button';
|
||||
@import 'scss/components/c-sf-block';
|
||||
@import 'scss/components/c-sf-container';
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
@use 'sass:math';
|
||||
|
||||
$grid-gutter-width: 30px !default;
|
||||
$header-padding-horizontal: 4px !default;
|
||||
$header-padding-vertical: 6px;
|
||||
$header-gutter: 8px !default;
|
||||
$header-background: #fbfbfb;
|
||||
$block-margin-vertical: 4px !default;
|
||||
$block-margin-horizontal: 0 !default;
|
||||
$add-button-size: 34px !default;
|
||||
$add-button-font-size: 24px !default;
|
||||
$type-button-padding-vertical: 10px !default;
|
||||
$type-button-padding-horizontal: 10px !default;
|
||||
$children-container-padding: math.div($add-button-size, 2) !default;
|
||||
$content-padding-horizontal: 24px !default;
|
||||
$content-padding-vertical: 16px !default;
|
||||
$action-font-size: 18px;
|
||||
$add-transition-duration: 0.3s !default;
|
||||
$hover-transition-duration: 0.3s !default;
|
||||
$bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275) !default;
|
||||
$border-radius: 3px !default;
|
||||
$teal: #007d7e !default;
|
||||
$header-text-color-focus: #4d4d4d !default;
|
||||
$header-text-color: #585858 !default;
|
||||
$block-border-color: #e6e6e6 !default;
|
||||
$block-border-color-focus: #bbb !default;
|
||||
$block-hover-background: #f5f5f5 !default;
|
||||
$error-color: #cd3238 !default;
|
||||
$error-border-color: #dbc7c8 !default;
|
||||
$error-border-color-focus: #cdb2b3 !default;
|
||||
$error-background-color: #fbefef !default;
|
||||
$screen-xs-max: 799px !default;
|
||||
$screen-sm-min: 800px !default;
|
||||
$screen-l-min: 1075px !default;
|
||||
$add-panel-gutter: 8px !default;
|
||||
$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
height: $add-button-size;
|
||||
appearance: none;
|
||||
border: 0 none;
|
||||
color: $teal;
|
||||
color: $color-teal;
|
||||
font-weight: bold;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
border-radius: $border-radius;
|
||||
user-select: none;
|
||||
|
||||
@media (min-width: $screen-l-min) {
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: $grid-gutter-width * 0.25 $grid-gutter-width * 2 $add-button-size -
|
||||
math.div($grid-gutter-width, 2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
margin: $block-margin-vertical $block-margin-horizontal;
|
||||
border: 1px solid $block-border-color;
|
||||
border-radius: $border-radius;
|
||||
background: #fff;
|
||||
background: $color-white;
|
||||
transition: border-color $hover-transition-duration ease-in-out;
|
||||
transition-property: border-color, box-shadow;
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
min-height: 30px;
|
||||
background: $header-background;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-inline-start: $content-padding-horizontal - $header-gutter;
|
||||
}
|
||||
|
||||
|
|
@ -108,8 +108,8 @@
|
|||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: #333;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: $color-grey-1;
|
||||
background-color: $color-grey-4;
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $error-border-color-focus;
|
||||
border-color: $error-border-color;
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $error-background-color;
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
// Duplicated because of
|
||||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16651302/
|
||||
&:focus-within {
|
||||
border-color: $error-border-color-focus;
|
||||
border-color: $error-border-color;
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $error-background-color;
|
||||
|
|
@ -166,15 +166,10 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
border-color: $block-border-color-focus;
|
||||
box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 3px 2px 3px -1px theme('colors.black-10');
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $block-hover-background;
|
||||
|
||||
.c-sf-block__header__title,
|
||||
.c-sf-block__actions__single {
|
||||
color: $header-text-color-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,15 +177,10 @@
|
|||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16651302/
|
||||
&:focus-within {
|
||||
border-color: $block-border-color-focus;
|
||||
box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 3px 2px 3px -1px theme('colors.black-10');
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $block-hover-background;
|
||||
|
||||
.c-sf-block__header__title,
|
||||
.c-sf-block__actions__single {
|
||||
color: $header-text-color-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
flex: 1 1 200px;
|
||||
margin: $add-panel-gutter;
|
||||
appearance: none;
|
||||
color: #333;
|
||||
color: $color-grey-1;
|
||||
line-height: 1.833;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-family: $font-sans;
|
||||
text-align: start;
|
||||
background: #eee;
|
||||
background: $color-grey-5;
|
||||
padding: $type-button-padding-vertical $type-button-padding-horizontal;
|
||||
border: 1px solid #e6e6e6;
|
||||
border: 1px solid $color-grey-4;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: $teal;
|
||||
color: $color-white;
|
||||
background-color: $color-teal;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
&--add-in-gutter {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-inline-start: $add-button-size;
|
||||
|
||||
.c-sf-add-button {
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
&.required > label::after {
|
||||
content: '*';
|
||||
color: #cd3238;
|
||||
color: theme('colors.critical.200');
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
margin-inline-start: 0.5em;
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
@import 'variables';
|
||||
|
||||
@import 'components/c-sf-add-button';
|
||||
@import 'components/c-sf-add-panel';
|
||||
@import 'components/c-sf-button';
|
||||
@import 'components/c-sf-block';
|
||||
@import 'components/c-sf-container';
|
||||
|
|
@ -57,7 +57,6 @@ module.exports = {
|
|||
'white-15': 'rgba(255, 255, 255, 0.15)',
|
||||
'white-50': 'rgba(255, 255, 255, 0.50)',
|
||||
'white-80': 'rgba(255, 255, 255, 0.80)',
|
||||
'white-85': 'rgba(255, 255, 255, 0.85)',
|
||||
'black-10': 'rgba(0, 0, 0, 0.10)',
|
||||
'black-20': 'rgba(0, 0, 0, 0.20)',
|
||||
'black-35': 'rgba(0, 0, 0, 0.35)',
|
||||
|
|
@ -86,10 +85,6 @@ module.exports = {
|
|||
},
|
||||
spacing,
|
||||
extend: {
|
||||
opacity: {
|
||||
15: '0.15',
|
||||
85: '0.85',
|
||||
},
|
||||
outlineOffset: {
|
||||
inside: '-3px',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -108,40 +108,39 @@ To customise the primary colour used in the admin user interface, inject a CSS f
|
|||
|
||||
```css
|
||||
:root {
|
||||
--color-primary-hue: 25;
|
||||
--w-color-primary-hue: 25;
|
||||
}
|
||||
```
|
||||
|
||||
`color-primary` is an [hsl colour](https://en.wikipedia.org/wiki/HSL_and_HSV) composed of 3 CSS variables - `--color-primary-hue` (0-360 with no unit), `--color-primary-saturation` (a percentage), and `--color-primary-lightness` (also a percentage). Separating the colour into 3 allows us to calculate variations on the colour to use alongside the primary colour. If needed, you can also control those variations manually by setting `hue`, `saturation`, and `lightness` variables for the following colours: `color-primary-darker`, `color-primary-dark`, `color-primary-lighter`, `color-primary-light`, `color-input-focus`, and `color-input-focus-border`:
|
||||
`w-color-primary` is an [HSL colour](https://en.wikipedia.org/wiki/HSL_and_HSV) composed of 3 CSS variables - `--w-color-primary-hue` (0-360 with no unit), `--w-color-primary-saturation` (a percentage), and `--w-color-primary-lightness` (also a percentage). Separating the colour into 3 allows us to calculate variations on the colour to use alongside the primary colour. If needed, you can also control those variations manually by setting `hue`, `saturation`, and `lightness` variables:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary-hue: 25;
|
||||
--color-primary-saturation: 100%;
|
||||
--color-primary-lightness: 25%;
|
||||
--color-primary-darker-hue: 24;
|
||||
--color-primary-darker-saturation: 100%;
|
||||
--color-primary-darker-lightness: 20%;
|
||||
--color-primary-dark-hue: 23;
|
||||
--color-primary-dark-saturation: 100%;
|
||||
--color-primary-dark-lightness: 15%;
|
||||
--w-color-primary-hue: 25;
|
||||
--w-color-primary-saturation: 100%;
|
||||
--w-color-primary-lightness: 25%;
|
||||
--w-color-primary-darker-hue: 24;
|
||||
--w-color-primary-darker-saturation: 100%;
|
||||
--w-color-primary-darker-lightness: 20%;
|
||||
--w-color-primary-dark-hue: 23;
|
||||
--w-color-primary-dark-saturation: 100%;
|
||||
--w-color-primary-dark-lightness: 15%;
|
||||
}
|
||||
```
|
||||
|
||||
If instead you intend to set all available colours, you can use any valid css colours:
|
||||
If instead you intend to set all available colours within a given hue, you can use any valid css colours:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: mediumaquamarine;
|
||||
--color-primary-darker: rebeccapurple;
|
||||
--color-primary-dark: hsl(330, 100%, 70%);
|
||||
--color-primary-lighter: azure;
|
||||
--color-primary-light: aliceblue;
|
||||
--color-input-focus: rgb(204, 0, 102);
|
||||
--color-input-focus-border: #4d0026;
|
||||
--w-color-primary: mediumaquamarine;
|
||||
--w-color-primary-200: rebeccapurple;
|
||||
}
|
||||
```
|
||||
|
||||
Color customisation is available for the following colors:
|
||||
|
||||
|
||||
|
||||
## Specifying a site or page in the branding
|
||||
|
||||
The admin interface has a number of variables available to the renderer context that can be used to customise the branding in the admin page. These can be useful for customising the dashboard on a multitenanted Wagtail installation:
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue