Skip to content

Instantly share code, notes, and snippets.

@mturnwall
Last active October 28, 2020 07:36
Show Gist options
  • Save mturnwall/ba79124179bdd2d7f7a48b2e2105cfc8 to your computer and use it in GitHub Desktop.
Save mturnwall/ba79124179bdd2d7f7a48b2e2105cfc8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
> 1%
last 2 versions
// ----
// libsass (v3.3.6)
// ----
@mixin heading-2() {
font-size: 1.1rem;
line-height: 1.2;
font-weight: 500;
}
@mixin button($color: #fff, $bg-color: #f00) {
background-color: $bg-color;
color: $color;
border-radius: 5px;
}
.modal {
$block: &;
position: fixed;
top: 0;
left: 0;
width: 500px;
&--activate {
width: 400px;
#{$block}__header {
margin-bottom: 20px;
}
#{$block}__sub-title {
@include heading-2;
max-width: 350px;
margin: -30px auto 5px;
}
#{$block}__button {
@include button();
&--next-step {
max-width: 350px;
margin: -30px auto 5px;
}
}
.helpline {
@include heading-2;
margin-bottom: 0;
margin-top: 15px;
&__sub-title {
font-weight: 400;
line-height: 2;
a {
font-weight: 400;
}
}
}
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 500px;
}
.modal--activate {
width: 400px;
}
.modal--activate .modal__header {
margin-bottom: 20px;
}
.modal--activate .modal__sub-title {
font-size: 1.1rem;
line-height: 1.2;
font-weight: 500;
max-width: 350px;
margin: -30px auto 5px;
}
.modal--activate .modal__button {
background-color: #f00;
color: #fff;
border-radius: 5px;
}
.modal--activate .modal__button--next-step {
max-width: 350px;
margin: -30px auto 5px;
}
.modal--activate .helpline {
font-size: 1.1rem;
line-height: 1.2;
font-weight: 500;
margin-bottom: 0;
margin-top: 15px;
}
.modal--activate .helpline__sub-title {
font-weight: 400;
line-height: 2;
}
.modal--activate .helpline__sub-title a {
font-weight: 400;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment