styles/common.scss
@use '@material/elevation';
@use 'styles/typography';
@use 'styles/sizes';
@mixin wrapper($width: sizes.$page-width-with-margin) {
max-width: $width;
margin: 0 auto;
padding: 0 24px;
}
@mixin field {
margin: 8px 0;
width: 100%;
display: inline-flex;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
:global(.mdc-select__anchor) {
width: 100%;
}
&:global(.mdc-select > .mdc-menu > .mdc-list > .mdc-list-item) {
white-space: nowrap;
}
&:not(:global(.mdc-menu-surface--anchor)) textarea {
min-height: 47px;
}
+ :global(.mdc-text-field-helper-line) {
margin: -6px 0 8px;
p {
font-weight: 450;
margin: 0;
}
}
textarea {
resize: vertical;
}
}
@mixin divider {
border-top: 1px solid var(--accents-2);
}
@mixin card-styles {
.card {
border: 1px solid var(--accents-2);
border-radius: 8px;
position: relative;
}
:global(html:not(.dark)) .card {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
}
@mixin error {
@include typography.typography('body2');
color: var(--error);
font-weight: 450;
font-size: 12px;
margin-top: 16px;
text-align: initial;
}
@mixin link {
color: var(--accents-5);
text-decoration: none;
transition: color 0.2s ease-in-out;
cursor: pointer;
border: none;
&:hover {
color: var(--on-background);
}
}