83 lines
1.3 KiB
SCSS
83 lines
1.3 KiB
SCSS
.relay-widget {
|
|
@extend %flex-center-nowrap, %break-word;
|
|
|
|
border-bottom: $border;
|
|
padding: 2em var(--box-padding) 2em 0;
|
|
position: relative;
|
|
|
|
@include transition;
|
|
|
|
&::before {
|
|
color: $c-font-dimmer;
|
|
font-size: 5em;
|
|
width: 12rem;
|
|
text-align: center;
|
|
|
|
@include transition;
|
|
}
|
|
|
|
@include breakpoint($mq-not-xx-small) {
|
|
&::before {
|
|
display: none;
|
|
}
|
|
padding-left: var(--box-padding);
|
|
}
|
|
|
|
&--active::before {
|
|
color: mix($c-link, $c-bg-box, 80%);
|
|
}
|
|
|
|
&:hover {
|
|
background: mix($c-link, $c-bg-box, 10%);
|
|
h2 {
|
|
@include transition;
|
|
color: $c-link;
|
|
}
|
|
|
|
&--active::before {
|
|
color: mix($c-link, $c-bg-box, 100%);
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
@extend %link-overlay;
|
|
}
|
|
|
|
& > div {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
p {
|
|
margin: 0.5em 0 0 0;
|
|
&:first-child {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
|
|
&__info {
|
|
@extend %flex-between-nowrap;
|
|
&__meta {
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&.tour-tier {
|
|
&--3 {
|
|
&::before {
|
|
font-size: 3.5em;
|
|
}
|
|
h2 {
|
|
@include fluid-size('font-size', 13px, 23px);
|
|
}
|
|
}
|
|
&--5 {
|
|
@extend %box-neat;
|
|
border: 3px solid $c-border;
|
|
&.relay-widget--active {
|
|
border-color: $c-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|