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
Showing
with 189 additions and 27 deletions
<textarea class="text-input form-field__control {{ classes }}" value="" rows="{{ rows }}{{^ rows }}10{{/ rows }}" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>{{ textareaContent }}</textarea>
{{> atoms-textarea(disabled: true) }}
<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>
<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>
<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>
<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>
<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>
<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>
<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>
<span class="alert {{ classes }}">
{{# icon }}
<i class="alert__icon {{ icon }}"></i>
{{/ icon }}
<span>{{ excerpt.short }}</span>
</span>
<div class="__js-root">
<ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
</div>
<div class="__js-root">
<ui-year-calendar events='{{ calendarData }}'></ui-year-calendar>
</div>
<img src="https://picsum.photos/300/200" class="{{ classes }}">
<hr />
<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>
<div class="badge {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--md") }}
{{^ hideAvatar }}
{{# avatarSizeXl }}
{{> atoms-basic-avatar(classes: "avatar--xl badge__avatar") }}
{{/ avatarSizeXl }}
{{^ avatarSizeXl }}
{{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
{{/ avatarSizeXl }}
{{/ hideAvatar}}
<div class="badge__body">
<span class="head-heavy-sm">{{ person.first }} {{ person.last }}</span>
<span class="head-heavy-xs">{{ person.first }} {{ person.last }}</span>
{{^ hideOccupation }}
<p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
{{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
{{/ hideOccupation}}
{{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
</div>
</div>
<div class="badge badge--condensed {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--sm") }}
{{^ hideAvatar }}
{{# avatarSizeMd }}
{{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
{{/ avatarSizeMd }}
{{^ avatarSizeMd }}
{{> atoms-basic-avatar(classes: "avatar--sm badge__avatar") }}
{{/ avatarSizeMd }}
{{/ hideAvatar }}
<div class="badge__body">
<span class="head-heavy-xs badge__title">{{ person.first }} {{ person.last }}</span>
<span class="head-heavy-2xs badge__title">{{ person.first }} {{ person.last }}</span>
{{^ hideOccupation }}
<p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
{{/ hideOccupation }}
{{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
{{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
{{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
</div>
</div>
{{> molecules-basic-badge(hideAvatar: true) }}
<div class="social-icon-group space-x-2 {{ classes }}">
{{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
{{> atoms-basic-social-icon(icon: "fas fa-rss") }}
{{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
{{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
{{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
{{> atoms-basic-social-icon(icon: "ico--twitter") }}
{{> atoms-basic-social-icon(icon: "ico--feed") }}
{{> atoms-basic-social-icon(icon: "ico--youtube") }}
{{> atoms-basic-social-icon(icon: "ico--instagram") }}
{{> atoms-basic-social-icon(icon: "ico--flickr") }}
{{> atoms-basic-social-icon(icon: "ico--envelope") }}
</div>
<div class="social-icon-group space-x-0/5 {{ classes }}">
{{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "fab fa-facebook") }}
{{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "fab fa-twitter") }}
{{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "fab fa-linkedin") }}
{{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "ico--facebook") }}
{{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "ico--twitter") }}
{{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "ico--linkedin") }}
</div>