Skip to content

Alignment #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
khamer wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Alignment #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce970f3
wip (45min)
khamer May 22, 2023
993bb05
wip 1h
khamer May 22, 2023
45306f5
wip
khamer May 23, 2023
fe8d7a8
delete temp file
khamer Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion resources/styles/atoms/avatar/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
&__container {
display: grid;
grid: "photo name" 1fr "photo title" 1fr;
gap: config.$thin-v-space 0;
}

&__name {
Expand All @@ -26,6 +25,7 @@
}

&__title {
color: config.$gray-400;
grid-area: title;
padding: 0 config.$thin-h-space;
}
Expand All @@ -40,4 +40,15 @@
justify-self: end;
}
}

&.-small {
#{$b}__name {
font-size: 1rem;
line-height: 1.5;
}

#{$b}__photo {
max-height: 4rem;
}
}
}
5 changes: 5 additions & 0 deletions resources/styles/atoms/avatar/avatar.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,10 @@ module.exports = {
label: 'Reversed',
context: { class: '-reversed' },
},
{
name: 'small',
label: 'Small',
context: { class: '-small' },
},
],
}
2 changes: 1 addition & 1 deletion resources/styles/atoms/avatar/avatar.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="{{ class }} avatar">
<div class="avatar__container">
<img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='72' width='72' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
<img class='avatar__photo' src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='96' width='96' viewBox='0 0 1 1'><rect width='1' height='1' fill='%230001'/></svg>" alt="Jane Doe" />
<div class="avatar__name">
Jane Doe
</div>
Expand Down
8 changes: 5 additions & 3 deletions resources/styles/atoms/banner/banner.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
Sit quisquam error ipsum atque odit ex At eum eius autem perspiciatis sit! Sint ab!
</div>
<button class="banner__dismiss">
<svg xmlns="http://www.w3.org/2000/svg" class="banner__dismissIcon" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="31.2325" height="2.60271" rx="1.30135" transform="matrix(0.706026 0.708186 -0.706026 0.708186 1.94904 0)" fill="currentColor"/>
<rect x="10.3949" y="11.0784" width="2.59873" height="2.60668" rx="1.29937" fill="white"/>
<rect width="31.2325" height="2.60271" rx="1.30135" transform="matrix(0.706026 -0.708186 0.706026 0.708186 0 22.1568)" fill="currentColor"/>
</svg>

</button>
</div>
</div>
15 changes: 14 additions & 1 deletion resources/styles/atoms/button/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@
cursor: pointer;
display: inline-block;
font-weight: 700;
padding: config.$padding;
line-height: 1;
padding: 1rem 2rem;
border-radius: 4em;
transition: background-color var(--duration-fast) config.$fade-easing;

&:hover,
&:focus {
color: var(--button-color-contrast);
background-color: var(--button-color-hover);
}

Expand Down Expand Up @@ -86,4 +89,14 @@
color: var(--button-color-contrast);
}
}

&.-icon {
align-items: center;
border-radius: 100%;
display: inline-grid;
height: 3rem;
justify-items: center;
padding: 0;
width: 3rem;
}
}
8 changes: 7 additions & 1 deletion resources/styles/atoms/button/button--ghost.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<button class="button -ghost">Primary</button>
<button class="button -ghost">
Primary
<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5841 11.7821C11.8695 12.0753 12.3323 12.0753 12.6177 11.7821L17.7859 6.47366C17.8634 6.39405 17.9199 6.301 17.9553 6.20182C17.9925 6.09773 18.0065 5.98687 17.9973 5.87768C17.9917 5.81144 17.9778 5.74765 17.9566 5.68744C17.9301 5.61203 17.8915 5.54011 17.8407 5.47487C17.8238 5.45312 17.8055 5.43211 17.7859 5.41197L17.7834 5.40941L12.733 0.221882C12.4475 -0.0712958 11.9848 -0.0712953 11.6993 0.221882C11.4139 0.51506 11.4139 0.990396 11.6993 1.28357L15.5046 5.19209H0.730891C0.327232 5.19209 -8.34465e-07 5.5282 -8.34465e-07 5.94282C-8.34465e-07 6.35743 0.32723 6.69354 0.730889 6.69354L15.5046 6.69355L11.5841 10.7204C11.2987 11.0136 11.2987 11.4889 11.5841 11.7821Z" fill="currentColor"/>
</svg>

</button>
<button class="button -ghost -secondary">Secondary</button>
<button class="button -ghost -danger">Danger</button>
<button class="button -ghost -confirm">Confirm</button>
Expand Down
29 changes: 29 additions & 0 deletions resources/styles/atoms/button/button--icon.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<button class="button -icon">
<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="button -secondary -icon">
<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<button class="button -danger -icon">
<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<button class="button -confirm -icon">
<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<button class="button -disabled -icon">
<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L1 9L9 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

6 changes: 4 additions & 2 deletions resources/styles/atoms/checkbox/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,14 @@
}

&__checkbox {
pointer-events: none;
grid-area: checkbox;
background: var(--checkbox-color);
border-radius: .25em;
border: 2px solid var(--checkbox-color);
display: inline-block;
grid-area: checkbox;
height: #{config.$line-height * 1em};
padding: .25rem;
pointer-events: none;
vertical-align: middle;
width: #{config.$line-height * 1em};
}
Expand Down
28 changes: 14 additions & 14 deletions resources/styles/atoms/checkbox/checkbox--radio.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="checkbox">
<input class="checkbox__input" type="radio" name="radio1" id="radio1">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" for="radio1">
Expand All @@ -13,8 +13,8 @@
<div class="checkbox">
<input class="checkbox__input" type="radio" name="radio1" id="radio2" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" for="radio2">
Expand All @@ -25,8 +25,8 @@
<div class="checkbox">
<input class="checkbox__input" type="radio" id="radio3" disabled>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" for="radio3">
Expand All @@ -37,8 +37,8 @@
<div class="checkbox">
<input class="checkbox__input" type="radio" id="radio4" disabled checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" for="radio4">
Expand All @@ -49,8 +49,8 @@
<div class="checkbox -secondary">
<input class="checkbox__input" type="radio" id="radio5">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" for="radio5">
Expand All @@ -61,8 +61,8 @@
<div class="checkbox -secondary">
<input class="checkbox__input" type="radio" id="radio6" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" for="radio6">
Expand All @@ -73,8 +73,8 @@
<div class="checkbox">
<input class="checkbox__input" type="radio" name="radio1" id="radio7">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="0" stroke="none" fill="none">
<circle cx="6" cy="6" r="6" fill="currentColor" />
</svg>
</div>
<label class="checkbox__label" name="radio1" for="radio7">
Expand Down
28 changes: 14 additions & 14 deletions resources/styles/atoms/checkbox/checkbox.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox1">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox1">
Expand All @@ -13,8 +13,8 @@
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox2" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox2">
Expand All @@ -25,8 +25,8 @@
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox3" disabled>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox3">
Expand All @@ -37,8 +37,8 @@
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox4" disabled checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox4">
Expand All @@ -49,8 +49,8 @@
<div class="checkbox -secondary">
<input class="checkbox__input" type="checkbox" id="checkbox5">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox5">
Expand All @@ -61,8 +61,8 @@
<div class="checkbox -secondary">
<input class="checkbox__input" type="checkbox" id="checkbox6" checked>
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox6">
Expand All @@ -73,8 +73,8 @@
<div class="checkbox">
<input class="checkbox__input" type="checkbox" id="checkbox7">
<div class="checkbox__checkbox">
<svg class="checkbox__icon" viewBox="0 0 12 12" stroke-width="2" stroke="currentColor" fill="none">
<path d="M3 6l2 2l4 -4" />
<svg class="checkbox__icon" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 1L4.75 9.25L1 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<label class="checkbox__label" for="checkbox7">
Expand Down
6 changes: 5 additions & 1 deletion resources/styles/atoms/field/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,23 @@
}

&__input {
border: 1px solid config.$border;
border: 2px solid config.$border;
border-radius: .25rem;
font-family: config.$font-family;
margin: 0 0 .5rem;
padding: config.$thin-padding;
width: 100%;
background-color: config.$gray-50;
}

&__help {
color: config.$meta-text;
font-size: .75rem;
}

&__error {
color: config.$error;
font-size: .75rem;
}

&.-error {
Expand Down
10 changes: 0 additions & 10 deletions resources/styles/atoms/field/field--checkbox.twig
View file
Open in desktop

This file was deleted.

24 changes: 24 additions & 0 deletions resources/styles/atoms/headings/eyebrow/.null-ls_358407_eyebrow.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<div class="eyebrow">primary eyebrow</div>
<h1>And the Headline</h1>
<p>
Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
</p>


<div class="eyebrow -secondary">secondary eyebrow</div>
<h2>And the Headline</h2>
<p>
Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
</p>

<div class="eyebrow -highlighted">highlighted eyebrow</div>
<h1>And the Headline</h1>
<p>
Consectetur velit quia corporis explicabo necessitatibus, maiores odio. Nihil saepe temporibus ipsam voluptatibus voluptas Tempora voluptate dicta velit ut dicta! Vel sunt quidem numquam dicta dicta? Velit mollitia quas reprehenderit.
</p>

<div class="eyebrow -highlighted -secondary">secondary highlighted eyebrow</div>
<h2>And the Headline</h2>
<p>
Ipsum eum suscipit sed dolores eum! Voluptates tenetur repellendus nesciunt qui et Provident quasi nam quod repellendus praesentium Sed ipsum veritatis molestias enim expedita, est harum? Neque repudiandae repudiandae velit.
</p>
2 changes: 0 additions & 2 deletions resources/styles/atoms/headings/eyebrow/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
color: var(--eyebrow-color);
font-size: 1rem;
font-weight: bold;
margin-bottom: .25rem;
text-transform: uppercase;

&.-secondary {
--eyebrow-color: var(--color, #{config.$secondary});
Expand Down
Loading