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
  • 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
Show whitespace changes
Inline Side-by-side
Showing
with 151 additions and 62 deletions
source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
View file @ aac6d1d3
......@@ -7,7 +7,8 @@
{{> 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-200", classes: "btn--hoveractive btn--to-green-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") }}
......@@ -21,7 +22,8 @@
{{> 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-200", classes: "btn--hoveractive btn--to-green-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") }}
......
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
View file @ aac6d1d3
<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>
<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/unordered-list-leading-variants.mustache
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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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
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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<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
View file @ aac6d1d3
<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>
<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/15-form-fields/01-text-input.mustache 0 → 100644
View file @ aac6d1d3
<input type="text" class="text-input form-field__control {{ classes }}" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }} />
source/_patterns/00-atoms/15-form-fields/02-disabled-text-input.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-text-input(disabled: true) }}
source/_patterns/00-atoms/15-form-fields/03-read-only-text-input.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-text-input(readonly: true) }}
source/_patterns/00-atoms/15-form-fields/04-text-input-addon.mustache 0 → 100644
View file @ aac6d1d3
<div class="text-input-addon {{ classes }}"><i class="ico--pirati"></i></div>
source/_patterns/00-atoms/15-form-fields/05-select.mustache 0 → 100644
View file @ aac6d1d3
<div class="select">
<select class="select__control form-field__control {{ classes }}" value="" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
source/_patterns/00-atoms/15-form-fields/06-disabled-select.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-select(disabled: true) }}
source/_patterns/00-atoms/15-form-fields/07-readonly-select.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-select(readonly: true) }}
source/_patterns/00-atoms/15-form-fields/08-checkbox.mustache 0 → 100644
View file @ aac6d1d3
<div class="checkbox form-field__control">
<input type="checkbox" id="checkbox_1" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>
<label for="checkbox_1">{{ excerpt.short }}</label>
</div>
source/_patterns/00-atoms/15-form-fields/09-disabled-checkbox.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-checkbox(disabled: true) }}
source/_patterns/00-atoms/15-form-fields/10-radio.mustache 0 → 100644
View file @ aac6d1d3
<div class="radio form-field__control">
<label>
<input type="radio" name="radio" {{# disabled }}disabled{{/ disabled }}>
<span>Option</span>
</label>
</div>
source/_patterns/00-atoms/15-form-fields/11-disabled-radio.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-radio(disabled: true) }}
source/_patterns/00-atoms/15-form-fields/12-password-input.mustache 0 → 100644
View file @ aac6d1d3
<input type="password" class="text-input text-input--password form-field__control" value="" placeholder="{{ placeholder }}{{^ placeholder }}* * * * * * *{{/ placeholder }}" />
source/_patterns/00-atoms/15-form-fields/13-textarea.mustache 0 → 100644
View file @ aac6d1d3
<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>

Pirátský GitLab - Home of the CopyLeft