7c62e2a327
All payload css is now encapsulated inside CSS layers under `@layer
payload-default`
Any custom css will now have the highest possible specificity.
We have also provided a new layer `@layer payload` if you want to use
layers and ensure that your styles are applied after payload.
To override existing styles in a way that the existing rules of
specificity would be respected you can use the default layer like so
```css
@layer payload-default {
// my styles within the payload specificity
}
```
58 lines
917 B
SCSS
58 lines
917 B
SCSS
@import '../../scss/styles.scss';
|
|
|
|
@layer payload-default {
|
|
.not-found {
|
|
margin-top: var(--base);
|
|
display: flex;
|
|
|
|
& > * {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: base(0.8);
|
|
max-width: base(36);
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: base(0.4);
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
margin: 0;
|
|
}
|
|
|
|
&--margin-top-large {
|
|
margin-top: calc(var(--base) * 2);
|
|
}
|
|
|
|
@include large-break {
|
|
&--margin-top-large {
|
|
margin-top: var(--base);
|
|
}
|
|
}
|
|
|
|
@include small-break {
|
|
margin-top: calc(var(--base) / 2);
|
|
|
|
&--margin-top-large {
|
|
margin-top: calc(var(--base) / 2);
|
|
}
|
|
}
|
|
}
|
|
}
|