bulma/docs/_sass/global/newsletter.scss
2023-12-12 01:55:02 +00:00

185 lines
3.1 KiB
SCSS

@use "sass:math";
:root {
--newsletter-strip-size: 16px;
--newsletter-border-size: #{$block-spacing};
}
#newsletter {
background: $scheme-main-bis;
padding: var(--newsletter-border-size);
padding-top: 0;
.bd-drawing {
display: none;
}
}
.bd-newsletter-heading {
> .icon {
font-size: $title-size;
height: 1.125em;
width: 1.125em;
}
.title,
.subtitle {
font-weight: $weight-normal;
strong {
color: inherit;
font-weight: $weight-semibold;
}
small {
color: $text-light;
display: block;
font-size: 0.75em;
}
}
.subtitle {
color: $text-light;
}
.bd-fat-button {
font-weight: $weight-normal;
strong {
font-weight: $weight-semibold;
}
}
}
.bd-newsletter-fields {
display: grid;
grid-gap: math.div($block-spacing, 2);
grid-template-columns: minmax(20em, 1fr) auto;
}
.bd-newsletter-box {
background-color: $scheme-main;
background-image: url("/images/hab/newsletter-strip.png");
background-repeat: repeat-x;
background-size: 96px var(--newsletter-strip-size);
border-radius: 1.5em;
box-shadow: 0 0 0 1px $scheme-main-ter;
.icon {
align-self: flex-start;
}
form .input {
&:not(:focus):not(:hover) {
border-color: $border;
}
}
}
@include mobile {
.bd-newsletter-box {
padding-top: calc(#{$block-spacing} + var(--newsletter-strip-size));
}
.bd-newsletter-fields {
grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
}
}
@include touch {
.bd-newsletter-heading {
margin-bottom: var(--bd-index-vertical);
.icon {
float: left;
margin-right: math.div($block-spacing, 2);
}
.subtitle {
margin: (math.div($block-spacing, 2)) 0 !important;
}
form {
margin-top: $block-spacing;
}
}
}
@include tablet {
.bd-newsletter-box {
padding-top: calc(var(--bd-index-vertical) + var(--newsletter-strip-size));
}
}
@include desktop {
.bd-newsletter-heading {
display: grid;
// prettier-ignore
grid-template-columns:
($block-spacing * 2)
($block-spacing * 2)
1fr
1fr
($block-spacing * 2)
($block-spacing * 2);
> .icon {
grid-column: 2;
}
.title {
grid-column: 3;
max-width: 9em;
}
.subtitle {
grid-column: 4;
max-width: 10em;
}
form {
grid-column: 4;
}
}
}
@include widescreen {
:root {
--newsletter-border-size: #{math.div($bd-edge-width, 2)};
}
#newsletter {
.bd-drawing {
display: block;
}
}
.bd-newsletter-heading {
// prettier-ignore
grid-template-columns:
($block-spacing * 3)
($block-spacing * 3)
1fr
1fr
($block-spacing * 3)
($block-spacing * 3);
}
.bd-newsletter-box {
box-shadow: 0 1em 2em rgba(black, 0.05);
}
}
@include from(1780px) {
.bd-newsletter-heading {
// prettier-ignore
grid-template-columns:
minmax(#{$block-spacing * 2}, 1fr)
($block-spacing * 3)
calc(var(--container-width) / 2)
calc(var(--container-width) / 2)
($block-spacing * 3)
minmax(#{$block-spacing * 2}, 1fr);
}
}