Skip to content

GitLab

U
uw_wcms_gesso
Commit f2f28afc authored by m26lebla's avatar m26lebla
Browse files
Options

additional css to make the label same size as wcms2 - presentation layer... 

additional css to make the label same size as wcms2 -  presentation layer changes to grid the outputfor the views for blog,news, events landing pages
parent d90bd5cb
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 165 deletions
css/styles.css
View file @ f2f28afc
......@@ -989,12 +989,14 @@ fieldset {
input {
line-height: normal; }
label {
label,
.label {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 16px;
font-size: 20.256px;
font-weight: 400;
margin-bottom: 1rem; }
label abbr {
margin-bottom: 0.5rem; }
label abbr,
.label abbr {
display: inline;
font-size: 18px; }
......@@ -1718,163 +1720,6 @@ svg:not(:root) {
padding: 0;
width: 100%; }
.layout--uwfivecol {
display: grid; }
.layout--uwfivecol.even-split {
grid-template-columns: 20% 20% 20% 20% 20%; }
.layout--uwfivecol.larger-left {
grid-template-columns: 40% 15% 15% 15% 15%; }
.layout--uwfivecol.larger-second {
grid-template-columns: 15% 40% 15% 15% 15%; }
.layout--uwfivecol.larger-third {
grid-template-columns: 15% 15% 40% 15% 15%; }
.layout--uwfivecol.larger-fourth {
grid-template-columns: 15% 15% 15% 40% 15%; }
.layout--uwfivecol.larger-right {
grid-template-columns: 15% 15% 15% 15% 40%; }
.layout--uwfivecol.legacy-23-19-19-19-20 {
grid-template-columns: 23% 19% 19% 19% 20%; }
.layout--uwfivecol .layout__region--first {
grid-column: 1 / 2; }
.layout--uwfivecol .layout__region--second {
grid-column: 2 / 3; }
.layout--uwfivecol .layout__region--third {
grid-column: 3 / 4; }
.layout--uwfivecol .layout__region--fourth {
grid-column: 4 / 5; }
.layout--uwfivecol .layout__region--fifth {
grid-column: 5 / 6; }
.layout--uwfourcol {
display: grid; }
.layout--uwfourcol .layout__region--first {
grid-column: 1 / 2; }
.layout--uwfourcol .layout__region--second {
grid-column: 2 / 3; }
.layout--uwfourcol .layout__region--third {
grid-column: 3 / 4; }
.layout--uwfourcol .layout__region--fourth {
grid-column: 4 / 5; }
.layout--uwfourcol.even-split {
grid-template-columns: 25% 25% 25% 25%; }
.layout--uwfourcol.larger-left {
grid-template-columns: 50% 16.67% 16.67% 16.66%; }
.layout--uwfourcol.larger-second {
grid-template-columns: 16.67% 50% 16.67% 16.66%; }
.layout--uwfourcol.larger-third {
grid-template-columns: 16.67% 16.67% 50% 16.66%; }
.layout--uwfourcol.larger-right {
grid-template-columns: 16.67% 16.67% 16.66% 50%; }
.layout--uwfourcol.legacy-23-27-27-23 {
grid-template-columns: 23% 27% 27% 23%; }
.layout--invertedlleft {
display: grid; }
.layout--invertedlleft.even-split {
grid-template-columns: 50% 25% 25%; }
.layout--invertedlleft.larger-left {
grid-template-columns: 50% 33.5% 16.5%; }
.layout--invertedlleft.larger-right {
grid-template-columns: 50% 16.5% 33.5%; }
.layout--invertedlleft .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 3; }
.layout--invertedlleft .layout__region--second {
grid-column: 2 / 3;
grid-row: 1 / 2; }
.layout--invertedlleft .layout__region--third {
grid-column: 3 / 4;
grid-row: 1 / 2; }
.layout--invertedlleft .layout__region--fourth {
grid-column: 2 / 4;
grid-row: 2 / 3; }
.layout--invertedlright {
display: grid; }
.layout--invertedlright.even-split {
grid-template-columns: 25% 25% 50%; }
.layout--invertedlright.larger-left {
grid-template-columns: 33.5% 16.5% 50%; }
.layout--invertedlright.larger-right {
grid-template-columns: 16.5% 33.5% 50%; }
.layout--invertedlright .layout__region--first {
grid-column: 1 / 2;
grid-row: 1 / 2; }
.layout--invertedlright .layout__region--first {
grid-column: 2 / 3;
grid-row: 1 / 2; }
.layout--invertedlright .layout__region--third {
grid-column: 1 / 3;
grid-row: 2 / 3; }
.layout--invertedlright .layout__region--fourth {
grid-column: 3 / 4;
grid-row: 1 / 3; }
.layout--uwfourcol {
display: grid;
grid-template-columns: 100%; }
.layout--uwfourcol .layout__region--first {
grid-column: 1 / 2; }
.layout--uwthreecol {
display: grid; }
.layout--uwthreecol .layout__region--first {
grid-column: 1 / 2; }
.layout--uwthreecol .layout__region--second {
grid-column: 2 / 3; }
.layout--uwthreecol .layout__region--third {
grid-column: 3 / 4; }
.layout--uwthreecol.even-split {
grid-template-columns: 33% 34% 33%; }
.layout--uwthreecol.larger-left {
grid-template-columns: 50% 25% 25%; }
.layout--uwthreecol.larger-middle {
grid-template-columns: 25% 50% 25%; }
.layout--uwthreecol.larger-right {
grid-template-columns: 25% 25% 50%; }
.layout--uwthreecol.legacy-38-38-24 {
grid-template-columns: 38% 38% 24%; }
.layout--uwthreecol.legacy-24-38-38 {
grid-template-columns: 24% 38% 38%; }
.layout.uw-contained-width {
margin-left: auto;
margin-right: auto;
max-width: 63.1875rem;
padding: 0 16px; }
@media (min-width: 80rem) {
.layout.uw-contained-width {
padding-left: 0;
padding-right: 0; } }
.layout--uwtwocol {
display: grid; }
.layout--uwtwocol .layout__region--first {
grid-column: 1 / 2; }
.layout--uwtwocol .layout__region--second {
grid-column: 2 / 3; }
.layout--uwtwocol.larger-left {
grid-template-columns: 67% 33%; }
.layout--uwtwocol.larger-right {
grid-template-columns: 33% 67%; }
.layout--uwtwocol.even-split {
grid-template-columns: 50% 50%; }
.l-media {
display: flex;
flex-direction: column; }
......@@ -5062,6 +4907,35 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
margin-right: auto;
text-align: center; }
.views-element-container {
margin-left: auto;
margin-right: auto;
max-width: 63.1875rem;
padding: 0 16px;
padding: 1rem; }
@media (min-width: 80rem) {
.views-element-container {
padding-left: 0;
padding-right: 0; } }
@media (min-width: 80rem) {
.views-element-container {
padding: 1rem 0; } }
.view-content {
display: inline-flex;
flex-flow: row wrap; }
.view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
margin: 1rem;
width: 100%; }
@media (min-width: 40.06rem) {
.view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
flex-grow: 1;
width: 45%; } }
@media (min-width: 63.1875rem) {
.view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
width: 32%; } }
.view__filters {
margin-bottom: 1rem; }
......
source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
View file @ f2f28afc
......@@ -63,11 +63,12 @@ input {
// input[type='url'] {}
// input[type='week'] {}
label {
label,
.label{
font-family: $form-label-font-family;
font-size: gesso-font-size(0);
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
margin-bottom: rem(gesso-spacing(sm));
margin-bottom: rem(gesso-spacing(xs));
abbr {
display: inline;
font-size: gesso-font-size(1);
......
source/_patterns/04-components/view/_view.scss
View file @ f2f28afc
// @file
// Styles for a view.
// .view {}
// Align the views container to the max width contain-width function.
.views-element-container{
@include uw-contained-width;
padding: rem(gesso-spacing(sm));
@include xl {
padding:rem(gesso-spacing(sm)) 0;
}
}
// set the layout for the Views container when being used with Blog, news, events
// to match flexbox in multi list usage.
.view{
// View content container.
&-content{
display:inline-flex;
flex-flow: row wrap;
}
//View container for blog landing page.
&.view-uw-view-blogs,
// View container for events landing page.
&.view-uw-view-events,
// View container for newslanding page.
&.view-uw-view-news-items{
// Universal row for views
.views-row{
margin: rem(gesso-spacing(sm));
width:100%;
@include small{
flex-grow: 1;
width: 45%;
}
@include large{
width: 32%;
}
}
}
}
.view-filters{
// Universal filter form used on events, blog and news.
.views-exposed-form{
}
}
// Previous code .
.view__filters {
margin-bottom: rem(gesso-spacing(sm));
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment