4-row-components edit

/* scss/4-row-components/_wm-layout-row-component.scss */ // COMPONENT: ROW // Base setup for custom rows. // Use the .wm-row classes if you want to have consistency with other rows. // To create a new row, copy the code from row-base-component.php to use as a base. //====================================================================== // IMPORTANT NOTE ABOUT MARGINS //====================================================================== // WHEN ELEMENTS ARE OPTIONAL, YOU NEED TO ACCOUNT FOR SPACING BETWEEN TWO ELEMENTS WHEN ONE ISN'T THERE: // USE .firstElement + .secondElement { margin-top: etc } // which adds top margin to the second element ONLY when the first element is there // OTHERWISE, SET TOP & BOTTOM ELEMENT MARGINS TO 0 TO ENSURE CONSISTENCY // This allows things to display correctly when an element isn't there. // // EXAMPLES: // In this example, the title is set to not display // so the margin on the intro text needs to be set differently than if a title is there // .title:not(.sr-only) .intro-text { margin-top: 20px; } // // In this example, we set the top margin on all elements that follow the title // so the space below the title is always the same // &__title:not(.sr-only) + * { // margin-top: $wm-row-default-title-bottom-margin; // } // max-width for text content is set in the $sizesMap and call be called with either the // css variable --size-row-text-width-max or the function getSize("row", "text-width-max") // AVAILABLE OPTIONS // @mixin wm-row__noSidePadding: removes row side padding, then adds side padding for title, intro text, and more Button widths // mixin for default moreButton styles since I didn't include the wm-row__moreButton class in events or news feed rows like I should have. // passes arguments through to rightarrow mixin @mixin wm-row__moreButton( $color: var(--color-wmgold-55), $paddingfromtext: 7px, $movementamount: 11px, $useFontAwesome: true ) { // button and text css position: relative; display: inline-block; max-width: var(--size-row-text-width-max); margin: kspaces(lg) 0 0; padding: 0 kspaces(lg) !important; text-align: center; color: var(--theme-title-color); font-size: toRem(20); font-weight: normal; &:hover, &:focus { text-decoration: underline !important; font-weight: normal; } // remove padding on desktop so width goes to full text max @include breakpoint(calc(getSize("row", "text-width-max", true) + kspaces(lg))) { padding-left: 0 !important; padding-right: 0 !important; } // arrow css @include rightarrow( $color: $color, $paddingfromtext: $paddingfromtext, $movementamount: $movementamount, $useFontAwesome: $useFontAwesome ); } // mixin to use on rows with side padding removed // (Events, News Feed, Announcements) @mixin wm-row__noSidePadding() { --wm-row-side-padding: 0; @include breakpoint($mobile-to-wide-mobile-breakpoint) { --wm-row-side-padding: 0; } .wm-row__mainWrapper { max-width: 100%; } // adds side padding back to title, intro text and more button on mobile .wm-row__title, .wm-row__title > a, .wm-row__intro-text, .wm-row__moreButton { padding-left: var(--size-row-padding-side-mobile); padding-right: var(--size-row-padding-side-mobile); // remove padding on desktop so width goes to full text max @include breakpoint(calc(getSize("row", "text-width-max") + kspaces(lg))) { max-width: var(--size-row-text-width-max); padding-left: 0 !important; padding-right: 0 !important; } } } // variables are set in 3-variables/_wm-element-styles.scss so they can be used by themes which are loaded before this file .page-theme-wrapper { width: 100%; position: relative; } .wm-row { display: block; position: relative; z-index: 1; width: 100%; padding-top: var(--size-row-padding-top); padding-bottom: var(--size-row-padding-bottom); // set padding variable to update later in breakpoint --wm-row-side-padding: var(--size-row-padding-side-mobile); padding-left: var(--wm-row-side-padding); padding-right: var(--wm-row-side-padding); text-align: center; background-position: center; background-size: cover; background-color: var(--theme-base-color); color: var(--theme-text-color); @include breakpoint($mobile-to-wide-mobile-breakpoint) { // set side padding to desktop value --wm-row-side-padding: var(--size-row-padding-side-default); } &__mainWrapper { //responsible for // max-width of row content // centering of row content // text-align center of row content position: relative; width: 100%; max-width: var(--size-row-width-max); margin: 0 auto; padding: 0; text-align: center; // set default margin of all inner elements to 0 > * { margin: 0 auto; } } // title &__title, &__title > a { margin-top: -9px; // fixes change in spacing caused to line-height text-align: center; letter-spacing: 0; color: var(--theme-title-color); font-family: font(alt-heading-serif); font-size: toRem(32); font-weight: font(serif-weight, medium); line-height: 1.2; font-feature-settings: "lnum"; max-width: var(--size-row-text-width-max); @include breakpoint($mobile-to-wide-mobile-breakpoint) { font-size: toRem(40); } } // set default spacing between title and next element &__title:not(.sr-only) + * { margin-top: var(--size-row-title-margin-bottom); } // intro-text &__intro-text { // width: 100%; max-width: var(--size-row-text-width-max); margin: 0 auto; color: var(--theme-text-color); & > p:last-child { margin-bottom: 0; } a { color: var(--theme-link-color); &:hover { color: var(--theme-link-hover-color); } } } // remove intro text top margin if no title is present &__title.sr-only + &__intro-text > *:first-of-type { margin-top: 0; } // set default spacing between intro text and next element &__intro-text + * { margin-top: 44px; } &__moreButton { @include wm-row__moreButton(); } } .internal_row_link { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; transition: all 0.3s; // TODO: FIX THESE WAYWARD COLORS color: #fff; border-radius: 50%; background: var(--color-wmgreen-90); &:hover, &:focus { text-decoration: none; color: #fff; background: #000; } } // PRINT styles @media print { .wm-row { figure.rightcaption, figure.yt-right { float: right; margin-right: 0px; margin-left: $float-side-margin; } figure.yt-center { margin-right: auto !important; margin-left: auto !important; } figure.leftcaption, figure.yt-left { float: left; margin-right: $float-side-margin; margin-left: 0px; } figure.yt-left, figure.yt-right { clear: both; padding: 10px; border: 1px solid #c9c9c9 !important; } .yt-med, .yt-lg { border: 1px solid #c9c9c9 !important; background-color: #c9c9c9 !important; } } }