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 Hide 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 }}"> <button class="btn btn--autowidth {{ classes }}">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
source/_patterns/00-atoms/03-buttons/basic-button.mustache
+ 1
− 1
View file @ fdbab358
<button class="btn {{ classes }}"> <button class="btn {{ classes }}">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
source/_patterns/00-atoms/03-buttons/button-colors.mustache
+ 7
− 7
View file @ fdbab358
<button class="btn"> <button class="btn">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
<button class="btn is-green"> <button class="btn btn--green">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
<button class="btn is-inverted"> <button class="btn btn--inverted">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
<button class="btn is-inverted to-faded"> <button class="btn btn--inverted btn--fading">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
source/_patterns/00-atoms/03-buttons/button-sizes.mustache
+ 3
− 3
View file @ fdbab358
<button class="btn"> <button class="btn">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
<button class="btn is-lg"> <button class="btn btn--lg">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
source/_patterns/00-atoms/03-buttons/fullwidth-button.mustache
+ 2
− 2
View file @ fdbab358
<button class="btn is-fullwidth {{ classes }}"> <button class="btn btn--fullwidth {{ classes }}">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
</button> </button>
source/_patterns/00-atoms/03-buttons/icon-button.mustache
+ 4
− 4
View file @ fdbab358
<button class="btn has-icon {{ classes }}"> <button class="btn btn--icon {{ classes }}">
<div class="btn-body-wrap"> <div class="btn__body-wrap">
<div class="btn-body">{{ cta }}</div> <div class="btn__body">{{ cta }}</div>
<div class="btn-icon"> <div class="btn__icon">
<i class="{{ icon }}"></i> <i class="{{ icon }}"></i>
</div> </div>
</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") }} {{> atoms-basic-avatar(classes: "avatar--md") }}
<div class="badge-body"> <div class="badge__body">
<span class="head-sm-heavy">{{ person.first }} {{ person.last }}</span> <span class="head-sm-heavy">{{ person.first }} {{ person.last }}</span>
<p class="badge-occupation">{{ person.occupation }}</p> <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-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }} {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
</div> </div>
</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") }} {{> atoms-basic-avatar(classes: "avatar--sm") }}
<div class="badge-body"> <div class="badge__body">
<span class="head-xs badge-title">Mikuláš Peksa</span> <span class="head-xs badge__title">Mikuláš Peksa</span>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }} {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
</div> </div>
</div> </div>
source/_patterns/02-organisms/00-global/footer.mustache
+ 26
− 32
View file @ fdbab358
<footer class="footer"> <footer class="footer">
<section class="footer-section footer-main"> <section class="footer-section bg-grey-500">
<div class="top"> <div class="top">
<div class="container"> <div class="container">
<div class="grid grid-cols-12"> <div class="grid grid-cols-12">
...@@ -15,43 +15,43 @@ ...@@ -15,43 +15,43 @@
</p> </p>
</div> </div>
<div class="md:col-span-2 col-span-12"> <div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase is-highlighted">Nová sekce</span> <span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="footer-links"> <ul class="mt-3">
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="md:col-span-2 col-span-12"> <div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase is-highlighted">Nová sekce</span> <span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="footer-links"> <ul class="mt-3">
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="md:col-span-2 col-span-12"> <div class="md:col-span-2 col-span-12">
<span class="text-xl uppercase is-highlighted">Nová sekce</span> <span class="text-xl uppercase text-white">Nová sekce</span>
<ul class="footer-links"> <ul class="mt-3">
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
<li class="footer-link"> <li class="mb-1">
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
...@@ -67,19 +67,19 @@ ...@@ -67,19 +67,19 @@
</div> </div>
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }} {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div> </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: "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: "is-green is-lg is-fullwidth md:is-auto") }} {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green btn--lg btn--fullwidth md:btn--autowidth") }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<hr class="footer-splitter" /> <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="container">
<div class="grid grid-cols-12 justify-content-left"> <div class="grid grid-cols-12 justify-content-left">
<div class="md:col-span-3 col-span-12"> <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>
<div class="lg:col-span-2 md:col-span-3 col-span-12"> <div class="lg:col-span-2 md:col-span-3 col-span-12">
<ul> <ul>
...@@ -105,20 +105,14 @@ ...@@ -105,20 +105,14 @@
</div> </div>
</div> </div>
</section> </section>
<section class="footer-section footer-inv"> <section class="footer-section bg-black">
<div class="container"> <div class="container">
<div class="footer-contacts"> <div class="footer-contacts">
<div class="footer-contact"> {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
{{> molecules-condensed-badge }} {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
</div> {{> molecules-condensed-badge(classes: "footer-contacts__item") }}
<div class="footer-contact"> <div class="mt-4 lg:mt-0 lg:text-right footer-contacts__item">
{{> molecules-condensed-badge }} {{> atoms-basic-button(cta: "Kontakt", classes: "btn--inverted btn--fullwidth md:btn--autowidth btn--lg btn--fading") }}
</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") }}
</div> </div>
</div> </div>
</div> </div>
......
source/css/atoms/button.pcss
+ 35
− 34
View file @ fdbab358
.btn { .btn {
@apply inline-block text-center font-normal max-w-xs; @apply inline-block text-center font-normal max-w-xs;
.btn-body,
.btn-icon {
@apply transition duration-200 bg-black text-white;
}
.btn-body {
@apply block;
padding: .75em 2em;
}
&:hover { &:hover {
@apply no-underline; @apply no-underline;
} }
} }
.btn.has-icon { .btn__body,
.btn-body-wrap { .btn__icon {
@apply transition duration-200 bg-black text-white;
}
.btn__body {
@apply block;
padding: .75em 2em;
}
.btn.btn--icon {
.btn__body-wrap {
@apply flex; @apply flex;
} }
.btn-icon { .btn__icon {
@apply border-l border-black px-2 flex items-center; @apply border-l border-black px-2 flex items-center;
img { img {
...@@ -29,7 +30,7 @@ ...@@ -29,7 +30,7 @@
} }
} }
&:hover .btn-icon { &:hover .btn__icon {
@apply border-l border-grey-500 bg-black; @apply border-l border-grey-500 bg-black;
svg, i { svg, i {
...@@ -39,61 +40,61 @@ ...@@ -39,61 +40,61 @@
} }
} }
.btn.is-green { .btn.btn--green {
.btn-body, .btn__body,
.btn-icon { .btn__icon {
@apply bg-green-100 text-white; @apply bg-green-100 text-white;
} }
&:hover .btn-body, .btn__icon {
&:hover .btn-icon { @apply border-l border-green-200 px-2 flex;
@apply bg-black text-white;
} }
&.to-faded:hover .btn-body { &:hover .btn__body,
@apply bg-grey-500 text-white; &:hover .btn__icon {
@apply bg-black text-white;
} }
.btn-icon { &.btn--fading:hover .btn__body {
@apply border-l border-green-200 px-2 flex; @apply bg-grey-500 text-white;
} }
} }
.btn.is-inverted { .btn.btn--inverted {
.btn-body, .btn__body,
.btn-icon { .btn__icon {
@apply bg-white text-black; @apply bg-white text-black;
} }
&:hover .btn-body, &:hover .btn__body,
&:hover .btn-icon { &:hover .btn__icon {
@apply bg-black text-white; @apply bg-black text-white;
} }
&.to-faded:hover .btn-body { &.btn--fading:hover .btn__body {
@apply bg-grey-500 text-white; @apply bg-grey-500 text-white;
} }
} }
.btn.is-lg .btn-body { .btn.btn--lg .btn__body {
@apply text-lg; @apply text-lg;
} }
@responsive { @responsive {
.btn.is-fullwidth { .btn.btn--fullwidth {
@apply w-full max-w-full; @apply w-full max-w-full;
.btn-body-wrap { .btn__body-wrap {
@apply w-full max-w-full; @apply w-full max-w-full;
} }
.btn-body { .btn__body {
flex: 1; flex: 1;
} }
} }
.btn.is-auto { .btn.btn--autowidth {
@apply w-auto; @apply w-auto;
} }
} }
source/css/molecules/badge.pcss
+ 7
− 7
View file @ fdbab358
.badge { .badge {
@apply flex items-center font-body; @apply flex items-center font-body;
.badge-body { .badge__body {
@apply text-left ml-3; @apply text-left ml-3;
} }
.badge-title { .badge__title {
@apply block; @apply block;
} }
.badge-occupation { .badge__occupation {
@apply uppercase text-sm max-w-sm my-1; @apply uppercase text-sm max-w-sm my-1;
} }
.badge-link { .badge__link {
@apply text-sm font-light block w-full; @apply text-sm font-light block w-full;
} }
} }
.badge.is-condensed { .badge.badge--condensed {
.badge-title { .badge__title {
@apply mb-1; @apply mb-1;
} }
.badge-body { .badge__body {
@apply ml-2; @apply ml-2;
} }
} }
source/css/organisms/footer.pcss
+ 17
− 42
View file @ fdbab358
...@@ -2,49 +2,20 @@ ...@@ -2,49 +2,20 @@
@apply text-grey-200; @apply text-grey-200;
} }
.footer-splitter {
@apply border-t border-grey-400;
}
.footer-section { .footer-section {
@apply py-3; @apply py-3;
@screen md { @screen md {
@apply py-6; @apply py-6;
&.is-dense { &.footer-section--dense {
@apply py-3; @apply py-3;
} }
} }
} }
.footer-inv { .footer-splitter {
@apply bg-black; @apply border-t border-grey-400;
}
.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-copy { .footer-copy {
...@@ -56,14 +27,6 @@ ...@@ -56,14 +27,6 @@
} }
} }
.footer-links {
@apply mt-3;
}
.footer-link {
@apply mb-1;
}
.footer-social { .footer-social {
order: -1; order: -1;
...@@ -73,6 +36,18 @@ ...@@ -73,6 +36,18 @@
} }
} }
.footer-social-links a { .footer-contacts {
@apply text-white ml-1; @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.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft