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
Loading items

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Loading items
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 184 additions and 103 deletions
source/_patterns/00-atoms/15-form-fields/14-textarea-disabled.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-textarea(disabled: true) }}
source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache 0 → 100644
View file @ aac6d1d3
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-tooltip(classes: "tooltip--black") }}
{{> atoms-tooltip(classes: "tooltip--grey-125") }}
{{> atoms-tooltip(classes: "tooltip--red-600") }}
{{> atoms-tooltip(classes: "tooltip--yellow-400") }}
{{> atoms-tooltip(classes: "tooltip--green-400") }}
{{> atoms-tooltip(classes: "tooltip--blue-300") }}
</div>
</div>
source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache 0 → 100644
View file @ aac6d1d3
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--black tooltip--top") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--black tooltip--bottom") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--black tooltip--left") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--black tooltip--right") }}
</div>
</div>
<div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--top") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--bottom") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--left") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--right") }}
</div>
</div>
<div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--top") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--bottom") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--left") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--red-600 tooltip--right") }}
</div>
</div>
<div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--top") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--bottom") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--left") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--right") }}
</div>
</div>
<div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--top") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--bottom") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--left") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--green-400 tooltip--right") }}
</div>
</div>
<div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--top") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--bottom") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--left") }}
</div>
<div class="p-8">
{{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--right") }}
</div>
</div>
</div>
source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache 0 → 100644
View file @ aac6d1d3
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-tooltip(classes: "tooltip--dark") }}
{{> atoms-tooltip(classes: "tooltip--light") }}
{{> atoms-tooltip(classes: "tooltip--default") }}
{{> atoms-tooltip(classes: "tooltip--error") }}
{{> atoms-tooltip(classes: "tooltip--warning") }}
{{> atoms-tooltip(classes: "tooltip--success") }}
{{> atoms-tooltip(classes: "tooltip--info") }}
</div>
</div>
source/_patterns/00-atoms/16-tooltips/tooltip.mustache 0 → 100644
View file @ aac6d1d3
<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>
source/_patterns/00-atoms/17-alerts/alert-colors.mustache 0 → 100644
View file @ aac6d1d3
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
</div>
</div>
source/_patterns/00-atoms/17-alerts/alert-faded.mustache 0 → 100644
View file @ aac6d1d3
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
</div>
</div>
source/_patterns/00-atoms/17-alerts/alert-semantic.mustache 0 → 100644
View file @ aac6d1d3
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
{{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
</div>
</div>
source/_patterns/00-atoms/17-alerts/alert.mustache 0 → 100644
View file @ aac6d1d3
<span class="alert {{ classes }}">
{{# icon }}
<i class="alert__icon {{ icon }}"></i>
{{/ icon }}
<span>{{ excerpt.short }}</span>
</span>
source/_patterns/00-atoms/18-calendars/month-calendar.mustache 0 → 100644
View file @ aac6d1d3
<div class="__js-root">
<ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
</div>
source/_patterns/00-atoms/18-calendars/year-calendar.mustache 0 → 100644
View file @ aac6d1d3
<div class="__js-root">
<ui-year-calendar events='{{ calendarData }}'></ui-year-calendar>
</div>
source/_patterns/00-atoms/19-image/image.mustache 0 → 100644
View file @ aac6d1d3
<img src="https://picsum.photos/300/200" class="{{ classes }}">
source/_patterns/00-atoms/lists/dense-unordered-list.mustache deleted 100644 → 0
View file @ 39c60d19
<ul class="unordered-list unordered-list--dense">
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
</ul>
source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache deleted 100644 → 0
View file @ 39c60d19
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-tight">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-snug">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-normal">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-relaxed">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
</div>
source/_patterns/00-atoms/lists/unordered-list-sizes.mustache deleted 100644 → 0
View file @ 39c60d19
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-xs">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-sm">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-lg">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-xl">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
</ul>
</div>
</div>
source/_patterns/00-atoms/lists/unordered-list.mustache deleted 100644 → 0
View file @ 39c60d19
<ul class="unordered-list">
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
</ul>
source/_patterns/01-molecules/02-cards/card-actions.mustache 0 → 100644
View file @ aac6d1d3
<div class="card">
<div class="card__body">
<div class="flex items-center justify-between mb-4">
<h1 class="card-headline">Ukončit rozpravu?</h1>
<button><i class="ico--cross"></i></button>
</div>
<p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
</div>
<div class="card-actions space-x-1">
{{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
{{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
</div>
</div>
<div class="card">
<div class="card__body">
<div class="flex items-center justify-between mb-4">
<h1 class="card-headline">Ukončit rozpravu?</h1>
<button><i class="ico--cross"></i></button>
</div>
<p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
</div>
<div class="card-actions card-actions--right space-x-1">
{{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
{{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
</div>
</div>
source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache → source/_patterns/01-molecules/03-candidate-card/candidate-card.mustache
View file @ aac6d1d3
...@@ -7,8 +7,9 @@ ...@@ -7,8 +7,9 @@
</div> </div>
<div class="candidate-card__bio"> <div class="candidate-card__bio">
<h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1> <h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
<a href="#" class="block font-light mb-4">{{ person.email }}</a> <a href="#" class="candidate-card__bio-item block mb-4">{{ person.email }}</a>
<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2> <h2 class="candidate-card__bio-item">{{ person.occupation }}</h2>
<h2 class="head-allcaps-4xs mt-4">{{ person.city }}</h2>
</div> </div>
<div class="candidate-card__affiliation"> <div class="candidate-card__affiliation">
<div>{{ person.age }} let</div> <div>{{ person.age }} let</div>
......
source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache
View file @ aac6d1d3
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div> <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
{{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }} {{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
<div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div> <div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
<div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div> <div class="candidate-table-row__bio font-condensed">{{ person.age }} let, {{ person.occupation }}, {{ person.city }}</div>
<div class="candidate-table-row__affiliation"> <div class="candidate-table-row__affiliation">
{{> atoms-basic-avatar(classes: "w-6 mr-2") }} {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
<span class="font-bold font-condensed">{{ person.party }}</span> <span class="font-bold font-condensed">{{ person.party }}</span>
......

Pirátský GitLab - Home of the CopyLeft