Skip to content
Snippets Groups Projects
Commit fdbab358 authored by xaralis's avatar xaralis
Browse files

BEM everything

parent daa97200
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 114 additions and 144 deletions
source/_patterns/00-atoms/03-buttons/autowidth-button.mustache
+ 2
− 2
View file @ fdbab358
<button class="btn is-auto {{ classes }}">
<div class="btn-body">{{ cta }}</div>
<button class="btn btn--autowidth {{ classes }}">
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/basic-button.mustache
+ 1
− 1
View file @ fdbab358
<button class="btn {{ classes }}">
<div class="btn-body">{{ cta }}</div>
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/button-colors.mustache
+ 7
− 7
View file @ fdbab358
<button class="btn">
<div class="btn-body">{{ cta }}</div>
<div class="btn__body">{{ cta }}</div>
</button>
<button class="btn is-green">
<div class="btn-body">{{ cta }}</div>
<button class="btn btn--green">
<div class="btn__body">{{ cta }}</div>
</button>
<button class="btn is-inverted">
<div class="btn-body">{{ cta }}</div>
<button class="btn btn--inverted">
<div class="btn__body">{{ cta }}</div>
</button>
<button class="btn is-inverted to-faded">
<div class="btn-body">{{ cta }}</div>
<button class="btn btn--inverted btn--fading">
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/button-sizes.mustache
+ 3
− 3
View file @ fdbab358
<button class="btn">
<div class="btn-body">{{ cta }}</div>
<div class="btn__body">{{ cta }}</div>
</button>
<button class="btn is-lg">
<div class="btn-body">{{ cta }}</div>
<button class="btn btn--lg">
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/fullwidth-button.mustache
+ 2
− 2
View file @ fdbab358
<button class="btn is-fullwidth {{ classes }}">
<div class="btn-body">{{ cta }}</div>
<button class="btn btn--fullwidth {{ classes }}">
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/icon-button.mustache
+ 4
− 4
View file @ fdbab358
<button class="btn has-icon {{ classes }}">
<div class="btn-body-wrap">
<div class="btn-body">{{ cta }}</div>
<div class="btn-icon">
<button class="btn btn--icon {{ classes }}">
<div class="btn__body-wrap">
<div class="btn__body">{{ cta }}</div>
<div class="btn__icon">
<i class="{{ icon }}"></i>
</div>
</div>
......
source/_patterns/01-molecules/00-badge/basic-badge.mustache
+ 5
− 5
View file @ fdbab358
<div class="badge">
<div class="badge {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--md") }}
<div class="badge-body">
<div class="badge__body">
<span class="head-sm-heavy">{{ person.first }} {{ person.last }}</span>
<p class="badge-occupation">{{ person.occupation }}</p>
{{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge-link") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }}
<p class="badge__occupation">{{ person.occupation }}</p>
{{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
</div>
</div>
source/_patterns/01-molecules/00-badge/condensed-badge.mustache
+ 4
− 4
View file @ fdbab358
<div class="badge is-condensed">
<div class="badge badge--condensed {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--sm") }}
<div class="badge-body">
<span class="head-xs badge-title">Mikuláš Peksa</span>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }}
<div class="badge__body">
<span class="head-xs badge__title">Mikuláš Peksa</span>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
</div>
</div>
source/_patterns/02-organisms/00-global/footer.mustache
+ 26
− 32
View file @ fdbab358
<footer class="footer">
<section class="footer-section footer-main">
<section class="footer-section bg-grey-500">
<div class="top">
<div class="container">
<div class="grid grid-cols-12">
......@@ -15,43 +15,43 @@
</p>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase is-highlighted">Nová sekce</span>
<ul class="footer-links">
<li class="footer-link">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-3">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
<li class="footer-link">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
<li class="footer-link">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase is-highlighted">Nová sekce</span>
<ul class="footer-links">
<li class="footer-link">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-3">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
<li class="footer-link">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
<li class="footer-link">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
</ul>
</div>
<div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase is-highlighted">Nová sekce</span>
<ul class="footer-links">
<li class="footer-link">
<span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="mt-3">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
<li class="footer-link">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
<li class="footer-link">
<li class="mb-1">
<a href="#">Lorem ipsum</a>
</li>
</ul>
......@@ -67,19 +67,19 @@
</div>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div>
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "is-inverted is-lg is-fullwidth md:is-auto mb-1") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "is-green is-lg is-fullwidth md:is-auto") }}
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--inverted btn--lg btn--fullwidth md:btn--autowidth mb-1") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green btn--lg btn--fullwidth md:btn--autowidth") }}
</div>
</div>
</div>
</div>
</section>
<hr class="footer-splitter" />
<section class="footer-section is-dense footer-sub">
<section class="footer-section footer-section--dense bg-grey-500">
<div class="container">
<div class="grid grid-cols-12 justify-content-left">
<div class="md:col-span-3 col-span-12">
<span class="text-xl uppercase is-highlighted">Otevřenost</span>
<span class="text-xl uppercase text-white">Otevřenost</span>
</div>
<div class="lg:col-span-2 md:col-span-3 col-span-12">
<ul>
......@@ -105,20 +105,14 @@
</div>
</div>
</section>
<section class="footer-section footer-inv">
<section class="footer-section bg-black">
<div class="container">
<div class="footer-contacts">
<div class="footer-contact">
{{> molecules-condensed-badge }}
</div>
<div class="footer-contact">
{{> molecules-condensed-badge }}
</div>
<div class="footer-contact">
{{> molecules-condensed-badge }}
</div>
<div class="mt-4 lg:mt-0 lg:text-right footer-contact">
{{> atoms-basic-button(cta: "Kontakt", classes: "is-inverted is-fullwidth md:is-auto is-lg to-faded") }}
{{> molecules-condensed-badge(classes: "footer-contacts__item") }}
{{> molecules-condensed-badge(classes: "footer-contacts__item") }}
{{> molecules-condensed-badge(classes: "footer-contacts__item") }}
<div class="mt-4 lg:mt-0 lg:text-right footer-contacts__item">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--inverted btn--fullwidth md:btn--autowidth btn--lg btn--fading") }}
</div>
</div>
</div>
......
source/css/atoms/button.pcss
+ 35
− 34
View file @ fdbab358
.btn {
@apply inline-block text-center font-normal max-w-xs;
.btn-body,
.btn-icon {
&:hover {
@apply no-underline;
}
}
.btn__body,
.btn__icon {
@apply transition duration-200 bg-black text-white;
}
.btn-body {
.btn__body {
@apply block;
padding: .75em 2em;
}
&:hover {
@apply no-underline;
}
}
.btn.has-icon {
.btn-body-wrap {
.btn.btn--icon {
.btn__body-wrap {
@apply flex;
}
.btn-icon {
.btn__icon {
@apply border-l border-black px-2 flex items-center;
img {
......@@ -29,7 +30,7 @@
}
}
&:hover .btn-icon {
&:hover .btn__icon {
@apply border-l border-grey-500 bg-black;
svg, i {
......@@ -39,61 +40,61 @@
}
}
.btn.is-green {
.btn-body,
.btn-icon {
.btn.btn--green {
.btn__body,
.btn__icon {
@apply bg-green-100 text-white;
}
&:hover .btn-body,
&:hover .btn-icon {
@apply bg-black text-white;
.btn__icon {
@apply border-l border-green-200 px-2 flex;
}
&.to-faded:hover .btn-body {
@apply bg-grey-500 text-white;
&:hover .btn__body,
&:hover .btn__icon {
@apply bg-black text-white;
}
.btn-icon {
@apply border-l border-green-200 px-2 flex;
&.btn--fading:hover .btn__body {
@apply bg-grey-500 text-white;
}
}
.btn.is-inverted {
.btn-body,
.btn-icon {
.btn.btn--inverted {
.btn__body,
.btn__icon {
@apply bg-white text-black;
}
&:hover .btn-body,
&:hover .btn-icon {
&:hover .btn__body,
&:hover .btn__icon {
@apply bg-black text-white;
}
&.to-faded:hover .btn-body {
&.btn--fading:hover .btn__body {
@apply bg-grey-500 text-white;
}
}
.btn.is-lg .btn-body {
.btn.btn--lg .btn__body {
@apply text-lg;
}
@responsive {
.btn.is-fullwidth {
.btn.btn--fullwidth {
@apply w-full max-w-full;
.btn-body-wrap {
.btn__body-wrap {
@apply w-full max-w-full;
}
.btn-body {
.btn__body {
flex: 1;
}
}
.btn.is-auto {
.btn.btn--autowidth {
@apply w-auto;
}
}
source/css/molecules/badge.pcss
+ 7
− 7
View file @ fdbab358
.badge {
@apply flex items-center font-body;
.badge-body {
.badge__body {
@apply text-left ml-3;
}
.badge-title {
.badge__title {
@apply block;
}
.badge-occupation {
.badge__occupation {
@apply uppercase text-sm max-w-sm my-1;
}
.badge-link {
.badge__link {
@apply text-sm font-light block w-full;
}
}
.badge.is-condensed {
.badge-title {
.badge.badge--condensed {
.badge__title {
@apply mb-1;
}
.badge-body {
.badge__body {
@apply ml-2;
}
}
source/css/organisms/footer.pcss
+ 17
− 42
View file @ fdbab358
......@@ -2,49 +2,20 @@
@apply text-grey-200;
}
.footer-splitter {
@apply border-t border-grey-400;
}
.footer-section {
@apply py-3;
@screen md {
@apply py-6;
&.is-dense {
&.footer-section--dense {
@apply py-3;
}
}
}
.footer-inv {
@apply bg-black;
}
.footer-main,
.footer-sub {
@apply bg-grey-500;
}
.footer .is-highlighted {
@apply text-white;
}
.footer-contacts {
@apply grid grid-cols-12;
}
.footer-contacts .footer-contact {
@apply col-span-12 text-white;
@screen lg {
@apply col-span-6;
}
@screen xl {
@apply col-span-3;
}
.footer-splitter {
@apply border-t border-grey-400;
}
.footer-copy {
......@@ -56,14 +27,6 @@
}
}
.footer-links {
@apply mt-3;
}
.footer-link {
@apply mb-1;
}
.footer-social {
order: -1;
......@@ -73,6 +36,18 @@
}
}
.footer-social-links a {
@apply text-white ml-1;
.footer-contacts {
@apply grid grid-cols-12;
}
.footer-contacts .footer-contacts__item {
@apply col-span-12 text-white;
@screen lg {
@apply col-span-6;
}
@screen xl {
@apply col-span-3;
}
}
source/dist/style.pkgd.css
+ 1
− 1
View file @ fdbab358
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft