kopia lustrzana https://github.com/wagtail/wagtail
118 wiersze
2.2 KiB
SCSS
118 wiersze
2.2 KiB
SCSS
@use 'sass:math';
|
|
|
|
.footer {
|
|
@include transition(bottom 0.5s ease 1s);
|
|
@include row();
|
|
margin-top: $mobile-nice-padding;
|
|
margin-inline-start: $mobile-nice-padding;
|
|
margin-inline-end: $mobile-nice-padding;
|
|
z-index: 20;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
margin-top: 0;
|
|
margin-inline-start: calc(#{$desktop-nice-padding} - 0.75em);
|
|
margin-inline-end: $desktop-nice-padding;
|
|
width: auto;
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
|
|
&__emphasise-span-tags span {
|
|
color: theme('colors.warning.100');
|
|
}
|
|
|
|
// Don't apply horizontal margins if nice-padding is applied in the parent
|
|
.nice-padding & {
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
|
|
.footer__container {
|
|
border-radius: theme('borderRadius.sm') theme('borderRadius.sm') 0 0;
|
|
background: theme('colors.surface-menus');
|
|
color: theme('colors.text-label-menus-default');
|
|
transition: transform 1s;
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
width: 100%;
|
|
|
|
&:not(:first-child) {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
padding: theme('spacing.[2.5]');
|
|
margin-inline-end: 0;
|
|
|
|
&:not(:first-child) {
|
|
margin-inline-start: calc(-1 * theme('borderRadius.sm'));
|
|
}
|
|
}
|
|
|
|
&.footer__container--hidden {
|
|
transform: translateY(100%);
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer__save-warning {
|
|
font-size: 0.95em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
|
|
.icon {
|
|
font-size: 1.2em;
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
p {
|
|
margin: -0.2em 0 0 0;
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
margin-inline-end: 50px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// Footer control bar for performing actions on the page
|
|
.footer .actions {
|
|
width: 100%;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
width: 250px;
|
|
}
|
|
|
|
&--primary {
|
|
@include media-breakpoint-up(sm) {
|
|
width: 310px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions .button {
|
|
@apply w-leading-none w-inline-flex w-items-center;
|
|
font-weight: 600;
|
|
padding: 0 theme('spacing.3');
|
|
white-space: initial;
|
|
|
|
.icon {
|
|
width: theme('spacing.4');
|
|
margin-inline-end: theme('spacing.2');
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.actions .w-dropdown-button {
|
|
width: 100%;
|
|
|
|
> .button {
|
|
flex-grow: 1;
|
|
}
|
|
}
|