Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • wcms/uw_wcms_ohana
1 result
Show changes
Commits on Source (32)
Showing
with 357 additions and 16 deletions
......@@ -16,7 +16,6 @@
appearance: none;
border: var(--size-xs) solid var(--gray-3);
border-radius: var(--radius-1);
color: inherit;
cursor: pointer;
font-family: var(--font-systemmedium);
font-size: inherit;
......
......@@ -2,7 +2,6 @@
// Table styles.
:where(caption) {
color: var(--gray-5);
font-size: var(--font-size-0);
font-style: italic;
padding: var(--size-1);
......
......@@ -5,7 +5,6 @@
border: var(--size-xs) solid var(--gray-3);
box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-family: var(--font-systemmedium);
font-size: var(--font-size-0);
......
......@@ -46,7 +46,7 @@
--neutral-2: #a2a2a2;
--neutral-3: #787878;
--neutral-4: #000;
--neutral-primary: #000;
--neutral-primary: #fafafa;
--sci-1: #b4d5ff;
--sci-2: #63a0ff;
--sci-3: #0073ce;
......@@ -221,6 +221,7 @@
$faculties_colours: (
'org-default': uw-gold,
'org-default-b': uw-black,
'org-ahs': ahs,
'org-art': art,
'org-eng': eng,
......@@ -234,7 +235,6 @@ $faculties_colours: (
'org-ren': ren,
'neutral': neutral
);
//Swatches
.pl-colors .color-demo > div > div{
background-color: rgba(0, 0, 0, 0.6);
......
......@@ -14,17 +14,21 @@
margin-bottom: 0;
}
// On nodes, move block title to top of block, while preserving spacing underneath.
// Needs to be done using positioning because negative margin here pushes sections up.
.uw-main & > {
h2:first-child,
.uw-admin-label + h2 {
margin-top: -0.25em; /* Using ems so it adjusts to font size. */
position: relative;
bottom: 0.25em; /* Using ems so it adjusts to font size. */
margin-bottom: calc(var(--size-1) - 0.25em);
padding-top: 0;
}
}
&:last-of-type {
margin-bottom: 0;
}
// On nodes, move an initial header in copy text to top of block, while preserving spacing underneath, unless there was a block title..
// On nodes, move an initial header in copy text to top of block, while preserving spacing underneath, unless there was a block title.
// Using negative margin here doesn't seem to cause problems here so not refactoring in case it introduces issues.
.uw-main & .uw-admin-label + .contextual + .uw-copy-text,
.uw-main & .uw-copy-text:first-child {
.uw-copy-text__wrapper > :where(h2, h3, h4, h5, h6):first-child {
......@@ -34,6 +38,7 @@
}
}
// disable margin for layout builder blocks
.block--provider-layout-builder {
margin-bottom: 0;
......
@use '../../01-core' as *;
:root {
/* establish a default for calculations */
--base-section-margin: calc(var(--grid-gap) * 0.5);
......@@ -6,12 +7,28 @@
--section-margin: var(--base-section-margin);
--layout-max-width-narrow: calc(100vw - 2rem);
}
/* Only apply top padding to the first section when there's a background. */
.card__content section.layout:first-child:not(.uw-section__background-color,.uw-section__background-image) {
padding-top: 0;
}
/* Only apply bottom padding to the last section when there's a background or a separator. */
.card__content section.layout:last-child:not(.uw-section__background-color,.uw-section__background-image,.uw-section-separator--bottom,.uw-section-separator--narrow) {
padding-bottom: 0;
}
@media(min-width: $screen-md) {
.card__content section.layout:last-child.uw-section-separator--narrow {
padding-bottom: unset;
}
}
.uw-section-spacing {
&--75 {
--section-margin: calc(var(--base-section-margin) * 0.75);
&.layout {
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
padding-top: var(--section-margin);
&.card__media {
margin-bottom: 0 !important;
}
......@@ -20,29 +37,29 @@
&--50 {
--section-margin: calc(var(--base-section-margin) * 0.5);
&.layout {
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
padding-top: var(--section-margin);
}
}
&--25 {
--section-margin: calc(var(--base-section-margin) * 0.25);
&.layout {
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
padding-top: var(--section-margin);
}
}
&--none {
--section-margin: 0;
&.layout {
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
padding-top: var(--section-margin);
}
}
&--default {
--section-margin: var(--base-section-margin);
&.layout {
margin-bottom: var(--section-margin);
padding-bottom: var(--section-margin);
padding-top: var(--section-margin);
}
}
&.layout {
......@@ -59,7 +76,7 @@
}
&--bottom {
position: relative;
&:not(.is-layout-builder-highlighted){
&:not(.is-layout-builder-highlighted) {
border-color: var(--layout-border-color);
border-style: var(--layout-border-style);
border-bottom-width: var(--layout-border-width);
......@@ -77,11 +94,24 @@
}
}
}
.layout {
--layout-border-width: var(--size-xs);
// Puts padding on mobile view.
@include uw-contained-width(var(--layout-max-width-narrow));
&.uw-section__background-color {
max-width: 100% !important;
padding-left: calc((100% - var(--layout-max-width-narrow)) / 2);
padding-right: calc((100% - var(--layout-max-width-narrow)) / 2);
}
// Desktop max width no padding look.
@media(min-width: $screen-xl) {
@include uw-contained-width(var(--layout-max-width));
&.uw-section__background-color {
max-width: 100% !important;
padding-left: calc((100% - var(--layout-max-width)) / 2);
padding-right: calc((100% - var(--layout-max-width)) / 2);
}
}
&.layout-builder__layout {
padding-top: var(--size-2);
......@@ -102,27 +132,75 @@
}
&.uw-contained-width {
@include uw-contained-width(var(--layout-max-width-narrow));
&.uw-section__background--contained {
padding-left: var(--size-2);
padding-right: var(--size-2);
}
&.uw-section__background-color,
&.uw-section__background--full-width {
max-width: 100% !important;
padding-left: calc((100% - var(--layout-max-width-narrow)) / 2);
padding-right: calc((100% - var(--layout-max-width-narrow)) / 2);
}
@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));
&.uw-section__background-color,
&.uw-section__background--full-width {
max-width: 100% !important;
padding-left: calc((100% - var(--layout-max-width)) / 2);
padding-right: calc((100% - var(--layout-max-width)) / 2);
}
}
&.card__media {
max-width: var(--layout-max-width);
}
&--narrow {
/* Match the width of WCMS2's narrow: 496px */
max-width: 31rem;
@media(min-width: $screen-xs) {
max-width: 31rem;
}
&.uw-section__background-color,
&.uw-section__background--full-width {
padding-left: var(--size-2);
padding-right: var(--size-2);
}
@media(min-width: $screen-md) {
&.uw-section__background-color,
&.uw-section__background--full-width {
max-width: 100% !important;
padding-left: calc((100% - 31rem) / 2);
padding-right: calc((100% - 31rem) / 2);
}
}
}
&--wide {
/* Match the width of WCMS2's wide: 753px */
max-width: 47.0625rem;
&.uw-section__background-color,
&.uw-section__background--full-width {
max-width: 100% !important;
padding-left: var(--size-2);
padding-right: var(--size-2);
}
@media(min-width: $screen-md) {
&.uw-section__background-color,
&.uw-section__background--full-width {
max-width: 100% !important;
padding-left: calc((100% - 47.0625rem) / 2);
padding-right: calc((100% - 47.0625rem) / 2);
}
}
}
}
&.uw-full-width {
@include uw-full-width-padding;
overflow: hidden;
.layout__region:not(:has(.block-uw-cbl-image)) {
padding-top: var(--size-1);
}
.uw-caption{
> p{
padding-left: var(--size-2);
......@@ -147,7 +225,7 @@
padding: var(--size-1) 0 0;
}
&.layout--uw-1-col{
&.layout--uw-1-col {
.block-inline-blockuw-cbl-banner-images,
.block-inline-blockuw-cbl-image,
.block-uw-cbl-image,
......
......@@ -6,6 +6,19 @@
5: 'fifth',
} %}
{% if settings.layout_builder_background_color %}
{% set classes = classes|merge(['uw-section__background-color']) %}
{% endif %}
{% if options.image %}
{% include '@components/background-image/background-image.twig' with {
'image': options.image,
'image_class': 'uw-section__background-image-' ~ settings.layout_builder_background_image,
} %}
{% set classes = classes|merge(['uw-section__background-image-' ~ settings.layout_builder_background_image ]) %}
{% endif %}
{% set section_classes = '' %}
<section
{% if pattern_lab %}
......
......@@ -16,6 +16,7 @@
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
options: options,
} %}
{% endif %}
......@@ -16,6 +16,7 @@
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
options: options,
} %}
{% endif %}
......@@ -16,6 +16,7 @@
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
options: options,
} %}
{% endif %}
......@@ -16,6 +16,7 @@
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
options: options,
} %}
{% endif %}
......@@ -16,6 +16,7 @@
{% include '@layouts/layout/_layout.twig' with {
classes: classes,
num_of_blocks: num_of_blocks,
options: options,
} %}
{% endif %}
......@@ -18,6 +18,7 @@
classes: classes,
num_of_blocks: num_of_blocks,
inverted_l_left: 1,
options: options,
} %}
{% endif %}
......@@ -18,6 +18,7 @@
classes: classes,
num_of_blocks: num_of_blocks,
inverted_l_right: 1,
options: options,
} %}
{% endif %}
......@@ -33,3 +33,43 @@
order: 1;
}
}
// Adjust the image size in the layout builder off canvas flyout
// when choosing background image in section options.
.media-library-form-element {
.fieldset-legend {
font-size: var(--font-size-000) !important;
font-weight: bold !important;
}
input[name="layout_builder_background_image-media-library-update"] {
display: none !important;
}
.media-library-form-element-empty-text {
font-size: var(--font-size-000) !important;
font-style: italic !important;
}
.media-library-item {
background: none;
}
.media-library-item__preview {
padding-bottom: 0;
.uw-picture {
width: 100% !important;
}
.uw-picture__fallback {
width: 100% !important;
}
}
.media-library-selection {
margin-top: 0;
}
}
.media-library-selection .media-library-item--grid {
width: auto !important;
}
.media-library-item--grid::before {
border: none;
}
.media-library-item__name {
color: var(--uw-black);
}
......@@ -312,6 +312,7 @@ button {
padding: 0.2rem var(--size-2);
position: absolute;
top: -1.5rem !important;
text-shadow: none;
}
// Give padding for the admin labels.
......
@forward '00-cms-styles/dashboards/dashboards';
@forward '00-cms-styles/layout-builder/layout-builder';
@forward '00-cms-styles/toolbar-menu/toolbar-menu';
@forward 'background-color/background-color';
@forward 'background-image/background-image';
@forward 'banners/banners';
@forward 'blockquote/blockquote';
@forward 'button/button';
......
// @file
// Background color styles override.
@use '../../01-core' as *;
@each $faculty, $colour in $faculties_colours {
.uw-section__background--#{$faculty} {
background-color: var(--#{$colour}-primary);
.block-layout-builder,
.layout-builder-block {
background: transparent;
}
@if $faculty == org-default or $faculty == neutral {
color: var(--uw-black);
.highlight {
color: var(--uw-black);
}
:where(hr) {
border-color: var(--uw-black);
}
:where(blockquote) {
background-color: rgba(255, 255, 255, 0.2);
}
.uw-blockquote__text,
.uw-blockquote__text::before,
.uw-blockquote__text::after,
.uw-blockquote__attribution--wrapper,
.uw-blockquote__attribution--wrapper cite {
color: var(--black);
}
}
@else {
color: var(--uw-white);
:where(hr) {
border-color: var(--uw-white);
}
table {
td,
tr,
th {
background-color: transparent;
}
th[scope="row"],
th[scope="col"],
thead,
tfoot {
background-color: rgba(255, 255, 255, 0.2);
}
}
mark,
form input {
color: var(--uw-black);
}
:where(blockquote),
:where(code),
:where(kbd) {
color: var(--uw-white);
background-color: rgba(255, 255, 255, 0.2);
}
:where(kbd),
:where(var) {
border-color: var(--uw-white);
}
.uw-blockquote__text,
.uw-blockquote__text::before,
.uw-blockquote__text::after,
.uw-blockquote__attribution--wrapper,
.uw-blockquote__attribution--wrapper cite,
cite,
.highlight,
.description {
color: var(--uw-white);
}
}
@if $faculty == neutral {
:where(blockquote) {
background-color: var(--uw-white);
}
}
}
}
.uw-section__background-image {
background-position: center;
background-size: cover;
.block-layout-builder,
.layout-builder-block {
background: transparent;
}
:where(blockquote) {
background-color: transparent;
color: var(--uw-black);
}
}
.uw-section__text-color--white,
.uw-section__text-color--white-black-shadow {
color: var(--uw-white);
mark {
color: var(--uw-black) !important;
}
:where(code) {
color: var(--uw-black);
}
table {
* {
color: var(--uw-black) !important;
}
caption {
background-color: rgba(255, 255, 255, 0.75);
}
}
.description,
.uw-blockquote__text,
.uw-blockquote__text::before,
.uw-blockquote__text::after,
.uw-blockquote__attribution--wrapper,
.uw-blockquote__attribution--wrapper cite {
color: var(--uw-white);
}
form input {
color: var(--uw-black);
}
}
.uw-section__text-color--black,
.uw-section__text-color--black-white-shadow {
color: var(--uw-black);
table {
* {
color: var(--uw-black) !important;
text-shadow: transparent 0 0 0;
}
caption {
background-color: rgba(255, 255, 255, 0.75);
}
}
.uw-blockquote__text {
color: var(--uw-black);
&::after,
&::before {
color: var(--uw-black);
}
}
}
.uw-section__text-color--black-white-shadow {
text-shadow: var(--uw-white) 1px 1px 2px;
}
.uw-section__text-color--white-black-shadow {
text-shadow: var(--uw-black) 1px 1px 2px;
}
.uw-section__tint-color--black,
.uw-section__tint-color--white,
.uw-section__tint-color--none {
position: relative;
&::before {
background-color: transparent;
bottom: 0;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: var(--layer-background);
}
.layout__region {
position: relative;
z-index: var(--layer-wrapper);
}
}
.uw-section__tint-color--black {
// Adds the black filter to image overlay.
&::before {
background-color: rgba(0, 0, 0, 0.5);
}
}
.uw-section__tint-color--white {
// Adds the white filter to image overlay.
&::before {
background-color: rgba(255, 255, 255, 0.75);
}
}
<style>
{% for source in image.sources|reverse %}
@media only screen and {{ source.media | replace({'all and': ''}) }} {
.{{ image_class }} {
background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
}
}}
{% endfor %}
</style>