Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
424 lines (334 sloc) 5.89 KB
/* Blocks
---------------------------------------------------------------------------------------------------- */
/* Typographical Elements
--------------------------------------------- */
body {
@include base-style();
}
a {
color: $highlight;
text-decoration: none;
@extend %transition;
&:hover {
text-decoration: underline;
}
svg {
@extend %transition;
}
}
strong {
font-weight: 700;
}
ol,
ul {
margin: 0;
padding: 0;
}
code,
pre {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
}
code {
padding: 2px 4px;
white-space: nowrap;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
line-height: 18px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
}
pre code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
cite {
font-style: normal;
}
.clearfix {
@include clearfix;
}
/* Paragraph
--------------------------------------------- */
p {
margin: 0 0 $base-margin;
padding: 0;
&.large,
&.has-large-font-size {
@include font-sizes( 18px, null, 20px );
}
&.has-regular-font-size {
font-size: 16px;
}
&.small,
&.has-small-font-size {
font-size: 12px;
}
}
/* Headings
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
color: $base-color;
line-height: 1.2;
font-weight: 600;
margin-bottom: 16px;
a {
color: $base-color;
&:hover {
color: $highlight;
text-decoration: none;
}
}
&:focus {
outline: none;
}
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 15px;
}
/* Button
--------------------------------------------- */
$default: nth( nth( $colors, 1 ), 2 ); // first color in $colors array
.wp-block-button__link {
border-radius: 0;
&:hover {
text-decoration: none;
}
.is-style-full &,
&.full {
display: block;
width: 100%;
}
&:not(.has-text-color) {
color: white;
&:hover {
color: white;
}
}
&:not(.has-background) {
background-color: $default;
&:hover,
&:focus {
background-color: darken( $default, 20% );
}
}
@each $name, $color in $colors {
&.has-#{$name}-color:hover,
&.has-#{$name}-color:focus {
color: $color;
}
&.has-#{$name}-background-color:hover,
&.has-#{$name}-background-color:focus {
background-color: darken( $color, 20% );
}
}
}
/* Blockquote
--------------------------------------------- */
blockquote,
blockquote.wp-block-quote {
background: transparent;
text-align: left;
p {
color: $highlight;
font-size: 24px;
font-style: normal;
font-weight: 400;
}
cite,
.wp-block-quote__citation {
color: $highlight;
display: block;
font-size: 16px;
font-weight: 700;
margin-top: 12px;
text-transform: uppercase;
}
p:last-of-type {
margin-bottom: 0;
}
&.is-large,
&.is-style-large {
margin: calc( 2 * $block-margin ) auto;
p {
@include font-sizes( 24px, 36px );
}
cite {
text-align: left;
}
}
}
/* Pull Quote
--------------------------------------------- */
.wp-block-pullquote {
border: none;
padding: 0;
blockquote {
border-left: 0;
border-top: 8px solid $highlight;
border-bottom: 8px solid $highlight;
padding: 16px 0;
text-align: center;
max-width: 50%;
margin: 0 auto;
}
&.alignleft,
&.alignright {
blockquote {
max-width: 100%;
}
}
}
/* Separator
--------------------------------------------- */
.wp-block-separator,
hr {
background: transparent;
border: none;
width: 100%;
height: 32px;
position: relative;
&::before {
background: $border-color;
content: '';
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
margin-top: -.5px;
}
}
/* Image
--------------------------------------------- */
img {
display: block;
max-width: 100%;
height: auto;
}
.wp-block-image figcaption {
color: $grey_7;
text-align: left;
font-size: 14px;
font-style: normal;
}
/* Tables
--------------------------------------------- */
.wp-block-table {
border-collapse: collapse;
width: 100%;
td, th {
padding: .5em;
border: 1px solid;
}
}
/* Media And Text
--------------------------------------------- */
.wp-block-media-text.is-stacked-on-mobile {
@include media('<small') {
// stack into single column sooner than block editor default
grid-template-columns: 1fr;
// !important needed to force media to show above content on smaller
// screens when block is set to Media on the right, Text on the left
grid-template-areas:
"media-text-media"
"media-text-content" !important;
// add margin between media and text when in one column
.wp-block-media-text__media {
margin-bottom: $margin_2x;
}
}
}
/* Color Options
--------------------------------------------- */
@each $name, $color in $colors {
.has-#{$name}-color {
color: $color;
}
.has-#{$name}-background-color {
background-color: $color;
}
}
/* WPForms
--------------------------------------------- */
div.wpforms-container {
.wpforms-title {
@include font-sizes( 24px, 32px );
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
padding: 0;
}
.wpforms-description {
margin: 0 0 16px;
padding: 0;
}
.wpforms-field {
padding: 0;
margin-bottom: 32px;
}
.wpforms-field-label {
font-size: 16px;
}
.wpforms-recaptcha-container {
padding: 0;
@include media(">=tablet") {
margin-bottom: -78px;
}
}
.wpforms-submit-container {
padding: 0;
margin-top: 32px;
text-align: right;
}
&.one-line {
@include clearfix;
@include media(">=tablet") {
.wpforms-field-container {
display: table;
width: calc(100% - 110px);
float: left;
.wpforms-field {
display: table-cell;
padding-right: 16px;
margin: 0;
}
}
.wpforms-submit-container {
float: right;
width: 110px;
clear: none;
margin: 0;
}
}
}
}
You can’t perform that action at this time.