55 lines
1 KiB
CSS
55 lines
1 KiB
CSS
|
.card {
|
||
|
|
composes: surface from 'material.module.css';
|
||
|
|
border-radius: 2px;
|
||
|
|
box-shadow: var(--tutu-shadow-e2);
|
||
|
|
transition: var(--tutu-transition-shadow);
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: var(--tutu-color-surface-l);
|
||
|
|
|
||
|
|
&:focus-within,
|
||
|
|
&:focus-visible {
|
||
|
|
box-shadow: var(--tutu-shadow-e8);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:not(.manualMargin) {
|
||
|
|
&>:not(.cardNoPad) {
|
||
|
|
margin-inline: var(--card-pad, 20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
> :not(.cardGutSkip):first-child {
|
||
|
|
margin-top: var(--card-gut, 20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
>.cardGutSkip+*:not(.cardGutSkip) {
|
||
|
|
margin-top: var(--card-gut, 20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
> :not(.cardGutSkip):last-child {
|
||
|
|
margin-bottom: var(--card-gut, 20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.layoutCentered {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 448px;
|
||
|
|
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
& {
|
||
|
|
position: static;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
transform: none;
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: 1fr auto;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|