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
Show whitespace changes
Inline Side-by-side
Showing
with 1260 additions and 100 deletions
source/_patterns/00-atoms/00-global/00-brand-colors.mustache
View file @ aac6d1d3
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-black"></span>
<span class="sg-label">Black<br>#00000;</span>
</li>
<li>
<span class="sg-swatch bg-white"></span>
<span class="sg-label">White<br>#ffffff</span>
</li>
<li>
<span class="sg-swatch bg-green-100"></span>
<span class="sg-label">Green 100<br>#29bc51</span>
</li>
<li>
<span class="sg-swatch bg-green-200"></span>
<span class="sg-label">Green 200<br>#26b34b</span>
</li>
<li>
<span class="sg-swatch bg-green-300"></span>
<span class="sg-label">Green 300<br>#22a244</span>
</li>
</ul>
{{# brandColors }}
<h2 class="head-alt-sm mb-4 mt-8">{{ name }}</h2>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{{# variants }}
{{> molecules-color-swatch }}
{{/ variants }}
</div>
{{/ brandColors }}
source/_patterns/00-atoms/00-global/01-neutral-colors.mustache
View file @ aac6d1d3
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-grey-50"></span>
<span class="sg-label">Grey 50<br>#f7f7f7</span>
</li>
<li>
<span class="sg-swatch bg-grey-100"></span>
<span class="sg-label">Grey 100<br>#f3f3f3</span>
</li>
<li>
<span class="sg-swatch bg-grey-150"></span>
<span class="sg-label">Grey 150<br>#00000012</span>
</li>
<li>
<span class="sg-swatch bg-grey-200"></span>
<span class="sg-label">Grey 200<br>#adadad</span>
</li>
<li>
<span class="sg-swatch bg-grey-300"></span>
<span class="sg-label">Grey 300<br>#4c4c4c</span>
</li>
<li>
<span class="sg-swatch bg-grey-400"></span>
<span class="sg-label">Grey 400<br>#343434</span>
</li>
<li>
<span class="sg-swatch bg-grey-700"></span>
<span class="sg-label">Grey 500<br>#202020</span>
</li>
<li>
<span class="sg-swatch bg-grey-800"></span>
<span class="sg-label">Grey 600<br>#1f1f1f</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{{# greyColors }}
{{> molecules-color-swatch }}
{{/ greyColors }}
</div>
source/_patterns/00-atoms/00-global/02-utility-colors.mustache deleted 100644 → 0
View file @ a4911288
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-red-100"></span>
<span class="sg-label">Red 100<br>#d6151b</span>
</li>
</ul>
source/_patterns/00-atoms/00-global/03-3rd-brand-colors.mustache
View file @ aac6d1d3
<ul class="sg-colors">
<li>
<span class="sg-swatch bg-brands-facebook"></span>
<span class="sg-label">Facebook blue<br>#067ceb</span>
</li>
<li>
<span class="sg-swatch bg-brands-twitter"></span>
<span class="sg-label">Twitter blue<br>#00c9ff</span>
</li>
<li>
<span class="sg-swatch bg-brands-gmail"></span>
<span class="sg-label">Gmail red<br>#ec230e</span>
</li>
<li>
<span class="sg-swatch bg-brands-linkedin"></span>
<span class="sg-label">LinkedIn blue<br>#0066a9</span>
</li>
</ul>
<div class="grid gap-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<div class="card flex flex-col">
<div class="h-32 bg-brands-facebook"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Facebook</p>
<p>#067ceb</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-twitter"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Twitter</p>
<p>#00c9ff</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-gmail"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">Gmail</p>
<p>#ec230e</p>
</div>
</div>
<div class="card flex flex-col">
<div class="h-32 bg-brands-linkedin"></div>
<div class="card__body p-2 flex">
<p class="font-bold flex-grow">LinkedIn</p>
<p>#0066a9</p>
</div>
</div>
</div>
source/_patterns/00-atoms/01-text/font-sizes.mustache
View file @ aac6d1d3
<p class="text-9xl">9xl size</p>
<p class="text-8xl">8xl size</p>
<p class="text-7xl">7xl size</p>
<p class="text-6xl">6xl size</p>
<p class="text-5xl">5xl size</p>
......
source/_patterns/00-atoms/01-text/text-shadow.mustache 0 → 100644
View file @ aac6d1d3
<div>
<h1 class="head-alt-xl text-shadow-xs">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-sm">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-md">{{ headline.short }}</h1>
<h1 class="head-alt-xl text-shadow-lg">{{ headline.short }}</h1>
</div>
source/_patterns/00-atoms/02-contact-lines/basic-contact-line.mustache deleted 100644 → 0
View file @ a4911288
<a href="mailto:example@example.com" class="contact-line {{ classes }}">
<i class="{{ icon }}"></i>{{ caption }}{{^caption}}example@example.com{{/caption}}
</a>
source/_patterns/00-atoms/02-icons/.gitkeep 0 → 100644
View file @ aac6d1d3
source/_patterns/00-atoms/02-icons/icons.mustache 0 → 100644
View file @ aac6d1d3
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--glass"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--glass</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--checkmark"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--checkmark</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--info"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--info</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--question"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--question</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--warning"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--warning</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--code"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--code</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--checkbox-unchecked"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--checkbox-unchecked</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--star-full"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--star-full</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--star-empty"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--star-empty</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bookmark"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bookmark</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--cog"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--cog</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--key"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--key</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--zoom-in"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--zoom-in</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--zoom-out"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--zoom-out</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--shrink"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--shrink</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--printer"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--printer</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--user"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--user</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-openoffice"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-openoffice</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-excel"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-excel</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-word"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-word</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-pdf"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-pdf</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-picture"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-picture</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-text2"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-text2</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--file-blank"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--file-blank</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--folder-upload"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--folder-upload</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--upload"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--upload</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--cloud-upload"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--cloud-upload</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--folder-download"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--folder-download</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--download"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--download</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--cloud-download"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--cloud-download</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--alarm"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--alarm</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--calculator"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--calculator</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--facebook-full"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--facebook-full</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--feed"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--feed</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--library"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--library</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--office"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--office</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--attachment"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--attachment</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--enlarge"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--enlarge</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--eye-off"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--eye-off</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--eye"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--eye</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--share"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--share</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--search"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--search</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--pencil"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--pencil</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--lock-open"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--lock-open</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--lock"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--lock</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--equalizer"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--equalizer</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--switch"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--switch</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--loop"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--loop</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--refresh"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--refresh</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bullhorn"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bullhorn</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bin"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bin</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--cross"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--cross</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--checkbox-checked"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--checkbox-checked</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--globe"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--globe</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--wikipedia"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--wikipedia</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--youtube"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--youtube</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--users"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--users</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--book"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--book</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bubbles"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bubbles</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--map"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--map</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--compass"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--compass</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--folder-open"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--folder-open</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--folder"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--folder</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--drawer"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--drawer</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--stop"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--stop</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--github"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--github</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--clock"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--clock</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--calendar"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--calendar</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--flickr"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--flickr</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--instagram"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--instagram</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--twitter"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--twitter</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--newspaper"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--newspaper</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--cart"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--cart</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--home"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--home</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--link"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--link</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--power"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--power</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--rocket"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--rocket</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--location"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--location</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--phone"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--phone</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--linkedin"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--linkedin</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--facebook"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--facebook</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--food"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--food</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--dots-three-vertical"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--dots-three-vertical</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--dots-three-horizontal"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--dots-three-horizontal</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--log-out"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--log-out</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--envelope"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--envelope</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--pin"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--pin</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--at"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--at</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bed"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bed</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--train"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--train</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bus"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bus</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--wheelchair"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--wheelchair</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--thumbs-down"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--thumbs-down</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--thumbs-up"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--thumbs-up</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--anchor"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--anchor</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--paw"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--paw</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--strategy"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--strategy</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--pig"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--pig</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--donation-outline"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--donation-outline</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--donation-full"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--donation-full</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--thermometer"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--thermometer</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--menu"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--menu</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--chevron-right"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--chevron-right</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--chevron-left"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--chevron-left</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--chevron-down"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--chevron-down</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--chevron-up"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--chevron-up</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--link-horizontal"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--link-horizontal</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--beer"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--beer</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--pirati"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--pirati</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--jitsi"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--jitsi</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--forum"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--forum</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--helios"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--helios</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--redmine"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--redmine</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--zulip"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--zulip</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--mastodon"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--mastodon</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--open-source"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--open-source</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--price-tag"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--price-tag</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--price-tags"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--price-tags</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--stats-dots"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--stats-dots</code>
</div>
</div>
</div>
source/_patterns/00-atoms/03-buttons/00-basic-button.mustache
View file @ aac6d1d3
<button class="btn {{ classes }}">
<button class="btn {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/01-icon-button.mustache
View file @ aac6d1d3
<button class="btn btn--icon {{ classes }}">
<button class="btn btn--icon {{ classes }}" {{# disabled }}disabled{{/ disabled }}>
<div class="btn__body-wrap">
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
<div class="btn__icon {{ iconClasses }}">
......
source/_patterns/00-atoms/03-buttons/02-button-colors.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">
{{> atoms-basic-button(classes: "btn--black") }}
{{> atoms-basic-button(classes: "btn--grey-800") }}
{{> atoms-basic-button(classes: "btn--grey-700") }}
{{> atoms-basic-button(classes: "btn--grey-500") }}
{{> atoms-basic-button(classes: "btn--grey-125") }}
{{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--white btn--fading") }}
{{> atoms-basic-button(classes: "btn--green-100") }}
{{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--cyan-200") }}
{{> atoms-basic-button(classes: "btn--green-400") }}
{{> atoms-basic-button(classes: "btn--green-300") }}
{{> atoms-basic-button(classes: "btn--orange-300") }}
{{> atoms-basic-button(classes: "btn--violet-400") }}
{{> atoms-basic-button(classes: "btn--violet-500") }}
{{> atoms-basic-button(classes: "btn--red-600") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(classes: "btn--black", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-700", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-500", disabled: true) }}
{{> atoms-basic-button(classes: "btn--grey-125", disabled: true) }}
{{> atoms-basic-button(classes: "btn--white", disabled: true) }}
{{> atoms-basic-button(classes: "btn--blue-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--cyan-200", disabled: true) }}
{{> atoms-basic-button(classes: "btn--green-400", disabled: true) }}
{{> atoms-basic-button(classes: "btn--green-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--orange-300", disabled: true) }}
{{> atoms-basic-button(classes: "btn--violet-400", disabled: true) }}
{{> atoms-basic-button(classes: "btn--violet-500", disabled: true) }}
{{> atoms-basic-button(classes: "btn--red-600", disabled: true) }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black") }}
{{> atoms-icon-button(classes: "btn--grey-800") }}
{{> atoms-icon-button(classes: "btn--grey-700") }}
{{> atoms-icon-button(classes: "btn--grey-500") }}
{{> atoms-icon-button(classes: "btn--grey-125") }}
{{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--white btn--fading") }}
{{> atoms-icon-button(classes: "btn--green-100") }}
{{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--cyan-200") }}
{{> atoms-icon-button(classes: "btn--green-400") }}
{{> atoms-icon-button(classes: "btn--green-300") }}
{{> atoms-icon-button(classes: "btn--orange-300") }}
{{> atoms-icon-button(classes: "btn--violet-400") }}
{{> atoms-icon-button(classes: "btn--violet-500") }}
{{> atoms-icon-button(classes: "btn--red-600") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-700", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-500", disabled: true) }}
{{> atoms-icon-button(classes: "btn--grey-125", disabled: true) }}
{{> atoms-icon-button(classes: "btn--white", disabled: true) }}
{{> atoms-icon-button(classes: "btn--blue-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--cyan-200", disabled: true) }}
{{> atoms-icon-button(classes: "btn--green-400", disabled: true) }}
{{> atoms-icon-button(classes: "btn--green-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--orange-300", disabled: true) }}
{{> atoms-icon-button(classes: "btn--violet-400", disabled: true) }}
{{> atoms-icon-button(classes: "btn--violet-500", disabled: true) }}
{{> atoms-icon-button(classes: "btn--red-600", disabled: true) }}
</div>
</div>
source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.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">
{{> atoms-basic-button(classes: "btn--black btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-800 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-800 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-700 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
</div>
</div>
source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache deleted 100644 → 0
View file @ a4911288
<button class="btn btn--inline-icon btn--overlay {{ baseColor }}{{^ baseColor }}btn--grey-800{{/ baseColor }} {{ overlayColor }}{{^ overlayColor }}btn--overlay-red-100{{/ overlayColor }} {{ classes }}">
<div class="btn__body {{ bodyClasses }}"><i class="btn__inline-icon {{ icon }}"></i> {{ 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/inverted-icon-button.mustache 0 → 100644
View file @ aac6d1d3
{{> atoms-icon-button(classes: "btn--inverted-icon") }}
source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache → source/_patterns/00-atoms/03-buttons/loading-button.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">
{{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
{{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}
{{> 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>

Pirátský GitLab - Home of the CopyLeft