diff --git a/src/patterns/04-components/date/_date.scss b/src/patterns/04-components/date/_date.scss index 76fee9248ae885fab07b30eded381df6d3cc5839..500675300716169f29c783c05678741c0e086e58 100644 --- a/src/patterns/04-components/date/_date.scss +++ b/src/patterns/04-components/date/_date.scss @@ -1,7 +1,9 @@ +@use '../../01-core' as *; + .uw-date { width:auto; - @include large { + @media(min-width: $screen-lg) { margin-left:inherit; } } @@ -13,10 +15,10 @@ .uw-date { box-sizing: border-box; display:block; - padding: rem(gesso-spacing(xs)) rem(gesso-spacing(sm)); + padding: var(--size-1) var(--size-2); &:first-child { - padding: rem(gesso-spacing(xs)) 2.75rem rem(gesso-spacing(xs)) rem(gesso-spacing(sm)); + padding: var(--size-1) 2.75rem var(--size-1) var(--size-2); } text-transform: uppercase; @@ -26,34 +28,35 @@ background-color: transparent !important; .card__node--event & { - margin-bottom:2rem; + margin-bottom: var(--size-4); } position: absolute; - width:calc(100%); - z-index: gesso-z-index(content); + width: calc(100%); + z-index: var(--layer-content); - @include xs { - width:inherit; + @media(min-width: $screen-xs) { + width: inherit; } } } .uw-date-details__summary { + .uw-date { - background:inherit; + background: inherit; } - background-position: right 0.75rem center; // LTR + background-position: right var(--size-105) center; // LTR background-repeat: no-repeat; - background-size: rem(13px); + background-size: 13px; box-sizing: border-box; cursor: pointer; display: inline-block; - padding:0; + padding: 0; .block-uw-cbl-multi-type-list & { - background-position: right 0.5rem center; // LTR + background-position: right var(--size-1) center; // LTR } &::-webkit-details-marker { @@ -61,47 +64,58 @@ } } -$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci'; -@each $faculty in $faculties { +.uw-date { + background-color: var(--uw-gold); + color: var(--uw-black); + clear: both; + display: inline-block; + font-family: var(--font-systemmedium); + font-size: var(--font-size-00); + padding: var(--size-1) var(--size-2); + text-transform: uppercase; +} + +@each $faculty, $colour in $faculties_colours { .#{$faculty} { + @if $faculty == org-default { - .uw-date-details { - background-color: gesso-brand(org-default, uw-gold, 'primary'); + .uw-date { + background-color: var($colour); + color: var(--uw-black); + } - .uw-date { - background-color: gesso-brand(org-default, uw-gold, 'primary'); - } + .uw-date-details { + background-color: var($colour); &[open] { .uw-date-details__summary { @include svg-background(mobile-arrow-up); - //width:100%; } } } .uw-date-details__summary { .uw-date { - background:inherit; + background: inherit; } @include svg-background(mobile-arrow-down); - background-color: gesso-brand(org-default, uw-gold,'primary'); - color: gesso-brand(org-default,uw-black,'primary'); + background-color: var($colour); + color: var(--uw-black); } } @else { - .uw-date-details { - background-color: gesso-brand($faculty, 'primary'); + .uw-date { + background-color: var($colour); + color: var(--uw-white); + } - .uw-date { - background-color: gesso-brand($faculty, 'primary'); - } + .uw-date-details { + background-color: var($colour); &[open] { .uw-date-details__summary { @include svg-background(mobile-arrow-up-w); - //width:100%; } } } @@ -112,8 +126,8 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat' } @include svg-background(mobile-arrow-down-w); - background-color:gesso-brand($faculty, 'primary'); - color: gesso-brand(org-default, uw-white, 'primary'); + background-color: var($colour); + color: var(--uw-white); } } }