Something went wrong on our end
_view.scss 8.64 KiB
// @file
// Styles for a view.
@use '../../01-core' as *;
$view-padding: var(--size-2) !default;
$sidebar-width: 18.75rem;
// set the layout for the Views container when being used with Blog, news, events
// to match flexbox in multi list usage.
.view {
&s-element-container{
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
padding: 0;
position: relative;
width: 100%;
}
&s-projects-container{
margin-left: auto;
margin-right: auto;
max-width: var(--layout-max-width);
padding: var(--size-2) 0;
position: relative;
width: 100%;
.views-element-container{
padding: 0;
}
}
display: block;
padding: 0;
position: relative;
&.view-uw-view-contacts{
padding-left: 0;
padding-right: 0;
}
&-interact{
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
display: flex;
gap: var(--size-1);
grid-row-gap: 0;
min-height: var(--size-6);
justify-content: flex-end;
// Moving the rss button up for the blog news and events
margin-top: -3rem;
padding: 0;
.button{
margin: 0;
}
.path-services & {
margin-top: 0;
@media(min-width: $screen-md) {
margin-top: -3rem;
}
}
.path-events & {
margin-top: 0;
@media(min-width: 375px) {
margin-top: -3rem;
}
}
}
&-header{ grid-column: 1 / 3;
grid-row: 1 / 2;
width: 100%;
}
&-content {
grid-column: 1 / 2;
width: 100%;
:not(.media-library-item).views-row{
width: 100%;
}
}
&-content--message {
grid-column: 1 / 2;
margin: 0;
position: relative;
z-index: 2;
.message,
.messages{
margin: 0;
}
}
&-pager{
align-self: flex-end;
grid-column: 1 / 2;
margin-bottom: var(--grid-gap);
margin-top: var(--grid-gap);
width: 100%;
}
// With Filters
&.with-filters {
@media(min-width: $screen-lg) {
display: grid;
gap: var(--grid-gap);
grid-row-gap: 0;
grid-template-columns: auto $sidebar-width;
}
.view-content {
grid-column: 1 / 2;
width: 100%;
}
.view-filters {
h2{
margin-top: 0;
}
.views-projects-container &{
@media(min-width: $screen-lg) {
margin-top: var(--size-1);
h2{
margin-top: inherit;
}
}
}
background: var(--uw-white);
grid-column: 2 / 3;
height: 0;
overflow: hidden;
width: 0;
@media(min-width: $screen-lg) {
grid-row: 1 / 4;
height: inherit;
overflow: hidden;
width: inherit;
}
&:target {
grid-column: 1 / 2;
height: 100%;
margin-top: -3.5rem;
overflow: inherit;
padding: var(--size-2);
width: 100%; z-index: var(--layout-overlay);
~ .view-content {
display: none;
&--message{
display: none;
}
}
}
@media(min-width: $screen-lg) {
background: inherit;
&:target {
background: inherit;
grid-column: 2 / 3;
grid-row: inherit;
height: inherit;
margin-top: 0;
overflow: inherit;
padding: 0;
width: $sidebar-width;
~ .view-content {
@include uw-flex-grid();
align-self: flex-start;
grid-column: 1 / 2;
&--message{
align-self: flex-start;
display: block;
grid-column: 1 / 2;
}
}
}
}
}
}
// Ovewrite the view for when in services or catalog
&-uw-view-catalog-show-nodes,
&-uw-view-catalog-show-terms,
&-uw-view-taxonomy-show-nodes,
&-uw-view-taxonomy-show-terms,
&-uw-view-services,
&-uw-view-catalog-search,
&-uw-view-service-show-nodes,
&-uw-view-service-show-terms{
gap: inherit;
.view-content {
.item-list{
ul {
margin: 0;
padding: 0;
li {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
}
}
p{
margin: 0;
}
a {
margin-right: 0.2rem;
text-decoration: underline;
&:hover,
&:focus{
text-decoration: none;
}
}
h2{
font-size: var(--font-size-3);
span{ font-family: var(--font-primary);
font-size: var(--font-size-0);
@media(min-width: $screen-md) {
font-size: var(--font-size-1);
}
}
img{
float: left;
height: auto;
padding-right: var(--size-1);
width: 4.75rem;
}
}
.views-field-title,
.views-field-title-1{
font-size: var(--font-size-1);
margin: var(--size-1) 0 0 0;
}
}
}
}
//Setting the views views-row item grids.
.path-news,
.path-blog,
.path-events,
.view-uw-view-news-items,
.view-uw-view-blogs,
.view-uw-view-events,
.view-uw-view-projects,
.path-taxonomy,
.path-projects,
.path-profiles,
.path-opportunities {
.view-content {
display: block;
padding: 0;
@media(min-width: $screen-sm){
display: grid;
gap: var(--grid-gap);
grid-row-gap: 0;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, min-content);
}
.views-row{
margin-bottom: var(--grid-gap);
}
}
}
.path-news,
.path-blog,
.path-events,
.path-projects{
.view-content {
@media(min-width: $screen-sm){
.views-row{
&:first-of-type,
&:nth-of-type(10n){
grid-column: 1 / 3;
}
}
}
}
}
.view-uw-view-news-items,
.view-uw-view-blogs,
.view-uw-view-events,
.view-uw-view-projects,
.view-taxonomy-term{
.view-content { .views-row{
&:first-of-type{
grid-column: 1 / 3;
}
}
}
}
.path-catalogs,
.path-taxonomy,
.path-services {
.view.with-filters{
gap: var(--grid-gap);
}
.view-content {
.views-row{
width: 100%;
}
.item-list{
ul{
margin: 0;
padding: 0;
li{
list-style-type: none;
margin-left: 0;
padding-left: 0;
p{
margin: 0;
}
.views-field{
a {
margin-right: 0.2rem;
text-decoration: underline;
&:hover,
&:focus{
text-decoration: none;
}
}
h2{
font-size: var(--font-size-3);
margin: var(--size-3) 0 var(--size-1) 0;
span{
font-family: var(--font-primary);
font-size: var(--font-size-0);
@media(min-width: $screen-md) {
font-size: var(--font-size-1);
}
}
}
}
}
}
}
}
}
.path-taxonomy {
.view-uw-view-catalog-show-nodes {
.view-content {
padding: 0;
}
}
}
.path-contacts{
.views-row{
width: 100%;
}
}
.path-projects{ .view-content {
@media(min-width: $screen-sm) {
.views-row {
&:first-of-type,
&:nth-of-type(10n) {
grid-column: 1 / 3;
}
}
}
}
.view{
&.with-filters{
margin: 0;
.views-element-container {
grid-column: 1 / 3;
}
> .view-content {
margin: 0;
> h2{
grid-column: 1 / 3;
margin: 0;
width: 100%;
}
}
.view-footer{
padding: 0 0 var(--size-6) 0;
text-align: center;
@media(min-width: $screen-sm) {
grid-column: 1 / 3;
justify-self: center;
}
a{
@include button();
}
}
}
&.view-uw-view-projects{
&.view-display-id-search{
&_page{
.view-content{
margin-top: var(--size-1);
@media(min-width: $screen-md) {
margin-top: var(--size-4);
}
}
}
}
}
}
}
.uw-offcanvas--filter{
display: flex;
gap: var(--size-1);
justify-content: flex-end;
}
// Make views display properly in layout builder (particularly narrow columns).
.layout-builder-block.views-element-container {
padding: 1.5em; /* The default for layout builder blocks; for some reason it only works if I set it explicitly */
width: auto;
}