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 175 additions and 0 deletions
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>
source/_patterns/00-atoms/15-form-fields/14-textarea-disabled.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-textarea(disabled: true) }}
source/_patterns/00-atoms/16-tooltips/tooltip-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">
{{> 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>
source/_patterns/00-atoms/16-tooltips/tooltip-positioning.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>
<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>
source/_patterns/00-atoms/16-tooltips/tooltip-semantic.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-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>
source/_patterns/00-atoms/16-tooltips/tooltip.mustache 0 → 100644
View file @ aac6d1d3
<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>
source/_patterns/00-atoms/17-alerts/alert-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">
{{> 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>
source/_patterns/00-atoms/17-alerts/alert-faded.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-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>
source/_patterns/00-atoms/17-alerts/alert-semantic.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-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>
source/_patterns/00-atoms/17-alerts/alert.mustache 0 → 100644
View file @ aac6d1d3
<span class="alert {{ classes }}">
{{# icon }}
<i class="alert__icon {{ icon }}"></i>
{{/ icon }}
<span>{{ excerpt.short }}</span>
</span>
source/_patterns/00-atoms/18-calendars/month-calendar.mustache 0 → 100644
View file @ aac6d1d3
<div class="__js-root">
<ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
</div>
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>

Pirátský GitLab - Home of the CopyLeft