atoms

buttons   

Copy
Edit
<!-- components/atoms/buttons.php --> <p><a href="#" class="button">.button</a></p> <p><a href="#" class="button button--arrow">.button.button--arrow</a></p> <p><a href="#" class="button button--primary">.button.button--primary</a></p> <p><a href="#" class="button button--secondary">.button.button--secondary</a></p> <p><a href="#" class="button button--outline">.button.button--outline</a></p> <p><a href="#" class="button button--disabled">.button.button--disabled</a></p> <p><a href="#" class="button button--white">.button.button--white</a></p> <p><a href="#" class="button button--red"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>.button.button--red</a></p> <p> <a href="#" class="link"> <svg class="link__icon" enable-background="new 0 0 85 85" height="16" version="1.1" viewBox="0 0 85 85" width="16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor"><path d="M42.5,0.003C19.028,0.003,0,19.031,0,42.503s19.028,42.5,42.5,42.5S85,65.976,85,42.503S65.972,0.003,42.5,0.003z M42.288,66.27c0,0-1.972,1.311-3.32,1.305c-0.12,0.055-0.191,0.087-0.191,0.087l0.003-0.087c-0.283-0.013-0.568-0.053-0.855-0.125 l-0.426-0.105c-2.354-0.584-3.6-2.918-3.014-5.271l3.277-13.211l1.479-5.967c1.376-5.54-4.363,1.178-5.54-1.374 c-0.777-1.687,4.464-5.227,8.293-7.896c0,0,1.97-1.309,3.319-1.304c0.121-0.056,0.192-0.087,0.192-0.087l-0.005,0.087 c0.285,0.013,0.57,0.053,0.857,0.124l0.426,0.106c2.354,0.584,3.788,2.965,3.204,5.318l-3.276,13.212l-1.482,5.967 c-1.374,5.54,4.27-1.204,5.446,1.351C51.452,60.085,46.116,63.601,42.288,66.27z M50.594,24.976 c-0.818,3.295-4.152,5.304-7.446,4.486c-3.296-0.818-5.305-4.151-4.487-7.447c0.818-3.296,4.152-5.304,7.446-4.486 C49.403,18.346,51.411,21.68,50.594,24.976z"/></svg> <span>.link</span> </a> </p> <p> <a href="#" class="link link--default"> <span>.link.link--default</span> </a> </p>
Copy
Copy
Edit
/* scss/atoms/_buttons.scss */ .button { color: $white-color; font-size: 0.875rem; font-weight: 600; font-family: $font-family-headings; line-height: 1; letter-spacing: -0.02rem; border: 1px solid $secondary-color; background-color: $secondary-color; text-decoration: none; text-transform: uppercase; text-align: center; display: inline-block; cursor: pointer; padding: 0.875rem 1.5rem; position: relative; transition: background-color 0.25s, border-color 0.25s, color 0.25s; &:hover { background-color: lighten($secondary-color, 10%); border-color: lighten($secondary-color, 10%); color: $white-color; } &:focus { outline: none; } /* small button */ &.button--small { padding: 0.55rem 0.875rem; } /* big button */ &.button--big { padding: 1.125rem 2.25rem 1rem; font-size: 1.125rem; @include media-breakpoint-down(md) { padding: 0.875rem 1.5rem; } } /* block button */ &.button--block { width: 100%; display: block; } /* arrow button */ &.button--arrow { padding-left: 2.5rem; &::after { content: ''; width: 28px; height: 27px; background: url('../img/icons/arr-right-primary.svg') no-repeat 0 0; background-size: cover; position: absolute; top: 0.45rem; left: -2px; display: block; transition: transform 0.25s; } &.button--big { padding-left: 3rem; &::after { top: 0.8125rem; @include media-breakpoint-down(md) { top: 0.45rem; } } } /*&:hover::after { transform: translateX(-5px); }*/ } /* primary button */ &.button--primary { background-color: $primary-color; border-color: $primary-color; &:hover { background-color: darken($primary-color, 10%); border-color: darken($primary-color, 10%); } &.button--arrow::after { background: url('../img/icons/arr-right-white.svg') no-repeat 0 0; background-size: cover; } } /* secondary button */ &.button--secondary { color: $default-color; background-color: $grey-200-color; border-color: $grey-200-color; &:hover { background-color: darken($grey-200-color, 10%); border-color: darken($grey-200-color, 10%); } &.button--arrow::after { background: url('../img/icons/arr-right-white.svg') no-repeat 0 0; background-size: cover; } } /* success button */ &.button--success { color: $white-color; background-color: $success-color; border-color: $success-color; &:hover { background-color: darken($success-color, 10%); border-color: darken($success-color, 10%); } &.button--arrow::after { background: url('../img/icons/arr-right-white.svg') no-repeat 0 0; background-size: cover; } } /* outline button */ &.button--outline { background-color: transparent; border-color: $primary-color; color: $primary-color; &:hover { background-color: transparent; border-color: $secondary-color; color: $secondary-color; } &.button--primary.button--arrow::after { background: url('../img/icons/arr-right-primary.svg') no-repeat 0 0; background-size: cover; } &.button--primary.button--arrow:hover::after { background: url('../img/icons/arr-right.svg') no-repeat 0 0; background-size: cover; } } /* white button */ &.button--white { background-color: $white-color; border-color: $white-color; color: $secondary-color; &:hover { background-color: lighten($secondary-color, 10%); border-color: lighten($secondary-color, 10%); color: $white-color; } } /* red button */ &.button--red { background-color: $red-color; border-color: $red-color; color: $white-color; &:hover { background-color: lighten($red-color, 10%); border-color: lighten($red-color, 10%); color: $white-color; } svg { vertical-align: middle; margin: -2px 0.375rem 2px 0; display: inline-block } } /* disabled button */ &.button--disabled, &[disabled] { background-color: $grey-200-color; border-color: $grey-200-color; color: $grey-400-color; cursor: not-allowed; } /* block button */ &.button--block { width: 100%; display: block; } } /* icon button */ .button--icon { padding-left: 3.125rem; svg { left: 1.35rem; top: 0.675rem; position: absolute; } } /* link */ .link { color: $primary-color; font-size: 1rem; font-weight: 400; font-family: $font-family-default; line-height: 1; border: none; background: none; text-decoration: none; display: inline-block; cursor: pointer; padding: 0; position: relative; transition: color 0.25s; &.link--default { color: $default-color; span { text-decoration: underline; } } &:hover { span { text-decoration: none; } } &:focus { outline: none; } span { text-decoration: underline; } .link__icon { vertical-align: top; line-height: 1; margin: 0 0.25rem 0 0; display: inline-block; } }

typography   

Lorem ipsum (.display)

Lorem ipsum (h1)

Lorem ipsum (h2)

Lorem ipsum (h3)

Lorem ipsum (h4)

Lorem ipsum (h5)
Lorem ipsum (h6)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. (.lead)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes (a), nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut (u), imperdiet a, venenatis vitae, justo. Nullam dictum (strong) felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper (del) nisi. Aenean vulputate eleifend tellus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim. (blockquote)

  • In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.
  • Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.
  • Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen. (ul > li)
  1. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.
  2. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.
  3. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen. (ol > li)

(del; .text-strike) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(u; .text-underline) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(em; .text-italic) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(strong; .text-bold) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(small; .text-small) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(big; .text-big) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(abbr)

(.text-left) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(.text-center) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(.text-right) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Copy
Edit
<!-- components/atoms/typography.php --> <p class="display">Lorem ipsum (.display)</p> <h1>Lorem ipsum (h1)</h1> <h2>Lorem ipsum (h2)</h2> <h3>Lorem ipsum (h3)</h3> <h4>Lorem ipsum (h4)</h4> <h5>Lorem ipsum (h5)</h5> <h6>Lorem ipsum (h6)</h6> <p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec. (.lead)</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis <a href="#">parturient montes (a)</a>, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> <p>In enim justo, <u>rhoncus ut (u)</u>, imperdiet a, venenatis vitae, justo. <strong>Nullam dictum (strong)</strong> felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus <del>elementum semper (del)</del> nisi. Aenean vulputate eleifend tellus.</p> <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim. (blockquote)</p> </blockquote> <ul> <li>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.</li> <li>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.</li> <li>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen. (ul > li)</li> </ul> <ol> <li>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.</li> <li>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen.</li> <li>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifen. (ol > li)</li> </ol> <hr> <p><del>(del; .text-strike) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</del></p> <p><u>(u; .text-underline) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</u></p> <p><em>(em; .text-italic) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em></p> <p><strong>(strong; .text-bold) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</strong></p> <p><small>(small; .text-small) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</small></p> <p><big>(big; .text-big) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</big></p> <p><abbr title="The <abbr> tag defines an abbreviation or an acronym">(abbr)</abbr></p> <p class="text-left">(.text-left) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="text-center">(.text-center) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="text-right">(.text-right) Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
Copy
Copy
Edit
/* scss/atoms/_typography.scss */ /* headings */ .display { color: $default-color; font-family: $font-family-headings; font-weight: 800; font-size: 4.375rem; line-height: 4.5rem; margin-top: 5vmin; margin-bottom: 5vmin; @include media-breakpoint-down(md) { font-size: 3.375rem; line-height: 3.5rem; margin-top: 4vmin; margin-bottom: 4vmin; } @include media-breakpoint-down(xs) { font-size: 2.875rem; line-height: 3.125rem; margin-top: 4vmin; margin-bottom: 4vmin; } } h1, .h1 { color: $default-color; font-family: $font-family-headings; font-weight: 700; font-size: 2.25rem; line-height: 2.625rem; margin-top: 3rem; margin-bottom: 2.8rem; @include media-breakpoint-down(md) { font-size: 2rem; line-height: 2.4rem; margin-top: 2.5rem; margin-bottom: 2.3rem; } @include media-breakpoint-down(sm) { } } h2, .h2 { color: $default-color; font-family: $font-family-headings; font-weight: 700; font-size: 1.75rem; line-height: 2.25rem; margin-top: 2.625rem; margin-bottom: 2.25rem; @include media-breakpoint-down(md) { font-size: 1.675rem; line-height: 1.875rem; margin-top: 2.125rem; margin-bottom: 2rem; } @include media-breakpoint-down(sm) { } } h3, .h3 { color: $default-color; font-family: $font-family-headings; font-weight: 700; font-size: 1.375rem; line-height: 1.75rem; margin-top: 2.125rem; margin-bottom: 1.875rem; @include media-breakpoint-down(md) { font-size: 1.3rem; line-height: 1.625rem; margin-top: 2rem; margin-bottom: 1.75rem; } } h4, .h4 { color: $default-color; font-family: $font-family-headings; font-weight: 600; font-size: 1.25rem; line-height: 1.75rem; text-transform: uppercase; margin-top: 1.8125rem; margin-bottom: 1.5rem; @include media-breakpoint-down(md) { font-size: 1.125rem; line-height: 1.6rem; margin-top: 1.75rem; margin-bottom: 1.5rem; } } h5, .h5 { color: $default-color; font-family: $font-family-headings; font-weight: 700; font-size: 1.125rem; line-height: 1.5rem; margin-top: 1.625rem; margin-bottom: 1.25rem; @include media-breakpoint-down(md) { font-size: 1.0625rem; line-height: 1.25rem; margin-top: 1.5rem; margin-bottom: 1.125rem; } } h6, .h6 { color: $primary-color; font-family: $font-family-headings; font-weight: 700; font-size: 1rem; line-height: 1.5rem; margin-top: 1.55rem; margin-bottom: 1.125rem; } /* text block */ p { margin-bottom: 2rem; @include media-breakpoint-down(md) { margin-bottom: 1.875rem; } } .lead { font-style: italic; font-size: 1.25rem; line-height: 2rem; margin: 0 0 2.75rem 0; @include media-breakpoint-down(md) { font-size: 1.125rem; line-height: 1.8125rem; margin-bottom: 2.25rem; } } ul { margin-bottom: 2.5rem; @include media-breakpoint-down(md) { margin-bottom: 2.25rem; } li { list-style: none; margin: 0 0 1.25rem 0; padding: 0 0 0 3.5rem; position: relative; &::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg version='1.1' width='28' height='27' viewBox='0 0 50 50' fill='%23ffa01c' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpolygon points='1,26 44.586,26 38.293,32.293 39.707,33.707 48.414,25 39.707,16.293 38.293,17.707 44.586,24 1,24 '/%3E%3C/g%3E%3C/svg%3E"); background-position: 0 0; background-repeat: no-repeat; width: 28px; height: 27px; top: 0; left: 0; display: block; position: absolute; } ol > li { padding: 0 0 0 2.2rem; } } } ol { margin-bottom: 2.5rem; padding: 0 0 0 1.3rem; @include media-breakpoint-down(md) { margin-bottom: 2.25rem; } li { margin: 0 0 1.25rem 0; padding: 0 0 0 2.2rem; ul > li { padding: 0 0 0 3.5rem; } } } blockquote, .blockquote { font-family: $font-family-headings; font-weight: 700; font-size: 1.25rem; line-height: 2.25rem; margin: 3.5rem 0 3.5rem 0; padding: 1rem 0 1rem 7.625rem; position: relative; @include media-breakpoint-down(md) { font-size: 1.125rem; line-height: 1.9375rem; margin: 3rem 0 3rem 0; padding: 1rem 0 1rem 6.5rem; } @include media-breakpoint-down(xs) { margin: 3rem 0 3rem 0; padding: 0 0 0 4.75rem; } &::before { content: '”'; position: absolute; top: -1.25rem; left: -0.5rem; line-height: 1.07; font-family: $font-family-default; font-size: 13.125rem; font-weight: 400; color: $primary-color; display: block; @include media-breakpoint-down(md) { top: -0.55rem; font-size: 11rem; } @include media-breakpoint-down(xs) { top: -1.3rem; font-size: 10rem; } } } hr { border: none; border-top: 1px solid $grey-200-color; margin: 4.5rem 0; } /* text inline */ a { color: darken($primary-color, 7%); text-decoration: underline; &:hover { color: $primary-color; text-decoration: none; } } em, .text-italic { font-style: italic; } strong, .text-bold { font-weight: 700; } del, .text-strike { text-decoration: line-through; } u, .text-underline { text-decoration: underline; } big, .text-big { font-size: 125%; } small, .text-small { font-size: 75%; font-weight: 400; } abbr { border-bottom: 2px dotted $default-color; text-decoration: none; cursor: help; }

tables   

Name Surname E-mail (table>th)
Mark Otto mark.otto@mail.com
Jacob Thorton jacob.thorton@mail.com
Larry Cat (table>td) larry.cat@mail.com
Copy
Edit
<!-- components/atoms/tables.php --> <table> <thead> <tr> <th>Name</th> <th>Surname</th> <th>E-mail (table>th)</th> </tr> </thead> <tbody> <tr> <td>Mark</td> <td>Otto</td> <td><a href="#">mark.otto@mail.com</a></td> </tr> <tr> <td>Jacob</td> <td>Thorton</td> <td><a href="#">jacob.thorton@mail.com</a></td> </tr> <tr> <td>Larry</td> <td>Cat (table>td)</td> <td><a href="#">larry.cat@mail.com</a></td> </tr> </tbody> </table>
Copy
Copy
Edit
/* scss/atoms/_tables.scss */ table { border: none; width: 100%; margin: 0 0 3rem 0; padding: 0; th { border: none; border-bottom: 2px solid $grey-200-color; font-family: $font-family-headings; font-weight: 600; color: $default-color; font-size: 1.0625rem; line-height: 1.15rem; vertical-align: top; text-align: left; padding: 0.75rem 1.5rem; } td { border: none; border-bottom: 1px solid $grey-200-color; text-align: left; vertical-align: top; padding: 0.75rem 1.5rem; } tr:nth-last-of-type(1) td { border-bottom: none; } /* terminy */ &.table--date { margin: 0; td { padding: 1.375rem 1.5rem; vertical-align: middle; } td:nth-of-type(1) { padding-left: 0; } td:nth-last-of-type(1) { padding-right: 0; } } /* responsive */ &.table--responsive { @include media-breakpoint-down(xs) { tr { border-top: 1px solid $grey-200-color; padding: 0.75rem 0; width: 100%; display: block; float: left; clear: both; } tr:nth-of-type(1) { border-top: none; padding-top: 0; } tr:nth-last-of-type(1) { padding-bottom: 0; } th { display: none; } td, td:nth-of-type(1), td:nth-last-of-type(1) { border: none; text-align: left !important; padding: 0.45rem 0 0.45rem 5.5rem; width: 100%; clear: both; float: left; display: block; position: relative; } td::before { content: attr(data-th) ": "; color: $grey-300-color; text-transform: uppercase; font-weight: 400; font-size: 0.75rem; line-height: 1.3rem; text-align: right; width: 4.25rem; display: block; top: 0.35rem; left: 0; position: absolute; } td { .button { padding: 0.55rem 0.875rem; &::after { display: none; } } } } } }

figures   

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Copy
Edit
<!-- components/atoms/figures.php --> <figure class="figure"> <img class="figure__img" src="./img/sections/about.jpg" alt=""> <figcaption class="figure__caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean <a href="#">commodo ligula</a> eget dolor.</figcaption> </figure>
Copy
Copy
Edit
/* scss/atoms/_figures.scss */ .figure { margin: 3rem 0; display: block; .figure__img { width: 100%; height: auto; margin: 0; display: block; } .figure__caption { font-size: 0.9375rem; font-style: italic; line-height: 1.35; color: $grey-400-color; padding: 1.35rem 0 0 2.5rem; position: relative; &::before { content: ''; width: 21px; height: 18px; background: url('../img/icons/arr-right.svg') no-repeat 0 0; background-size: cover; position: absolute; top: 1.3rem; left: 0; opacity: 0.5; display: block; } } } img { max-width: 100%; }

forms   

Popisek inputu: error/success alerty.
Copy
Edit
<!-- components/atoms/forms.php --> <fieldset> <form action="#"> <div class="form-group"> <label for="input_text">Textový input (label)</label> <input type="text" class="form-control" id="input_text"> <small id="input_text" class="form-text">Popisek inputu: error/success alerty.</small> </div> <div class="form-group"> <label for="input_pass">Password input</label> <input type="password" class="form-control" id="input_pass"> </div> <div class="form-group"> <label for="input_email">E-mail input <span class="label__optional">(volitelné)</span></label> <input type="email" class="form-control" id="input_email"> </div> <div class="form-group"> <label for="input_num">Číselný input</label> <input type="number" class="form-control" id="input_num"> </div> <div class="form-group"> <label for="input_dis">Disabled/readonly input</label> <input type="text" class="form-control" id="input_dis" readonly disabled> </div> <div class="form-group"> <label for="selectbox">Selectbox</label> <select class="form-control" id="selectbox"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="textarea">Textarea</label> <textarea class="form-control" id="textarea" rows="3"></textarea> </div> <div class="form-group"> <label for="count">Counter</label> <div class="counter"> <button type="button" class="counter__button" data-type="minus" data-field="count">-</button> <input type="text" name="count" id="count" class="form-control counter__input" value="5" min="0" max="10"> <button type="button" class="counter__button" data-type="plus" data-field="count">+</button> </div> </div> <div class="custom-control custom-radio"> <input type="radio" id="radio1" name="radio" class="custom-control-input"> <label class="custom-control-label" for="radio1">Radio button 1</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="radio2" name="radio" class="custom-control-input"> <label class="custom-control-label" for="radio2">Radio button 2</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="checkbox1"> <label class="custom-control-label" for="checkbox1">Checkbox 1</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="checkbox2"> <label class="custom-control-label" for="checkbox2">Checkbox 2</label> </div> </form> </fieldset>
Copy
Copy
Edit
/* scss/atoms/_forms.scss */ fieldset { background-color: $grey-200-color; border: none; margin: 3rem 0; padding: 4.375rem 5.625rem; &.fieldset--narrow { max-width: 700px; } &.fieldset--light { background-color: $grey-100-color; } &.fieldset--white { background-color: $white-color; } &.fieldset--slim { margin: 2.25rem 0; padding: 2.45rem 2.675rem; @include media-breakpoint-down(md) { padding: 2rem; } @include media-breakpoint-down(xs) { padding: 1.675rem; } } .fieldset__footer { background-color: rgba($black-color, 0.05); margin: 4rem -5.625rem -4.375rem; padding: 2.875rem 5.625rem; } @include media-breakpoint-down(md) { padding: 3rem 3.5rem; } @include media-breakpoint-down(sm) { margin: 2rem 0; padding: 2.5rem 2.5rem; } @include media-breakpoint-down(xs) { padding: 2.125rem 2rem; } } label { font-size: 0.9375rem; font-family: $font-family-headings; line-height: 1.375; color: $grey-500-color; display: block; margin: 0 0 0.6125rem 0; .label__optional { font-family: $font-family-default; font-size: 0.8125rem; font-style: italic; } } .form-group { margin: 0 0 2rem 0; @include media-breakpoint-down(md) { margin-bottom: 1.25rem; } } .form-control { font-family: $font-family-default; font-size: 1rem; font-weight: 400; line-height: 1; color: $default-color; background-color: $white-color; background-clip: border-box; border: 2px solid $grey-200-color; border-radius: 0; margin: 0; padding: 0.375rem 1.15rem; width: 100%; height: calc(1.5em + 0.9375rem + 4px); box-shadow: none; display: block; transition: border-color 0.2s; &:focus { border-color: $primary-color; box-shadow: none; outline: none; } &:disabled, &[readonly] { border-color: $grey-100-color; background-color: $grey-100-color; color: $grey-400-color; cursor: not-allowed; } } textarea.form-control { padding-top: 0.75rem; padding-bottom: 0.75rem; height: auto; } .form-text { font-size: 0.9375rem; font-style: italic; line-height: 1.35; color: $grey-400-color; } /* radio, checkbox */ .custom-control { margin-bottom: 1.25rem; padding-left: 37px; min-height: 0; } .custom-control-label { color: $black-color; cursor: pointer; padding-top: 0.125rem; &::before, &::after { top: 0; left: -37px; } &::before { background-color: $white-color; border: 2px solid $grey-200-color; width: 20px; height: 20px; } } /* radio checked */ .custom-radio { .custom-control-input:active ~ .custom-control-label::before { background: lighten($primary-color, 10%); } .custom-control-input:checked ~ .custom-control-label::before { background: $white-color; border-color: $grey-200-color; box-shadow: none; } .custom-control-input:checked ~ .custom-control-label::after { background: $primary-color; border-radius: 50%; border-color: $grey-200-color; box-shadow: none; width: 10px; height: 10px; top: 5px; left: -32px; } } fieldset:not(.filter):not(.fieldset--white) { .custom-control-label { &::before { border: none; } } .custom-checkbox { .custom-control-input:checked ~ .custom-control-label::before { background: $white-color; } } } /* checkbox checked */ .custom-checkbox { .custom-control-label { &::after, &::before { border-radius: 0; } } .custom-control-input:active ~ .custom-control-label::before { background: lighten($primary-color, 10%); border-color: $grey-300-color; box-shadow: none; } .custom-control-input:focus ~ .custom-control-label::before { border-color: $grey-300-color; box-shadow: none; } .custom-control-input:checked ~ .custom-control-label::before { background: $white-color; border-color: $grey-200-color; box-shadow: none; } .custom-control-input:checked ~ .custom-control-label::after { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='13' viewBox='0 0 8 8'%3e%3cpath fill='%23e3a83a' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") no-repeat 4px 4px; } } .checkbox__icon > svg, .checkbox__icon { width: 18px; height: 18px; color: $primary-color; fill: $primary-color; margin: -1px 2px 1px 0; display: inline-block; } .checkbox--small { margin: 0.75rem 0 0 0; padding-left: 25px; .custom-control-label { font-family: $font-family-default; line-height: 1.375; color: rgba($grey-500-color, 0.65); font-size: 0.8125rem; display: inline-block; padding: 0; margin: 0; } .custom-control-label::before { width: 15px; height: 15px; } .custom-control-label::after, .custom-control-label::before { left: -25px; } .custom-control-input:checked~.custom-control-label::after { background-position: 2px 2px; } } /* counter */ .counter { padding: 0; width: 130px; height: 44px; display: flex; overflow: hidden; @include media-breakpoint-down(md) { &.counter--cart { width: 100px; height: 35px; } } .counter__input { color: $black-color; background-color: $white-color; font-family: $font-family-default; font-size: 1.125rem; text-align: center; border: none; border-top: 1px solid $grey-300-color; border-bottom: 1px solid $grey-300-color; width: 37%; height: 100%; padding-left: 0; padding-right: 0; display: block; } .counter__button { background-color: $grey-300-color; color: $white-color; font-family: $font-family-default; font-weight: 500; font-size: 1.5rem; line-height: 1; text-align: center; vertical-align: middle; border: none; margin: 0; padding: 0 0 4px 0; width: 32%; height: 100%; display: block; cursor: pointer; transition: background 0.2s; &:hover { background-color: $grey-400-color; border: none; } &:focus { outline: none; } &[disabled] { background-color: $grey-200-color; border: none; cursor: not-allowed; } } } fieldset .counter { .counter__input { border: none; } .counter__button { background-color: $grey-400-color; &:hover { background-color: $grey-500-color; } &[disabled] { background-color: $grey-300-color; } } }

alerts   

Copy
Edit
<!-- components/atoms/alerts.php --> <div class="alert" role="alert"> .alert <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div> <div class="alert alert--icon" role="alert"> <svg class="alert__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg> .alert.alert--icon <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div> <div class="alert alert--icon alert--success" role="alert"> <svg class="alert__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> .alert.alert--icon.alert--success <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div> <div class="alert alert--icon alert--warning" role="alert"> <svg class="alert__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> .alert.alert--icon.alert--warning <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div> <div class="alert alert--icon alert--danger" role="alert"> <svg class="alert__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg> .alert.alert--icon.alert--danger <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div> <div class="alert alert--icon alert--info" role="alert"> <svg class="alert__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg> .alert.alert--icon.alert--info <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div>
Copy
Copy
Edit
/* scss/atoms/_alerts.scss */ .alert { color: $default-color; background-color: $grey-100-color; border: none; border-radius: 0; margin-bottom: 1.5rem; padding: 1.375rem 3.75rem 1.375rem 2.25rem; position: relative; overflow: hidden; @include media-breakpoint-down(md) { padding: 1.125rem 3.4rem 1.125rem 1.875rem; } &.alert--noclose { padding-right: 2.25rem; @include media-breakpoint-down(md) { padding-right: 1.875rem; } } .alert__close { font-size: 1.75rem; line-height: 1; color: $default-color; border: none; background: none; opacity: 0.8; cursor: pointer; margin: 0; padding: 0; top: 1.25rem; right: 2.125rem; position: absolute; z-index: 10; transition: opacity 0.2s; @include media-breakpoint-down(md) { top: 1rem; right: 1.875rem; } &:hover, &:focus { opacity: 1; outline: none; } } &.alert--success { color: $success-color; background-color: $success-color-light; .alert__close { color: $success-color; } } &.alert--danger { color: $danger-color; background-color: $danger-color-light; .alert__close { color: $danger-color; } } &.alert--warning { color: $warning-color; background-color: $warning-color-light; .alert__close { color: $warning-color; } } &.alert--info { color: $info-color; background-color: $info-color-light; .alert__close { color: $info-color; } } &.alert--white { color: $default-color; background-color: $white-color; .alert__close { color: $default-color; } } &.alert--icon { padding-left: 4.75rem; @include media-breakpoint-down(md) { padding-left: 3.75rem; } .alert__icon { width: 18px; height: 18px; position: absolute; top: 1.6125rem; left: 2.25rem; @include media-breakpoint-down(md) { top: 1.35rem; left: 1.45rem; } } } }

badges   

.badge .badge.badge--primary .badge.badge--secondary .badge.badge--outline .badge.badge--white .badge.badge--success .badge.badge--danger
Copy
Edit
<!-- components/atoms/badges.php --> <span class="badge">.badge</span> <span class="badge badge--primary">.badge.badge--primary</span> <span class="badge badge--secondary">.badge.badge--secondary</span> <span class="badge badge--outline">.badge.badge--outline</span> <span class="badge badge--white">.badge.badge--white</span> <span class="badge badge--success">.badge.badge--success</span> <span class="badge badge--danger">.badge.badge--danger</span>
Copy
Copy
Edit
/* scss/atoms/_badges.scss */ .badge { font-size: 0.6875rem; font-weight: 400; font-family: $font-family-default; line-height: 1; text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; vertical-align: middle; letter-spacing: 0.02rem; color: $white-color; background-color: $secondary-color; border-radius: 0; border: 1px solid $secondary-color; display: inline-block; margin-right: 0.45rem; padding: 0.3rem 0.5rem 0.25rem; &[href]:hover { background-color: lighten($black-color, 30%); color: $white-color; } &[href]:focus { outline: none; } &.badge--big { padding: 0.25rem 0.4rem 0.25rem; font-size: 0.9375rem; font-weight: 700; } &.badge--primary { background-color: $primary-color; border-color: $primary-color; &[href]:hover { background-color: darken($primary-color, 10%); border-color: darken($primary-color, 10%); } } &.badge--secondary { color: $default-color; background-color: $grey-200-color; border-color: $grey-200-color; &[href]:hover { background-color: darken($grey-200-color, 10%); border-color: darken($grey-200-color, 10%); } } &.badge--outline { color: darken($primary-color, 5%); border: 1px solid $primary-color; background-color: $white-color; &[href]:hover { background-color: $primary-color; border-color: $primary-color; color: $white-color; } } &.badge--white { color: $default-color; background-color: $white-color; border-color: $white-color; &[href]:hover { background-color: lighten($default-color, 30%); border-color: $white-color; color: $white-color; } } &.badge--success { color: $success-color; background-color: $success-color-light; border-color: $success-color-light; } &.badge--danger { color: $danger-color; background-color: $danger-color-light; border-color: $danger-color-light; } }