val-do.com დიზაინ სისტემა

breadcrumb

Default breadcrumb

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="#">მთავარი</a></li>
    <li><a href="#">კატეგორიები</a></li>
    <li aria-current="page">მიმდინარე გვერდი</li>
  </ol>
</nav>

Long item overflow demo

<nav class="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="#">მთავარი</a></li>
    <li><a href="#">ძალიან გრძელი კატეგორიის დასახელება დემოსთვის</a></li>
    <li><a href="#">კიდევ ერთი გრძელი ჩანაწერი</a></li>
    <li aria-current="page">აქტიური გვერდი</li>
  </ol>
</nav>

buttons

Variants and states

Hover/Focus ეფექტი ნახე რეალურად მაუსით გადატარებისას ან Tab ნავიგაციით.

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success">Success</button>
<a href="#" class="btn">Link Button</a>
<button type="button" class="btn" disabled>Disabled</button>

Sizes

`.btn-sm` კლასი მცირდება სიმაღლე, padding-ი და font-size-ი — გამოიყენე ცხრილებში, card-ებში ან მჭიდრო ადგილებში.

<button type="button" class="btn btn-sm">Default</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<a href="#" class="btn btn-sm">Link Button</a>
<button type="button" class="btn btn-sm" disabled>Disabled</button>

container

Container behavior

<div class="container">
  <p>ეს ბლოკი არის .container და viewport-ის ზრდასთან ერთად მაქს სიგანეზე გადადის.</p>
</div>

Breakpoints

form-control

Inputs and textarea

`file` და `checkbox` ტიპები ამ CSS-ში შეგნებულად არ არის style-ით დაფარული.

`.field-hint` კლასი გამოიყენება label-ისა და input-ის შორის მოკლე განმარტებითი ტექსტისთვის.

<div>
  <label for="example-input">ტექსტური ველი</label>
  <p class="field-hint">მაგალითი დამხმარე ტექსტისთვის label-ის ქვემოთ, input-ის ზემოთ.</p>
  <input id="example-input" type="text" placeholder="მაგ: Node.js Developer">
</div>

<div>
  <label for="example-email">ელ.ფოსტა</label>
  <input id="example-email" type="email" placeholder="მაგ: user@val-do.com">
</div>

<div>
  <label for="example-select">Single select</label>
  <select id="example-select">
    <option value="">აირჩიე</option>
    <option value="js">JavaScript</option>
    <option value="node">Node.js</option>
    <option value="mongo">MongoDB</option>
  </select>
</div>

<div>
  <label for="example-disabled">Disabled input</label>
  <input id="example-disabled" type="text" value="Disabled state" disabled>
</div>

<div>
  <label for="example-textarea">აღწერა</label>
  <textarea id="example-textarea" rows="4" placeholder="შეიყვანე ტექსტი"></textarea>
</div>

pagination

Default pagination

• უკან
• 1
• 2
• 3
• 4
• 5
• შემდეგი

<ul class="pagination">
  <li class="pagination-item">
    <a class="pagination-link" href="?page=1">უკან</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link" href="?page=1">1</a>
  </li>
  <li class="pagination-item is-current">
    <a class="pagination-link" href="?page=2">2</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link" href="?page=3">3</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link" href="?page=4">4</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link" href="?page=5">5</a>
  </li>
  <li class="pagination-item">
    <a class="pagination-link" href="?page=3">შემდეგი</a>
  </li>
</ul>

`+pagination(data, options)` მიქსინი ელოდება `{ prev, next, currentPage, pagesArray }` ობიექტს. `options.paramName`-ით query პარამეტრის სახელი იცვლება (მაგ: `expensePage`), `options.query`-ით კი სხვა query პარამეტრები (`from`, `to`...) ემატება URL-ს.

variables

Light theme palette

Dark theme overrides

Usage example

.your-element {
  background-color: var(--primary);
  color: var(--primary-invert);
}