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 228 additions and 42 deletions
source/_patterns/00-atoms/03-buttons/10-autowidth-button.mustache 0 → 100644
View file @ aac6d1d3
<button class="btn btn--autowidth {{ classes }}">
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/11-fullwidth-button.mustache 0 → 100644
View file @ aac6d1d3
<button class="btn btn--fullwidth {{ classes }}">
<div class="btn__body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/autowidth-button.mustache deleted 100644 → 0
View file @ 24d928b3
<button class="btn is-auto {{ classes }}">
<div class="btn-body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/basic-button.mustache deleted 100644 → 0
View file @ 24d928b3
<button class="btn {{ classes }}">
<div class="btn-body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/button-colors.mustache deleted 100644 → 0
View file @ 24d928b3
<button class="btn">
<div class="btn-body">{{ cta }}</div>
</button>
<button class="btn is-green">
<div class="btn-body">{{ cta }}</div>
</button>
<button class="btn is-inverted">
<div class="btn-body">{{ cta }}</div>
</button>
<button class="btn is-inverted to-faded">
<div class="btn-body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/button-hover-targets.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-basic-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-basic-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-basic-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-basic-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
{{> atoms-basic-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
{{> atoms-basic-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
{{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-basic-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-icon-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-icon-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-icon-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
{{> atoms-icon-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
{{> atoms-icon-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
{{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
{{> atoms-icon-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
</div>
source/_patterns/00-atoms/03-buttons/button-sizes.mustache deleted 100644 → 0
View file @ 24d928b3
<button class="btn">
<div class="btn-body">{{ cta }}</div>
</button>
<button class="btn is-lg">
<div class="btn-body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/fullwidth-button.mustache deleted 100644 → 0
View file @ 24d928b3
<button class="btn is-fullwidth {{ classes }}">
<div class="btn-body">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/icon-button.mustache deleted 100644 → 0
View file @ 24d928b3
<button class="btn has-icon {{ classes }}">
<div class="btn-body-wrap">
<div class="btn-body">{{ cta }}</div>
<div class="btn-icon">
<i class="{{ icon }}"></i>
</div>
</div>
</button>
source/_patterns/00-atoms/03-buttons/inverted-icon-button.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-icon-button(classes: "btn--inverted-icon") }}
source/_patterns/00-atoms/03-buttons/loading-button.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-basic-button(classes: "text-sm btn--loading" )}}
{{> atoms-basic-button(classes: "text-base btn--loading" )}}
{{> atoms-basic-button(classes: "text-lg btn--loading" )}}
</div>
</div>
source/_patterns/00-atoms/04-animations/ping.mustache 0 → 100644
View file @ aac6d1d3
<span class="inline-flex h-4 w-4 mr-4 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
<span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
</span>
source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache 0 → 100644
View file @ aac6d1d3
<ul class="unordered-list unordered-list--dense">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
source/_patterns/00-atoms/04-lists/linked-unordered-list.mustache 0 → 100644
View file @ aac6d1d3
<ul class="unordered-list unordered-list--linked {{ classes }}">
<li>
<a href="#" class="font-bold content-block--nostyle">{{ cta }}</a>
</li>
<li>
<a href="#" class="content-block--nostyle">{{ cta }}</a>
</li>
<li>
<a href="#" class="content-block--nostyle">{{ cta }}</a>
</li>
<li>
<a href="#" class="content-block--nostyle">{{ cta }}</a>
</li>
</ul>
source/_patterns/00-atoms/04-lists/ordered-list.mustache 0 → 100644
View file @ aac6d1d3
<ol class="ordered-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>
</ol>
source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.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">
<ul class="unordered-list leading-tight">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-snug">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-normal">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-relaxed">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
</div>
source/_patterns/00-atoms/04-lists/unordered-list-sizes.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">
<ul class="unordered-list text-xs">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-sm">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-lg">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-xl">
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
</div>
source/_patterns/00-atoms/04-lists/unordered-list.mustache 0 → 100644
View file @ aac6d1d3
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
source/_patterns/00-atoms/04-social-icons/icon-variants.mustache deleted 100644 → 0
View file @ 24d928b3
<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }}"></i></a>
<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl"></i></a>
<a href="#" class="social-icon social-icon--fill bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl text-3xl"></i></a>
source/_patterns/00-atoms/05-horizontal-rule/hr.mustache 0 → 100644
View file @ aac6d1d3
<div>
<hr />
</div>
<div>
<hr class="hr--condensed" />
</div>

Pirátský GitLab - Home of the CopyLeft