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
  • clickable-select-chevron
  • feat/new-image-formats
  • 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
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-12
  • 2.0.0-alpha-13
  • 2.0.0-alpha-14
  • 2.0.0-alpha-15
  • 2.0.0-alpha-16
  • 2.0.0-alpha-17
  • 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
  • 2.0.1
  • 2.0.2
  • 2.0.3
  • 2.0.4
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.10.0
  • 2.11.0
  • 2.12.1
  • 2.13.0
  • 2.14.0
  • 2.15.0
  • 2.16.0
  • 2.16.1
  • 2.17.0
  • 2.18.0
  • 2.19.0
  • 2.2.0
  • 2.2.1
  • 2.20.0
  • 2.3.0
  • 2.3.1
  • 2.3.2
  • 2.3.3
  • 2.3.4
  • 2.4.0
  • 2.5.0
  • 2.5.1
  • 2.5.2
  • 2.6.0
  • 2.7.0
  • 2.7.1
  • 2.8.0
  • 2.9.0
  • 2.9.1
74 results

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
Showing
with 273 additions and 63 deletions
......@@ -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") }}
......
<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>
<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>
<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>
<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>
<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>
<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>
<input type="password" class="text-input text-input--password form-field__control" value="" placeholder="{{ placeholder }}{{^ placeholder }}* * * * * * *{{/ placeholder }}" />
<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) }}
<input type="password" class="text-input form-field__control" value="" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" />
<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>