Daniil
57 lines
1.4 KiB
SCSS
57 lines
1.4 KiB
SCSS
.card {
|
|
@include mixins.reset-button;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
|
|
width: 160px;
|
|
height: 160px;
|
|
|
|
background: linear-gradient(180deg, variables.$bg-default 0%, variables.$bg-surface 100%);
|
|
border: 1px solid variables.$border-subtle;
|
|
border-radius: variables.$radius-lg;
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
color: variables.$text-secondary;
|
|
|
|
cursor: pointer;
|
|
transition:
|
|
transform variables.$duration-normal variables.$ease-out,
|
|
box-shadow variables.$duration-normal variables.$ease-out,
|
|
border-color variables.$duration-normal variables.$ease-out,
|
|
background variables.$duration-normal variables.$ease-out,
|
|
color variables.$duration-normal variables.$ease-out;
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
color: variables.$text-primary;
|
|
border-color: variables.$purple-300;
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
&.accent {
|
|
background: linear-gradient(135deg, variables.$accent-solid-start 0%, variables.$accent-solid-end 100%);
|
|
border-color: transparent;
|
|
color: variables.$accent-foreground;
|
|
box-shadow: 0 4px 14px variables.$accent-shadow;
|
|
|
|
&:hover {
|
|
filter: brightness(1.06);
|
|
box-shadow: 0 6px 20px variables.$accent-shadow-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
@include typography.font-body-s;
|
|
font-weight: 500;
|
|
}
|