docs-v2/assets/styles/layouts/article/blocks/_beta.scss

105 lines
2.5 KiB
SCSS

.block.beta {
@include gradient($grad-burningDusk);
padding: 4px;
border: none;
border-radius: 25px !important;
.beta-content {
background: $article-bg;
border-radius: 21px;
padding: calc(1.65rem - 4px) calc(2rem - 4px) calc(.1rem + 4px) calc(2rem - 4px);
h4 {
color: $article-heading;
}
p {margin-bottom: 1rem;}
.expand-wrapper {
border: none;
margin: .5rem 0 1.5rem;
}
.expand {
border: none;
padding: 0;
.expand-content p {
margin-left: 2rem;
}
ul {
margin-top: -1rem;
&.feedback-channels {
padding: 0;
margin: -1rem 0 1.5rem 2rem;
list-style: none;
a {
color: $article-heading;
font-weight: $medium;
position: relative;
&.discord:before {
content: url('/svgs/discord.svg');
display: inline-block;
height: 1.1rem;
width: 1.25rem;
vertical-align: top;
margin: 2px .65rem 0 0;
}
&.community:before {
content: "\e900";
color: $article-heading;
margin: 0 .65rem 0 0;
font-size: 1.2rem;
font-family: 'icomoon-v2';
vertical-align: middle;
}
&.slack:before {
content: url('/svgs/slack.svg');
display: inline-block;
height: 1.1rem;
width: 1.1rem;
vertical-align: text-top;
margin-right: .65rem;
}
&.reddit:before {
content: url('/svgs/reddit.svg');
display: inline-block;
height: 1.1rem;
width: 1.2rem;
vertical-align: top;
margin: 2px .65rem 0 0;
}
&::after {
content: "\e90a";
font-family: 'icomoon-v4';
font-weight: bold;
font-size: 1.3rem;
display: inline-block;
position: absolute;
@include gradient($grad-burningDusk);
background-clip: text;
-webkit-text-fill-color: transparent;
right: 0;
transform: translateX(.25rem);
opacity: 0;
transition: transform .2s, opacity .2s;
}
&:hover {
&::after {transform: translateX(1.5rem); opacity: 1;}
}
}
}
}
}
}
}