Skip to content
Snippets Groups Projects
Commit 33bd28ce authored by Jennifer Dust's avatar Jennifer Dust
Browse files

Merge branch '5.x' into 5.0.x

parents 24ce1b70 023ecfa0
No related branches found
No related tags found
No related merge requests found
Showing
with 62 additions and 1147 deletions
......@@ -200,6 +200,8 @@ fabric.properties
.sass-cache/
*.css.map
*.js.map
# Webpack Analysis #
build/webpack-analysis
......
......@@ -24,7 +24,6 @@ To use this theme you need to install & enable these modules in advance, if they
- Twig Field Value (2.x)
- Twig Tweak (3.x)
This theme and it's build tools require the following local development tools:
- [Node.js](https://nodejs.org/en/)
......@@ -101,8 +100,8 @@ Example Usage = `@include bp-between(small, large) {}`
**Calculations**\
`partials/functions/_calculations.scss`
Example Usage = `width: calc-percent(250, 1000);`\
Example Usage = `font-size: calc-rem(24px);`
Example Usage = `width: percent(250, 1000);`\
Example Usage = `font-size: rem(24px);`
**Color**\
`partials/settings/_colors.scss`\
......@@ -121,16 +120,16 @@ Example Usage = `@include flex-grid(3, 'li', 40px, 40px);`
Example Usage = `@include full-width();`
**Heading Sizes**\
`partials/settings/_typography.scss`\
`partials/mixins/_typography.scss`
Example Usage = `@include heading-size(h1)`
Example Usage = `@include font-h2()`
**Line Height**\
`partials/settings/_typography.scss`\
`partials/functions/_typography.scss`
**Font Size & Line Height**\
`partials/mixins/_typography.scss`
Example Usage = `line-height: line-height(heading);`
Example Usage = `@include font-size(16, 30);`\
Example Usage = `font-size: var(--font-size-24);`\
Example Usage = `line-height: var(--font-line-height-30);`
**Responsive IFrame**\
`partials/mixins/_media.scss`
......@@ -149,6 +148,14 @@ Example Usage = `transition: transition(all, 0.6s, easeInOutQuad)`
Example Usage = `z-index: z-index(bottomless-pit);`
## Typography
We are taking a new approach with the switch from SASS to CSS variables, and with this we have also introduced a new naming convention. When reviewing our new font variables such as `--font-size-24` you will notice that they end with a number, that number is the pixel value of the font size at its largest display such as on desktop. This naming convention is used to help developers understand the value of the variable at its largest without having to look up the value in the settings file.
Another feature included with this change is a mixin that allows developers to easily set the font size & line height of an element in one line. An example of this would be `@include font-size(16, 30)` which would set the font size to the --font-size-16 variable and line height to --font-line-height-30. You can also just pass only a font size value and it will default to the line height of the same size. So an example would look like `@include font-size(24)` which would apply a font size and line height of 24px at the largest screen.
With this updated strucuture we are able to easily change the font size and line height of all headings at once. In addition they can be changed at different breakpoints for a more responsive design. These settings can be found in the `global/_typography.scss` file and are easily changed between projects as needed.
## Menu Structure
Since version 4.x, Prototype ships with an accessible menu that works with Drupal's default menu system out of the box. To utlize for the main menu there are a few steps you will need to take:
......
......@@ -5,11 +5,15 @@ libraryDependencies:
- core/drupal
- core/once
slots:
title: {}
title_block: {}
teaser_block: {}
content: {}
content_block: {}
props:
expand_icon: {}
collapse_icon: {}
prop:
type: object
items:
type: array
title: Items
properties:
button_text:
type: string
default: "Expand"
This diff is collapsed.
((Drupal, once) => {
Drupal.behaviors.accordion = {
attach(context, _settings) {
// Accordion Expand/Collapse functionality
once("accordionButtons", ".c-accordion-item__button", context).forEach(
(accordionButton) => {
accordionButton.addEventListener("click", () => {
const accordionContent = document.getElementById(
accordionButton.getAttribute("aria-controls")
);
const isExpanded =
accordionButton.getAttribute("aria-expanded") === "true";
accordionButton.setAttribute("aria-expanded", !isExpanded);
accordionContent.setAttribute("aria-hidden", isExpanded);
accordionButton.querySelector(
".c-accordion-item__button-text"
).textContent = !isExpanded ? "Collapse" : "Expand";
});
}
);
// Add the appropriate aria-label to each accordion button
once("accordionItems", ".c-accordion-item", context).forEach(
(accordionItem) => {
const accordionTitle = accordionItem.querySelector(
".c-accordion-item__title"
);
const accordionButton = accordionItem.querySelector(
".c-accordion-item__button"
);
const accordionTitleText = accordionTitle.textContent.trim();
accordionButton.setAttribute(
"aria-label",
`toggle ${accordionTitleText}`
);
}
);
},
};
})(Drupal, once);
!function(){var t,o;t=Drupal,o=once,t.behaviors.accordion={attach:function(t,e){o("accordionButtons",".c-accordion-item__button",t).forEach(function(o){o.addEventListener("click",function(){var t=document.getElementById(o.getAttribute("aria-controls")),e="true"===o.getAttribute("aria-expanded");o.setAttribute("aria-expanded",!e),t.setAttribute("aria-hidden",e),o.querySelector(".c-accordion-item__button-text").textContent=e?"Expand":"Collapse"})}),o("accordionItems",".c-accordion-item",t).forEach(function(t){var e=t.querySelector(".c-accordion-item__title"),t=t.querySelector(".c-accordion-item__button"),e=e.textContent.trim();t.setAttribute("aria-label","toggle ".concat(e))})}}}();
\ No newline at end of file
@import "_partials";
.c-accordion-item {
background: #fff;
.c-accordion-item__header-wrapper {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
@include bp-min(medium) {
align-items: flex-start;
flex-direction: row;
&::before {
order: 2;
flex: none;
content: "";
height: rem(64px);
width: rem(64px);
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin: 0 0 rem(4px) rem(28px);
}
.c-accordion-item__header {
order: 1;
padding-right: rem(96px);
background-image: inline-svg(
'<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1600"><path fill="none" fill-rule="evenodd" stroke="#4C5971" stroke-dasharray="1,2" d="M.5 1600V0"/></svg>'
);
background-repeat: no-repeat;
background-position: right rem(80px) center;
}
}
@include bp-min(large) {
.c-accordion-item__header {
padding-right: rem(140px);
}
}
&:last-child {
padding: 0;
}
&::before {
content: "";
display: block;
flex: none;
filter: brightness(0) invert(1);
margin: rem(18px) rem(18px) rem(36px) rem(18px);
width: rem(42px);
height: rem(42px);
z-index: 1;
position: absolute;
left: 0;
top: 0;
background-size: cover;
@include bp-min(medium) {
position: relative;
width: rem(64px);
height: rem(64px);
margin: rem(46px) rem(28px) rem(46px) rem(28px);
}
}
&::after {
content: "";
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
width: rem(80px);
height: rem(80px);
@include bp-min(medium) {
width: rem(120px);
height: rem(120px);
position: absolute;
top: rem(20px);
}
flex: none;
z-index: 0;
right: 0;
top: 0;
}
}
&:nth-child(4n-3) .c-accordion-item__header-wrapper {
&::after {
background: var(--color--orange);
}
}
&:nth-child(4n-2) .c-accordion-item__header-wrapper {
&::after {
background: var(--color--blue);
}
}
&:nth-child(4n-1) .c-accordion-item__header-wrapper {
&::after {
background: var(--color--cyan);
}
}
&:nth-child(4n) .c-accordion-item__header-wrapper {
&::after {
background: var(--color--navy);
}
}
// ICONS
&.icon--trio .c-accordion-item__header-wrapper::before {
background-image: inline-svg(
'<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#006EF0" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M47.01 6v12.593l-14.708 8.841-15.313-8.84V6l15.313 7.44L47.01 6Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m46.99 57.962-10.906-6.298V33.983l15.01-8.317L62 31.963 48.203 40.98 46.99 57.962Z"/><path stroke="#006EF0" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m2 31.963 10.906-6.297 15.01 8.317v17.681L17.01 57.962l-1.212-16.983L2 31.963Z"/></svg>'
);
}
&.icon--up .c-accordion-item__header-wrapper::before {
background-image: inline-svg(
'<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M33 3.54h28v28M60.72 3.54 3.28 60.98"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M53.979 38.102 31.1 60.98M26.158 10.281 3.28 33.161"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M36 38.102h18v18M8.5 10h18v18"/></svg>'
);
}
&.icon--together .c-accordion-item__header-wrapper::before {
background-image: inline-svg(
'<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><g stroke-miterlimit="10" stroke-width="2" clip-path="url(#a)"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M41.299 37.63h-12.4L22.7 26.892"/><path stroke="#006EF0" d="M41.299 37.63h8.432l10.42-18.048-20.827-.008L28.904 1.54l-10.42 18.048 4.216 7.304h12.4l6.199 10.738Z"/><path stroke="#006EF0" d="M22.7 26.892h-8.432L3.848 44.94l20.828.007L35.095 62.98l10.42-18.047L41.3 37.63"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>'
);
}
&.icon--speech .c-accordion-item__header-wrapper::before {
background-image: inline-svg(
'<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M33.282 48.896H17.928a5.12 5.12 0 0 1-5.12-5.12v-15.35a5.12 5.12 0 0 1 5.12-5.12l5.131-.007V13.063l10.236 10.236 17.903.007a5.12 5.12 0 0 1 5.12 5.12v15.35a5.12 5.12 0 0 1-5.12 5.12"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M6.398 41.215a5.12 5.12 0 0 1-5.12-5.12V13.059a5.12 5.12 0 0 1 5.12-5.12H57.6a5.12 5.12 0 0 1 5.12 5.12v23.036a5.12 5.12 0 0 1-5.12 5.12l-10.255.007v15.36l-15.36-15.36-25.588-.007Z"/></svg>'
);
}
&.icon--growth .c-accordion-item__header-wrapper::before {
background-image: inline-svg(
'<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m36.959 56.863 12.4-7.154 12.401 7.154V42.538l-12.4-7.16-12.401 7.16v14.325Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="m2.24 56.863 12.4-7.154 12.401 7.154V42.538l-12.4-7.16-12.401 7.16v14.325ZM19.6 27.916 32 20.764l12.4 7.153V13.591L32 6.433 19.6 13.59v14.325Z"/></svg>'
);
}
&.icon--tunnel .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--tunnel.svg");
}
&.icon--search .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--search.svg");
}
&.icon--location .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--location.svg");
}
&.icon--leader .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--leader.svg");
}
&.icon--group .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--group.svg");
}
&.icon--globe .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--globe.svg");
}
&.icon--cube .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--cube.svg");
}
&.icon--concentric-circles .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--concentric-circles.svg");
}
&.icon--coffee .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--coffee.svg");
}
&.icon--circles .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--circles.svg");
}
&.icon--book .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--book.svg");
}
&.icon--video .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--video.svg");
}
&.icon--connections .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--connections.svg");
}
&.icon--hub .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--hub.svg");
}
&.icon--web .c-accordion-item__header-wrapper::before {
background-image: url("../img/icon--web.svg");
}
}
.c-accordion-item__header {
order: 1;
width: 100%;
background: #fff;
@include bp-min(medium) {
padding-right: rem(96px);
background-image: url("../img/accordion-item-border.svg");
background-repeat: no-repeat;
background-position: right rem(48px) center;
}
@include bp-min(large) {
padding-right: rem(140px);
background-position: right rem(70px) center;
}
}
.c-accordion-item__title {
color: var(--color--navy);
font-size: rem(20px);
line-height: 150%;
font-weight: var(--font-weight-medium);
margin: rem(20px) 0 rem(12px) 0;
@include bp-min(medium) {
font-size: rem(28px);
line-height: 136%;
margin: 0 0 rem(24px) 0;
}
@include bp-min(xlarge) {
font-size: rem(40px);
line-height: 125%;
}
}
.page__wrapper .c-accordion-item__teaser-text {
margin: 0 0 rem(12px) 0;
@include bp-min(medium) {
margin: 0 0 rem(24px) 0;
}
p:not([class]) {
color: var(--color--black);
font-weight: var(--font-weight-light);
font-size: rem(14px);
line-height: 157%;
@include bp-min(medium) {
font-size: rem(18px);
line-height: 156%;
}
@include bp-min(large) {
font-size: rem(20px);
line-height: 160%;
}
@include bp-min(xlarge) {
font-size: rem(22px);
line-height: 155%;
}
}
p:not([class]):first-child {
margin-top: 0;
}
p:not([class]):last-child {
margin-bottom: 0;
}
}
.c-accordion-item__button {
margin: 0;
padding: 0;
border: none;
background: none;
display: inline-flex;
align-items: center;
justify-content: flex-start;
position: relative;
text-align: left;
border-radius: 0;
cursor: pointer;
overflow: hidden;
.c-accordion-item__button-icon {
background: var(--color--mist);
height: rem(22px);
width: rem(22px);
position: relative;
overflow: hidden;
display: block;
svg {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0 0;
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.plus {
transform: rotate(0deg) translate(-50%, -50%);
opacity: 1;
}
.minus {
transform: rotate(90deg) translate(-50%, -50%);
opacity: 0;
}
}
}
.c-accordion-item__button[aria-expanded="true"] {
.c-accordion-item__button-icon {
.plus {
transform: rotate(90deg) translate(-50%, -50%);
opacity: 0;
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.minus {
transform: rotate(0deg) translate(-50%, -50%);
opacity: 1;
transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
}
.c-accordion-item__button-text {
font-weight: var(--font-weight-medium);
font-size: rem(14px);
line-height: 157%;
letter-spacing: rem(1px);
text-transform: uppercase;
color: var(--color--navy);
margin: 0 0 0 rem(12px);
@include bp-min(medium) {
margin: 0 0 0 rem(18px);
}
}
.page__wrapper .c-accordion-item__content {
transition: max-height 850ms cubic-bezier(0.4, 0, 0.2, 1);
max-height: 400vh;
.c-accordion-item__content-inner-wrapper {
opacity: 1;
transition: opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
margin: rem(12px) 0 0 0;
@include bp-min(medium) {
margin: rem(40px) 0 0 0;
}
}
p:not([class]),
li:not([class]) {
color: var(--color--black);
font-size: rem(14px);
line-height: 157%;
font-weight: var(--font-weight-light);
@include bp-min(medium) {
font-size: rem(18px);
line-height: 156%;
}
@include bp-min(large) {
font-size: rem(20px);
line-height: 160%;
}
@include bp-min(xlarge) {
font-size: rem(22px);
line-height: 155%;
}
}
p:not([class]):first-child {
margin-top: 0;
}
p:not([class]):last-child {
margin-bottom: 0;
}
}
.c-accordion-item__content[aria-hidden="true"] {
max-height: 0;
overflow: hidden;
transition: max-height 650ms cubic-bezier(0.4, 0, 0.2, 1);
.c-accordion-item__content-inner-wrapper {
opacity: 0;
transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
.c-accordion-item__content-item-wrapper:not(:last-child) {
margin-bottom: rem(32px);
@include bp-min(medium) {
margin-bottom: rem(48px);
}
}
{% set id = 'accordion-content'|clean_unique_id %}
<section {{ attributes.addClass('c-accordion-item').merge(attributes).addClass(styles) }}>
<div class="c-accordion-item__header-wrapper">
<div class="c-accordion-item__wrapper">
<div class="c-accordion-item__header">
{% block title_block %}
<h3 class="c-accordion-item__title">{{ title }}</h3>
<h2 class="c-accordion-item__title">{{ title }}</h2>
{% endblock title_block %}
{% if teaser %}
{% block teaser_block %}
<div class="c-accordion-item__teaser-text">{{ teaser|check_markup('plain') }}</div>
{% endblock teaser_block %}
{% endif %}
<button class="c-accordion-item__button" aria-expanded="false" aria-controls="accordion-content-{{ id }}" aria-label="toggle accordion content">
<button class="c-accordion-item__button" aria-expanded="false" aria-controls={{ id }} aria-label="toggle accordion content">
<span class="c-accordion-item__button-icon" aria-hidden="true" focusable="false">
{% block expand_icon %}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" class="plus"><path fill="#002878" fill-rule="evenodd" d="M6.214 7.786v5.5h1.572v-5.5h5.5V6.214h-5.5v-5.5H6.214v5.5h-5.5v1.572h5.5Z" clip-rule="evenodd"/></svg>
{% endblock %}
{% block collapse_icon %}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" fill="none" class="minus"><path fill="#002878" d="M.714.214h12.571v1.571H.714z"/></svg>
</span>
<span class="c-accordion-item__button-text">Expand</span>
{% endblock %}
<span class="c-accordion-item__button-text">{{ button_text|default('Expand') }}</span>
</button>
{% if content %}
{% block content_block %}
<div class="c-accordion-item__content" id="accordion-content-{{ id }}" aria-hidden="true">
<div class="c-accordion-item__content" id='{{ id }}' aria-hidden="true">
<div class="c-accordion-item__content-inner-wrapper">
{% for item in content %}
<div class="c-accordion-item__content-item-wrapper">
{{ item }}
</div>
{% endfor %}
{{ content }}
</div>
</div>
{% endblock content_block %}
{% endif %}
{% endblock %}
</div>
</div>
</section>
<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1600"><path fill="none" fill-rule="evenodd" stroke="#4C5971" stroke-dasharray="1,2" d="M.5 1600V0"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M32 23.371v35.5"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M62.72 5.648 32 23.371 1.28 5.648v35.487L32 58.872l30.72-17.737V5.648Z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M14.081 45.06c7.07 0 12.8-5.73 12.8-12.8s-5.73-12.8-12.8-12.8c-7.069 0-12.8 5.73-12.8 12.8s5.731 12.8 12.8 12.8Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M23.04 60.578c7.07 0 12.8-5.73 12.8-12.8 0-7.069-5.73-12.8-12.8-12.8s-12.8 5.731-12.8 12.8c0 7.07 5.73 12.8 12.8 12.8Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M40.96 60.578c7.07 0 12.8-5.73 12.8-12.8 0-7.069-5.73-12.8-12.8-12.8s-12.8 5.731-12.8 12.8c0 7.07 5.73 12.8 12.8 12.8Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M49.919 45.06c7.069 0 12.8-5.73 12.8-12.8s-5.731-12.8-12.8-12.8c-7.07 0-12.8 5.73-12.8 12.8s5.73 12.8 12.8 12.8Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M40.96 29.542c7.07 0 12.8-5.73 12.8-12.8 0-7.069-5.73-12.8-12.8-12.8s-12.8 5.731-12.8 12.8c0 7.07 5.73 12.8 12.8 12.8Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M23.04 29.542c7.07 0 12.8-5.73 12.8-12.8 0-7.069-5.73-12.8-12.8-12.8s-12.8 5.731-12.8 12.8c0 7.07 5.73 12.8 12.8 12.8Z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M6.124 49.657h28.16"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M47.076 27.414c7.07 0 12.8 5.73 12.8 12.8s-5.73 12.8-12.8 12.8"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M6.124 27.416h40.96v25.6a5.122 5.122 0 0 1-5.12 5.12h-30.72a5.122 5.122 0 0 1-5.12-5.12v-25.6Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M26.604 4.385V22.3M16.489 9.509v12.79M36.718 9.509v12.79"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><g stroke-miterlimit="10" stroke-width="2" clip-path="url(#a)"><path stroke="#006EF0" d="M1.28 32.26C1.28 15.294 15.034 1.54 32 1.54M62.72 32.26c0 16.966-13.754 30.72-30.72 30.72"/><path stroke="#006EF0" d="M20.48 52.214C9.46 45.85 5.685 31.76 12.047 20.74M43.52 12.308C54.54 18.67 58.315 32.76 51.953 43.78"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M51.953 43.78C45.59 54.8 31.499 58.576 20.48 52.213"/><path stroke="#006EF0" d="M28.16 38.912a7.68 7.68 0 0 1-2.81-10.49 7.68 7.68 0 0 1 10.49-2.812 7.68 7.68 0 0 1 2.811 10.491M39.68 45.563c-7.347 4.242-16.741 1.724-20.982-5.622M24.32 18.958c7.347-4.242 16.741-1.724 20.982 5.622"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M45.302 24.58c4.242 7.347 1.724 16.741-5.622 20.982M32 1.54c16.966 0 30.72 13.754 30.72 30.72"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M12.047 20.74C18.41 9.72 32.501 5.945 43.52 12.308M38.65 36.1a7.68 7.68 0 0 1-10.49 2.81M18.698 39.94c-4.242-7.347-1.724-16.741 5.622-20.982M32 62.98c-16.966 0-30.72-13.754-30.72-30.72"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M6.866 37.846a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Zm12.567 21.767a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m22.226 49.19 5.586-9.675"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M44.567 59.613a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m47.36 49.19 6.984-12.096M22.226 15.33l5.586 9.674m12.566 7.256 11.172.001"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M57.134 37.847a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M38.986 10.493H25.02"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M32 40.637a8.378 8.378 0 1 0 0-16.755 8.378 8.378 0 0 0 0 16.755ZM44.567 16.08a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Zm-25.134 0a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m9.656 37.094 6.985 12.097"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="m36.19 39.516 5.584 9.674M12.45 32.26h11.172m12.566-7.253 5.586-9.677m12.568 12.094-6.985-12.098M25.015 54.027h13.971M16.64 15.33 9.656 27.426"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M6.866 37.846a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Zm12.567 21.767a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m22.226 49.19 5.586-9.675"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M44.567 59.613a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m47.36 49.19 6.984-12.096M22.226 15.33l5.586 9.674m12.566 7.256 11.172.001"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M57.134 37.847a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M38.986 10.493H25.02"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M32 40.637a8.378 8.378 0 1 0 0-16.755 8.378 8.378 0 0 0 0 16.755ZM44.567 16.08a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Zm-25.134 0a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m9.656 37.094 6.985 12.097"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="m36.19 39.516 5.584 9.674M12.45 32.26h11.172m12.566-7.253 5.586-9.677m12.568 12.094-6.985-12.098M25.015 54.027h13.971M16.64 15.33 9.656 27.426"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><g stroke-miterlimit="10" stroke-width="2" clip-path="url(#a)"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="m1.28 62.98 23.886-23.886M62.72 39.094H25.166M25.166 39.094V1.54"/><path stroke="#006EF0" d="M1.28 25.427V62.98h37.554L62.72 39.094V1.54M1.28 25.427h37.554L62.72 1.54M1.28 25.427 25.166 1.54H62.72M38.834 25.428V62.98"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><g stroke-miterlimit="10" stroke-width="2" clip-path="url(#a)"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M31.953 1.587v61.346M47.347 32.261c0-13.137-6.186-24.577-15.36-30.72-9.174 6.143-15.36 17.585-15.36 30.72 0 13.135 6.186 24.577 15.36 30.72 9.174-6.143 15.36-17.585 15.36-30.72Z"/><path stroke="#006EF0" d="M32 62.98c16.966 0 30.72-13.754 30.72-30.72S48.966 1.54 32 1.54 1.28 15.294 1.28 32.26 15.034 62.98 32 62.98ZM1.28 32.26h61.345"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><g stroke-miterlimit="10" stroke-width="2" clip-path="url(#a)"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M6.401 36.107h7.683a5.122 5.122 0 0 1 5.12 5.12v5.11H1.28v-5.11a5.122 5.122 0 0 1 5.12-5.12Z"/><path stroke="#006EF0" d="M10.242 30.983a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8ZM28.159 19.466h7.682a5.122 5.122 0 0 1 5.12 5.12v5.11H23.04v-5.11a5.122 5.122 0 0 1 5.12-5.12ZM32 14.341a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8ZM28.159 52.75h7.682a5.122 5.122 0 0 1 5.12 5.12v5.11H23.04v-5.11a5.122 5.122 0 0 1 5.12-5.12ZM32 47.625a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M49.917 36.107H57.6a5.122 5.122 0 0 1 5.12 5.12v5.11H44.797v-5.11a5.122 5.122 0 0 1 5.12-5.12Z"/><path stroke="#006EF0" d="M53.757 30.983a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m24.744 36.45-9.675 5.585M32 12.712v11.17M39.254 36.448l9.677 5.587"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M32 12.712A5.586 5.586 0 1 0 32 1.54a5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M10.232 25.28a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M10.232 50.414a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M32 62.981a5.586 5.586 0 1 0 0-11.171 5.586 5.586 0 0 0 0 11.171Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M32 40.638a8.378 8.378 0 1 0 0-16.755 8.378 8.378 0 0 0 0 16.755ZM53.768 50.414a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#FFFFFF" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M53.768 25.28a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="m48.93 22.486-9.675 5.586M32 40.639v11.17M15.07 22.486l9.676 5.586"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m24.744 36.45-9.675 5.585M32 12.712v11.17M39.254 36.448l9.677 5.587"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M32 12.712A5.586 5.586 0 1 0 32 1.54a5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M10.232 25.28a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M10.232 50.414a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M32 62.981a5.586 5.586 0 1 0 0-11.171 5.586 5.586 0 0 0 0 11.171Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="M32 40.638a8.378 8.378 0 1 0 0-16.755 8.378 8.378 0 0 0 0 16.755ZM53.768 50.414a5.586 5.586 0 1 0 0-11.172 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="M53.768 25.28a5.586 5.586 0 1 0 0-11.173 5.586 5.586 0 0 0 0 11.172Z"/><path stroke="#006EF0" stroke-miterlimit="10" stroke-width="2" d="m48.93 22.486-9.675 5.586M32 40.639v11.17M15.07 22.486l9.676 5.586"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none"><g stroke-miterlimit="10" stroke-width="2" clip-path="url(#a)"><path stroke="#006EF0" d="M6.401 52.75h7.683a5.122 5.122 0 0 1 5.12 5.12v5.11H1.28v-5.11a5.122 5.122 0 0 1 5.12-5.12ZM10.242 47.625a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8ZM28.159 19.466h7.682a5.122 5.122 0 0 1 5.12 5.12v5.11H23.04v-5.11a5.122 5.122 0 0 1 5.12-5.12ZM32 14.341a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8ZM28.159 52.75h7.682a5.122 5.122 0 0 1 5.12 5.12v5.11H23.04v-5.11a5.122 5.122 0 0 1 5.12-5.12ZM32 47.625a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8ZM49.917 52.75H57.6a5.122 5.122 0 0 1 5.12 5.12v5.11H44.797v-5.11a5.122 5.122 0 0 1 5.12-5.12ZM53.757 47.625a6.4 6.4 0 1 0 0-12.8 6.4 6.4 0 0 0 0 12.8Z"/><path stroke="#4C5971" stroke-dasharray="2 2" stroke-linejoin="bevel" d="M21.69 16.903 10.243 29.701M53.759 29.7l-11.45-12.797"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment