kopia lustrzana https://github.com/wagtail/wagtail
Rearrange SCSS structure according to ITCSS
nmorduch
Janneke Janssen
rodzic
b9e6394bd0
commit
2668c05146
|
|
@ -6,6 +6,7 @@ Changelog
|
|||
|
||||
* Removed support for Python 3.4
|
||||
* Added support for `short_description` for field labels in modeladmin's `InspectView` (Wesley van Lee)
|
||||
* Rearranged SCSS folder structure to the client folder and split them approximately according to ITCSS. (Naomi Morduch Toubman, Jonny Scholes, Janneke Janssen, Hugo van den Berg)
|
||||
|
||||
|
||||
2.5 (xx.xx.xxxx) - IN DEVELOPMENT
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
@import '../src/components/Transition/Transition';
|
||||
@import '../src/components/LoadingSpinner/LoadingSpinner';
|
||||
@import '../src/components/PublicationStatus/PublicationStatus';
|
||||
@import '../src/components/Explorer/Explorer';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import 'settings/variables';
|
||||
@import 'settings/variables.icons';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/* TOOLS
|
||||
These are functions and mixins.
|
||||
No CSS should be produced by these files.
|
||||
*/
|
||||
|
||||
@import 'tools/functions.breakpoints';
|
||||
@import 'tools/mixins.breakpoints';
|
||||
@import 'tools/mixins.fonts';
|
||||
@import 'tools/mixins.general';
|
||||
@import 'tools/mixins.grid';
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
.breadcrumb {
|
||||
@include unlist();
|
||||
@include clearfix();
|
||||
overflow: hidden;
|
||||
padding-top: 1.4em;
|
||||
font-size: 0.85em;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 0.5em 1.3em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $color-white;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5em;
|
||||
|
||||
a,
|
||||
span {
|
||||
color: $color-white;
|
||||
display: block;
|
||||
max-width: 12em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 1.6em;
|
||||
padding-right: 1em;
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
// z-index: 5;
|
||||
position: absolute;
|
||||
font-family: wagtail;
|
||||
content: 'n';
|
||||
padding-left: 20px;
|
||||
font-size: 2em;
|
||||
color: $color-teal-darker;
|
||||
line-height: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-teal-dark;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
border-left-color: $color-teal-dark;
|
||||
}
|
||||
|
||||
&.home {
|
||||
a {
|
||||
// stylelint-disable max-nesting-depth
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
width: 3em;
|
||||
font-size: 1em;
|
||||
text-overflow: clip;
|
||||
|
||||
&:before {
|
||||
font-size: 1.15rem;
|
||||
line-height: 0.85em;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header & li {
|
||||
&:before {
|
||||
border-left: 1em solid $color-white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.single {
|
||||
li a {
|
||||
white-space: nowrap;
|
||||
text-overflow: inherit;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-top: 0;
|
||||
background: $color-teal-darker;
|
||||
margin-left: -($desktop-nice-padding);
|
||||
margin-right: -($desktop-nice-padding);
|
||||
|
||||
li {
|
||||
a,
|
||||
span {
|
||||
&:after {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,530 @@
|
|||
// Core button style
|
||||
// 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
|
||||
// input[type=submit],
|
||||
// input[type=reset],
|
||||
// input[type=button],
|
||||
.button {
|
||||
border-radius: 3px;
|
||||
font-family: Open Sans,Arial,sans-serif;
|
||||
width: auto;
|
||||
height: 2.4em;
|
||||
padding: 0 1em;
|
||||
font-size: 0.9em;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
background-color: $color-button;
|
||||
border: 1px solid $color-button;
|
||||
color: $color-white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: auto;
|
||||
// stylelint-disable-next-line property-no-vendor-prefix
|
||||
-moz-appearance: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
|
||||
&.yes {
|
||||
background-color: $color-button-yes;
|
||||
border: 1px solid $color-button-yes;
|
||||
|
||||
&.button-secondary {
|
||||
border: 1px solid $color-button-yes;
|
||||
color: $color-button-yes;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-yes-hover;
|
||||
}
|
||||
|
||||
&.button-nobg:hover {
|
||||
color: $color-button-yes;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $color-button-warning;
|
||||
border: 1px solid $color-button-warning;
|
||||
|
||||
&.button-secondary {
|
||||
border: 1px solid $color-button-warning;
|
||||
color: $color-button-warning;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-warning-hover;
|
||||
}
|
||||
|
||||
&.button-nobg:hover {
|
||||
color: $color-button-warning;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.no,
|
||||
&.serious {
|
||||
background-color: $color-button-no;
|
||||
border: 1px solid $color-button-no;
|
||||
|
||||
&.button-secondary {
|
||||
border: 1px solid $color-button-no;
|
||||
color: $color-button-no;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-no-hover;
|
||||
}
|
||||
|
||||
&.button-nobg:hover {
|
||||
color: $color-button-no;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-nobg {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.bicolor {
|
||||
border: 0;
|
||||
padding-left: 3.5em;
|
||||
|
||||
&:before {
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 2em;
|
||||
line-height: 1.85em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-small.bicolor {
|
||||
padding-left: 3.5em;
|
||||
|
||||
&:before {
|
||||
width: 2em;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.65em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// + input[type=submit],
|
||||
// + input[type=reset],
|
||||
// + input[type=button],
|
||||
+ .button {
|
||||
// + button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
// A completely unstyled button
|
||||
&.unbutton {
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: auto;
|
||||
// stylelint-disable-next-line property-no-vendor-prefix
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-button-hover;
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
|
||||
&.hover-no {
|
||||
background-color: $color-button-no;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-longrunning {
|
||||
span {
|
||||
@include transition(all 0.3s ease);
|
||||
transform: scale(0.9);
|
||||
display: inline-block;
|
||||
height: 0.9em;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
text-align: center;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&.button-longrunning-active span {
|
||||
transform: scale(1);
|
||||
visibility: visible;
|
||||
width: 1em;
|
||||
opacity: 0.8;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.icon-spinner:after {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: $color-grey-3;
|
||||
border-color: $color-grey-3;
|
||||
color: lighten($color-grey-2, 15%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.button-secondary:disabled,
|
||||
&.button-secondary[disabled],
|
||||
&.button-secondary.disabled {
|
||||
background-color: $color-white;
|
||||
border-color: $color-grey-3;
|
||||
color: $color-grey-3;
|
||||
}
|
||||
|
||||
&.button-nostroke {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: 0.95em;
|
||||
padding: 0 1.4em;
|
||||
height: 3em;
|
||||
|
||||
&.icon.text-replace {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
|
||||
&:before {
|
||||
line-height: 2.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-small {
|
||||
&.icon.text-replace {
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
|
||||
// stylelint-disable-next-line max-nesting-depth
|
||||
&:before {
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bicolor {
|
||||
padding-left: 3.7em;
|
||||
|
||||
&:before {
|
||||
width: 2em;
|
||||
line-height: 2.2em;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-small.bicolor {
|
||||
// line-height: 2.2em;
|
||||
padding-left: 3em;
|
||||
|
||||
&:before {
|
||||
width: 1.8em;
|
||||
line-height: 1.65em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button-small {
|
||||
padding: 0 0.8em;
|
||||
height: 2em;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: $color-button;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Buttons which are only an icon
|
||||
.button.icon.text-replace {
|
||||
font-size: 0; // unavoidable duplication of setting in icons.scss
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
|
||||
&:before {
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.button-neutral {
|
||||
color: $color-grey-2;
|
||||
|
||||
&:hover {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.yes {
|
||||
background-color: $color-button-yes;
|
||||
border: 1px solid $color-button-yes;
|
||||
|
||||
&.button-secondary {
|
||||
border: 1px solid $color-button-yes;
|
||||
color: $color-button-yes;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-yes-hover;
|
||||
}
|
||||
|
||||
&.button-nobg:hover {
|
||||
color: $color-button-yes;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.no,
|
||||
.serious {
|
||||
background-color: $color-button-no;
|
||||
border: 1px solid $color-button-no;
|
||||
|
||||
&.button-secondary {
|
||||
border: 1px solid $color-button-no;
|
||||
color: $color-button-no;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
border-color: transparent;
|
||||
background-color: $color-button-no-hover;
|
||||
}
|
||||
|
||||
&.button-nobg:hover {
|
||||
color: $color-button-no;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.button-nobg {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bicolor {
|
||||
border: 0;
|
||||
padding-left: 3.5em;
|
||||
|
||||
&:before {
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 2em;
|
||||
line-height: 1.85em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-small.bicolor {
|
||||
padding-left: 3.5em;
|
||||
|
||||
&:before {
|
||||
width: 2em;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.65em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a.button {
|
||||
line-height: 2.4em;
|
||||
height: auto;
|
||||
|
||||
&.button-small {
|
||||
line-height: 1.85em;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
line-height: 2.9em;
|
||||
}
|
||||
}
|
||||
|
||||
// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
button {
|
||||
padding: 0 1em;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&.button-small {
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
@include clearfix;
|
||||
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
button {
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
margin-right: 1px;
|
||||
margin-left: 0;
|
||||
|
||||
&:only-child {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-group-square {
|
||||
&,
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
.button,
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.multiple {
|
||||
padding: 0;
|
||||
max-width: 1024px - 50px;
|
||||
overflow: hidden;
|
||||
|
||||
> li {
|
||||
@include row();
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $color-white;
|
||||
padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
|
||||
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
|
||||
}
|
||||
|
||||
&.moving {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.moving {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Object controls
|
||||
.controls {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
color: $color-white;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 1px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// wrapper around add button for mutliple objects
|
||||
.add {
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 2em;
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
/*
|
||||
TODO this chooser style has been made more generic based on two identical
|
||||
methods for choosing pages and images that were previously included in their
|
||||
own less files in each app directory (and since deleted). It would be best if
|
||||
an admin 'theme' provided all the design for a UI in a single place, but
|
||||
should that be a series of overrides to the css provided from an app? If so,
|
||||
perhaps those two previous less files should be re-instated and then
|
||||
overriden here? hmm.
|
||||
*/
|
||||
|
||||
.chooser {
|
||||
// We show the 'chosen' state...
|
||||
@include clearfix();
|
||||
|
||||
input[type=text] {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.chosen {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.unchosen,
|
||||
.chosen {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
vertical-align: middle;
|
||||
font-family: wagtail;
|
||||
content: '';
|
||||
// position: relative
|
||||
display: inline-block;
|
||||
// float: left;
|
||||
color: $color-grey-3;
|
||||
line-height: 1em;
|
||||
font-size: 2.5em;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.unchosen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
// ...unless the .page-chooser has the 'blank' class set
|
||||
&.blank {
|
||||
.chosen { display: none; }
|
||||
|
||||
.unchosen { display: block; }
|
||||
}
|
||||
}
|
||||
|
||||
// standard way of doing a chooser where the chosen object's title is overlaid
|
||||
.page-chooser,
|
||||
.snippet-chooser,
|
||||
.document-chooser {
|
||||
.chosen {
|
||||
.title {
|
||||
color: $color-grey-1;
|
||||
// display: block;
|
||||
padding-left: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actions {
|
||||
clear: both;
|
||||
padding-top: 0.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-chooser {
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'b';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.snippet-chooser {
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'D';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-chooser {
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'r';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-chooser {
|
||||
.unchosen,
|
||||
.chosen {
|
||||
&:before {
|
||||
content: 'o';
|
||||
}
|
||||
}
|
||||
|
||||
.chosen {
|
||||
padding-left: $thumbnail-width;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
float: left;
|
||||
margin-left: -($thumbnail-width);
|
||||
margin-right: 1em;
|
||||
max-width: $thumbnail-width;
|
||||
|
||||
// Resize standard Wagtail thumbnail size (165x165) to 130 for space-saving purposes.
|
||||
// We could request a 130x130 rendition, but that's just unnecessary and burdens installations
|
||||
// where images are store off-site with higher rendering times.
|
||||
img {
|
||||
max-width: $thumbnail-width;
|
||||
max-height: $thumbnail-width;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -227,189 +227,3 @@
|
|||
.dropdown ul {
|
||||
@include transition(opacity 0.2s linear);
|
||||
}
|
||||
|
||||
|
||||
// =============================================================================
|
||||
// Listing view smaller dropdowns
|
||||
// =============================================================================
|
||||
|
||||
// .c-dropdown {
|
||||
// }
|
||||
.o-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
.c-dropdown__button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.25rem;
|
||||
// Make this the same as the other buttons
|
||||
line-height: 1.85;
|
||||
border: solid 1px transparent;
|
||||
border-radius: 2px;
|
||||
font-size: 0.95em;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.c-dropdown__toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c-dropdown__menu.c-dropdown__menu {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
min-width: 8rem;
|
||||
text-transform: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
animation: dropdownIn 0.1s ease-out backwards;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.c-dropdown__item {
|
||||
margin-bottom: 0.375rem;
|
||||
|
||||
&:hover {
|
||||
.c-dropdown__indicator {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.c-dropdown__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c-dropdown__divider {
|
||||
border-color: #555;
|
||||
border-style: dotted;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Arrows
|
||||
// =============================================================================
|
||||
.u-arrow:before {
|
||||
content: '';
|
||||
border: solid 0.35rem transparent;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.u-arrow--tl:before {
|
||||
bottom: 100%;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Default dropdown theme
|
||||
// =============================================================================
|
||||
|
||||
// .t-default {
|
||||
|
||||
// }
|
||||
.t-default .u-btn-current {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
.t-default .u-btn-current:hover {
|
||||
background: $color-teal;
|
||||
color: #fff;
|
||||
border-color: $color-teal;
|
||||
}
|
||||
|
||||
.t-default .u-btn-current:active {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current {
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current:hover {
|
||||
background-color: $color-teal-darker;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
// =============================================================================
|
||||
// Dark theme
|
||||
// =============================================================================
|
||||
.t-dark .u-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.t-dark .u-link:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.t-dark .u-background {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.t-dark .u-arrow:before {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
@keyframes dropdownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 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;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// States
|
||||
// =============================================================================
|
||||
.u-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-open .u-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
// =============================================================================
|
||||
// Listing view smaller dropdowns
|
||||
// =============================================================================
|
||||
|
||||
// .c-dropdown {
|
||||
// }
|
||||
.c-dropdown__button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.25rem;
|
||||
// Make this the same as the other buttons
|
||||
line-height: 1.85;
|
||||
border: solid 1px transparent;
|
||||
border-radius: 2px;
|
||||
font-size: 0.95em;
|
||||
cursor: pointer;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.c-dropdown__toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c-dropdown__menu.c-dropdown__menu {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
min-width: 8rem;
|
||||
text-transform: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
animation: dropdownIn 0.1s ease-out backwards;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.c-dropdown__item {
|
||||
margin-bottom: 0.375rem;
|
||||
|
||||
&:hover {
|
||||
.c-dropdown__indicator {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-dropdown__item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c-dropdown__divider {
|
||||
border-color: #555;
|
||||
border-style: dotted;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes dropdownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
footer {
|
||||
@include transition(bottom 0.5s ease 1s);
|
||||
@include row();
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
|
||||
background: $color-grey-1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 0.5em;
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
color: $color-white;
|
||||
|
||||
ul {
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 250px;
|
||||
margin-right: $grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
.preview .dropdown {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding: 7px $grid-gutter-width / 2;
|
||||
font-size: 0.85em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-right: $grid-gutter-width;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.actions,
|
||||
.preview,
|
||||
.preview .dropdown {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.meta {
|
||||
p {
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: $desktop-nice-padding;
|
||||
margin-right: $desktop-nice-padding;
|
||||
width: calc(100% - #{$menu-width} - #{2 * $desktop-nice-padding});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
// These are the generic stylings for forms of any type.
|
||||
// If you're styling something specific to the page editing interface,
|
||||
// it probably ought to go in layouts/page-editor.scss
|
||||
|
||||
// TODO: mixin,
|
||||
// These these styles are currently in elements
|
||||
// but the ones for the class should be here
|
||||
//
|
||||
// label,
|
||||
// .label {
|
||||
// text-transform: none;
|
||||
// font-weight: bold;
|
||||
// color: $color-grey-1;
|
||||
// font-size: 1.1em;
|
||||
// display: block;
|
||||
// padding: 0 0 0.8em;
|
||||
// margin: 0;
|
||||
// line-height: 1.3em;
|
||||
//
|
||||
// .checkbox &,
|
||||
// .radio & {
|
||||
// display: inline;
|
||||
// }
|
||||
// }
|
||||
.plain-checkbox-label {
|
||||
// cancel heavy / floated label styles, for labels that should appear inline against checkboxes
|
||||
|
||||
float: none;
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
// TODO: mixin,
|
||||
// These these styles are currently in elements
|
||||
// but the ones for the classes should be here
|
||||
//
|
||||
// input,
|
||||
// textarea,
|
||||
// select,
|
||||
// .halloeditor,
|
||||
// .tagit {
|
||||
// appearance: none;
|
||||
// box-sizing: border-box;
|
||||
// border-radius: 6px;
|
||||
// width: 100%;
|
||||
// font-family: Open Sans,Arial,sans-serif;
|
||||
// border: 1px solid $color-input-border;
|
||||
// padding: 0.9em 1.2em;
|
||||
// background-color: $color-fieldset-hover;
|
||||
// color: $color-text-input;
|
||||
// font-size: 1.2em;
|
||||
// font-weight: 300;
|
||||
// outline: none;
|
||||
//
|
||||
// &:hover {
|
||||
// background-color: $color-white;
|
||||
// }
|
||||
//
|
||||
// &:focus {
|
||||
// background-color: $color-input-focus;
|
||||
// border-color: $color-input-focus-border;
|
||||
// outline: none;
|
||||
// }
|
||||
//
|
||||
// &:disabled,
|
||||
// &[disabled],
|
||||
// &:disabled:hover,
|
||||
// &[disabled]:hover {
|
||||
// background-color: inherit;
|
||||
// cursor: default;
|
||||
// color: $color-grey-4;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Reset the arrow on `<select>`s in IE10+.
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// select boxes
|
||||
.choice_field .input,
|
||||
.model_choice_field .input,
|
||||
.typed_choice_field .input {
|
||||
position: relative;
|
||||
|
||||
select {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Add select arrow back on browsers where native ui has been removed
|
||||
select ~ span:after {
|
||||
border-radius: 0 6px 6px 0;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
bottom: 0;
|
||||
width: 1.5em;
|
||||
font-family: wagtail;
|
||||
content: 'q';
|
||||
border: 1px solid $color-input-border;
|
||||
border-width: 0 0 0 1px;
|
||||
text-align: center;
|
||||
line-height: 1.4em;
|
||||
font-size: 3em;
|
||||
pointer-events: none;
|
||||
color: $color-grey-3;
|
||||
margin: 0 1px 1px 0;
|
||||
|
||||
.ie & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Other text
|
||||
.help,
|
||||
.error-message {
|
||||
font-size: 0.85em;
|
||||
font-weight: normal;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.help {
|
||||
color: $color-grey-2;
|
||||
}
|
||||
|
||||
fieldset:hover > .help,
|
||||
.field.focused + .help,
|
||||
.field:focus + .help,
|
||||
.field:hover + .help,
|
||||
li.focused > .help {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.required .field > label:after {
|
||||
content: '*';
|
||||
color: $color-red;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
line-height: 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.error input,
|
||||
.error textarea,
|
||||
.error select,
|
||||
.error .tagit {
|
||||
border-color: $color-red;
|
||||
background-color: $color-input-error-bg;
|
||||
}
|
||||
|
||||
// Layouts for particular kinds of of fields
|
||||
|
||||
// permanently show checkbox/radio help as they have no focus state
|
||||
.boolean_field .help,
|
||||
.radio .help {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// This is expected to go on the parent of the input/select/textarea
|
||||
// so in most cases .input
|
||||
.iconfield, // generic
|
||||
.date_field,
|
||||
.time_field,
|
||||
.date_time_field,
|
||||
.url_field {
|
||||
.input {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
font-family: wagtail;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
line-height: 100%;
|
||||
font-size: 2em;
|
||||
color: $color-grey-3;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0.3em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type=radio]),
|
||||
input:not([type=checkbox]),
|
||||
input:not([type=submit]),
|
||||
input:not([type=button]) {
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
// smaller fields required slight repositioning of icons
|
||||
&.field-small {
|
||||
.input {
|
||||
&:before,
|
||||
&:after {
|
||||
font-size: 1.3rem; // REMs are necessary here because IE doesn't treat generated content correctly
|
||||
top: 0.3em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// special case for search spinners
|
||||
&.icon-spinner:after {
|
||||
color: $color-teal;
|
||||
opacity: 0.8;
|
||||
text-align: center;
|
||||
top: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.date_field,
|
||||
.date_time_field {
|
||||
.input:before {
|
||||
@extend .icon-date:before;
|
||||
}
|
||||
}
|
||||
|
||||
.time_field {
|
||||
.input:before {
|
||||
@extend .icon-time:before;
|
||||
}
|
||||
}
|
||||
|
||||
.url_field {
|
||||
.input:before {
|
||||
@extend .icon-link:before;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// This is specifically for model that are a generated set of checkboxes/radios
|
||||
.model_multiple_choice_field .input li,
|
||||
.choice_field .input li {
|
||||
label {
|
||||
display: block;
|
||||
width: auto;
|
||||
float: none;
|
||||
padding-top: 0; // Negates padding added to label for the group of fields as a whole
|
||||
}
|
||||
}
|
||||
|
||||
.fields > li,
|
||||
.field-col {
|
||||
@include clearfix();
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 1.2em;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
@include clearfix();
|
||||
|
||||
// negative margin the bottom so it doesn't add too much space
|
||||
margin-bottom: -1.2em;
|
||||
}
|
||||
|
||||
.input {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// field sizing and alignment
|
||||
.field-small {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.halloeditor,
|
||||
.tagit {
|
||||
border-radius: 3px;
|
||||
padding: 0.4em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&.col1,
|
||||
&.col2,
|
||||
&.col3,
|
||||
&.col4,
|
||||
&.col5,
|
||||
&.col6,
|
||||
&.col7,
|
||||
&.col8,
|
||||
&.col9,
|
||||
&.col10,
|
||||
&.col11,
|
||||
&.col12 { clear: both;}
|
||||
}
|
||||
|
||||
li.inline .field {
|
||||
&.col1,
|
||||
&.col2,
|
||||
&.col3,
|
||||
&.col4,
|
||||
&.col5,
|
||||
&.col6,
|
||||
&.col7,
|
||||
&.col8,
|
||||
&.col9,
|
||||
&.col10,
|
||||
&.col11,
|
||||
&.col12 { clear: none;}
|
||||
}
|
||||
|
||||
// solve gutter issues of inline fields
|
||||
ul.inline li:first-child,
|
||||
li.inline:first-child {
|
||||
margin-left: -$grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
|
||||
// search-bars
|
||||
.search-bar {
|
||||
.required .field > label:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button-filter {
|
||||
height: 2.71em;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// file drop zones
|
||||
.drop-zone {
|
||||
border-radius: 5px;
|
||||
border: 2px dashed $color-grey-4;
|
||||
padding: $mobile-nice-padding;
|
||||
background-color: $color-grey-5;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
|
||||
.drop-zone-help {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.hovered {
|
||||
border-color: $color-teal;
|
||||
background-color: $color-input-focus;
|
||||
}
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.help {
|
||||
@include transition(opacity 0.2s ease);
|
||||
}
|
||||
|
||||
.label-uppercase {
|
||||
.field > label {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.help {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fields {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.field {
|
||||
@include row();
|
||||
}
|
||||
|
||||
.field-content {
|
||||
@include column(10, 0);
|
||||
}
|
||||
|
||||
.field-col {
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
|
||||
// anything less than 4 columns or greater than 6 is impractical
|
||||
&.col4 {
|
||||
label {
|
||||
@include column(2, 0, 4);
|
||||
}
|
||||
|
||||
.field-content {
|
||||
@include column(2, $padding, 4);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.col6 {
|
||||
label {
|
||||
@include column(2, 0, 6);
|
||||
}
|
||||
|
||||
.field-content {
|
||||
@include column(4, $padding, 6);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-above {
|
||||
.field > label,
|
||||
.field > .field-content {
|
||||
display: block;
|
||||
padding: 0 0 0.8em;
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
.wrapper {
|
||||
@include clearfix();
|
||||
height: 100vh;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
|
||||
float: left;
|
||||
position: relative;
|
||||
background-color: $color-grey-4;
|
||||
border-bottom: 1px solid $color-grey-3;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include row();
|
||||
background: $color-white;
|
||||
border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
|
||||
min-height: 100%;
|
||||
padding-bottom: 4em;
|
||||
position: relative; // yuk. necessary for positions for jquery ui widgets
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.content-wrapper {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 0;
|
||||
background-color: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.col1 {
|
||||
@include column(1);
|
||||
}
|
||||
|
||||
.col2 {
|
||||
@include column(2);
|
||||
}
|
||||
|
||||
.col3 {
|
||||
@include column(3);
|
||||
}
|
||||
|
||||
.col4 {
|
||||
@include column(4);
|
||||
}
|
||||
|
||||
.col5 {
|
||||
@include column(5);
|
||||
}
|
||||
|
||||
.col6 {
|
||||
@include column(6);
|
||||
}
|
||||
|
||||
.col7 {
|
||||
@include column(7);
|
||||
}
|
||||
|
||||
.col8 {
|
||||
@include column(8);
|
||||
}
|
||||
|
||||
.col9 {
|
||||
@include column(9);
|
||||
}
|
||||
|
||||
.col10 {
|
||||
@include column(10);
|
||||
}
|
||||
|
||||
.col11 {
|
||||
@include column(11);
|
||||
}
|
||||
|
||||
.col12 {
|
||||
@include column(12);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include row();
|
||||
}
|
||||
|
||||
.row-flush {
|
||||
@include row-flush();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
// Help text formatters
|
||||
.help-block {
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
color: $color-text-base;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.help-info,
|
||||
.help-warning,
|
||||
.help-critical {
|
||||
border-radius: 3px;
|
||||
padding-left: 3.5em;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
font-family: wagtail;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
top: 0.7em;
|
||||
content: '?';
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.help-info {
|
||||
background-color: lighten($color-blue, 30%);
|
||||
|
||||
&:before {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.help-warning {
|
||||
background-color: lighten($color-orange, 30%);
|
||||
|
||||
&:before {
|
||||
color: $color-orange;
|
||||
content: '!';
|
||||
}
|
||||
}
|
||||
|
||||
.help-critical {
|
||||
background-color: lighten($color-red, 40%);
|
||||
|
||||
&:before {
|
||||
color: $color-red;
|
||||
content: '!';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// Displays 'timesince' formatted date with full date on hover
|
||||
.human-readable-date {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: none;
|
||||
content: attr(title);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
visibility: hidden;
|
||||
|
||||
&:before {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
@import 'wagtailadmin/scss/variables-icons';
|
||||
// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
src: url('#{$font-root}wagtail.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.icon.teal {
|
||||
color: $color-teal;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// makes a link look like regular text
|
||||
.nolink {
|
||||
color: $color-text-base;
|
||||
|
||||
&:hover {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
a.underlined {
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
|
||||
.loading-mask {
|
||||
&.loading {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -15px 0 0 -15px;
|
||||
font-family: wagtail;
|
||||
animation: spin 0.5s infinite linear;
|
||||
content: '1';
|
||||
z-index: 2;
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
|
||||
@keyframes nod {
|
||||
from {
|
||||
transform: rotate(2deg);
|
||||
|
|
@ -463,9 +463,64 @@ body.explorer-open {
|
|||
}
|
||||
}
|
||||
|
||||
// stylelint-disable scss/media-feature-value-dollar-variable
|
||||
///////////////
|
||||
// Z-indexes //
|
||||
///////////////
|
||||
.nav-toggle {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
// Media query hacks to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
|
||||
.nav-wrapper {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Avoiding a stacking context for the content-wrapper saves us a world
|
||||
// of pain when dealing with overlays that are appended to the end of
|
||||
// <body>, eg Hallo & calendars. As long as content-wrapper remains floated,
|
||||
// the z-index shouldn't be required.
|
||||
|
||||
// .content-wrapper {
|
||||
// z-index: 3;
|
||||
// }
|
||||
.nav-submenu {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
footer,
|
||||
.logo {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.nav-main {
|
||||
.footer {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-submenu {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
// Allows overspill of messages banner onto left menu, but also explorer
|
||||
// to spill over main content
|
||||
.nav-wrapper {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
// footer is z-index: 100, so ensure the navigation sits on top of it.
|
||||
.nav-wrapper.submenu-active {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
///////////////////////
|
||||
// Media query hacks //
|
||||
///////////////////////
|
||||
|
||||
// to detect IE10+ which doesn't support 3d transform of static elements and needs a fallback
|
||||
// stylelint-disable scss/media-feature-value-dollar-variable
|
||||
@media all and (-ms-high-contrast: none),
|
||||
all and (-ms-high-contrast: active) {
|
||||
.wrapper {
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.media-placeholder {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background-color: #ccc;
|
||||
padding: 5px;
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 350px;
|
||||
max-height: 350px;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.capabilitymessage {
|
||||
display: block;
|
||||
background-color: $color-red;
|
||||
color: $color-white;
|
||||
padding: 1em 2em;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.status-msg {
|
||||
&.success {
|
||||
color: $color-green;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.privacy-indicator {
|
||||
.label-private,
|
||||
.label-public {
|
||||
&:before {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.public {
|
||||
.label-private {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.private {
|
||||
.label-public {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
.status-tag {
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.5em;
|
||||
border: 1px solid lighten($color-grey-2, 30%);
|
||||
color: lighten($color-grey-2, 30%);
|
||||
-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');
|
||||
|
||||
&.primary {
|
||||
color: $color-grey-2;
|
||||
border: 1px solid $color-grey-2;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
button.status-tag:hover,
|
||||
a.status-tag:hover,
|
||||
a.status-tag.primary:hover {
|
||||
border-color: $color-teal;
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
button.status-tag:hover {
|
||||
border-color: $color-teal-dark;
|
||||
background-color: $color-teal-darker;
|
||||
color: $color-white;
|
||||
}
|
||||
|
|
@ -92,6 +92,15 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-locked & {
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
// free tagging tags from taggit
|
||||
.tag {
|
||||
border-radius: 2px;
|
||||
background-color: $color-teal;
|
||||
padding-right: 0.5em;
|
||||
padding: 0.2em 0.5em;
|
||||
color: $color-white;
|
||||
line-height: 2em;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
font-family: wagtail;
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
content: 'u';
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.taglist & {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
a.tag:hover {
|
||||
background-color: $color-teal-darker;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.taglist {
|
||||
font-size: 0.9em;
|
||||
line-height: 2.4em;
|
||||
|
||||
h3 {
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@include media-breakpoint-up(sm) {
|
||||
.browsermessage {
|
||||
margin: 0 0 0 -150px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
html {
|
||||
background: $color-grey-4;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
transition: visibility 0s linear 0s, opacity 0.2s ease-out;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid $color-grey-4;
|
||||
border-width: 1px 0 0;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
// general image style
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
// These are the generic stylings for forms of any type.
|
||||
// If you're styling something specific to the page editing interface,
|
||||
// it probably ought to go in layouts/page-editor.scss
|
||||
form {
|
||||
ul,
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0 0 2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
@include visuallyhidden();
|
||||
}
|
||||
|
||||
label,
|
||||
.label {
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
color: $color-grey-1;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
padding: 0 0 0.8em;
|
||||
margin: 0;
|
||||
line-height: 1.3em;
|
||||
|
||||
.checkbox &,
|
||||
.radio & {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include column(2);
|
||||
padding-top: 1.2em;
|
||||
padding-left: 0;
|
||||
|
||||
.radio_select &,
|
||||
.model_multiple_choice_field &,
|
||||
.boolean_field &,
|
||||
.model_choice_field &,
|
||||
.image_field & {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Horrid specificity war
|
||||
.model_choice_field.select & {
|
||||
padding-top: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.halloeditor,
|
||||
.tagit {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
font-family: Open Sans,Arial,sans-serif;
|
||||
border: 1px solid $color-input-border;
|
||||
padding: 0.9em 1.2em;
|
||||
background-color: $color-fieldset-hover;
|
||||
color: $color-text-input;
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $color-input-focus;
|
||||
border-color: $color-input-focus-border;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&:disabled:hover,
|
||||
&[disabled]:hover {
|
||||
background-color: inherit;
|
||||
cursor: default;
|
||||
color: $color-grey-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset the arrow on `<select>`s in IE10+.
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// radio and check boxes
|
||||
input[type=radio],
|
||||
input[type=checkbox] {
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
height: 12px;
|
||||
width: auto;
|
||||
position: relative;
|
||||
margin-right: 27px;
|
||||
}
|
||||
|
||||
input[type=radio]:before {
|
||||
border-radius: 100%;
|
||||
font-family: wagtail;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -2px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
content: 'K';
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1.1em;
|
||||
padding: 4px;
|
||||
background-color: $color-white;
|
||||
color: $color-grey-4;
|
||||
border: 1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
input[type=radio]:checked:before {
|
||||
content: 'K';
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
height: 12px;
|
||||
width: auto;
|
||||
position: relative;
|
||||
margin-right: 27px;
|
||||
}
|
||||
|
||||
input[type=checkbox]:before {
|
||||
font-family: wagtail;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
content: 'x';
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-grey-4;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked:before {
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
|
||||
// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
|
||||
input[type=submit],
|
||||
input[type=reset],
|
||||
input[type=button],
|
||||
button {
|
||||
padding: 0 1em;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&.button-small {
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transitions
|
||||
fieldset,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
@include transition(background-color 0.2s ease);
|
||||
}
|
||||
|
|
@ -1,3 +1,18 @@
|
|||
@include webfont(Open Sans, opensans-light, 300, normal);
|
||||
@include webfont(Open Sans, opensans-regular, 400, normal);
|
||||
@include webfont(Open Sans, opensans-semibold, 600, normal);
|
||||
@include webfont(Open Sans, opensans-bold, 700, normal);
|
||||
@include webfont(Roboto Slab, robotoslab-regular, 400, normal);
|
||||
@include webfont(Roboto Slab, robotoslab-bold, 700, normal);
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased; // Do not remove!
|
||||
font-family: Open Sans, Arial, sans-serif;
|
||||
font-size: 80%;
|
||||
line-height: 1.5em;
|
||||
color: $color-text-base;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -18,10 +33,6 @@ h1 {
|
|||
text-transform: none;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.homepage & {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -30,10 +41,6 @@ h2 {
|
|||
font-family: Open Sans;
|
||||
font-weight: 600;
|
||||
color: $color-grey-2;
|
||||
|
||||
.page-explorer & {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -51,10 +58,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
a.underlined {
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
|
||||
code {
|
||||
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
|
||||
background-color: $color-fieldset-hover;
|
||||
|
|
@ -89,74 +92,3 @@ dt {
|
|||
dd {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.unbold {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Help text formatters
|
||||
.help-block {
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
clear: both;
|
||||
color: $color-text-base;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.help-info,
|
||||
.help-warning,
|
||||
.help-critical {
|
||||
border-radius: 3px;
|
||||
padding-left: 3.5em;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
font-family: wagtail;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
top: 0.7em;
|
||||
content: '?';
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.help-info {
|
||||
background-color: lighten($color-blue, 30%);
|
||||
|
||||
&:before {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.help-warning {
|
||||
background-color: lighten($color-orange, 30%);
|
||||
|
||||
&:before {
|
||||
color: $color-orange;
|
||||
content: '!';
|
||||
}
|
||||
}
|
||||
|
||||
.help-critical {
|
||||
background-color: lighten($color-red, 40%);
|
||||
|
||||
&:before {
|
||||
color: $color-red;
|
||||
content: '!';
|
||||
}
|
||||
}
|
||||
|
||||
.u-para {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// generic styles go in this folder.
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
// user avatars
|
||||
.avatar {
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.small {
|
||||
vertical-align: middle;
|
||||
margin: 0 0.5em;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: 0;
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,3 +5,12 @@
|
|||
vertical-align: middle;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
// For dropdowns
|
||||
.o-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.homepage h1 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.page-explorer h2 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
// =============================================================================
|
||||
// Arrows
|
||||
// =============================================================================
|
||||
.u-arrow:before {
|
||||
content: '';
|
||||
border: solid 0.35rem transparent;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.u-arrow--tl:before {
|
||||
bottom: 100%;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Default dropdown theme
|
||||
// =============================================================================
|
||||
|
||||
// .t-default {
|
||||
|
||||
// }
|
||||
.t-default .u-btn-current {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
.t-default .u-btn-current:hover {
|
||||
background: $color-teal;
|
||||
color: #fff;
|
||||
border-color: $color-teal;
|
||||
}
|
||||
|
||||
.t-default .u-btn-current:active {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current {
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.t-inverted .u-btn-current:hover {
|
||||
background-color: $color-teal-darker;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
// =============================================================================
|
||||
// Dark theme
|
||||
// =============================================================================
|
||||
.t-dark .u-link {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.t-dark .u-link:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.t-dark .u-background {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// States
|
||||
// =============================================================================
|
||||
.u-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-open .u-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.visuallyvisible {
|
||||
@include visuallyvisible;
|
||||
}
|
||||
|
||||
.visuallyhidden {
|
||||
@include visuallyhidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.nice-padding {
|
||||
padding-left: $mobile-nice-padding;
|
||||
padding-right: $mobile-nice-padding;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-left: $desktop-nice-padding;
|
||||
padding-right: $desktop-nice-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.divider-before {
|
||||
border-left: 1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
.divider-after {
|
||||
border-right: 1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body.reordering {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Show a transparency grid in background
|
||||
.show-transparency {
|
||||
background: url('#{$images-root}transparency.svg');
|
||||
}
|
||||
|
||||
// make a block-level element inline
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.unlist {
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
// utility class to allow things to be scrollable if their contents can't wrap more nicely
|
||||
.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.unbold {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -5,3 +5,7 @@
|
|||
.u-text-weight-normal {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.u-para {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// taggit tagging
|
||||
.tagit {
|
||||
padding: 0.6em 1.2em;
|
||||
|
||||
.tagit-choice {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
|
||||
// which get added after the core CSS, and otherweise trump our styles.
|
||||
.admin_tag_widget ul.tagit input[type='text'] {
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
// Additional specificity (.admin_tag_widget ) required to override tagit stylesheets,
|
||||
// which get added after the core CSS, and otherweise trump our styles.
|
||||
.admin_tag_widget ul.tagit li.tagit-choice-editable {
|
||||
padding: 0 23px 0 0;
|
||||
}
|
||||
|
||||
.ui-front { // provided by jqueryui but not high enough an index
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tagit-close {
|
||||
.ui-icon-close {
|
||||
margin-left: 1em;
|
||||
text-indent: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-icon-close:before {
|
||||
font-family: wagtail;
|
||||
display: block;
|
||||
color: $color-grey-3;
|
||||
content: 'g';
|
||||
}
|
||||
|
||||
.ui-icon-close:hover:before {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,156 @@
|
|||
// =============================================================================
|
||||
// Wagtail CMS main stylesheet
|
||||
// =============================================================================
|
||||
/* =============================================================================
|
||||
/* Wagtail CMS main stylesheet
|
||||
/* =============================================================================
|
||||
|
||||
@import 'objects';
|
||||
@import 'components';
|
||||
@import 'utilities';
|
||||
REFERENCE
|
||||
|
||||
* We organize our styles based on a combination of ITCSS and
|
||||
the Sass 7-1 pattern.
|
||||
* Classes should be written using BEM, which we modify to include a prefix.
|
||||
* Every BEM block should have its own file.
|
||||
|
||||
┌────────────┬────────────────────────┬──────────────┬────────┐
|
||||
│ Folder │ Contents │ ITCSS level │ Prefix │
|
||||
├────────────┼────────────────────────┼──────────────┼────────┤
|
||||
│ settings │ variables, maps, fonts │ 1 Settings │ │
|
||||
│ tools │ mixins, functions │ 2 Tools │ │
|
||||
│ generic │ resets │ 3 Generic │ │
|
||||
│ elements │ elements, no classes │ 4 Elements │ │
|
||||
│ objects │ classes │ 5 Objects │ o- │
|
||||
│ │ layout │ │ │
|
||||
│ components │ classes │ 6 Components │ c- │
|
||||
│ │ BEM blocks │ │ │
|
||||
│ overrides │ classes │ 7 Trumps │ u- │
|
||||
│ │ overrides, utilities │ │ │
|
||||
└────────────┴────────────────────────┴──────────────┴────────┘
|
||||
|
||||
SCSS: https://sass-lang.com/guide
|
||||
ITCSS: https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
|
||||
Sass 7-1 pattern: https://gist.github.com/rveitch/84cea9650092119527bc
|
||||
BEM: http://getbem.com/
|
||||
|
||||
|
||||
OTHER PREFIXES
|
||||
|
||||
┌────────┬─────────┐
|
||||
│ Prefix │ Purpose │
|
||||
├────────┼─────────┤
|
||||
│ t- │ theme │
|
||||
│ is- │ state │
|
||||
└────────┴─────────┘
|
||||
|
||||
==============================================================================*/
|
||||
|
||||
|
||||
/* SETTINGS
|
||||
These are variables, maps, and fonts.
|
||||
* No CSS should be produced by these files
|
||||
*/
|
||||
|
||||
@import 'settings';
|
||||
|
||||
|
||||
/* TOOLS
|
||||
These are functions and mixins.
|
||||
* No CSS should be produced by these files.
|
||||
*/
|
||||
|
||||
@import 'tools';
|
||||
|
||||
|
||||
/* GENERIC
|
||||
This is for resets and other rules that affect large collections of bare elements.
|
||||
* Changes to them should be very rare.
|
||||
*/
|
||||
|
||||
// @import 'generic/generic';
|
||||
|
||||
|
||||
/* ELEMENTS
|
||||
These are base styles for bare HTML elements.
|
||||
* Changes to them should be very rare.
|
||||
*/
|
||||
|
||||
@import 'elements/elements';
|
||||
@import 'elements/typography';
|
||||
@import 'elements/forms';
|
||||
|
||||
|
||||
/* OBJECTS
|
||||
These are classes related to layout, known as 'objects' in ITCSS or OOCSS.
|
||||
* This is for grids, wrappers, and other non-consmetic layout utilities.
|
||||
* These classes are prefixed with `.o-`.
|
||||
*/
|
||||
|
||||
@import 'objects/objects';
|
||||
@import 'objects/avatar';
|
||||
|
||||
|
||||
/* COMPONENTS
|
||||
These are classes for components.
|
||||
* These classes (unless legacy) are prefixed with `.c-`.
|
||||
* React component styles live in the same folders as their React components,
|
||||
which is the preferred pattern over housing them in the scss folder.
|
||||
*/
|
||||
|
||||
@import '../src/components/Transition/Transition';
|
||||
@import '../src/components/LoadingSpinner/LoadingSpinner';
|
||||
@import '../src/components/PublicationStatus/PublicationStatus';
|
||||
@import '../src/components/Explorer/Explorer';
|
||||
|
||||
// Legacy
|
||||
@import 'components/icons';
|
||||
@import 'components/tabs';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/dropdown.legacy';
|
||||
@import 'components/help-block';
|
||||
@import 'components/modals';
|
||||
@import 'components/forms';
|
||||
@import 'components/button';
|
||||
@import 'components/chooser';
|
||||
@import 'components/tag';
|
||||
@import 'components/listing';
|
||||
@import 'components/messages';
|
||||
@import 'components/messages.capability';
|
||||
@import 'components/messages.status';
|
||||
@import 'components/header';
|
||||
@import 'components/progressbar';
|
||||
@import 'components/main-nav';
|
||||
@import 'components/indicator';
|
||||
@import 'components/tooltips';
|
||||
@import 'components/logo';
|
||||
@import 'components/grid.legacy';
|
||||
@import 'components/breadcrumb';
|
||||
@import 'components/footer';
|
||||
@import 'components/loading-mask';
|
||||
@import 'components/media-placeholder';
|
||||
@import 'components/human-readable-date';
|
||||
@import 'components/link.legacy';
|
||||
@import 'components/privacy-indicator';
|
||||
@import 'components/status-tag';
|
||||
|
||||
|
||||
/* OVERRIDES
|
||||
These are classes that provide overrides.
|
||||
* Higher specificity is allowed here because these are overrides and imported last.
|
||||
*/
|
||||
|
||||
// VENDOR: overrides of vendor styles.
|
||||
@import 'overrides/vendor.datetimepicker';
|
||||
@import 'overrides/vendor.tagit';
|
||||
|
||||
|
||||
// UTILITIES: classes that do one simple thing.
|
||||
@import 'overrides/utilities.hidden';
|
||||
@import 'overrides/utilities.text';
|
||||
@import 'overrides/utilities.dropdowns';
|
||||
|
||||
// Legacy utilities
|
||||
@import 'overrides/utilities.text.legacy';
|
||||
@import 'overrides/utilities.hidden.legacy';
|
||||
@import 'overrides/utilities.legacy';
|
||||
|
||||
|
||||
// PAGES: page-specific overrides
|
||||
@import 'overrides/pages.homepage';
|
||||
@import 'overrides/pages.page-explorer';
|
||||
|
|
|
|||
|
|
@ -31,29 +31,3 @@
|
|||
$next: breakpoint-next($name);
|
||||
@return if($next, breakpoint-min($next) - 0.0625em, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name) {
|
||||
$min: breakpoint-min($name);
|
||||
@if $min {
|
||||
@media screen and (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name) {
|
||||
$max: breakpoint-max($name);
|
||||
@if $max {
|
||||
@media screen and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// Based upon the fine work and thoughts from Bootstrap v4.
|
||||
//
|
||||
// Copyright 2011-2018 The Bootstrap Authors
|
||||
// Copyright 2011-2018 Twitter, Inc.
|
||||
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name) {
|
||||
$min: breakpoint-min($name);
|
||||
@if $min {
|
||||
@media screen and (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name) {
|
||||
$max: breakpoint-max($name);
|
||||
@if $max {
|
||||
@media screen and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
NB: Due to Wagtail's browser support the following @font-face formats are required:
|
||||
- WOFF for modern browsers
|
||||
- WOFF2 For super-modern browsers
|
||||
|
||||
This example is all we need now:
|
||||
|
||||
@font-face {
|
||||
font-family: 'MyWebFont';
|
||||
src: url('myfont.woff2') format('woff2'),
|
||||
url('myfont.woff') format('woff');
|
||||
}
|
||||
|
||||
See https://css-tricks.com/snippets/css/using-font-face/ for more information.
|
||||
|
||||
*/
|
||||
|
||||
@mixin webfont($fontname, $filestub, $weight, $style:normal) {
|
||||
@font-face {
|
||||
font-family: '#{$fontname}';
|
||||
src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
|
||||
url('#{$font-root}#{$filestub}.woff') format('woff');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
|
@ -107,16 +107,6 @@
|
|||
}
|
||||
|
||||
|
||||
@mixin webfont($fontname, $filestub, $weight, $style:normal) {
|
||||
@font-face {
|
||||
font-family: '#{$fontname}';
|
||||
src: url('#{$font-root}#{$filestub}.woff2') format('woff2'),
|
||||
url('#{$font-root}#{$filestub}.woff') format('woff');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies given rules on hover, except for touch screens.
|
||||
// Relies on feature detection to add a no-touch class on the html element.
|
||||
@mixin hover {
|
||||
|
|
@ -15,6 +15,7 @@ Other features
|
|||
~~~~~~~~~~~~~~
|
||||
|
||||
* Added support for ``short_description`` for field labels in modeladmin's ``InspectView`` (Wesley van Lee)
|
||||
* Rearranged SCSS folder structure to the client folder and split them approximately according to ITCSS. (Naomi Morduch Toubman, Jonny Scholes, Janneke Janssen, Hugo van den Berg)
|
||||
|
||||
|
||||
Bug fixes
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var config = require('../config');
|
|||
*/
|
||||
gulp.task('watch', ['build'], function () {
|
||||
config.apps.forEach(function(app) {
|
||||
gulp.watch(path.join('./client/src/**/*.scss'), ['styles:sass']);
|
||||
gulp.watch(path.join('./client/**/*.scss'), ['styles:sass']);
|
||||
gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']);
|
||||
gulp.watch(path.join(app.sourceFiles, '*/css/**'), ['styles:css']);
|
||||
gulp.watch(path.join(app.sourceFiles, '*/js/**'), ['scripts']);
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin.
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
src: url('#{$font-root}wagtail.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// NB: Due to Wagtail's browser support the following @font-face formats are required:
|
||||
// - WOFF for modern browsers
|
||||
// - WOFF2 For super-modern browsers
|
||||
//
|
||||
// This example is all we need now:
|
||||
//
|
||||
// @font-face {
|
||||
// font-family: 'MyWebFont';
|
||||
// src: url('myfont.woff2') format('woff2'),
|
||||
// url('myfont.woff') format('woff');
|
||||
// }
|
||||
//
|
||||
// See https://css-tricks.com/snippets/css/using-font-face/ for more information.
|
||||
|
||||
|
||||
@include webfont(Open Sans, opensans-light, 300, normal);
|
||||
@include webfont(Open Sans, opensans-regular, 400, normal);
|
||||
@include webfont(Open Sans, opensans-semibold, 600, normal);
|
||||
@include webfont(Open Sans, opensans-bold, 700, normal);
|
||||
@include webfont(Roboto Slab, robotoslab-regular, 400, normal);
|
||||
@include webfont(Roboto Slab, robotoslab-bold, 700, normal);
|
||||
|
||||
@import 'wagtailadmin/scss/font-icons';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../../../client/scss/settings';
|
||||
@import '../../../../../client/scss/tools';
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import 'wagtailadmin/scss/mixins/breakpoints';
|
||||
@import 'wagtailadmin/scss/mixins/general';
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import 'wagtailadmin/scss/utilities/text';
|
||||
|
|
@ -1,268 +0,0 @@
|
|||
// user avatars
|
||||
.avatar {
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.small {
|
||||
vertical-align: middle;
|
||||
margin: 0 0.5em;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: 0;
|
||||
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-placeholder {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background-color: #ccc;
|
||||
padding: 5px;
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 350px;
|
||||
max-height: 350px;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Displays 'timesince' formatted date with full date on hover
|
||||
.human-readable-date {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
display: none;
|
||||
content: attr(title);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
visibility: hidden;
|
||||
|
||||
&:before {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// makes a link look like regular text
|
||||
.nolink {
|
||||
color: $color-text-base;
|
||||
|
||||
&:hover {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
// Status tags
|
||||
.status-tag {
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
padding: 0 0.5em;
|
||||
border: 1px solid lighten($color-grey-2, 30%);
|
||||
color: lighten($color-grey-2, 30%);
|
||||
-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');
|
||||
|
||||
&.primary {
|
||||
color: $color-grey-2;
|
||||
border: 1px solid $color-grey-2;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
button.status-tag:hover,
|
||||
a.status-tag:hover,
|
||||
a.status-tag.primary:hover {
|
||||
border-color: $color-teal;
|
||||
color: $color-teal;
|
||||
}
|
||||
|
||||
button.status-tag:hover {
|
||||
border-color: $color-teal-dark;
|
||||
background-color: $color-teal-darker;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.privacy-indicator {
|
||||
.label-private,
|
||||
.label-public {
|
||||
&:before {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.public {
|
||||
.label-private {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.private {
|
||||
.label-public {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// free tagging tags from taggit
|
||||
.tag {
|
||||
border-radius: 2px;
|
||||
background-color: $color-teal;
|
||||
padding-right: 0.5em;
|
||||
padding: 0.2em 0.5em;
|
||||
color: $color-white;
|
||||
line-height: 2em;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
font-family: wagtail;
|
||||
display: inline-block;
|
||||
color: $color-white;
|
||||
content: 'u';
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.taglist & {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
a.tag:hover {
|
||||
background-color: $color-teal-darker;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.taglist {
|
||||
font-size: 0.9em;
|
||||
line-height: 2.4em;
|
||||
|
||||
h3 {
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction
|
||||
.loading-mask {
|
||||
&.loading {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 30px;
|
||||
width: 30px;
|
||||
line-height: 30px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -15px 0 0 -15px;
|
||||
font-family: wagtail;
|
||||
animation: spin 0.5s infinite linear;
|
||||
content: '1';
|
||||
z-index: 2;
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid $color-grey-4;
|
||||
border-width: 1px 0 0;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
// general image style
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Show a transparency grid in background
|
||||
.show-transparency {
|
||||
background: url('#{$images-root}transparency.svg');
|
||||
}
|
||||
|
||||
// make a block-level element inline
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.unlist {
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
// utility class to allow things to be scrollable if their contents can't wrap more nicely
|
||||
.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.status-msg {
|
||||
&.success {
|
||||
color: $color-green;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
Plik diff jest za duży
Load Diff
|
|
@ -1,452 +1 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
|
||||
@import 'wagtailadmin/scss/components/icons';
|
||||
@import 'wagtailadmin/scss/components/typography';
|
||||
@import 'wagtailadmin/scss/components/tabs';
|
||||
@import 'wagtailadmin/scss/components/dropdowns';
|
||||
@import 'wagtailadmin/scss/components/modals';
|
||||
@import 'wagtailadmin/scss/components/forms';
|
||||
@import 'wagtailadmin/scss/components/listing';
|
||||
@import 'wagtailadmin/scss/components/messages';
|
||||
@import 'wagtailadmin/scss/components/formatters';
|
||||
@import 'wagtailadmin/scss/components/header';
|
||||
@import 'wagtailadmin/scss/components/progressbar';
|
||||
@import 'wagtailadmin/scss/components/datetimepicker';
|
||||
@import 'wagtailadmin/scss/components/main-nav';
|
||||
@import 'wagtailadmin/scss/components/indicator';
|
||||
@import 'wagtailadmin/scss/components/tooltips';
|
||||
@import 'wagtailadmin/scss/components/logo';
|
||||
|
||||
@import 'wagtailadmin/scss/utilities';
|
||||
|
||||
@import 'wagtailadmin/scss/fonts';
|
||||
|
||||
@import '../../../../../client/scss/styles';
|
||||
|
||||
html {
|
||||
background: $color-grey-4;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased; // Do not remove!
|
||||
font-family: Open Sans, Arial, sans-serif;
|
||||
font-size: 80%;
|
||||
line-height: 1.5em;
|
||||
color: $color-text-base;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
&.reordering {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
transition: visibility 0s linear 0s, opacity 0.2s ease-out;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.visuallyvisible {
|
||||
@include visuallyvisible;
|
||||
}
|
||||
|
||||
.visuallyhidden {
|
||||
@include visuallyhidden;
|
||||
}
|
||||
|
||||
.capabilitymessage {
|
||||
display: block;
|
||||
background-color: $color-red;
|
||||
color: $color-white;
|
||||
padding: 1em 2em;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@include clearfix();
|
||||
height: 100vh;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
|
||||
float: left;
|
||||
position: relative;
|
||||
background-color: $color-grey-4;
|
||||
border-bottom: 1px solid $color-grey-3;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include row();
|
||||
background: $color-white;
|
||||
border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
|
||||
min-height: 100%;
|
||||
padding-bottom: 4em;
|
||||
position: relative; // yuk. necessary for positions for jquery ui widgets
|
||||
}
|
||||
|
||||
.page-locked {
|
||||
.tab-content {
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@include transition(bottom 0.5s ease 1s);
|
||||
@include row();
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
|
||||
background: $color-grey-1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 0.5em;
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
color: $color-white;
|
||||
|
||||
ul {
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 250px;
|
||||
margin-right: $grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
.preview .dropdown {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding: 7px $grid-gutter-width / 2;
|
||||
font-size: 0.85em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-right: $grid-gutter-width;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.actions,
|
||||
.preview,
|
||||
.preview .dropdown {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.meta {
|
||||
p {
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@include unlist();
|
||||
@include clearfix();
|
||||
overflow: hidden;
|
||||
padding-top: 1.4em;
|
||||
font-size: 0.85em;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 0.5em 1.3em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $color-white;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5em;
|
||||
|
||||
a,
|
||||
span {
|
||||
color: $color-white;
|
||||
display: block;
|
||||
max-width: 12em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 1.6em;
|
||||
padding-right: 1em;
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
// z-index: 5;
|
||||
position: absolute;
|
||||
font-family: wagtail;
|
||||
content: 'n';
|
||||
padding-left: 20px;
|
||||
font-size: 2em;
|
||||
color: $color-teal-darker;
|
||||
line-height: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-teal-dark;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
border-left-color: $color-teal-dark;
|
||||
}
|
||||
|
||||
&.home {
|
||||
a {
|
||||
// stylelint-disable max-nesting-depth
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
width: 3em;
|
||||
font-size: 1em;
|
||||
text-overflow: clip;
|
||||
|
||||
&:before {
|
||||
font-size: 1.15rem;
|
||||
line-height: 0.85em;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header & li {
|
||||
&:before {
|
||||
border-left: 1em solid $color-white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.single {
|
||||
li a {
|
||||
white-space: nowrap;
|
||||
text-overflow: inherit;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.row {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.nice-padding {
|
||||
padding-left: $mobile-nice-padding;
|
||||
padding-right: $mobile-nice-padding;
|
||||
}
|
||||
|
||||
|
||||
// Z-indexes
|
||||
.nav-toggle {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Avoiding a stacking context for the content-wrapper saves us a world
|
||||
// of pain when dealing with overlays that are appended to the end of
|
||||
// <body>, eg Hallo & calendars. As long as content-wrapper remains floated,
|
||||
// the z-index shouldn't be required.
|
||||
|
||||
// .content-wrapper {
|
||||
// z-index: 3;
|
||||
// }
|
||||
.nav-submenu {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
footer,
|
||||
.logo {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.col1 {
|
||||
@include column(1);
|
||||
}
|
||||
|
||||
.col2 {
|
||||
@include column(2);
|
||||
}
|
||||
|
||||
.col3 {
|
||||
@include column(3);
|
||||
}
|
||||
|
||||
.col4 {
|
||||
@include column(4);
|
||||
}
|
||||
|
||||
.col5 {
|
||||
@include column(5);
|
||||
}
|
||||
|
||||
.col6 {
|
||||
@include column(6);
|
||||
}
|
||||
|
||||
.col7 {
|
||||
@include column(7);
|
||||
}
|
||||
|
||||
.col8 {
|
||||
@include column(8);
|
||||
}
|
||||
|
||||
.col9 {
|
||||
@include column(9);
|
||||
}
|
||||
|
||||
.col10 {
|
||||
@include column(10);
|
||||
}
|
||||
|
||||
.col11 {
|
||||
@include column(11);
|
||||
}
|
||||
|
||||
.col12 {
|
||||
@include column(12);
|
||||
}
|
||||
|
||||
.divider-before {
|
||||
border-left: 1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
.divider-after {
|
||||
border-right: 1px solid $color-grey-4;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include row();
|
||||
}
|
||||
|
||||
.row-flush {
|
||||
@include row-flush();
|
||||
}
|
||||
|
||||
.nice-padding {
|
||||
padding-left: $desktop-nice-padding;
|
||||
padding-right: $desktop-nice-padding;
|
||||
}
|
||||
|
||||
.browsermessage {
|
||||
margin: 0 0 0 -150px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-left: $desktop-nice-padding;
|
||||
margin-right: $desktop-nice-padding;
|
||||
width: calc(100% - #{$menu-width} - #{2 * $desktop-nice-padding});
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 0;
|
||||
background-color: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding-top: 0;
|
||||
background: $color-teal-darker;
|
||||
margin-left: -($desktop-nice-padding);
|
||||
margin-right: -($desktop-nice-padding);
|
||||
|
||||
li {
|
||||
a,
|
||||
span {
|
||||
&:after {
|
||||
color: $color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Z-indexes
|
||||
.nav-main {
|
||||
.footer {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-submenu {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
// Allows overspill of messages banner onto left menu, but also explorer
|
||||
// to spill over main content
|
||||
.nav-wrapper {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
// footer is z-index: 100, so ensure the navigation sits on top of it.
|
||||
.nav-wrapper.submenu-active {
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
.page404__bg {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
$color-addition-dark: #a6f3a6;
|
||||
$color-addition-light: #ebffeb;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
// overrides default nice padding defined in variables.scss
|
||||
$desktop-nice-padding: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/components/streamfield';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
@import '../../../../../../client/scss/components/streamfield';
|
||||
|
||||
.page-editor {
|
||||
.content-wrapper {
|
||||
|
|
@ -410,13 +408,13 @@ footer .preview {
|
|||
&_small-part {
|
||||
// IE11 requires units on the flex basis. Unitless breaks.
|
||||
// stylelint-disable-next-line length-zero-no-unit
|
||||
flex: 1 0 0px;
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
|
||||
&_big-part {
|
||||
// IE11 requires units on the flex basis. Unitless breaks.
|
||||
// stylelint-disable-next-line length-zero-no-unit
|
||||
flex: 5 0 0px;
|
||||
flex: 5 0 0%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
@import '../../../../../../client/src/components/Draftail/Draftail';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
@import '../../../../../../client/src/components/Hallo/Hallo';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/font-icons';
|
||||
@import 'wagtailadmin/scss/variables-icons';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
// =============================================================================
|
||||
// Variables
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
.breadcrumb {
|
||||
margin: -1.2em 0 2em;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
.content header {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
section {
|
||||
border-top: 1px solid $color-grey-3;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
.replace-file-input {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/grid';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
.replace-file-input {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import 'wagtailadmin/scss/variables';
|
||||
@import 'wagtailadmin/scss/mixins';
|
||||
@import 'wagtailadmin/scss/helpers';
|
||||
|
||||
.focal-point-chooser {
|
||||
position: relative;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue