128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
@import '../config/import';
|
|
|
|
.crayons-link {
|
|
color: var(--link-color);
|
|
|
|
&:hover {
|
|
color: var(--link-color-hover);
|
|
}
|
|
|
|
&--brand {
|
|
color: var(--accent-brand);
|
|
|
|
&:hover {
|
|
color: var(--accent-brand-darker);
|
|
}
|
|
}
|
|
|
|
&--success {
|
|
color: var(--accent-success);
|
|
|
|
&:hover {
|
|
color: var(--accent-success-darker);
|
|
}
|
|
}
|
|
|
|
&--warning {
|
|
color: var(--accent-warning);
|
|
|
|
&:hover {
|
|
color: var(--accent-warning-darker);
|
|
}
|
|
}
|
|
|
|
&--danger {
|
|
color: var(--accent-danger);
|
|
|
|
&:hover {
|
|
color: var(--accent-danger-darker);
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
color: var(--link-color-secondary);
|
|
|
|
&:hover {
|
|
color: var(--link-color-secondary-hover);
|
|
}
|
|
}
|
|
|
|
&--current {
|
|
font-weight: var(--fw-medium);
|
|
color: var(--link-color-current);
|
|
background: var(--link-bg-current);
|
|
}
|
|
}
|
|
|
|
.crayons-link--header {
|
|
color: var(--link-color);
|
|
font-size: var(--fs-base);
|
|
font-weight: var(--fw-bold);
|
|
padding-left: var(--su-2);
|
|
margin-bottom: var(--su-2);
|
|
}
|
|
|
|
.crayons-link--block {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--su-3);
|
|
border-radius: var(--radius);
|
|
transition: background var(--transition-props), color var(--transition-props);
|
|
|
|
&:hover:not(.crayons-link--current) {
|
|
background: var(--link-bg-hover);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
padding: var(--su-2);
|
|
}
|
|
|
|
.crayons-icon {
|
|
margin-right: var(--su-2);
|
|
vertical-align: middle;
|
|
width: var(--su-6);
|
|
height: var(--su-6);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--fs-xl);
|
|
}
|
|
|
|
.crayons-indicator {
|
|
margin-left: auto;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Indented for when there's no icon
|
|
&--indented {
|
|
padding-left: calc(var(--su-2) + var(--su-7)); // 40px
|
|
}
|
|
}
|
|
|
|
.crayons-link--contentful {
|
|
display: block;
|
|
padding: var(--su-4);
|
|
border-bottom: 1px solid var(--body-bg);
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
border-bottom-right-radius: var(--radius);
|
|
border-bottom-left-radius: var(--radius);
|
|
}
|
|
|
|
.crayons-link__secondary {
|
|
color: var(--link-color-secondary);
|
|
font-size: var(--fs-s);
|
|
padding-top: var(--su-1);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--link-bg-hover-alt);
|
|
.crayons-link__secondary {
|
|
color: var(--link-color-secondary-hover);
|
|
}
|
|
}
|
|
}
|