ISTWCMS-5709: css to display UR design document

src/patterns/01-core/mixins/_button.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -101,7 +101,7 @@
 }
 
 .sliding-popup-bottom {
-  bottom:0;
+  bottom: 0;
   position: fixed;
 }
 

src/patterns/04-components/form-view-search/_form-view-search.scss

 @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

@@ -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 %}
+{% endembed %}
\ No newline at end of file

src/patterns/04-components/multi-type-list/multi-type-list.yml

@@ -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

@@ -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

@@ -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,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

@@ -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

@@ -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 %}
+{% endif %}
\ No newline at end of file