@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-useful-links {
--border-color: #{$primary};
&.theme--dark {
--border-color: rgba(255,255,255,0.3);
.block-useful-links{
&__link {
span {
background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right-short--white.svg');
}
}
}
}
&__meta {
display: flex;
flex-direction: row;
gap: rem-calc(16);
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
@include margin-bottom( rem-calc(60) );
.heading {
margin-bottom: 0;
color: var( --text-color );
}
}
&__links-col {
//
}
&__links-row {
.block-useful-links__links-col {
position: relative;
&:before {
width: calc(100% - 15px);
height: 1px;
content: '';
background-color: var( --border-color );
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%,0,0);
}
@include bp($lg) {
&:last-child() {
.block-useful-links__link {
border-bottom: 1px solid var( --border-color );
}
}
}
@include bp($md) {
&:nth-last-child(-n + 2) {
.block-useful-links__link {
border-bottom: 1px solid var( --border-color );
}
}
}
@include bp($lg) {
&:nth-last-child(-n + 3) {
.block-useful-links__link {
border-bottom: 1px solid var( --border-color );
}
}
}
}
}
&__link {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
@include padding-top( rem-calc(20) );
@include padding-bottom( rem-calc(20) );
color: var( --text-color );
text-decoration: none;
transition: 0.3s var( --ease );
transition-property: transform, opacity;
gap: rem-calc(16 0);
&:hover {
// transform: translate3d(0,-10%,0);
opacity: 0.5;
}
picture {
width: rem-calc(55);
height: rem-calc(30);
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
@include margin-right( rem-calc(16) );
@include bp($lg) {
width: rem-calc(110);
height: rem-calc(60);
@include margin-right( rem-calc(28) );
}
}
p {
&.link-name {
flex-shrink: 0;
margin-right: rem-calc(8);
margin-bottom: 0;
}
}
}
&__link-meta {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-grow: 1;
@include bp($lg) {
width: 100%;
}
@include bp($xl) {
width: auto;
}
span {
width: rem-calc(30);
height: rem-calc(15);
flex-shrink: 0;
margin-left: auto;
background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right-short.svg');
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
@include bp($lg) {
width: rem-calc(60);
height: rem-calc(30);
}
}
}
}
Animation: