7-page-content edit

/* scss/7-page-content/_sidebar.scss */ // page layout styles are in _main-layout.scss // sidebar content layout #sidebar { padding-top: kspaces(xl); padding-bottom: 0; @include breakpoint($sm-mobile-to-mobile-breakpoint) { border-top: 1px solid rgba(var(--color-wmsilver-25-rgb), 0.4); } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-bottom: 60px; padding: 0 0 0 kspaces(sm); border-top: none; border-left: 1px solid rgba(var(--color-wmsilver-25-rgb), 0.4); } // layout for all sidebar children & > *, .news-home-sidebar-video { flex-basis: 100%; flex-grow: 0; flex-shrink: 0; width: $sidebar-width; margin: 0 auto; margin-bottom: kspaces(xl); @include breakpoint($widget-mobile-to-tablet-breakpoint) { flex-basis: 100%; flex-grow: 1; flex-shrink: 0; width: 100%; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { width: $sidebar-width; max-width: $sidebar-width; } & aside { line-height: 1.4em; } } & .read-more-link { @include non-content-button-on-gray-styles(); display: block; display: inline-block; width: $sidebar-width !important; margin: 0 auto; margin-bottom: 22px; padding: 15px 12px; letter-spacing: 0.0625em; line-height: 1.6m; @include breakpoint($mobile-to-wide-mobile-breakpoint) { display: inline-block; width: auto; margin-right: auto; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { @include non-content-button-on-white-styles(); display: block; margin-right: 0; margin-bottom: 0; margin-left: 0; border: none; } } > *.sidebar__item .customContent + .read-more-link { margin-top: kspaces(xs); } p + .read-more-link { margin-top: kspaces(xs); } p:first-child { margin-top: 0; } } //GLOBAL STYLES FOR SIDEBAR ITEMS #sidebar { .sidebar__item { position: relative; display: block; clear: both; width: 100%; margin: 0 auto; margin-bottom: kspaces(xl); background-color: var(--color-pagenav-background); font-size: 0.94rem; @include breakpoint($desktop-to-wide-desktop-breakpoint) { background-color: transparent; &:last-child { margin-bottom: 0; } } } // set up padding for gray box display .sidebar__title ~ *, .news-home-sidebar-video figure { padding-right: 22px; padding-left: 22px; @include breakpoint($desktop-to-wide-desktop-breakpoint) { // remove padding from when there is a background color padding-right: 0; padding-left: 0; } } .news-home-sidebar-video figure { padding-top: 22px; } .sidebar__title { position: relative; z-index: 1; display: block; overflow: hidden; width: 100%; // this margin-bottom matches width between slider buttons in full desktop view margin-bottom: 5px; letter-spacing: 0.1em; text-transform: uppercase; color: white; background-color: white; font-size: 0.88rem; font-weight: font(sans-weight, demi); line-height: 1.2; span { position: relative; left: -10px; display: inline-block; max-width: 100%; margin-right: 10px; padding: 6px 12px 5px 20px; white-space: nowrap; color: white; background: var(--color-collegewoods-75); font-size: 0.83rem; font-size: 14px; font-weight: font(sans-weight, demi); &:before { position: absolute; z-index: -1; bottom: 1px; left: 4px; width: 100%; height: 100%; content: ""; transform: skew(20deg); background: var(--color-collegewoods-75); } } &:after { position: absolute; bottom: 0; left: 0; width: 100%; content: ""; border-bottom: 4px solid var(--color-collegewoods-75); } } } /**============================================== * * * NEW SIDEBAR STYLES FOR UPDATED CLASSES * * *=============================================**/ $sidebaritem-padding-mobile: kspaces(sm); $sidebaritem-padding-desktop: 0; .Sidebar { padding-top: kspaces(xl); padding-bottom: 0; @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-bottom: kspaces(xl); padding: 0 0 0 kspaces(sm); } // layout for all sidebar children & > * { flex-basis: 100%; flex-grow: 0; flex-shrink: 0; width: $sidebar-width; margin: 0 auto; margin-bottom: kspaces(xl); @include breakpoint($widget-mobile-to-tablet-breakpoint) { flex-basis: 100%; flex-grow: 1; flex-shrink: 0; width: 100%; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { width: $sidebar-width; max-width: $sidebar-width; } & aside { line-height: 1.4em; } } } .SidebarItem { width: 100%; background: var(--color-pagenav-background); font-size: 0.94rem; @include breakpoint($desktop-to-wide-desktop-breakpoint) { background: transparent; } } .SidebarItem__title { position: relative; z-index: 1; display: block; overflow: hidden; width: 100%; // this margin-bottom is set to match width between slider buttons in full desktop view margin-bottom: 5px; letter-spacing: 0.1em; text-transform: uppercase; color: white; background-color: white; font-size: toRem(14); font-weight: font(sans-weight, demi); line-height: 1.2; span { position: relative; left: -10px; display: inline-block; max-width: 100%; margin-right: 10px; padding: 6px 12px 5px 20px; white-space: nowrap; background: var(--color-collegewoods-75); &:before { position: absolute; z-index: -1; bottom: 1px; left: 4px; width: 100%; height: 100%; content: ""; transform: skew(20deg); background: var(--color-collegewoods-75); } } &:after { position: absolute; bottom: 0; left: 0; width: 100%; content: ""; border-bottom: 4px solid var(--color-collegewoods-75); } } // set padding for content after title // set up padding for gray box display .SidebarItem__title ~ * { padding-right: $sidebaritem-padding-mobile; padding-left: $sidebaritem-padding-mobile; @include breakpoint($desktop-to-wide-desktop-breakpoint) { padding-right: $sidebaritem-padding-desktop; padding-left: $sidebaritem-padding-desktop; } } .SidebarItem__button { @include non-content-button-on-gray-styles(); display: block; display: inline-block; width: $sidebar-width !important; margin: 0 auto $sidebaritem-padding-mobile; @include breakpoint($mobile-to-wide-mobile-breakpoint) { display: inline-block; width: auto; margin-right: auto; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { @include non-content-button-on-white-styles(); display: block; margin-right: 0; margin-bottom: $sidebaritem-padding-desktop; margin-left: 0; border: none; } } .SidebarCustomContent + .SidebarItem__button { margin-top: kspaces(xs); } // SIDEBAR LINK LISTINGS .SidebarListing { margin: 0; list-style: none; > li { @include list-items-child(); } > li:first-child { border-top: none; } // twitter tweaks a[href*="twitter.com"] { @include list-items-link(); display: inline-block; } a[href^="https://t.co"] { @include list-items-link(); padding-top: 0; font-weight: normal; } } .SidebarListing__link { @include list-items-link(); } .SidebarListing__author { margin-bottom: 0; } .SidebarListing__date { line-height: 1.4; } .SidebarListing__desc { word-break: break-word; color: var(--color-text-base); font-weight: normal; line-height: 1.5; overflow-wrap: break-word; p { margin: 0; } } .SidebarListing__date + .SidebarListing__desc, .SidebarListing__byline + .SidebarListing__desc { margin-top: 10px; } // CUSTOM CONTENT .SidebarCustomContent { margin: $sidebaritem-padding-mobile 0; @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-bottom: 0; } p { margin: 0 0 $sm-content-margin 0; margin: 0; line-height: 1.4em; &:last-child { margin-bottom: 0; } } p + p { margin: $sm-content-margin 0 0; } hr { margin: $sidebaritem-padding-mobile 0; } } .SidebarCustomContent h5, .SidebarCustomContent h6 { margin: $sidebaritem-padding-mobile 0 0; color: var(--color-wmgreen-90); font-size: 1rem; font-weight: 700; line-height: 1.4em; } // H5 list .SidebarCustomContent > h5 { @include list-items-child(); padding-bottom: 0; margin: 0; &:first-child { margin-top: -3px; border-top: none; a { padding-top: 0; } } &:nth-last-child(n + 2), &:nth-last-child(n + 2) ~ h5 { margin: 0.25em 0 0; } &:last-child a { padding-bottom: 0; } a { @include list-items-link(); font-size: $base-text-size; padding: kspaces(xs) 0; } } // WIDGET-SPECIFIC STYLES .--widget { padding-bottom: $sidebaritem-padding-mobile; @include breakpoint($widget-mobile-to-tablet-breakpoint) { padding-bottom: $sidebaritem-padding-desktop; } .SidebarItem__title { margin-bottom: $sidebaritem-padding-mobile; @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-bottom: 5px; } } } .SidebarFigure { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; max-width: 100%; @include breakpoint($widget-mobile-to-tablet-breakpoint) { flex-wrap: nowrap; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { display: block; } } .SidebarFigure__image { display: block; flex-basis: $sidebar-width; flex-grow: 1; flex-shrink: 0; margin: 0 auto $sidebaritem-padding-mobile; @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-right: kspaces(sm); } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-bottom: toRem(15); } & img, & iframe { display: block; max-width: $sidebar-width; margin: 0 auto; } & iframe { height: 200px; } } .SidebarFigure__caption { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; margin-top: 0; font-family: font(text-sans); line-height: 1.4; @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-top: 1em; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-top: 0; } & > p { margin-top: 0; } } .--news-home-sidebar-video { .SidebarFigure { padding-right: $sidebaritem-padding-mobile; padding-left: $sidebaritem-padding-mobile; @include breakpoint($desktop-to-wide-desktop-breakpoint) { padding-right: $sidebaritem-padding-desktop; padding-left: $sidebaritem-padding-desktop; } } .SidebarFigure__image { padding-top: kspaces(sm); } .SidebarFigure__caption { @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-top: 1em; padding-top: $sidebaritem-padding-mobile; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin-top: 0; padding-top: $sidebaritem-padding-desktop; } } } // BXSLIDER .--video-widget .bx-viewport { min-height: 250px !important; } .--bxslider { .bx-wrapper { margin-bottom: 0; border: 0; background: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -ms-touch-action: pan-y; touch-action: pan-y; } .SidebarFigure__image { margin: 0 auto toRem(68); flex-grow: 0; @include breakpoint($widget-mobile-to-tablet-breakpoint) { margin-right: kspaces(sm); } @include breakpoint($desktop-to-wide-desktop-breakpoint) { margin: 0; & img, & iframe { margin-bottom: toRem(70); } } } .no-controls .SidebarFigure__image img { margin-bottom: 0; } .bx-controls-direction { position: absolute; z-index: 50; // actual top value is set in secondary.js top: 155px; right: 0; left: 0; width: 100%; max-width: $sidebar-width; height: 2.97rem; margin: 0 auto; transition: top 0.35s ease-in; @include breakpoint($widget-mobile-to-tablet-breakpoint) { right: auto; } } .bx-controls-direction a { width: 49% !important; height: 46px; top: 0; text-indent: 0; } .bx-prev, .bx-next { @include non-content-button-on-gray-styles(); top: 0; text-indent: 0; @include breakpoint($desktop-to-wide-desktop-breakpoint) { @include non-content-button-on-white-styles(); border: none; &:hover { border: none; } } } .bx-prev { left: 0; } .bx-next { left: 51%; } .bx-prev:focus, .bx-next:focus { outline: 1px dotted var(--color-wmgreen-90); } @include breakpoint($widget-mobile-to-tablet-breakpoint) { padding-bottom: 22px; .bx-controls-direction { left: 22px; transform: none; } figure { display: flex; flex-direction: row; } } @include breakpoint($desktop-to-wide-desktop-breakpoint) { padding-bottom: 0; .bx-controls-direction { left: 0; } figure { display: flex; flex-wrap: wrap; } } } .--widget.--bxslider, .--video-widget { figure > a:focus::before, figure > iframe:focus::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: " "; border: 1px dotted #fff; } }