Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • clickable-select-chevron
  • feat/new-image-formats
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-12
  • 2.0.0-alpha-13
  • 2.0.0-alpha-14
  • 2.0.0-alpha-15
  • 2.0.0-alpha-16
  • 2.0.0-alpha-17
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
  • 2.0.1
  • 2.0.2
  • 2.0.3
  • 2.0.4
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.10.0
  • 2.11.0
  • 2.12.1
  • 2.13.0
  • 2.14.0
  • 2.15.0
  • 2.16.0
  • 2.16.1
  • 2.17.0
  • 2.18.0
  • 2.19.0
  • 2.2.0
  • 2.2.1
  • 2.20.0
  • 2.3.0
  • 2.3.1
  • 2.3.2
  • 2.3.3
  • 2.3.4
  • 2.4.0
  • 2.5.0
  • 2.5.1
  • 2.5.2
  • 2.6.0
  • 2.7.0
  • 2.7.1
  • 2.8.0
  • 2.9.0
  • 2.9.1
74 results

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
29 results
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1627 additions and 253 deletions
source/_patterns/02-organisms/12-chart/chart.mustache 0 → 100644
View file @ aac6d1d3
<div class="py-4">
<canvas
class="lg:h-120 lg:w-auto w-full mx-auto __chart-example"
></canvas>
</div>
source/_patterns/03-templates/candidate-detail.mustache
View file @ aac6d1d3
{{> organisms-header }}
<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default text-center lg:text-left">
<h1 class="head-alt-md md:head-alt-xl max-w-2xl">{{ person.first }} {{ person.last }}</h1>
<h2 class="head-xs mt-2 max-w-xl">{{ person.occupation }}</h2>
......@@ -11,7 +11,13 @@
<main>
<div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
<section class="lg:w-3/5 xl:w-2/3">
<div class="mb-16">
{{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
</div>
<div>
<h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
{{> atoms-month-calendar() }}
</div>
</section>
<section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
<div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">
......
source/_patterns/03-templates/cf2021/anonymous.mustache 0 → 100644
View file @ aac6d1d3
{{> organisms-simplified-navbar-with-actions }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
<div class="cf2021__title flex justify-between">
<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
</div>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
<div><strong>0</strong> <span>členů online</span></div>
<div><strong>0</strong> <span>online celkem</span></div>
<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
</div>
</div>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
</div>
</section>
<section class="cf2021__posts">
<div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
<div class="-mx-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Vše</option>
<option value="">Jen aktivní</option>
<option value="">Jen archivované</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Podle času</option>
<option value="">Podle podpory</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
<option value="">Jen příspěvky</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:46</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:42</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:40</span>
<a href="#" class="text-grey-200 text-xs ml-2 underline hidden md:inline">(Upraveno přesdedajícím)</a>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
</div>
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
</section>
</article>
source/_patterns/03-templates/cf2021/chairman.mustache 0 → 100644
View file @ aac6d1d3
This diff is collapsed.
source/_patterns/03-templates/cf2021/user.mustache 0 → 100644
View file @ aac6d1d3
{{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
<div class="cf2021__title flex justify-between">
<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
</div>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
<div><strong>0</strong> <span>členů online</span></div>
<div><strong>0</strong> <span>online celkem</span></div>
<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
</div>
</div>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
</div>
</section>
<section class="cf2021__posts">
<div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
<div class="-mx-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Vše</option>
<option value="">Jen aktivní</option>
<option value="">Jen archivované</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Podle času</option>
<option value="">Podle podpory</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
<option value="">Jen příspěvky</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
<a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<div class="mt-1 xl:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
<div class="my-8 space-y-4">
{{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
<div class="space-x-4">
{{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
<span class="text-sm text-grey-200 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
</div>
</div>
</section>
</article>
source/_patterns/03-templates/elections.mustache
View file @ aac6d1d3
......@@ -2,7 +2,7 @@
{{> organisms-elections-hero }}
<div class="__js-root">
<ui-view-provider :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
<ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
<main>
<div class="container container--default pt-8 lg:py-24">
<div class="text-center">
......
source/css/atoms/alert.pcss 0 → 100644
View file @ aac6d1d3
.alert {
@apply p-4 flex leading-snug;
&--dark,
&--black {
@apply bg-black text-white;
}
&--light,
&--grey-125 {
@apply bg-grey-125 text-grey-300;
}
&--error,
&--red-600 {
@apply bg-red-600 text-white;
}
&--warning,
&--yellow-400 {
@apply bg-yellow-400 text-black;
}
&--success,
&--green-400 {
@apply bg-green-400 text-white;
}
&--info,
&--blue-300 {
@apply bg-blue-300 text-white;
}
&--faded {
@apply bg-opacity-75;
}
}
.alert__icon {
@apply mr-2;
}
source/css/atoms/animations.pcss 0 → 100644
View file @ aac6d1d3
/* Obsolete with Tailwind 1.6, backported. */
@keyframes animate-ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
source/css/atoms/avatar.pcss
View file @ aac6d1d3
......@@ -6,7 +6,9 @@
}
}
@responsive {
.avatar--2xs {
@apply w-8;
}
.avatar--xs {
@apply w-12;
}
......@@ -28,7 +30,6 @@
.avatar--3xl {
@apply w-56;
}
}
.avatar--bordered {
img {
......
source/css/atoms/card.pcss
View file @ aac6d1d3
@responsive {
.card {
@apply elevation-2;
}
......@@ -6,7 +5,6 @@
.card__body {
@apply p-8;
}
}
.card--hoveractive {
@apply transition duration-200;
......@@ -23,3 +21,12 @@
.card-body-text {
@apply font-light leading-normal text-sm break-words ;
}
.card-actions {
@apply px-8 py-4 border-t border-grey-125 flex items-center;
}
.card-actions--right {
@apply justify-end;
}
source/css/atoms/contact-line.pcss
View file @ aac6d1d3
......@@ -9,11 +9,7 @@
&.contact-line--responsive {
i {
@apply hidden;
@screen lg {
@apply inline-block;
}
@apply hidden lg:inline-block;
}
}
}
source/css/atoms/container.pcss
View file @ aac6d1d3
......@@ -10,7 +10,6 @@
}
@responsive {
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
.container-padding--zero {
......@@ -27,4 +26,3 @@
margin-left: 0;
margin-right: 0;
}
}
source/css/atoms/form-field.pcss
View file @ aac6d1d3
.text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-no-wrap border border-grey-200 transition duration-200;
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-nowrap border border-grey-200 transition duration-200;
}
.text-input {
......@@ -114,7 +114,7 @@
@apply relative flex;
input {
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-grey-200 border border-grey-200 transition duration-200;
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
......@@ -127,6 +127,7 @@
&:checked {
@apply bg-blue-300 border-transparent;
}
&[disabled] {
......
source/css/atoms/full-calendar.pcss 0 → 100644
View file @ aac6d1d3
:root {
--fc-button-bg-color: #000;
--fc-button-border-color: #000;
--fc-button-hover-bg-color: #f9ce05;
--fc-button-hover-border-color: #f9ce05;
--fc-button-active-bg-color: #f9ce05;
--fc-button-active-border-color: #f9ce05;
--fc-event-bg-color: #fea86a;
--fc-event-border-color: #fea86a;
--fc-border-color: #ed9654;
--fc-today-bg-color: #ed9654;
--fc-daygrid-event-dot-width: 4px;
}
.fc {
@apply font-condensed;
}
.fc-col-header {
width: 100%!important;
}
/* Don't underline only when there is no href attribute defined. */
.fc .fc-col-header-cell-cushion:not([href]),
.fc .fc-daygrid-day-number:not([href]) {
@apply no-underline;
}
.fc .fc-col-header-cell {
@apply bg-orange-300 p-3 font-alt text-white text-xl capitalize;
}
.fc .fc-button {
@apply font-alt rounded-none px-5 py-2 duration-150;
}
.fc .fc-button:hover:not(:disabled),
.fc .fc-button:active:not(:disabled){
@apply text-black;
}
.fc .fc-event {
@apply p-1 rounded-none border-none text-sm;
}
.fc .fc-toolbar-title,
.fc .fc-today-button {
@apply capitalize;
}
.fc .fc-daygrid-day-number {
@apply font-alt text-3xl text-orange-300;
}
.fc .fc-multimonth-daygrid .fc-daygrid-day-number {
@apply text-base;
}
.fc .fc-day-today .fc-daygrid-day-number {
@apply text-white;
}
source/css/atoms/heading.pcss
View file @ aac6d1d3
@responsive {
.h-default {
@apply font-condensed font-medium leading-tight;
}
.h-alt {
@apply font-alt font-normal;
line-height: 0.96;
}
.h-allcaps {
@apply font-condensed font-normal uppercase leading-tight;
}
.head-alt-xl,
.content-block .head-alt-xl {
@apply text-7xl font-alt font-normal leading-negative;
@apply text-7xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-lg,
.content-block .head-alt-lg {
@apply text-6xl font-alt font-normal leading-negative;
@apply text-6xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-md,
.content-block .head-alt-md {
@apply text-4xl font-alt font-normal leading-negative;
@apply text-4xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-base,
.content-block .head-alt-base {
@apply text-3xl font-alt font-normal leading-negative;
@apply text-3xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-sm,
.content-block .head-alt-sm {
@apply text-2xl font-alt font-normal leading-negative;
@apply text-2xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-xs,
.content-block .head-alt-xs {
@apply text-xl font-alt font-normal leading-negative;
@apply text-xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-2xs,
.content-block .head-alt-2xs {
@apply text-lg font-alt font-normal leading-negative;
@apply text-lg font-alt font-normal;
line-height: 0.96;
}
......@@ -112,5 +132,3 @@
.content-block .head-allcaps-heavy-4xs {
@apply text-sm font-condensed font-bold uppercase leading-tight;
}
}
source/css/atoms/horizontal-rule.pcss
View file @ aac6d1d3
hr:not(.hr--unstyled) {
@apply border-t border-grey-100 my-4;
@screen md {
@apply my-8;
}
@apply border-t border-grey-100 my-4 md:my-8;
&.hr--big {
@apply my-8;
@screen md {
@apply my-16;
}
@apply my-8 md:my-16;
}
&.hr--condensed {
@apply my-2;
@screen md {
@apply my-4;
}
@apply my-2 md:my-4;
}
}
source/css/atoms/icons.pcss
View file @ aac6d1d3
@font-face {
font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?d982e8d9e6f59008d41d375111aea007');
src: url('../fonts/pirati-ui.eot?d982e8d9e6f59008d41d375111aea007#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?d982e8d9e6f59008d41d375111aea007') format('truetype'),
url('../fonts/pirati-ui.woff?d982e8d9e6f59008d41d375111aea007') format('woff'),
url('../fonts/pirati-ui.svg?d982e8d9e6f59008d41d375111aea007#pirati-ui') format('svg');
src: url('../fonts/pirati-ui.eot?964zxx');
src: url('../fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?964zxx') format('truetype'),
url('../fonts/pirati-ui.woff?964zxx') format('woff'),
url('../fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
......@@ -26,77 +25,363 @@
-moz-osx-font-smoothing: grayscale;
}
.ico--strategy:before { content: "\e932"; }
.ico--pig:before { content: "\e928"; }
.ico--thermometer:before { content: "\e90a"; }
.ico--pirati:before { content: "\e90d"; }
.ico--stackshare:before { content: "\e90f"; }
.ico--open-source:before { content: "\e90e"; }
.ico--search:before { content: "\e913"; }
.ico--cross:before { content: "\e937"; }
.ico--checkbox-checked:before { content: "\e938"; }
.ico--quill:before { content: "\e939"; }
.ico--feather:before { content: "\e939"; }
.ico--write:before { content: "\e939"; }
.ico--edit:before { content: "\e939"; }
.ico--sphere:before { content: "\e93a"; }
.ico--globe:before { content: "\e93a"; }
.ico--internet:before { content: "\e93a"; }
.ico--wikipedia:before { content: "\e93b"; }
.ico--brand:before { content: "\e93b"; }
.ico--youtube:before { content: "\e936"; }
.ico--users:before { content: "\e934"; }
.ico--group:before { content: "\e934"; }
.ico--team:before { content: "\e934"; }
.ico--members:before { content: "\e934"; }
.ico--community:before { content: "\e934"; }
.ico--collaborate:before { content: "\e934"; }
.ico--book:before { content: "\e935"; }
.ico--read:before { content: "\e935"; }
.ico--reading:before { content: "\e935"; }
.ico--bubbles:before { content: "\e930"; }
.ico--map:before { content: "\e914"; }
.ico--compass:before { content: "\e915"; }
.ico--folder-open:before { content: "\e916"; }
.ico--folder:before { content: "\e917"; }
.ico--drawer:before { content: "\e918"; }
.ico--stop:before { content: "\e919"; }
.ico--github:before { content: "\e91a"; }
.ico--clock:before { content: "\e91b"; }
.ico--calendar:before { content: "\e91c"; }
.ico--flickr:before { content: "\e91d"; }
.ico--instagram:before { content: "\e91e"; }
.ico--twitter:before { content: "\e91f"; }
.ico--newspaper:before { content: "\e920"; }
.ico--cart:before { content: "\e921"; }
.ico--home:before { content: "\e922"; }
.ico--link:before { content: "\e912"; }
.ico--power:before { content: "\e90c"; }
.ico--location:before { content: "\e906"; }
.ico--phone:before { content: "\e907"; }
.ico--linkedin:before { content: "\e903"; }
.ico--github1:before { content: "\e904"; }
.ico--gplus:before { content: "\e900"; }
.ico--twitter1:before { content: "\e901"; }
.ico--facebook:before { content: "\e902"; }
.ico--menu:before { content: "\e933"; }
.ico--chevron-right:before { content: "\e923"; }
.ico--chevron-left:before { content: "\e924"; }
.ico--chevron-down:before { content: "\e925"; }
.ico--chevron-up:before { content: "\e926"; }
.ico--zoom_out_map:before { content: "\e927"; }
.ico--arrow-down:before { content: "\e911"; }
.ico--link1:before { content: "\e910"; }
.ico--city:before { content: "\e908"; }
.ico--beer:before { content: "\e909"; }
.ico--edit-pencil:before { content: "\e929"; }
.ico--at:before { content: "\e905"; }
.ico--tasks:before { content: "\e93c"; }
.ico--calculator:before { content: "\e931"; }
.ico--bank:before { content: "\e92a"; }
.ico--facebook-official:before { content: "\e92b"; }
.ico--close:before { content: "\e92c"; }
.ico--anchor:before { content: "\e92d"; }
.ico--feed:before { content: "\e92e"; }
.ico--paw:before { content: "\e90b"; }
.ico--envelope:before { content: "\e92f"; }
\ No newline at end of file
.ico--mastodon:before {
content: "\e973";
}
.ico--helios:before {
content: "\e96e";
}
.ico--redmine:before {
content: "\e96f";
}
.ico--zulip:before {
content: "\e970";
}
.ico--forum:before {
content: "\e971";
}
.ico--pirati:before {
content: "\e90d";
}
.ico--jitsi:before {
content: "\e90f";
}
.ico--open-source:before {
content: "\e90e";
}
.ico--donation-full:before {
content: "\e96c";
}
.ico--donation-outline:before {
content: "\e96d";
}
.ico--strategy:before {
content: "\e932";
}
.ico--pig:before {
content: "\e928";
}
.ico--thermometer:before {
content: "\e90a";
}
.ico--menu:before {
content: "\e933";
}
.ico--chevron-right:before {
content: "\e923";
}
.ico--chevron-left:before {
content: "\e924";
}
.ico--chevron-down:before {
content: "\e925";
}
.ico--chevron-up:before {
content: "\e926";
}
.ico--link-horizontal:before {
content: "\e910";
}
.ico--beer:before {
content: "\e909";
}
.ico--food:before {
content: "\e968";
}
.ico--dots-three-vertical:before {
content: "\e940";
}
.ico--dots-three-horizontal:before {
content: "\e941";
}
.ico--log-out:before {
content: "\e942";
}
.ico--envelope:before {
content: "\e908";
}
.ico--pin:before {
content: "\e943";
}
.ico--at:before {
content: "\e905";
}
.ico--glass:before {
content: "\e967";
}
.ico--checkmark:before {
content: "\e965";
}
.ico--info:before {
content: "\e901";
}
.ico--question:before {
content: "\e904";
}
.ico--warning:before {
content: "\e93f";
}
.ico--code:before {
content: "\e94a";
}
.ico--checkbox-unchecked:before {
content: "\e94e";
}
.ico--star-full:before {
content: "\e94f";
}
.ico--star-empty:before {
content: "\e950";
}
.ico--bookmark:before {
content: "\e951";
}
.ico--cog:before {
content: "\e952";
}
.ico--key:before {
content: "\e953";
}
.ico--zoom-in:before {
content: "\e954";
}
.ico--zoom-out:before {
content: "\e955";
}
.ico--shrink:before {
content: "\e956";
}
.ico--printer:before {
content: "\e957";
}
.ico--file-openoffice:before {
content: "\e958";
}
.ico--user:before {
content: "\e959";
}
.ico--file-excel:before {
content: "\e95a";
}
.ico--file-word:before {
content: "\e95b";
}
.ico--file-pdf:before {
content: "\e95c";
}
.ico--file-picture:before {
content: "\e95d";
}
.ico--file-blank:before {
content: "\e95e";
}
.ico--folder-upload:before {
content: "\e95f";
}
.ico--upload:before {
content: "\e960";
}
.ico--cloud-upload:before {
content: "\e961";
}
.ico--folder-download:before {
content: "\e962";
}
.ico--download:before {
content: "\e963";
}
.ico--cloud-download:before {
content: "\e964";
}
.ico--alarm:before {
content: "\e900";
}
.ico--calculator:before {
content: "\e911";
}
.ico--facebook-full:before {
content: "\e913";
}
.ico--feed:before {
content: "\e927";
}
.ico--library:before {
content: "\e929";
}
.ico--office:before {
content: "\e92a";
}
.ico--attachment:before {
content: "\e92b";
}
.ico--enlarge:before {
content: "\e92c";
}
.ico--eye-off:before {
content: "\e92e";
}
.ico--eye:before {
content: "\e92f";
}
.ico--share:before {
content: "\e931";
}
.ico--search:before {
content: "\e939";
}
.ico--pencil:before {
content: "\e93c";
}
.ico--lock-open:before {
content: "\e947";
}
.ico--lock:before {
content: "\e948";
}
.ico--equalizer:before {
content: "\e949";
}
.ico--switch:before {
content: "\e94b";
}
.ico--loop:before {
content: "\e94c";
}
.ico--refresh:before {
content: "\e94d";
}
.ico--bullhorn:before {
content: "\e944";
}
.ico--bin:before {
content: "\e945";
}
.ico--cross:before {
content: "\e937";
}
.ico--checkbox-checked:before {
content: "\e938";
}
.ico--globe:before {
content: "\e93a";
}
.ico--wikipedia:before {
content: "\e93b";
}
.ico--youtube:before {
content: "\e936";
}
.ico--users:before {
content: "\e934";
}
.ico--book:before {
content: "\e935";
}
.ico--bubbles:before {
content: "\e930";
}
.ico--map:before {
content: "\e914";
}
.ico--compass:before {
content: "\e915";
}
.ico--folder-open:before {
content: "\e916";
}
.ico--folder:before {
content: "\e917";
}
.ico--drawer:before {
content: "\e918";
}
.ico--stop:before {
content: "\e919";
}
.ico--github:before {
content: "\e91a";
}
.ico--clock:before {
content: "\e91b";
}
.ico--calendar:before {
content: "\e91c";
}
.ico--flickr:before {
content: "\e91d";
}
.ico--instagram:before {
content: "\e91e";
}
.ico--twitter:before {
content: "\e91f";
}
.ico--newspaper:before {
content: "\e920";
}
.ico--cart:before {
content: "\e921";
}
.ico--home:before {
content: "\e922";
}
.ico--link:before {
content: "\e912";
}
.ico--power:before {
content: "\e90c";
}
.ico--rocket:before {
content: "\e946";
}
.ico--location:before {
content: "\e906";
}
.ico--phone:before {
content: "\e907";
}
.ico--linkedin:before {
content: "\e903";
}
.ico--facebook:before {
content: "\e902";
}
.ico--envelop:before {
content: "\e972";
}
.ico--file-text2:before {
content: "\e974";
}
.ico--price-tag:before {
content: "\e975";
}
.ico--price-tags:before {
content: "\e976";
}
.ico--stats-dots:before {
content: "\e99b";
}
.ico--bed:before {
content: "\e969";
}
.ico--train:before {
content: "\e96a";
}
.ico--bus:before {
content: "\e96b";
}
.ico--wheelchair:before {
content: "\e966";
}
.ico--thumbs-down:before {
content: "\e93d";
}
.ico--thumbs-up:before {
content: "\e93e";
}
.ico--anchor:before {
content: "\e92d";
}
.ico--paw:before {
content: "\e90b";
}
source/css/atoms/list.pcss
View file @ aac6d1d3
......@@ -8,52 +8,55 @@
@apply grid gap-4;
li {
@apply grid items-start;
@apply list-none relative;
grid-gap: .5em;
grid-template-columns: auto 1fr;
padding-left: 1em;
&:before {
@apply text-black;
@apply text-black absolute left-0;
font-family: "pirati-ui";
content: "\e919";
font-size: .5em;
font-size: .6em;
font-weight: 600;
margin-top: .7em;
margin-top: .6ex;
}
}
&.leading-tight li:before {
margin-top: .8em;
margin-top: .7ex;
}
&.leading-snug li:before {
margin-top: .6em;
margin-top: .6ex;
}
&.leading-normal li:before {
margin-top: .7em;
margin-top: .6ex;
}
&.leading-relaxed li:before {
margin-top: .6em;
margin-top: .8ex;
}
li ul {
@apply mt-4;
}
}
.unordered-list--dense,
.content-block ul {
@apply row-gap-0;
@apply gap-y-0;
}
.unordered-list--linked,
.content-block .unordered-list--linked {
li {
grid-template-columns: auto 1fr auto;
padding-right: 1em;
}
li:after {
@apply text-black;
@apply text-black absolute right-0;
font-family: "pirati-ui";
content: "\e923";
......
source/css/atoms/super-button.pcss
View file @ aac6d1d3
.super-button {
@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200;
@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200 md:px-6;
&:hover {
@apply no-underline;
}
@screen md {
@apply px-6;
}
}
.super-button__body {
......
source/css/atoms/table.pcss
View file @ aac6d1d3
......@@ -12,6 +12,13 @@
}
}
.table--light {
th,
thead td {
@apply bg-transparent text-black;
}
}
.table--striped,
.content-block table {
tr:nth-child(even) td {
......@@ -35,6 +42,15 @@
th,
thead td,
td {
@apply p-2;
@apply px-2 py-1;
}
}
.table--unxpadded {
th,
thead td,
td {
@apply px-0;
}
}

Pirátský GitLab - Home of the CopyLeft