Skip to content
Snippets Groups Projects
Commit ca4646dd authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-5709: css to display UR design document

parent 7638b12a
No related branches found
No related tags found
1 merge request!37ISTWCMS-5709: css for teasers, and adjustments to buttons in multi-list and...
Hide whitespace changes
Inline Side-by-side
Showing
with 57 additions and 67 deletions
src/patterns/01-core/mixins/_button.scss
+ 1
− 3
View file @ ca4646dd
......@@ -39,16 +39,14 @@ $button-font-size: var(--font-size-1) !default;
font-weight: var(--font-weight-300);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
max-width: 18.125rem;
padding: var(--size-2) var(--size-4);
text-align: center;
text-decoration: none;
text-shadow: $button-text-shadow;
text-transform: uppercase;
transition: background 200ms ease-in;
vertical-align: top;
white-space: normal;
width: 100%;
width: auto;
&:visited {
color: $color-text;
}
......
src/patterns/04-components/_index.scss
+ 1
− 0
View file @ ca4646dd
......@@ -9,6 +9,7 @@
@forward 'card/card';
@forward 'card/card--banner/card--banner';
@forward 'card/card--node/card--node';
@forward 'card/card--teaser/card--teaser';
@forward 'color-bar/color-bar';
@forward 'contact-info/contact-info';
@forward 'content-grid-list/content-grid-list';
......
src/patterns/04-components/card/_card.scss
+ 11
− 8
View file @ ca4646dd
......@@ -2,7 +2,7 @@
// Styles for Cards..
@use '../../01-core' as *;
$card-border-color: var(--gray-2);
$card-accent-border-color: var(--uw-black-primary) !default;
$card-link-color: var(--uw-black-primary) !default;
$card-link-color-hover: var(--gray-5) !default;
......@@ -28,12 +28,13 @@ $card-padding: var(--size-2) !default;
// if card--show-hover class is present then show "
.card--show-hover {
border-bottom: 3px solid $card-accent-border-color;
border: 1px solid $card-border-color;
box-shadow: var(--shadow-1);
transition: box-shadow 300ms ease;
padding: $card-padding;
&:hover,
&:focus-within {
border-bottom: 1px solid $card-accent-border-color;
box-shadow: var(--shadow-3);
}
}
......@@ -51,14 +52,14 @@ $card-padding: var(--size-2) !default;
img {
filter: opacity(100%);
transition: filter;
transition: filter 300ms ease;
}
&:hover,
&:focus {
img {
filter: opacity(62%);
transition: filter;
transition: filter 300ms ease;
}
}
}
......@@ -119,6 +120,8 @@ $card-padding: var(--size-2) !default;
}
.card__title {
font-family: var(--font-condensedbook);
line-height: var(--font-lineheight-2);
margin: 0 0 var(--size-1) 0;
padding: 0;
width: 100%;
......@@ -133,8 +136,8 @@ $card-padding: var(--size-2) !default;
.card__author {
@include uw-no-breakout();
font-family: var(--font-mono);
font-size: var(--font-size-1);
font-family: var(--font-systemmedium);
font-size: var(--font-size-00);
margin-top: 0;
padding: 0 0 var(--size-1) 0;
......@@ -152,7 +155,7 @@ $card-padding: var(--size-2) !default;
}
.card__content {
margin-bottom: var(--size-3);
margin-bottom: var(--size-4);
width: 100%;
.card__node--expand-collapse-group &{
margin-bottom: 0;
......
src/patterns/04-components/card/card--teaser/_card--teaser.scss
+ 3
− 2
View file @ ca4646dd
......@@ -12,9 +12,10 @@
}
.card__tags {
margin: inherit;
margin-top: auto;
line-height: var(--line-height-2);
margin: 0 auto 0 var(--size-2);
padding: 0;
max-width: 90%;
}
.uw-node__without-image & {
......
src/patterns/04-components/card/card.twig
+ 11
− 3
View file @ ca4646dd
......@@ -77,9 +77,17 @@
{% endif %}
{% if tags %}
{% include '@components/card/card-elements/_tags.twig' with {
'tags': tags
} %}
{% if tags_inline %}
{% include '@components/card/card-elements/_tags.twig' with {
'tags': tags,
'tags_inline': true
} %}
{% else %}
{% include '@components/card/card-elements/_tags.twig' with {
'tags': tags
} %}
{% endif %}
{% endif %}
</article>
src/patterns/04-components/eu-cookie-compliance/_eu-cookie-compliance.scss
+ 1
− 1
View file @ ca4646dd
......@@ -101,7 +101,7 @@
}
.sliding-popup-bottom {
bottom:0;
bottom: 0;
position: fixed;
}
......
src/patterns/04-components/form-view-search/_form-view-search.scss
+ 1
− 1
View file @ ca4646dd
@use '../../01-core' as *;
.uw-search-form {
margin:0 0 var(--size-2) 0;
margin: 0 0 var(--size-2) 0;
.catalog-search-form,
.service-search-form,
......
src/patterns/04-components/multi-type-list/multi-type-list.twig
+ 4
− 2
View file @ ca4646dd
......@@ -12,7 +12,9 @@
'content_list': content_list,
'button_modifier_classes': button_modifier_classes,
} %}
{% if is_demo %}
{% set view_all = 'true' %}
{% endif %}
{% for type, list in lists %}
{% for info in list %}
......@@ -69,4 +71,4 @@
{% endfor %}
{% endembed %}
\ No newline at end of file
{% endembed %}
src/patterns/04-components/multi-type-list/multi-type-list.yml
+ 0
− 18
View file @ ca4646dd
......@@ -7,9 +7,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 1'
author:
name: 'Blog Author'
link: '#'
footer:
tags:
-
......@@ -68,9 +65,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 2'
author:
name: 'Blog Author'
link: '#'
footer:
tags:
- url: '#'
......@@ -122,9 +116,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 3'
author:
name: 'Blog Author'
link: '#'
footer:
tags:
- url: '#'
......@@ -177,9 +168,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 1'
author:
name: 'News Author'
link: '#'
footer:
tags:
-
......@@ -238,9 +226,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 2'
author:
name: 'News Author'
link: '#'
footer:
tags:
- url: '#'
......@@ -292,9 +277,6 @@ lists:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 3'
author:
name: 'News Author'
link: '#'
footer:
tags:
- url: '#'
......
src/patterns/04-components/tabs/_tabs.scss
+ 4
− 4
View file @ ca4646dd
......@@ -55,7 +55,7 @@
margin: 0 0 0 0.15rem;
max-width: inherit;
padding: 1rem 2rem;
width: 100%;
@media(min-width: $screen-md) {
border-bottom: 0.4rem solid var(--uw-white);
font-weight: inherit;
......@@ -63,14 +63,14 @@
max-width: inherit;
padding: 1rem 2rem;
&.active {
border-bottom: 0.4rem solid #4e4e4e;
border-bottom: 0.4rem solid var(--uw-black);
}
}
&[aria-selected="true"] {
background: var(--gray-2);
border-bottom: 0.4rem solid var(--gray-6);
color: var(--gray-6);
border-bottom: 0.4rem solid var(--uw-black);
color: var(--uw-black);
&:hover{
border-bottom: 0.4rem solid #ddd;
......
src/patterns/04-components/tag-list/_tag-list.scss
+ 1
− 1
View file @ ca4646dd
......@@ -2,10 +2,10 @@
.tag-list {
@include list-unstyled();
color: var(--gray-5);
}
.tag-list__item {
display: inline-block;
margin-bottom: var(--size-05);
margin-right: var(--size-1);
}
src/patterns/04-components/tag-list/tag-list.twig
+ 2
− 2
View file @ ca4646dd
......@@ -2,7 +2,7 @@
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
{{ macros.tag(item.url, item.title, item.type) }}
</li>
{{ macros.tag(item.url, item.title, item.type) }}
</li>{% if not loop.last and item.type is not same as "full" %}, {% endif %}
{% endfor %}
</ul>
src/patterns/04-components/tag/_tag.scss
+ 14
− 16
View file @ ca4646dd
......@@ -3,16 +3,16 @@
@use '../../01-core' as *;
$tag-font-family-small: var(--font-systemmedium) !default;
$tag-font-family-normal: var(--font-systembold) !default;
$tag-font-size-normal: var(--font-size-00) !default;
$tag-font-size-small: var(--font-size-0000) !default;
$tag-font-family-small: var(--font-system) !default;
$tag-font-family-normal: var(--font-systemmedium) !default;
$tag-font-size-normal: var(--font-size-000) !default;
$tag-font-size-small: var(--font-size-00000) !default;
.tag {
@include link-no-underline(
var(--uw-black-primary),
var(--uw-black-primary)
var(--gray-5),
var(--gray-5)
);
background: none;
display: inline-block;
......@@ -20,7 +20,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
margin: 0 0 var(--size-1) 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
transition: background 300ms ease-in;
&.token{
text-transform: inherit;
......@@ -51,6 +50,7 @@ $tag-font-size-small: var(--font-size-0000) !default;
font-family: $tag-font-family-small;
font-size: $tag-font-size-small;
padding: var(--size-1);
&:hover,
&:focus {
background: var(--uw-black-primary);
......@@ -63,7 +63,7 @@ $tag-font-size-small: var(--font-size-0000) !default;
font-family: $tag-font-family-small;
font-size: $tag-font-size-small;
padding: var(--size-1);
text-transform: uppercase;
&:hover,
&:focus {
background: var(--uw-black-primary);
......@@ -74,14 +74,14 @@ $tag-font-size-small: var(--font-size-0000) !default;
}
&--simple{
@include link-reverse(
var(--uw-black-primary),
var(--uw-black-primary)
var(--gray-5),
var(--gray-5)
);
font-family: $tag-font-family-normal;
a {
@include link-reverse(
var(--uw-black-primary),
var(--uw-black-primary)
var(--gray-5),
var(--gray-5)
);
font-family: $tag-font-family-normal;
}
......@@ -89,8 +89,8 @@ $tag-font-size-small: var(--font-size-0000) !default;
a{
@include link-no-underline(
var(--uw-black-primary),
var(--uw-black-primary)
var(--gray-5),
var(--gray-5)
);
background: none;
display: inline-block;
......@@ -99,8 +99,6 @@ $tag-font-size-small: var(--font-size-0000) !default;
padding: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 300ms ease;
}
}
@each $faculty, $colour in $faculties_colours {
......
src/patterns/04-components/tag/tag.twig
+ 3
− 6
View file @ ca4646dd
......@@ -10,18 +10,15 @@
{% if faculty %}
<span class="{{ faculty }}">
{% endif %}
<a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
{{ title }}
</a>
{% if faculty %}
<a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">{{ title }}</a>
{% if faculty %}
</span>
{% endif %}
{% if is_demo %}
<br>
<h4>This is a full tag </h4>
<a href="{{ url }}" class="tag tag--full tag--normal" rel="tag">
{{ title }}
</a>
{% endif %}
\ No newline at end of file
{% endif %}
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