2017-07-11 13:20:14 +00:00
|
|
|
// Messages are specific to Django's 'Messaging' system which adds messages into the session,
|
2015-11-03 12:15:33 +00:00
|
|
|
// for display on the next page visited. These appear as an animated banner at the top of the page.
|
|
|
|
//
|
|
|
|
// For inline help text, see typography.scss
|
2015-09-25 13:17:39 +00:00
|
|
|
.messages {
|
|
|
|
position: relative;
|
|
|
|
z-index: 5;
|
|
|
|
background-color: $color-grey-1;
|
2014-01-24 17:34:26 +00:00
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
.buttons {
|
|
|
|
margin-left: 1em;
|
2014-11-07 16:09:42 +00:00
|
|
|
}
|
|
|
|
|
2017-03-10 17:09:59 +00:00
|
|
|
> ul {
|
|
|
|
@include unlistimmediate();
|
2015-09-25 13:17:39 +00:00
|
|
|
position: relative;
|
|
|
|
top: -100px;
|
|
|
|
opacity: 0;
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2015-11-03 12:15:33 +00:00
|
|
|
|
2017-03-10 17:09:59 +00:00
|
|
|
> ul > li {
|
2016-10-26 21:20:08 +00:00
|
|
|
// @include nice-padding;
|
2017-08-18 00:28:38 +00:00
|
|
|
padding: 1.6em 3em 1.6em 1.6em;
|
2015-11-03 12:15:33 +00:00
|
|
|
color: $color-white;
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2014-05-08 15:05:12 +00:00
|
|
|
|
2017-03-10 17:09:59 +00:00
|
|
|
> ul > li:before {
|
2018-01-17 08:51:03 +00:00
|
|
|
@include font-smoothing;
|
2015-09-25 13:17:39 +00:00
|
|
|
margin-right: 0.5em;
|
|
|
|
font-size: 1.5em;
|
|
|
|
vertical-align: middle;
|
2014-05-08 15:05:12 +00:00
|
|
|
}
|
|
|
|
|
2020-06-29 15:17:04 +00:00
|
|
|
&-icon {
|
|
|
|
vertical-align: text-top;
|
|
|
|
margin-right: 0.5em;
|
|
|
|
width: 1.5em;
|
|
|
|
height: 1.5em;
|
|
|
|
}
|
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
.error {
|
2019-05-23 14:55:14 +00:00
|
|
|
background-color: $color-red-dark;
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2015-11-03 12:15:33 +00:00
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
.warning {
|
2019-05-23 14:55:14 +00:00
|
|
|
background-color: $color-orange-dark;
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2015-11-03 12:15:33 +00:00
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
.success {
|
2019-05-23 14:55:14 +00:00
|
|
|
background-color: $color-green-dark;
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2014-11-07 16:09:42 +00:00
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
.success .button:hover {
|
|
|
|
background-color: $color-teal-dark;
|
2014-11-07 16:09:42 +00:00
|
|
|
}
|
2015-11-03 12:15:33 +00:00
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
.button-secondary {
|
2015-11-03 12:15:33 +00:00
|
|
|
border-color: rgba(255, 255, 255, 0.5);
|
2019-05-23 14:55:14 +00:00
|
|
|
color: $color-white;
|
2015-11-03 12:15:33 +00:00
|
|
|
|
2015-09-25 13:17:39 +00:00
|
|
|
&:hover {
|
|
|
|
border-color: transparent;
|
2014-11-07 16:09:42 +00:00
|
|
|
}
|
|
|
|
}
|
2017-03-10 17:09:59 +00:00
|
|
|
|
|
|
|
.errorlist {
|
|
|
|
margin: 0.5em 0 0 1em;
|
|
|
|
}
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2014-03-03 17:56:24 +00:00
|
|
|
|
2017-03-10 17:09:59 +00:00
|
|
|
.messages.new > ul {
|
2015-11-03 17:12:12 +00:00
|
|
|
transition: none;
|
2015-09-25 13:17:39 +00:00
|
|
|
top: -100px;
|
2014-03-03 17:56:24 +00:00
|
|
|
}
|
|
|
|
|
2017-03-10 17:09:59 +00:00
|
|
|
.ready .messages > ul,
|
|
|
|
.messages.appear > ul {
|
2015-11-03 17:12:12 +00:00
|
|
|
transition: top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease;
|
2015-09-25 13:17:39 +00:00
|
|
|
opacity: 1;
|
|
|
|
top: 0;
|
2014-01-24 17:34:26 +00:00
|
|
|
}
|
2014-02-06 16:41:52 +00:00
|
|
|
|
2018-11-04 21:46:42 +00:00
|
|
|
@include media-breakpoint-up(sm) {
|
2017-03-10 17:09:59 +00:00
|
|
|
.messages > ul > li {
|
2016-10-26 21:20:08 +00:00
|
|
|
padding-left: 1.6em;
|
|
|
|
padding-right: 3em;
|
2014-02-06 16:41:52 +00:00
|
|
|
}
|
2015-11-03 12:15:33 +00:00
|
|
|
}
|