123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336 |
- /* Block Alignments */
- /**
- * .alignleft
- */
- .alignleft {
- /*rtl:ignore*/
- text-align: left;
- /*rtl:ignore*/
- float: left;
- margin-top: 0;
- /*rtl:ignore*/
- margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
- margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
- }
- .entry-content > .alignleft {
- /*rtl:ignore*/
- float: left;
- @extend %responsive-alignleft;
- }
- /**
- * .aligncenter
- */
- .aligncenter {
- clear: both;
- display: block;
- float: none;
- margin-right: auto;
- margin-left: auto;
- text-align: center;
- }
- /**
- * .alignright
- */
- .alignright {
- /*rtl:ignore*/
- float: right;
- margin-top: 0;
- margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
- /*rtl:ignore*/
- margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
- }
- .entry-content > .alignright {
- /*rtl:ignore*/
- float: right;
- @extend %responsive-alignright;
- }
- // Make sure siblings of floated elements are top-aligned when nested
- .entry-content * > .alignleft + *,
- .entry-content * > .alignright + * {
- margin-top: 0;
- }
- /**
- * .aligndefault
- */
- .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment),
- .entry-content > *:not(.wp-block-button),
- .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
- @extend %responsive-aligndefault;
- }
- /**
- * .alignwide
- */
- .alignwide {
- clear: both;
- }
- .entry-content > .alignwide {
- @extend %responsive-alignwide;
- }
- .entry-content > .alignwide [class*="inner-container"] > .alignwide {
- @extend %responsive-alignwide-nested;
- }
- /**
- * .alignfull
- */
- .alignfull {
- clear: both;
- }
- .entry-content > .alignfull {
- @extend %responsive-alignfull;
- }
- .entry-content > .alignfull [class*="inner-container"] > .alignwide {
- @extend %responsive-alignwide-nested;
- }
- // Content alignment
- .has-left-content {
- justify-content: flex-start;
- }
- .has-right-content {
- justify-content: flex-end;
- }
- // Parallax
- .has-parallax {
- background-attachment: fixed;
- }
- // Gutenberg text color options
- .has-text-color {}
- .has-primary-color {
- color: #{map-deep-get($config-global, "color", "primary", "default")};
- }
- .has-secondary-color {
- color: #{map-deep-get($config-global, "color", "secondary", "default")};
- }
- .has-foreground-color {
- color: #{map-deep-get($config-global, "color", "foreground", "default")};
- }
- .has-foreground-light-color {
- color: #{map-deep-get($config-global, "color", "foreground", "light")};
- }
- .has-foreground-dark-color {
- color: #{map-deep-get($config-global, "color", "foreground", "dark")};
- }
- .has-background-light-color {
- color: #{map-deep-get($config-global, "color", "background", "light")};
- }
- .has-background-dark-color {
- color: #{map-deep-get($config-global, "color", "background", "dark")};
- }
- .has-background-dim,
- .has-background-color {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- @if map-has-key(map-deep-get($config-global, "color"), "tertiary") {
- .has-tertiary-color {
- color: #{map-deep-get($config-global, "color", "tertiary", "default")};
- }
- }
- // Gutenberg background-color options
- .has-background {
- p:not(.has-text-color),
- h1:not(.has-text-color),
- h2:not(.has-text-color),
- h3:not(.has-text-color),
- h4:not(.has-text-color),
- h5:not(.has-text-color),
- h6:not(.has-text-color) {
- color: currentcolor;
- }
- }
- .has-primary-background-color,
- .has-primary-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "primary", "default")};
- }
- .has-primary-background-color:not(.has-text-color),
- .has-primary-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- .has-secondary-background-color,
- .has-secondary-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
- }
- .has-secondary-background-color:not(.has-text-color),
- .has-secondary-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- .has-background-dim,
- .has-foreground-background-color,
- .has-foreground-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
- }
- .has-background-dim,
- .has-foreground-background-color:not(.has-text-color),
- .has-foreground-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- .has-foreground-light-background-color,
- .has-foreground-light-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
- }
- .has-foreground-light-background-color:not(.has-text-color),
- .has-foreground-light-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- .has-foreground-dark-background-color,
- .has-foreground-dark-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
- }
- .has-foreground-dark-background-color:not(.has-text-color),
- .has-foreground-dark-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- .has-background-light-background-color,
- .has-background-light-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "background", "light")};
- }
- .has-background-light-background-color:not(.has-text-color),
- .has-background-light-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "foreground", "default")};
- }
- .has-background-dark-background-color,
- .has-background-dark-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "background", "dark")};
- }
- .has-background-dark-background-color:not(.has-text-color),
- .has-background-dark-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "foreground", "default")};
- }
- .has-background-background-color,
- .has-background-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "background", "default")};
- }
- .has-background-background-color:not(.has-text-color),
- .has-background-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "foreground", "default")};
- }
- @if map-has-key(map-deep-get($config-global, "color"), "tertiary") {
- .has-tertiary-background-color,
- .has-tertiary-background-color.has-background-dim {
- background-color: #{map-deep-get($config-global, "color", "tertiary", "default")};
- }
- .has-tertiary-background-color:not(.has-text-color),
- .has-tertiary-background-color.has-background-dim:not(.has-text-color) {
- color: #{map-deep-get($config-global, "color", "foreground", "default")};
- }
- }
- // Gutenberg Font-size options
- .is-small-text,
- .has-small-font-size {
- font-size: #{map-deep-get($config-global, "font", "size", "sm")};
- }
- .is-regular-text,
- .has-regular-font-size,
- .has-normal-font-size,
- .has-medium-font-size {
- font-size: #{map-deep-get($config-global, "font", "size", "base")};
- }
- .is-large-text,
- .has-large-font-size {
- font-size: #{map-deep-get($config-global, "font", "size", "lg")};
- line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
- }
- .is-larger-text,
- .has-larger-font-size,
- .has-huge-font-size {
- font-size: #{map-deep-get($config-global, "font", "size", "xl")};
- line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
- }
- // Drop caps
- .has-drop-cap:not(:focus)::first-letter {
- @include font-family( map-deep-get($config-heading, "font", "family") );
- font-size: calc(2 * #{map-deep-get($config-heading, "font", "size", "h1")});
- font-weight: #{map-deep-get($config-heading, "font", "weight")};
- line-height: 0.66;
- text-transform: uppercase;
- font-style: normal;
- float: left;
- margin: 0.1em 0.1em 0 0;
- }
- .has-drop-cap:not(:focus)::after {
- content: "";
- display: table;
- clear: both;
- padding-top: 14px;
- }
- .desktop-only {
- display: none;
- @include media(mobile) {
- display: block;
- }
- }
- /**
- * Spacing Overrides
- */
- @import "spacing-overrides";
|