From 10fc5c9fa858503256b117a1961cdc088286996e Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Mon, 27 Jul 2020 15:49:57 -0400
Subject: [PATCH] Additional css and images for theme
---
css/styles.css | 141 +++++++++---------
.../01-mixins/_mixins.svg-background.scss | 8 +-
.../_patterns/03-layouts/footer/_footer.scss | 9 +-
.../site-container/_site-container.scss | 86 ++++-------
.../04-components/message/_message.scss | 29 ++--
source/images/correct.svg | 1 +
source/images/dropbutton-arrow-down.svg | 1 +
source/images/dropbutton-arrow-up.svg | 1 +
source/images/home.svg | 3 +
source/images/menu-arrow-down.svg | 5 +
source/images/menu-arrow-right.svg | 5 +
source/images/messages-error.svg | 1 +
source/images/messages-status.svg | 1 +
source/images/messages-warning.svg | 1 +
source/images/minus.svg | 1 +
source/images/mobile-arrow-down.svg | 3 +
source/images/mobile-arrow-up.svg | 3 +
source/images/mobile-close.svg | 3 +
source/images/mobile-menu.svg | 3 +
source/images/plus.svg | 1 +
source/images/select-arrows.svg | 3 +
21 files changed, 166 insertions(+), 143 deletions(-)
create mode 100644 source/images/correct.svg
create mode 100644 source/images/dropbutton-arrow-down.svg
create mode 100644 source/images/dropbutton-arrow-up.svg
create mode 100644 source/images/home.svg
create mode 100644 source/images/menu-arrow-down.svg
create mode 100644 source/images/menu-arrow-right.svg
create mode 100644 source/images/messages-error.svg
create mode 100644 source/images/messages-status.svg
create mode 100644 source/images/messages-warning.svg
create mode 100644 source/images/minus.svg
create mode 100644 source/images/mobile-arrow-down.svg
create mode 100644 source/images/mobile-arrow-up.svg
create mode 100644 source/images/mobile-close.svg
create mode 100644 source/images/mobile-menu.svg
create mode 100644 source/images/plus.svg
create mode 100644 source/images/select-arrows.svg
diff --git a/css/styles.css b/css/styles.css
index 4c0ab3ea..4963b640 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1127,6 +1127,8 @@ svg:not(:root) {
.uw-footer__wrapper {
padding: 1rem 0; } }
.uw-footer__address {
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 12.64px;
grid-column: 1 / 2;
grid-row: 1 / 2;
margin-left: auto;
@@ -1170,6 +1172,8 @@ svg:not(:root) {
text-align: right; } }
.uw-footer__social-directory a {
color: #fff;
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 12.64px;
text-decoration: none; }
.uw-footer__social-directory a:hover {
color: #fdd54f;
@@ -1563,51 +1567,17 @@ svg:not(:root) {
grid-row: 1 / 2; }
.uw-site-container .uw-highlighted {
grid-column: 1 / 2;
- grid-row: 2 / 3; }
+ grid-row: 2 / 3;
+ width: 100%; }
.uw-site-container .uw-main {
- align-content: start;
- align-items: start;
background-color: #fff;
- display: grid;
grid-column: 1 / 2;
grid-row: 3 / 4;
- grid-template-columns: auto;
min-height: 60vh; }
- .uw-site-container .uw-main .block-page-title-block {
- grid-column: 1 / 2;
- grid-row: 1 / 2;
- height: auto;
- width: 100%; }
- .uw-site-container .uw-main .block-local-tasks-block {
- grid-column: 1 / 2;
- grid-row: 2 / 3;
- width: 100%; }
- .uw-site-container .uw-main .node-form {
- grid-column: 1 / 2;
- grid-row: 3 / 4;
- width: 100%; }
- .uw-site-container .uw-main .layout-builder-form {
- align-content: start;
- align-items: start;
- display: grid;
- grid-column: 1 / 2;
- grid-row: 4 / 5;
- grid-template-columns: auto;
- width: 100%; }
- .uw-site-container .uw-main .layout-builder-form .form-actions {
- grid-column: 1 / 2;
- grid-row: 3 / 4; }
- .uw-site-container .uw-main .layout-builder-form .layout-builder__message {
- grid-column: 1 / 2;
- grid-row: 1/ 2; }
- .uw-site-container .uw-main .layout-builder-form .form-type-vertical-tabs {
- grid-column: 1 / 2;
- grid-row: 2 / 3; }
.uw-site-container .uw-footer {
grid-column: 1 / 2;
- grid-row: 4 / 5;
- width: 100%; }
- .uw-site-container .messages,
+ grid-row: 4 / 5; }
+ .uw-site-container .uw-highlighted,
.uw-site-container .block-page-title-block,
.uw-site-container .block-local-tasks-block,
.uw-site-container .layout-builder-form,
@@ -1617,18 +1587,38 @@ svg:not(:root) {
margin-left: auto;
margin-right: auto;
max-width: 63.1875rem;
- width: 100%; }
- .uw-site-container .block-local-tasks-block,
- .uw-site-container .block-page-title-block,
- .uw-site-container .contextual-region,
- .uw-site-container .layout-builder-form {
padding: 1rem; }
@media (min-width: 80rem) {
- .uw-site-container .block-local-tasks-block,
+ .uw-site-container .uw-highlighted,
.uw-site-container .block-page-title-block,
+ .uw-site-container .block-local-tasks-block,
+ .uw-site-container .layout-builder-form,
+ .uw-site-container .node-form,
.uw-site-container .contextual-region,
- .uw-site-container .layout-builder-form {
+ .uw-site-container form {
padding: 0; } }
+ @media (min-width: 40.06rem) {
+ .uw-site-container .block-local-tasks-block {
+ min-height: auto; } }
+ .uw-site-container .messages,
+ .uw-site-container .message {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63.1875rem; }
+ .uw-site-container .node-layout-builder-form .form-actions {
+ background: #ccc;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ padding: 1rem;
+ position: fixed;
+ text-align: center;
+ width: 100%;
+ z-index: 501; }
+ .uw-site-container .node-layout-builder-form form-actions div {
+ display: inline; }
+ .uw-site-container .node-layout-builder-form form-actions .form-item-toggle-content-preview {
+ padding: 1rem; }
.uw-site-footer {
background-color: #787878;
@@ -2269,7 +2259,7 @@ details.details {
display: none; }
.details__summary {
- background-image: url("../images/plus.svg");
+ background-image: url("../source/images/plus.svg");
background-color: #eee;
background-position: right 1.5rem center;
background-repeat: no-repeat;
@@ -2286,7 +2276,7 @@ details.details {
padding-left: 3.4375rem;
padding-right: 1.5rem; }
[open] > .details__summary {
- background-image: url("../images/minus.svg"); }
+ background-image: url("../source/images/minus.svg"); }
.details__summary:hover {
background-color: #A2A2A2; }
.details__summary:focus {
@@ -2805,7 +2795,7 @@ details.details {
.form-item__checkbox + .form-item__label::before:focus {
outline-color: #4773aa; }
.form-item__checkbox:checked + .form-item__label::before {
- background-image: url("../images/correct.svg");
+ background-image: url("../source/images/correct.svg");
background-color: #0071BC;
background-position: 50%;
background-repeat: no-repeat;
@@ -2965,7 +2955,7 @@ details.details {
width: 100%; }
.form-item--select .form-item__select {
- background-image: url("../images/select-arrows.svg");
+ background-image: url("../source/images/select-arrows.svg");
background-position: right 0.625rem center;
background-repeat: no-repeat;
background-size: 1.25rem;
@@ -3834,16 +3824,19 @@ details.details {
margin-left: 0;
padding-left: 0; }
-.message {
- background-color: #eee;
+.message,
+.messages {
+ background-color: #fafafa;
border: 1px solid #A2A2A2;
color: #000;
- margin-bottom: 1rem;
+ font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ margin: 1.5rem;
overflow: hidden;
- padding: 1rem;
+ padding: 1rem 1.5rem 1rem 2rem;
position: relative;
word-wrap: break-word; }
- .message::before {
+ .message::before,
+ .messages::before {
background-repeat: no-repeat;
background-size: 3.25em;
bottom: -0.5em;
@@ -3855,36 +3848,48 @@ details.details {
transform: rotate(-20deg);
width: 3.25em; }
@media print {
- .message::before {
+ .message::before,
+ .messages::before {
display: none !important; } }
- .message a {
- color: #4e4e4e;
+ .message a,
+ .messages a {
+ color: #000;
font-weight: 600;
text-decoration: underline; }
-.message__content > *:last-child {
+.message__content > *:last-child,
+.messages__content > *:last-child {
margin-bottom: 0; }
-.message--status {
+.message--status,
+.messages--status {
background-color: #e7f4e4;
border-color: #94bfa2; }
- .message--status::before {
- background-image: url("../images/messages-status.svg"); }
+ .message--status::before,
+ .messages--status::before {
+ background-image: url("../source/images/messages-status.svg"); }
-.message--error {
+.message--error,
+.messages--error {
background-color: #f9dede;
border-color: #e59393; }
- .message--error::before {
- background-image: url("../images/messages-error.svg"); }
- .message--error .message__item em:first-child {
+ .message--error::before,
+ .messages--error::before {
+ background-image: url("../source/images/messages-error.svg"); }
+ .message--error .message__item em:first-child,
+ .message--error .messages__item em:first-child,
+ .messages--error .message__item em:first-child,
+ .messages--error .messages__item em:first-child {
font-style: normal;
font-weight: 600; }
-.message--warning {
+.message--warning,
+.messages--warning {
background-color: #fff1d2;
border-color: #fad980; }
- .message--warning::before {
- background-image: url("../images/messages-warning.svg"); }
+ .message--warning::before,
+ .messages--warning::before {
+ background-image: url("../source/images/messages-warning.svg"); }
.mobile-menu-button {
outline: 2px solid transparent;
diff --git a/source/_patterns/00-config/01-mixins/_mixins.svg-background.scss b/source/_patterns/00-config/01-mixins/_mixins.svg-background.scss
index 09972fd4..346668c2 100644
--- a/source/_patterns/00-config/01-mixins/_mixins.svg-background.scss
+++ b/source/_patterns/00-config/01-mixins/_mixins.svg-background.scss
@@ -1,18 +1,18 @@
// @file
// SVG background image
-@mixin svg-background($image-name, $image-location: '../images/') {
+@mixin svg-background($image-name, $image-location: '../source/images/') {
background-image: url($image-location + $image-name + '.svg');
}
-@mixin svgz-background($image-name, $image-location: '../images/') {
+@mixin svgz-background($image-name, $image-location: '../source/images/') {
background-image: url($image-location + $image-name + '.svgz');
}
-@mixin svg-background-inline($image-name, $image-location: '../images/') {
+@mixin svg-background-inline($image-name, $image-location: '../source/images/') {
background-image: inline($image-location + $image-name + '.svg');
}
-@mixin svgz-background-inline($image-name, $image-location: '../images/') {
+@mixin svgz-background-inline($image-name, $image-location: '../source/images/') {
background-image: inline($image-location + $image-name + '.svgz');
}
diff --git a/source/_patterns/03-layouts/footer/_footer.scss b/source/_patterns/03-layouts/footer/_footer.scss
index 2b5c76fa..ae6e6277 100644
--- a/source/_patterns/03-layouts/footer/_footer.scss
+++ b/source/_patterns/03-layouts/footer/_footer.scss
@@ -27,12 +27,13 @@
}
&__address {
+ font-family: gesso-font-family(systemmedium);
+ font-size: gesso-font-size(-2);
grid-column: 1 / 2;
grid-row: 1 / 2;
margin-left: auto;
margin-right: auto;
padding-bottom: 1rem;
-
@include medium {
grid-column: 1 / 3;
grid-row: 1 / 2;
@@ -77,13 +78,15 @@
&__social-directory {
text-align: center;
-
- @include medium {
+ @include medium {
text-align: right;
}
a {
color: #fff;
+
+ font-family: gesso-font-family(systemmedium);
+ font-size: gesso-font-size(-2);
text-decoration: none;
}
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
index 14864a11..c4cbe7e9 100644
--- a/source/_patterns/03-layouts/site-container/_site-container.scss
+++ b/source/_patterns/03-layouts/site-container/_site-container.scss
@@ -10,68 +10,20 @@
.uw-highlighted {
grid-column: 1 / 2;
grid-row: 2 / 3;
+ width:100%;
}
.uw-main {
- align-content: start;
- align-items: start;
background-color: $uw-white;
- display: grid;
grid-column: 1 / 2;
grid-row: 3 / 4;
- grid-template-columns:auto;
min-height: 60vh;
-
-
-
- .block-page-title-block{
- grid-column: 1 / 2;
- grid-row: 1 / 2;
- height:auto;
- width:100%;
-
- }
- .block-local-tasks-block{
- grid-column: 1 / 2;
- grid-row: 2 / 3;
- width:100%;
- }
- .node-form{
- grid-column: 1 / 2;
- grid-row: 3 / 4;
- width:100%;
- }
- .layout-builder-form{
- align-content: start;
- align-items: start;
- display: grid;
- grid-column: 1 / 2 ;
- grid-row: 4 / 5;
- grid-template-columns:auto;
- width:100%;
-
- .form-actions{
- grid-column: 1 / 2 ;
- grid-row: 3 / 4;
- }
- .layout-builder__message{
- grid-column: 1 / 2 ;
- grid-row: 1/ 2;
-
- }
- .form-type-vertical-tabs{
- grid-column: 1 / 2 ;
- grid-row: 2 / 3;
- }
- }
-
}
.uw-footer {
grid-column: 1 / 2;
grid-row: 4 / 5;
- width:100%;
}
// constraining sections of the theme with the site-container
- .messages,
+ .uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.layout-builder-form,
@@ -79,17 +31,37 @@
.contextual-region,
form{
@include uw-contained-width;
- width:100%;
-
- }
- .block-local-tasks-block,
- .block-page-title-block,
- .contextual-region,
- .layout-builder-form{
padding: rem(gesso-spacing(sm));
@include xl {
padding:0;
}
}
+ .block-local-tasks-block{
+ @include small {
+ min-height:auto;
+ }
+ }
+ .messages,
+ .message{
+ @include uw-contained-width;
+ }
+ .node-layout-builder-form .form-actions {
+ background: #ccc;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ padding: 1rem;
+ position: fixed;
+ text-align: center;
+ width: 100%;
+ z-index: 501;
+
+ }
+ .node-layout-builder-form form-actions div {
+ display: inline;
+ }
+ .node-layout-builder-form form-actions .form-item-toggle-content-preview {
+ padding: 1rem;
+ }
}
diff --git a/source/_patterns/04-components/message/_message.scss b/source/_patterns/04-components/message/_message.scss
index 21c03061..a7882909 100644
--- a/source/_patterns/04-components/message/_message.scss
+++ b/source/_patterns/04-components/message/_message.scss
@@ -1,7 +1,7 @@
// @file
// Styles for Drupal messages.
-
-$message-background-color: gesso-color(ui, generic, background-light) !default;
+$message-font-family: gesso-font-family(system) !default;
+$message-background-color: gesso-color(ui, generic, background-lighter) !default;
$message-border-color: gesso-color(ui, generic, border) !default;
$message-error-background-color: gesso-color(ui, error, background) !default;
$message-error-border-color: gesso-color(ui, error, border) !default;
@@ -10,13 +10,15 @@ $message-status-border-color: gesso-color(ui, success, border) !default;
$message-warning-background-color: gesso-color(ui, warning, background) !default;
$message-warning-border-color: gesso-color(ui, warning, border) !default;
-.message {
+.message,
+.messages{
background-color: $message-background-color;
border: 1px solid $message-border-color;
color: gesso-color(text, primary);
- margin-bottom: rem(gesso-spacing(sm));
+ font-family: $message-font-family;
+ margin: rem(gesso-spacing(md));
overflow: hidden;
- padding: rem(gesso-spacing(sm));
+ padding: 1rem 1.5rem 1rem 2rem;
position: relative;
word-wrap: break-word;
@@ -37,20 +39,22 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
}
a {
- color: gesso-color(text, secondary);
+ color: gesso-color(text, primary);
font-weight: gesso-font-weight(semibold);
text-decoration: underline;
}
}
-.message__content {
+.message__content,
+.messages__content{
> *:last-child {
margin-bottom: 0;
}
}
-.message--status {
+.message--status,
+.messages--status{
background-color: $message-status-background-color;
border-color: $message-status-border-color;
@@ -59,7 +63,8 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
}
}
-.message--error {
+.message--error,
+.messages--error{
background-color: $message-error-background-color;
border-color: $message-error-border-color;
@@ -67,7 +72,8 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
@include svg-background(messages-error);
}
- .message__item {
+ .message__item,
+ .messages__item{
em:first-child {
font-style: normal;
font-weight: gesso-font-weight(bold);
@@ -75,7 +81,8 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
}
}
-.message--warning {
+.message--warning,
+.messages--warning{
background-color: $message-warning-background-color;
border-color: $message-warning-border-color;
diff --git a/source/images/correct.svg b/source/images/correct.svg
new file mode 100644
index 00000000..a2af827b
--- /dev/null
+++ b/source/images/correct.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 216 146"><path fill="#fff" d="M168.86 37.966l-11.08-11.08c-1.52-1.52-3.367-2.28-5.54-2.28-2.172 0-4.02.76-5.54 2.28L93.254 80.414 69.3 56.38c-1.52-1.522-3.367-2.282-5.54-2.282-2.172 0-4.02.76-5.54 2.28L47.14 67.46c-1.52 1.522-2.28 3.37-2.28 5.542 0 2.172.76 4.02 2.28 5.54l29.493 29.493 11.08 11.08c1.52 1.52 3.368 2.28 5.54 2.28 2.173 0 4.02-.76 5.54-2.28l11.082-11.08L168.86 49.05c1.52-1.52 2.283-3.37 2.283-5.54 0-2.174-.76-4.02-2.28-5.54z"/></svg>
diff --git a/source/images/dropbutton-arrow-down.svg b/source/images/dropbutton-arrow-down.svg
new file mode 100644
index 00000000..628cd06d
--- /dev/null
+++ b/source/images/dropbutton-arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 444.8 444.8"><path fill="#fff" d="M248.1 352L434 165.9c7.2-6.9 10.8-15.4 10.8-25.7 0-10.3-3.6-18.8-10.8-25.7l-21.4-21.7c-7-7-15.6-10.6-25.7-10.6-9.9 0-18.6 3.5-26 10.6L222.4 231.5 83.7 92.8c-7-7-15.6-10.6-25.7-10.6-9.9 0-18.6 3.5-26 10.6l-21.4 21.7c-7 7-10.6 15.6-10.6 25.7s3.5 18.7 10.6 25.7L196.4 352c7.4 7 16.1 10.6 26 10.6 10.1 0 18.7-3.5 25.7-10.6z"/></svg>
diff --git a/source/images/dropbutton-arrow-up.svg b/source/images/dropbutton-arrow-up.svg
new file mode 100644
index 00000000..bb9ac13c
--- /dev/null
+++ b/source/images/dropbutton-arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-83 174.2 444.8 444.8"><path fill="#fff" d="M113.7,267L-72.2,453.1C-79.4,460-83,468.5-83,478.8c0,10.3,3.6,18.8,10.8,25.7l21.4,21.7c7,7,15.6,10.6,25.7,10.6 c9.9,0,18.6-3.5,26-10.6l138.5-138.7l138.7,138.7c7,7,15.6,10.6,25.7,10.6c9.9,0,18.6-3.5,26-10.6l21.4-21.7 c7-7,10.6-15.6,10.6-25.7c0-10.1-3.5-18.7-10.6-25.7L165.4,267c-7.4-7-16.1-10.6-26-10.6C129.3,256.4,120.7,259.9,113.7,267 L113.7,267z"/></svg>
diff --git a/source/images/home.svg b/source/images/home.svg
new file mode 100644
index 00000000..5756efa9
--- /dev/null
+++ b/source/images/home.svg
@@ -0,0 +1,3 @@
+<svg height="20" width="26" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#fff" d="m13 4-9 6 0 10 7 0 0-7 4 0 0 7 7 0 0-10zM5 0v5.3l-5 3.3 1 1.3 12-8 12 8 1-1.3-13-8.7-5 3.3v-3.3h-3z"/>
+</svg>
diff --git a/source/images/menu-arrow-down.svg b/source/images/menu-arrow-down.svg
new file mode 100644
index 00000000..3dceaf7c
--- /dev/null
+++ b/source/images/menu-arrow-down.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>chevron-down</title>
+<path fill="#323a45" d="M3.529 6.471l4 4c0.261 0.261 0.683 0.261 0.943 0l4-4c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.529 3.529-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z"></path>
+</svg>
diff --git a/source/images/menu-arrow-right.svg b/source/images/menu-arrow-right.svg
new file mode 100644
index 00000000..0de97617
--- /dev/null
+++ b/source/images/menu-arrow-right.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>chevron-right</title>
+<path fill="#f7f7f7" d="M6.471 12.471l4-4c0.261-0.261 0.261-0.683 0-0.943l-4-4c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.529 3.529-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z"></path>
+</svg>
diff --git a/source/images/messages-error.svg b/source/images/messages-error.svg
new file mode 100644
index 00000000..b24365a2
--- /dev/null
+++ b/source/images/messages-error.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#ffc5c2;}</style></defs><title>messages-error</title><g id="Page-1"><g id="messages-warning"><path id="Shape" class="cls-1" d="M51.51,46.09l-22.26-44A4,4,0,0,0,27.88.56a3.44,3.44,0,0,0-3.76,0,4,4,0,0,0-1.37,1.53L.49,46.09A4,4,0,0,0,.55,50,3.82,3.82,0,0,0,1.9,51.47,3.45,3.45,0,0,0,3.74,52H48.26a3.45,3.45,0,0,0,1.84-.53A3.82,3.82,0,0,0,51.45,50,4,4,0,0,0,51.51,46.09ZM29.71,43a1,1,0,0,1-.27.73.88.88,0,0,1-.66.3H23.22a.85.85,0,0,1-.65-.3,1,1,0,0,1-.28-.73V37a1,1,0,0,1,.28-.73.85.85,0,0,1,.65-.3h5.56a.88.88,0,0,1,.66.3,1,1,0,0,1,.27.73V43Zm-.06-11.69a.72.72,0,0,1-.3.52,1.16,1.16,0,0,1-.68.2H23.3a1.19,1.19,0,0,1-.69-.2.63.63,0,0,1-.29-.52L21.83,17a.77.77,0,0,1,.29-.66,1.11,1.11,0,0,1,.69-.34h6.38a1.06,1.06,0,0,1,.69.34.7.7,0,0,1,.29.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/source/images/messages-status.svg b/source/images/messages-status.svg
new file mode 100644
index 00000000..251b6cbc
--- /dev/null
+++ b/source/images/messages-status.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#94bfa2;}</style></defs><title>messages-status</title><path class="cls-1" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0ZM22.32,38.26,10.07,26,15,21.1l7.35,7.35L37,13.75l4.9,4.9Z"/></svg>
\ No newline at end of file
diff --git a/source/images/messages-warning.svg b/source/images/messages-warning.svg
new file mode 100644
index 00000000..757963ef
--- /dev/null
+++ b/source/images/messages-warning.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#fad980;}</style></defs><title>messages-warning</title><g id="Page-1"><g id="messages-warning"><path id="Shape" class="cls-1" d="M51.51,46.09l-22.26-44A4,4,0,0,0,27.88.56a3.44,3.44,0,0,0-3.76,0,4,4,0,0,0-1.37,1.53L.49,46.09A4,4,0,0,0,.55,50,3.82,3.82,0,0,0,1.9,51.47,3.45,3.45,0,0,0,3.74,52H48.26a3.45,3.45,0,0,0,1.84-.53A3.82,3.82,0,0,0,51.45,50,4,4,0,0,0,51.51,46.09ZM29.71,43a1,1,0,0,1-.27.73.88.88,0,0,1-.66.3H23.22a.85.85,0,0,1-.65-.3,1,1,0,0,1-.28-.73V37a1,1,0,0,1,.28-.73.85.85,0,0,1,.65-.3h5.56a.88.88,0,0,1,.66.3,1,1,0,0,1,.27.73V43Zm-.06-11.69a.72.72,0,0,1-.3.52,1.16,1.16,0,0,1-.68.2H23.3a1.19,1.19,0,0,1-.69-.2.63.63,0,0,1-.29-.52L21.83,17a.77.77,0,0,1,.29-.66,1.11,1.11,0,0,1,.69-.34h6.38a1.06,1.06,0,0,1,.69.34.7.7,0,0,1,.29.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/source/images/minus.svg b/source/images/minus.svg
new file mode 100644
index 00000000..6eaa97a0
--- /dev/null
+++ b/source/images/minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 401.991 401.991"><path d="M394 154.174c-5.33-5.33-11.806-7.995-19.417-7.995H27.406c-7.61 0-14.084 2.66-19.414 7.99C2.662 159.5 0 165.97 0 173.586v54.82c0 7.617 2.662 14.086 7.992 19.41 5.33 5.332 11.803 7.994 19.414 7.994h347.176c7.61 0 14.086-2.66 19.417-7.993 5.32-5.324 7.99-11.793 7.99-19.41v-54.82c0-7.615-2.66-14.087-7.99-19.413z"/></svg>
diff --git a/source/images/mobile-arrow-down.svg b/source/images/mobile-arrow-down.svg
new file mode 100644
index 00000000..eeafb4d4
--- /dev/null
+++ b/source/images/mobile-arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="12" viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#8e8e8e" d="M2.3 0l7.5 7.5 7.5-7.5 2.3 2.3-9.7 9.7-9.7-9.7 2.3-2.3z"/>
+</svg>
diff --git a/source/images/mobile-arrow-up.svg b/source/images/mobile-arrow-up.svg
new file mode 100644
index 00000000..922584b1
--- /dev/null
+++ b/source/images/mobile-arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="12" viewBox="0 0 19 12" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#8e8e8e" d="M2.3 12l7.5-7.5 7.5 7.5 2.3-2.3-9.7-9.7-9.7 9.7 2.3 2.3z"/>
+</svg>
diff --git a/source/images/mobile-close.svg b/source/images/mobile-close.svg
new file mode 100644
index 00000000..8db5f964
--- /dev/null
+++ b/source/images/mobile-close.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#555559" d="M21.9 2.2l-2.2-2.2-8.8 8.8-8.8-8.8-2.2 2.2 8.8 8.8-8.8 8.8 2.2 2.2 8.8-8.8 8.8 8.8 2.2-2.2-8.8-8.8 8.8-8.8z"/>
+</svg>
diff --git a/source/images/mobile-menu.svg b/source/images/mobile-menu.svg
new file mode 100644
index 00000000..eb6e792b
--- /dev/null
+++ b/source/images/mobile-menu.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="22" viewBox="0 0 33 22" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#555559" d="M0 22h33.1v-3.7h-33.1v3.7zM0 12.8h33.1v-3.7h-33.1v3.7zM0 0v3.7h33.1v-3.7h-33.1z"/>
+</svg>
diff --git a/source/images/plus.svg b/source/images/plus.svg
new file mode 100644
index 00000000..f6d230a5
--- /dev/null
+++ b/source/images/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 401.994 401.994"><path d="M394 154.175c-5.33-5.33-11.806-7.994-19.417-7.994H255.81V27.41c0-7.61-2.665-14.084-7.993-19.414C242.487 2.666 236.02 0 228.397 0h-54.81c-7.613 0-14.085 2.663-19.415 7.993-5.33 5.33-7.994 11.803-7.994 19.414v118.775H27.408c-7.612 0-14.085 2.664-19.415 7.994S0 165.973 0 173.59v54.818c0 7.618 2.662 14.086 7.992 19.41 5.33 5.333 11.803 7.995 19.414 7.995h118.77V374.59c0 7.61 2.665 14.09 7.995 19.417 5.33 5.325 11.806 7.987 19.418 7.987H228.4c7.618 0 14.087-2.662 19.418-7.987 5.332-5.33 7.994-11.806 7.994-19.417V255.813h118.77c7.618 0 14.09-2.662 19.417-7.994 5.325-5.33 7.99-11.797 7.99-19.415v-54.82c0-7.615-2.66-14.086-7.993-19.413z"/></svg>
diff --git a/source/images/select-arrows.svg b/source/images/select-arrows.svg
new file mode 100644
index 00000000..ab5fbb22
--- /dev/null
+++ b/source/images/select-arrows.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<path fill="#aeb0b5" d="M10 1l-5 7h10l-5-7zM10 19l5-7h-10l5 7z"></path>
+</svg>
\ No newline at end of file
--
GitLab