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

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 197 additions and 6 deletions
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/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/03-candidate-card/candidate-card.mustache
View file @ aac6d1d3
......@@ -7,8 +7,9 @@
</div>
<div class="candidate-card__bio">
<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>
<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
<a href="#" class="candidate-card__bio-item block mb-4">{{ person.email }}</a>
<h2 class="candidate-card__bio-item">{{ person.occupation }}</h2>
<h2 class="head-allcaps-4xs mt-4">{{ person.city }}</h2>
</div>
<div class="candidate-card__affiliation">
<div>{{ person.age }} let</div>
......
source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache
View file @ aac6d1d3
......@@ -2,7 +2,7 @@
<div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
{{> 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__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">
{{> atoms-basic-avatar(classes: "w-6 mr-2") }}
<span class="font-bold font-condensed">{{ person.party }}</span>
......
source/_patterns/01-molecules/05-pagination/inline-pagination.mustache 0 → 100644
View file @ aac6d1d3
<nav class="pagination pagination--inline space-x-1 {{ classes }}">
{{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
{{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
{{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
{{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
</nav>
source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache 0 → 100644
View file @ aac6d1d3
<nav class="pagination pagination--inline space-x-1 {{ classes }}">
{{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
{{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
</nav>
source/_patterns/01-molecules/06-banner/color-variants.mustache
View file @ aac6d1d3
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
{{> molecules-banner(color: "bg-black") }}
{{> molecules-banner(color: "bg-violet-300") }}
{{> molecules-banner(color: "bg-green-200") }}
{{> molecules-banner(color: "bg-blue-200") }}
{{> molecules-banner(color: "bg-violet-500") }}
{{> molecules-banner(color: "bg-red-600") }}
{{> molecules-banner(color: "bg-blue-300") }}
{{> molecules-banner(color: "bg-brands-facebook") }}
{{> molecules-banner(color: "bg-brands-twitter") }}
</div>
source/_patterns/01-molecules/14-form-fields/textarea-field.mustache 0 → 100644
View file @ aac6d1d3
<div class="form-field {{# error }}form-field--error{{/ error }} {{ classes }}">
{{^ nolabel }}
<label class="form-field__label" for="field">{{ label }}{{^ label }}{{ form.label }}{{/ label }}</label>
{{/ nolabel }}
<div class="form-field__wrapper form-field__wrapper--shadowed">
{{> atoms-textarea }}
</div>
{{# error }}
<div class="form-field__error">{{ error }}</div>
{{/ error }}
{{# help }}
<div class="form-field__help-text">{{ help }}</div>
{{/ help }}
</div>
source/_patterns/01-molecules/15-navbar/navbar-menu.mustache 0 → 100644
View file @ aac6d1d3
<ul class="navbar-menu text-white">
<li class="navbar-menu__item">
<a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
</li>
<li class="navbar-menu__item">
<ui-navbar-subitem-replacing label="Lidé">
<span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
<div class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
</ul>
</div>
</ui-navbar-subtitem-replacing>
</li>
<li class="navbar-menu__item">
<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
</li>
<li class="navbar-menu__item">
<a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
</li>
</ul>
source/_patterns/01-molecules/16-chips/chip-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">
{{> molecules-chip(classes: "chip--black") }}
{{> molecules-chip(classes: "chip--grey-700") }}
{{> molecules-chip(classes: "chip--grey-500") }}
{{> molecules-chip(classes: "chip--grey-125") }}
{{> molecules-chip(classes: "chip--blue-300") }}
{{> molecules-chip(classes: "chip--cyan-200") }}
{{> molecules-chip(classes: "chip--cyan-500") }}
{{> molecules-chip(classes: "chip--green-300") }}
{{> molecules-chip(classes: "chip--green-400") }}
{{> molecules-chip(classes: "chip--orange-300") }}
{{> molecules-chip(classes: "chip--violet-400") }}
{{> molecules-chip(classes: "chip--violet-500") }}
{{> molecules-chip(classes: "chip--red-600") }}
</div>
</div>
source/_patterns/01-molecules/16-chips/chip-pagination.mustache 0 → 100644
View file @ aac6d1d3
<span class="chip chip--grey-125 chip--hoveractive text-xs">
<span class="ico--chevron-left"></span>
</span>
<span class="chip chip--grey-125 chip--hoveractive ml-1">
<span class="ico--chevron-right"></span>
</span>
source/_patterns/01-molecules/16-chips/chip-select.mustache 0 → 100644
View file @ aac6d1d3
<span class="chip chip--black chip--select">
<select>
<option value="">Select input choice</option>
<option value="">choice</option>
<option value="">choice</option>
<option value="">choice</option>
<option value="">choice</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
source/_patterns/01-molecules/16-chips/chip.mustache 0 → 100644
View file @ aac6d1d3
<div class="chip {{ classes }}">
{{ cta }}
</div>
source/_patterns/01-molecules/17-thumbs/thumbs-inactive.mustache 0 → 100644
View file @ aac6d1d3
<div class="space-x-2 text-sm flex items-center">
<button class="text-grey-200 hover:text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-grey-200 hover:text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
source/_patterns/01-molecules/17-thumbs/thumbs.mustache 0 → 100644
View file @ aac6d1d3
<div class="space-x-2 text-sm flex items-center">
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
source/_patterns/01-molecules/18-chat/chat-post-with-labels.mustache 0 → 100644
View file @ aac6d1d3
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
source/_patterns/01-molecules/18-chat/chat-post-with-ratings.mustache 0 → 100644
View file @ aac6d1d3
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
source/_patterns/01-molecules/18-chat/chat-post.mustache 0 → 100644
View file @ aac6d1d3
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
source/_patterns/01-molecules/19-dropdown/dropdown.mustache 0 → 100644
View file @ aac6d1d3
<div class="dropdown">
<span>Dropdown</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>

Pirátský GitLab - Home of the CopyLeft