Changelog

Base

Fonts

List of fonts
Implementation notes:
  1. You can import fonts from Google fonts, but if you can't - you can use fonts from the library.
  2. Fonts are stored inside the repository and are implemented with @font-face.
  3. CSS with them is stored in the /fonts directory. You need to add them with <link> in your HTML or @import the file and copy fonts to your project. To use them inside your styles specify font-family and font-weight in your stylesheets the next way: font-family: 'Lato', sans-serif;
    font-weight: 400;
Lato 100 Thin font
Lato 300 Light font
Lato 400 Regular font
Lato 700 Bold font
Lato 900 Black font

Helpers

List of helpers
Implementation notes:
  1. Helpers are just classes to apply to your HTML elements to add some single specific feature to it.
  2. All helper classes start with .h- except .clearfix
For text
.h-b makes text bold
.h-bi makes text bold using !important
.h-monospace makes text monospaced
.h-word-break breaks all words into lines if they don't fit the parent's width (f.e. long email)
.h-word-break-smart breaks only long words into lines if they don't fit the parent's width (f.e. if a text-line consists of several short words they won't be broken, if there are long words wider than parent - they will break into lines)
.h-text-nowrap collapses whitespace and suppresses line breaks
.h-center centers text
.h-placeholder color helper
.h-secondary color helper
.h-thirdly color helper
.h-brand color helper
.h-disabled color helper
.h-warning color helper
For layout
.clearfix can be added to the parent that stores floated children (but better use mixin)
.h-invisible makes an element transparent using CSS opacity
.display-none hides element by adding display:none

Elements

Icons

List of icons
Implementation notes:
  1. If you want to know how this svg-sprite method works, you can read about it here: SVG `use` with External Source
  2. Syntax to use icon: <svg class="icon">
        <use xlink:href="#icon-id-here"></use>
    </svg>
  3. Single-colored icons can be modified the next way: .icon-name {
        font-size: 32px;
        color: red;
    }
  4. There is no way to fetch the sprite from the Redesign Lib CDN. You need to create a svg file in your project's assets directory and copy sprite contents from the Redesign lib to that file. In your html you need to set a proper path to the sprite file of your project in xlink:href attribute: <svg class="icon">
        <use xlink:href="path-to-your-sprite-file/name-of-sprite-file.svg#icon-id-here"></use>
    </svg>
icon-appointment
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-attention
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-case
icon-chart
icon-check-xs
icon-check
icon-clear
icon-copy
icon-cross
icon-datepicker
icon-dashboard
icon-download
icon-edit
icon-filter-empty
icon-filter-selected
icon-folder
icon-hamburger
icon-home
icon-image
icon-import
icon-info
icon-list
icon-lock
icon-mail
icon-minus
icon-note-add
icon-note
icon-notification
icon-pagination-left-double
icon-pagination-left
icon-pagination-right-double
icon-pagination-right
icon-patients
icon-pdf
icon-phone
icon-plus
icon-profile
icon-question
icon-recepient
icon-recepients
icon-report
icon-reset
icon-search
icon-settings
icon-success
icon-survey
icon-table
icon-time
icon-trash
icon-unlock
icon-user
icon-users
icon-warning
icon-workflow

Heading

Configurations
Common layout
  • -
Theme dependent layout
  • font-size
  • font-weight
  • line-height
Skin
  • color
Modifications
Common layout
  • -
Theme dependent layout
  • default
  • hero
  • lead
  • hint
  • h1
  • h2
  • h3
Skin
  • default
  • second
  • third
Component demo / Layout
  • Layout modifications classes:
    • .heading--size-hero
    • .heading--size-lead
    • .heading--size-hint
    • .heading--size-h1
    • .heading--size-h2
    • .heading--size-h3
default Default heading
hero Hero heading
lead Lead heading
hint Hint heading
h1 H1 heading
h2 H2 heading
h3 H3 heading
Component demo / Skin
  • Skin modifications classes:
    • .heading--color-second
    • .heading--color-third
default Default heading
second Second heading
third Third heading

Label

Configurations
Common layout
  • -
Theme dependent layout
  • font-size
  • font-weight
  • line-height
Skin
  • color
Modifications
Common layout
  • -
Theme dependent layout
  • default
  • small
Skin
  • default
  • lead
Component demo / Layout
  • Layput modifications classes:
    • .label--size-small
default Default label
small Small label
Component demo / Skin
  • Skin modifications classes:
    • .label--color-lead
default Default label
lead Lead label

Link

Configurations
Common layout
  • -
Theme dependent layout
  • font-size
  • line-height
  • icon-size
  • icon-margin
Skin
  • State: static
    • color
  • State: active 
    • color
  • State: disabled 
    • color
Modifications
Common layout
  • -
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
Component demo / Skin
  • State: static
    Link
    Back
  • State: hover
    Implementation notes:
    1. Hover state can be achieved by hovering the link or using .hover class on the link.
    Link
    Back
  • State: active
    Implementation notes:
    1. Active state can be achieved by clicking on the link or using .active class on the link.
    Link
    Back
  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the link or its parent.
    Link
    Back

List

Configurations
Common layout
  • Modification: with-dots
    • margin-horizontal
    • dots-size
Theme dependent layout
  • font-size
  • line-height
Skin
  • color
  • background
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
  • Modification: static
    • item1
    • item2
    • item3
  • Modification: with-dots
    Classes are applied to <ul>:

    • item1
    • item2
    • item3

    Classes are applied to parent with <ul> inside:

    • item1
    • item2
    • item3

Status

Configurations
Common layout
  • padding-vertical
  • padding-horizontal
Theme dependent layout
  • border-radius
  • font-size
  • line-height
Skin
  • background
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
  • not-delivered
  • confirmed
  • declined
  • not-confirmed
  • secondary
Component demo / Layout
default Default
Component demo / Skin
  • Skin modifications classes:
    • .status--color-not-delivered
    • .status--color-confirmed
    • .status--color-declined
    • .status--color-not-confirmed
    • .status--color-secondary
default Default
not-delivered Not Delivered
confirmed Confirmed
declined Declined
not-confirmed Not Confirmed
secondary Secondary

Icon status

Configurations
Common layout
  • identifier-icon-size
Theme dependent layout
  • -
Skin
  • State: off
    • identifier-icon-color
  • State: on 
    • identifier-icon-color
    • circle-background
    • circle-border-color
    • circle-icon-color
Modifications
Common layout
  • default
Theme dependent layout
  • -
Skin
  • default
Component demo / Layout
Component demo / Skin
  • State: off
    Implementation notes:
    1. State 'off' can be achieved by using .off class on the icon-status.
  • State: on
    Implementation notes:
    1. State 'on' can be achieved by using .on class on the icon-status.

Buttons

Configurations
Common layout
  • height
  • padding-horizontal
  • icon-size
  • border-width
Common TD layout
  • border-radius
  • font-size
Common skin
  • State: static
    • background
    • border-color
    • color
    • icon-color
    • shadow
    • shadow-color
  • State: hover
    • background
    • border-color
    • color
    • icon-color
    • shadow
    • shadow-color
  • State: active
    • background
    • border-color
    • color
    • icon-color
    • shadow
    • shadow-color
  • State: disabled
    • background
    • border-color
    • color
    • icon-color
    • shadow
    • shadow-color
Modifications
Common layout
  • default
  • small
Common TD layout
  • default
Common skin
  • default
  • default-dark
  • default-light
  • blank
  • brand
  • error
  • success

Button

Configurations
Common layout
  • icon-margin
Theme dependent layout
  • -
Common skin
  • -
Modifications
Common layout
  • inherits from common-buttons-sizes
  • default
Theme dependent layout
  • inherits from common-buttons-sizes
Skin
  • inherits from common-buttons-colors
Component demo / Layout
  • Modification: static
  • Modification: static (with icon)
    Implementation notes:
    1. No additional modification class is needed.
    2. To make a button with an icon just put it inside the next way: <button type="button" class="button"></button>
          <svg class="icon">
              <use xlink:href="#icon-id-here"></use>
          </svg>

          Text
      </button>
Component demo / Skin
  • Skin modifications classes:
    • .button--color-default-dark
    • .button--color-brand
  • State: static (default / default-dark / brand / default-light)
  • State: hover (default / default-dark / brand / default-light)
    Implementation notes:
    1. Hover state can be achieved by hovering the button or using .hover class on the button.
  • State: active (default / default-dark / brand / default-light)
    Implementation notes:
    1. Active state can be achieved by clicking on the button or using .active class on the button.
  • State: disabled (default / default-dark / brand / default-light)
    Implementation notes:
    1. Disabled state is the same for all button skins and is defined only inside default skin modification.
    2. Disabled state can be achieved by using .disabled class on the button or its parent.

Icon button

Configurations
Common layout
  • -
Theme dependent layout
  • -
Skin
  • -
Modifications
Common layout
  • inherits from common-buttons-sizes
Theme dependent layout
  • inherits from common-buttons-sizes
Skin
  • inherits from common-buttons-colors
Component demo / Layout
  • Layout: default
  • Layout: small
    Implementation notes:
    1. .icon-button--size-small
  • Modification: bordered
    Implementation notes:
    1. .icon-button--mod-bordered
Component demo / Skin
  • State: static
  • State: hover
    Implementation notes:
    1. Hover state can be achieved by hovering the button or using .hover class on the button.
  • State: active
    Implementation notes:
    1. Active state can be achieved by clicking on the button or using .active class on the button.
  • State: disabled
    Implementation notes:
    1. Disabled state is the same for all button skins and is defined only inside default skin modification.
    2. Disabled state can be achieved by using .disabled class on the button or its parent.

Button group

Component demo / Layout
Implementation notes
  1. Button group doesn't have any configurations. Only the implementation.
  2. Button group is just a wrapper for a group of ANY buttons. It is just important that children of button group must contain the word button for proper styling.

Form input elements

Configurations
Common layout
  • height
  • padding-horizontal
  • border-width
Common TD layout
  • border-radius
  • font-size
  • line-height
Common skin
  • State: static
    • background
    • border-color
    • color
    • placeholder-color
    • icon-color
  • State: active 
    • background-alt
    • border-color
    • icon-color
    • shadow-color
    • shadow
  • State: disabled 
    • background
    • border-color
    • color
    • icon-color
    • shadow-color
    • shadow
  • State: error 
    • border-color
    • icon-color
    • decoration-color
    • shadow-color
    • shadow
Modifications
Common layout
  • default
Common TD layout
  • default
Common skin
  • default

Input

Configurations
Common layout
  • Modification: static
    • error-margin
  • Modification: with-icon 
    • icon-size
Theme dependent layout
  • -
Skin
  • -
Modifications
Common layout
  • inherits from common-form-input-elemets
  • default
Theme dependent layout
  • inherits from common-form-input-elemets
  • -
Skin
  • inherits from common-form-input-elemets
  • -
Component demo / Layout
  • Modification: static
  • Modification: with-icon
    • .input--mod-with-icon
    • with an icon at the right side.
    Implementation notes
    1. When implementing input with an icon, you need to use the next code: <div class="input-wrapper">
          <input       type="text" class="input input--mod-with-icon" placeholder="Your placeholder">

          <svg       class="icon">
              <use       xlink:href="#icon-id-here"></use>
          </svg>
      </div>
    2. Don't forget to use .input-wrapper class for a parent HTML element, because input's icons styling highly relies on it (it is absolutely positioned relatively to parent with this class).
    3. For proper styling an icon must be placed in DOM as an input's sibling somewhere after it.
Component demo / Skin
  • State: static
  • State: active
    Implementation notes:
    1. Active state can be achieved by focusing the input or using .active class on the .input or on the .input-wrapper.
  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the .input or its parent.
    2. Disabled state can be achieved by using attribute disabled="disabled" on the .input.
  • State: error
    Implementation notes:
    1. Error state can be achieved by using .error class on the .input or its parent.
    2. To show an error-message you can add any HTML element with error text description under the <input> and just add class .error-message to it.
    There was an error.
    There was an error.

Search Input

Configurations
Common layout
  • icon-size
  • wrap-icon-size
Theme dependent layout
  • -
Skin
  • icon-active
Modifications
Common layout
  • inherits from common-form-input-elemets
  • default
Theme dependent layout
  • inherits from common-form-input-elemets
Skin
  • inherits from common-form-input-elemets
  • default
Component demo / Layout
  • State: static
    Implementation notes
    1. The component's implementation needs to use specific HTML structure since it is more than just an input, but also has icons. To implement a search-input you need to use the next code: <div class="search-input-wrapper">
          <input       type="text" class="search-input" placeholder="Your placeholder">

          <svg       class="icon icon-search">
              <use       xlink:href="#icon-id-here"></use>
          </svg>

          <button       class="search-input__clear">
              <svg       class="icon">
                  <use       xlink:href="#icon-id-here"></use>
              </svg>
          </button>
      </div>
    2. Don't forget to use .search-input-wrapper class for a parent HTML element, because input's icon styling highly relies on it (it is absolutely positioned relatively to parent with this class).
    3. If you wan't to make the .search-input__clear button unclickable - just apply class .disabled to it.
Component demo / Skin
  • State: static
  • State: active
    Implementation notes:
    1. Active state can be achieved by focusing the input or using .active class on the .search-input or on the .search-input-wrapper.
  • State: clear-icon active
    Implementation notes:
    1. Active state can be achieved by clicking the clear button or using .active class on the .search-input__clear.
  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the .search-input or its parent.
    2. Disabled state also can be achieved by using attribute disabled="disabled" on the .search-input.

Dropdown

Configurations
Common layout
  • toggle
    • icon-size
  • menu
    • block
      • max-width
      • max-height
    • item-group
      • padding-vertical
      • padding-horizontal
    • item
      • padding-vertical
      • padding-horizontal
      • icon-size
Theme dependent layout
  • menu
    • border-radius
Skin
  • menu
    • block
      • background-color
      • shadow
    • item-group
        • border-color
    • item
      • State: static
        • background-image
      • State: hover
        • background-color
      • State: disabled
        • color
Modifications
Common layout
  • inherits from common-form-input-elements
  • inherits from common-buttons-sizes
  • default
Theme dependent layout
  • inherits from common-form-input-elements
  • inherits from common-buttons-sizes
  • default
Skin
  • inherits from common-form-input-elements
  • inherits from common-buttons-colors
  • default
Component demo / Layout
  • Modification: static
    Implementation notes
    1. Class .dropdown__toggle is a common class for any implementation of dropdown's toggle.

    2. To implement a dropdown with an input toggle use .dropdown__toggle and .dropdown__input classes. You don't need to use the .dropdown__input class on an <input> HTML element but you can use the element inside the dropdown (if the dropdown needs to be a part of a HTML form). It will be hidden and you can write your own logic to copy the dropdown's selected value into it. <div class="dropdown">
          ...
          <div class="dropdown__toggle dropdown__input">...</div>
          ...
      </div>
      Dropdown with input
      Menu item 1
      Menu item 2

    3. To implement a dropdown with a button toggle use .dropdown__toggle and .dropdown__button classes. Note that dropdown's menu items inherit the button's padding-left property. <div class="dropdown">
          ...
          <div class="dropdown__toggle dropdown__button">...</div>
          ...
      </div>
      Dropdown with button
      Menu item 1
      Menu item 2 active

    4. To implement a dropdown with an item group wrap the grouped items in a <div> and apply class .item-group to it. <div class="dropdown__menu">
          <div class="item-group">
              <div class="item">...</div>
              ...
          </div>
      </div>
      Dropdown with item group
      Menu item 1 active
      Menu item 2
      Menu item 3
      Menu item 4
      Menu item 5
      Menu item 6
      Dropdown with item group
      Menu item 1
      Menu item 2
      Menu item 3
      Menu item 4
      Menu item 5
      Menu item 6

    5. You can use several implementations of .dropdown__menu: <div class="dropdown__menu">
          <div class="item">...</div>
      </div>
      <ul class="dropdown__menu">
          <li class="item">...</li>
      </ul>
      <div class="dropdown__menu">
          <ul>
              <li class="item">...</li>
          </ul>
      </div>
  • Modification: show-selected
    • .dropdown--show-selected
    • with an icon-check that indicated the selected option.
    Implementation notes
    1. This class also impacts the padding-left property of dropdown's menu items.
    Dropdown with check
    Menu item 1 active
    Menu item 2
    Menu item 3
    Menu item 4
    Menu item 5
    Menu item 6
    Dropdown without check
    Menu item 1 active
    Menu item 2
    Menu item 3
    Menu item 4
    Menu item 5
    Menu item 6
Component demo / Skin
  • State: toggle static
    Dropdown with input
    Menu item 1
    Dropdown with button
    Menu item 1
  • State: toggle hover
    Implementation notes:
    1. Input implementation doesn't have hover state, it inherits the behavior from form-input-elements. Button implementation can be achieved by hovering button or using .hover class on the .dropdown.
    Dropdown with button
    Menu item 1
  • State: block active
    Implementation notes:
    1. Active state can be achieved by using .active class on the .dropdown.
    Dropdown with input
    Menu item 1
    Dropdown with button
    Menu item 1

  • State: block error
    Implementation notes:
    1. Error state can be achieved by using .error class on the .dropdown or its parent.
    2. For now error state can be used only for dropdowns with input toggles.
    Dropdown with input
    Menu item 1
    Menu item 2
    There was an error.
    Dropdown with button
    Menu item 1
    Menu item 2
    There was an error.
  • State: block disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the .dropdown.
    Dropdown with input
    Menu item 1
    Menu item 2
    Dropdown with button
    Menu item 1
    Menu item 2
  • State: item static
    Dropdown with input
    Menu item 1
    Menu item 2
    Dropdown with input + show-selected
    Menu item 1
    Menu item 2
    Dropdown with button
    Menu item 1
    Menu item 2



  • State: item active
    Implementation notes:
    1. Active state can be achieved by using .active class on the .item.
    Dropdown with input
    Menu item 1 active
    Menu item 2
    Dropdown with input + show-selected
    Menu item 1 active
    Menu item 2
    Dropdown with button
    Menu item 1 active
    Menu item 2



  • State: item hover
    Implementation notes:
    1. Hover state can be achieved by hovering .item or using .hover class on the .item.
    Dropdown with input
    Menu item 1 hover
    Menu item 2
    Dropdown with input
    Menu item 1 active hover
    Menu item 2
    Dropdown with input + show-selected
    Menu item 1 hover
    Menu item 2
    Dropdown with input + show-selected
    Menu item 1 active hover
    Menu item 2
    Dropdown with button
    Menu item 1 hover
    Menu item 2
    Dropdown with button
    Menu item 1 active hover
    Menu item 2



  • State: item disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the .item.
    Dropdown with input
    Menu item 1 disabled
    Menu item 2
    Dropdown with input + show-selected
    Menu item 1 disabled
    Menu item 2
    Dropdown with button
    Menu item 1 disabled
    Menu item 2



Textarea

Configurations
Common layout
  • Modification: static
    • error-margin
    • bottom-indent
Theme dependent layout
  • -
Skin
  • -
Modifications
Common layout
  • inherits from common-form-input-elemets
  • default
Theme dependent layout
  • inherits from common-form-input-elements
Skin
  • inherits from common-form-input-elements
Component demo / Layout
  • Modification: static
Component demo / Skin
  • State: static
  • State: active
    Implementation notes:
    1. Active state can be achieved by focusing the input or using .active class on the .textarea or its parent.
  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the .textarea or its parent.
    2. Disabled state also can be achieved by using attribute disabled="disabled" on the .textarea.
  • State: error
    Implementation notes:
    1. Error state can be achieved by using .error class on the .textarea or its parent.
    2. To show an error-message you can add any HTML element with error text description under the <textarea> and just add class .error-message to it.
    There was an error.

Form elements

Configurations
Common skin
  • State: static
    • background
    • border-color
  • State: hover 
    • background
  • State: checked 
    • background
    • border-color
    • icon-color
    • decoration-color
  • State: disabled 
    • background
    • border-color
    • icon-color
    • decoration-color
Modifications
Common skin
  • default

Radiobutton

Configurations
Common layout
  • height
  • border-width
  • dot-size
Theme dependent layout
  • -
Skin
  • -
Modifications
Common layout
  • default
Theme dependent layout
  • -
Skin
  • inherits from form elements
Component demo / Layout
  • using just fake markup (no <input>)
    Implementation notes:
    1. Radiobutton can be made using just 2 HTML elements (its up to you which <div>'s or <span>'s <div class="radiobutton">
          <span       class="radiobutton__block"></span>
      </div>
  • using <input> HTML element
    Implementation notes:
    1. You can also use custom radiobutton with real <input> in your <form> <label class="radiobutton">
          <input       type="radio">
          <span       class="radiobutton__block"></span>
      </label>
    2. Important note: <input> must be placed before the .radiobutton__block.
Component demo / Skin
  • State: static
    Radiobutton with <input>:

    Radiobutton with fake markup:

  • State: hover
    Radiobutton with <input>:


    Radiobutton with fake markup:

  • State: checked
    Implementation notes:
    1. Checked state can be achieved by checking the radiobutton or using .checked class on the radiobutton or its parent.
    Radiobutton with <input> that's checked itself:


    Radiobutton with class .checked with <input> inside:


    Radiobutton with <input> placed inside a parent with class .checked:


    Radiobutton with fake markup and class .checked on itself:


    Radiobutton with fake markup placed inside a parent with class .checked:

  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the radiobutton or its parent.
    Radiobutton with <input> with class .disabled on itself:


    Radiobutton with fake markup with class .disabled on itself:


    Radiobutton with <input> inside parent with class .disabled:


    Radiobutton fake markup inside parent with class .disabled:

Checkbox

Configurations
Common layout
  • height
  • border-width
  • icon-size
Theme dependent layout
  • border-radius
Skin
  • -
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • inherits from form elements
Component demo / Layout
  • using just fake markup (no <input>)
    Implementation notes:
    1. Checkbox can be made using just 3 HTML elements: <div class="checkbox">
          <span       class="checkbox__block"></span>
              <svg       class="icon icon-checked">
                  <use       xlink:href="icon-check"></use>
              <svg>

          </span>
      </div>
    2. Partial checked checkbox can be made using just 4 HTML elements: <div class="checkbox">
          <span       class="checkbox__block"></span>
              <svg       class="icon icon-checked">
                  <use       xlink:href="icon-check"></use>
              <svg>

              <svg       class= "icon icon-partial-checked">
                  <use       xlink:href="icon-minus"></use>
              <svg>
          </span>
      </div>
    3. When using partial-checked checkbox its important to specify proper classes for icons: .icon-partial-checked and .icon-checked. The Implementation rely on those classes for proper styling.


  • using <input> HTML element
    Implementation notes:
    1. You can also use custom checkbox with real <input> in your <form> <div class="checkbox">
          <input       type="checkbox">

          <span       class="checkbox__block"></span>
              <svg       class="icon icon-checked">
                  <use       xlink:href="icon-check"></use>
              <svg>
          </span>
      </div>
    2. Important note: <input> must be placed before the .checkbox__block.
Component demo / Skin
  • State: static
    Checkbox with <input>:

    Checkbox with fake markup (double / ternar):

  • State: hover
    Checkbox with <input>:


    Checkbox with fake markup (double / ternar):

  • State: partial-checked
    Implementation notes:
    1. Partial checked state can be achieved by using .partial-checked class on the checkbox.
    Checkbox with fake markup and class .partial-checked on itself:

  • State: checked
    Implementation notes:
    1. Checked state can be achieved by checking the checkbox or using .checked class on the checkbox or its parent.
    Checkbox with <input> that's checked itself:


    Checkbox with class .checked with <input> inside:


    Checkbox with <input> placed inside a parent with class .checked:


    Checkbox with fake markup and class .checked on itself (double / ternar):


    Checkbox with fake markup placed inside a parent with class .checked (double / ternar):

  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the checkbox or its parent.
    Checkbox with <input> with class .disabled on itself:


    Checkbox with fake markup with class .disabled on itself (double / ternar):


    Checkbox with <input> inside parent with class .disabled:


    Checkbox fake markup inside parent with class .disabled (double / ternar):

Form group

Configurations
Common layout
  • label
    • margin-bottom
Modifications
Common layout
  • default
Component demo / Layout
  • Implementation notes
    1. Form group is just a wrapper for a group of some label and any input (or anything else)
    2. For proper styling you must add the next classes for form group's children or wrap them in HTML elements with the next classes: .form-group__label and .form-group__input.
    Label
  • Implementation notes
    1. Form group can contain multiple input's (or any other non-label elements). Just specify the .form-group__input class on them.
    Label

Check item

Configurations
Common layout
  • padding-vertical
  • padding-horizontal
  • check-block-size
  • icon-size
  • margin-side
Theme dependent layout
  • -
Skin
  • State: static
    • background
    • color
Modifications
Common layout
  • default
Theme dependent layout
  • -
Skin
  • inherits from form elements
  • default
Component demo / Layout
  • using just fake markup (no <input>)
    Option 1
    Option 2
  • using <input> HTML element
    Implementation notes:
    1. Important note: <input> must be placed before the .check-item__toggle.
Component demo / Skin
  • State: static
    Check-item with <input>:


    Check-item with fake markup:

    Option 1
  • State: hover
    Implementation notes:
    1. Hover state can be achieved by hovering the check-item or using .hover class on it.
    Check-item with class .hover on it and with unchecked <input> inside:


    Check-item with fake markup and class .hover on itself:

    Option 1
  • State: checked
    Implementation notes:
    1. Checked state can be achieved by checking the checkbox when using real <input> or using .checked class on the check-item.
    Check-item with <input> that's checked itself:


    Check-item with class .checked with <input> inside:


    Check-item with fake markup and class .checked on itself:

    Option 1

Switcher

Configurations
Common layout
  • height
  • width
Theme dependent layout
  • font-size
  • font-weight
Skin
  • Modification: off
    • State: static
      • background
      • border-color
      • color
      • toggle-background
      • toggle-shadow
    • State: hover
      • background
      • border-color
  • Modification: on
    • State: static
      • background
      • border-color
    • State: hover
      • background
      • border-color
  • State: disabled
    • background
    • border-color
    • color
    • toggle-background
    • toggle-shadow
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
Component demo / Skin
  • Modification: off
    • State: static
    • State: hover
      Implementation notes:
      1. Active state can be achieved by hovering the switcher or using .hover class on it.
  • Modification: on
    Implementation notes:
    1. State 'on' can be achieved by using .on class on the switcher.
    • State: static
    • State: hover
      Implementation notes:
      1. Active state can be achieved by hovering the switcher or using .hover class on it.
  • State: disabled
    Implementation notes:
    1. Disabled state can be achieved by using .disabled class on the switcher or its parent.

Thumbnail

Configurations
Common layout
  • size
  • border-width
  • controls-indent
Theme dependent layout
  • border-radius
Skin
  • background-image
  • background-color
  • border-color
Modifications
Common layout
  • inherits from common-buttons-sizes
  • default
Theme dependent layout
  • inherits from common-buttons-sizes
  • default
Skin
  • inherits from common-buttons-colors
  • default
Component demo / Layout
  • using just fake markup (no <input>)
    Implementation notes:
    1. To implement the thumbnail you need to use the following code: <div class="thumbnail">
         <div class="thumbnail__preview">
             <img src="#image">
         </div>
         <div class="thumbnail__controls">
             <button type="button" class="thumbnail-button">
                 <svg class="icon">
                     <use xlink:href="#icon-image"></use>
                 <svg>
             </button>
             <button type="button" class="thumbnail-button">
                 <svg class="icon">
                     <use xlink:href="#icon-import"></use>
                 <svg>
             </button>
             <button type="button" class= class="thumbnail-button">
                 <svg class="icon">
                     <use xlink:href="#icon-trash"></use>
                 <svg>
             </button>
         </div>
      </div>
  • using <input> HTML element
    Implementation notes:
    1. To implement the thumbnail you need to use the following code: <label class="thumbnail">
         <input type="file">
         <div class="thumbnail__preview">
             <img src="#image">
         </div>
         <div class="thumbnail__controls">
             <button type="button" class="thumbnail-button">
                 <svg class="icon">
                     <use xlink:href="#icon-image"></use>
                 <svg>
             </button>
             <button type="button" class="thumbnail-button">
                 <svg class="icon">
                     <use xlink:href="#icon-import"></use>
                 <svg>
             </button>
             <button type="button" class= class="thumbnail-button">
                 <svg class="icon">
                     <use xlink:href="#icon-trash"></use>
                 <svg>
             </button>
         </div>
      </label>
Component demo / Skin
Implementation notes:
  1. You need to use .thumbnail-button class for buttons, but they inherit all their Layout & Skin from common-buttons-sizes and common-buttons-colors configs.

Tag

Configurations
Common layout
  • min-width
  • height
  • margin-side
  • padding-horizontal
  • icon-size
  • icon-margin
Theme dependent layout
  • font-size
  • line-height
Skin
  • block
    • background
  • icon
    • State: static
      • color
    • State: hover
      • color
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
Tag
Component demo / Skin
Implementation notes:
  1. Button's hover state can be achieved by hovering the clear button.
Static tag

Hints

Configurations
Common layout
  • Modification: static
    • padding-vertical
    • padding-horizontal
    • min-width
    • max-width
  • Modification: with-caret
    • caret-width
    • caret-height
Theme dependent layout
  • border-radius
  • font-size
  • line-height
Skin
  • background
  • shadow-color
  • shadow
Modifications
Common layout
  • default
  • big
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
  • Layout: default
    • Modification: static
      Text
    • Modification: with-caret
      • .hint--mod-with-caret
      • Hint with a caret.
      Implementation notes
      Text
  • Layout: big
    • Modification: static
      Lorem ipsum dolor sit amet
    • Modification: with-caret
      Lorem ipsum dolor sit amet
  • Wrapper
    Implementation notes
    1. Use .hint-wrapper and hint will be positioned by default: <div class="hint-wrapper">
          Hovered element
          <div       class="hint"></div>
      </div>
    Hover me
    Text
Component demo / Skin
Text
Text

Grip

Configurations
Common layout
  • height
  • padding
  • icon-size
  • wrap-icon-size
Theme dependent layout
  • font-size
Skin
  • State: static
    • background
    • border-color
    • icon-color
  • State: active
    • shadow-color
    • shadow
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
Text
Component demo / Skin
  • State: static
    Text
  • State: active
    Implementation notes:
    1. Active state can be achieved by using .active class on the element.
    Text

Step

Configurations
Common layout
  • width
  • height
  • margin-text
  • distance-between
Theme dependent layout
  • font-size
  • font-weight
Skin
  • State: prev
    • background
    • border-color
    • shadow-color
    • shadow
  • State: next
    • color
  • State: active
    • color
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout
  • 1
    Step 1
Component demo / Skin
  • State: prev
    1
    Step 1
  • State: active
    Implementation notes:
    1. Active state can be achieved by using .active class on the step.
    1
    Step 1
  • State: next
    Implementation notes:
    1. Next state can be achieved by using .next class on the step.
  • All states together
    1
    Step 1
    2
    Step 2

Push notification

Configurations
Common layout
  • block
    • padding-vertical
    • padding-horizontal
    • icon-block-size
    • icon-size
    • icon-block-margin-side
  • close-button
    • position-vertical
    • position-horizontal
    • icon-size
  • description
    • margin-vertical
Theme dependent layout
  • block
    • border-radius
    • font-size
    • line-height
  • header
    • font-size
    • font-size
    • line-height
Skin
  • State: static
    • background
    • shadow-color
    • shadow
    • header-color
    • color
    • icon-block-background
    • icon-block-color
    • close-button
      • State: static
        • color
      • State: hover
        • color
  • State: success
    • icon-block-background
    • header-color
  • State: error
    • icon-block-background
    • header-color
Modifications
Common layout
  • -
Theme dependent layout
  • -
Skin
  • default
Component demo / Layout
Notification!
Something happened.
Component demo / Skin
  • State: static
    Implementation notes:
    1. Button's hover state can be achieved by hovering the close button or by using .hover class on it.
    Notification!
    Something happened
  • State: success
    Implementation notes:
    1. To achieve this state just add .success class to the push-notification HTML element. It changes only notification icon block's background and header's color.
    Great job!
    You have successfully subscribed this patient
  • State: error
    Implementation notes:
    1. To achieve this state just add .error class to the push-notification HTML element. It changes only notification icon block's background and header's color.
    Something went wrong
    Please, check internet connection

Loader

Configurations
Common layout
  • -
Theme dependent layout
  • image
    • size
  • header
    • margin-horizontal
    • margin-vertical
    • font-size
    • font-weight
    • line-height
Skin
  • image
    • stroke
    • fallback
  • header
    • color
Modifications
Common layout
  • -
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout + Skin
  • Orientation: horizontal
    • .loader--orientation-horizontal
    Implementation notes
    1. It is obligatory to specify the orientation class.
    2. Class .loader__image is an obligatory class for the loader's image part. The second class for it specifies whether it is an svg – .loader__image--svg, or a fallback – .loader__image--fallback, and styles the block according to its purpose. Those class are also obligatory as hte svg/gif-fallback crossbrowser logic highly depends on them.
    3. You need to use <svg> in your HTML to describe the loader circle image: <svg class="loader__image loader__image--svg">
          <circle cx="16" cy="16" r="12" stroke-linecap="round"/>
      </svg>
    4. You also must use the fallback, so put it in your DOM somewhere near the svg: <div class="loader__image loader__image--fallback"></div>
    Loading...
  • Orientation: vertical
    • .loader--orientation-vertical
    Implementation notes
    1. It is obligatory to specify the orientation class.
    2. Class .loader__image is an obligatory class for the loader's image part. The second class for it specifies whether it is an svg – .loader__image--svg, or a fallback – .loader__image--fallback, and styles the block according to its purpose. Those class are also obligatory as hte svg/gif-fallback crossbrowser logic highly depends on them.
    3. You need to use <svg> in your HTML to describe the loader circle image: <svg class="loader__image loader__image--svg">
          <circle cx="16" cy="16" r="12" stroke-linecap="round"/>
      </svg>
    4. You also must use the fallback, so put it in your DOM somewhere near the svg: <div class="loader__image loader__image--fallback"></div>
    Please wait while data is loading...

Table

Configurations
Common layout
  • Modification: static
    • cell
      • common
        • padding-horizontal
        • padding-horizontal-enclosed
      • thead
        • min-height
        • padding-vertical
      • tbody
        • min-height
        • padding-vertical
      • tfoot
        • min-height
    • button
      • icon-size
      • margin-side
Theme dependent layout
  • -
Skin
  • block
    • border-color
  • thead
    • default
      • background
    • second
      • background
  • tbody
    • State: static
      • background
    • State: active
      • background
  • tfoot
    • background
  • button
    • State: static
      • color
    • State: active
      • color
    • State: disabled
      • color
Modifications
Common layout
  • default
Theme dependent layout
  • -
Skin
  • default
Component demo / Layout
  • Modification: static
    Implementation notes:
    1. Always use thead and tbody when creating a table. The markup highly relies on this tags.
    2. To add footer to the table use tfoot or add class .tfoot to the needed <tr>.
    3. For sorting buttons you can place icon in th inside an <a> tag and add .table-button class to the icon. You need to use .asc and .desc classes on the wrapper <a> for icon's rotation and styling.: <a class="asc">
          <svg       class="table-button icon">
              <use       xlink:href="#icon-id-here"></use>
          </svg>
      </a>
    4. The horizontal padding for all table cells is the same. It is set by padding-horizontal parameter. But left horizontal and right horizontal padding for the first and the last cells accordingly are bigger and are set using padding-horizontal-enclosed parameter.
    Name Surname Age
    Footer
    John Banks 32
    Jane Doe 31
Component demo / Skin
Implementation notes:
  1. Add class .active to the tr tp highlight it.
  2. Use .asc and .desc classes for proper sorting buttons styling.
  3. To disable table header buttons and see the proper styling of them add .disabled class to its parent th.
Name Surname Age
John Doe 32
Jane Doe 31
Footer

Panel

Configurations
Common layout
  • Modification: static
    • header
      • padding-vertical
      • padding-horizontal
    • body
      • padding-vertical
      • padding-horizontal
    • footer
      • padding-vertical
      • padding-horizontal
      • border-width
        • top
    • Modification: collapsible 
      • toggle
        • block
          • padding-horizontal
        • icon
          • font-size
    • Modification: no-padding
      • body
        • padding-vertical
        • padding-horizontal
Theme dependent layout
  • block
    • border-radius
  • header
    • font-size
    • font-weight
    • line-height
    • icon-size
    • icon-indent
Skin
  • Modification: static
    • block
      • background
      • color
      • shadow-color
      • shadow
    • header
      • background
      • color
      • icon-color
    • footer
      • background
      • border-color
  • Modification: collapsible 
    • toggle
      • State: static
        • color
      • State: hover
        • background
        • color
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout + Skin
  • Modification: static
    Header
    Text
  • Modification: static (with icon in header)
    • no additional class needs to be added
    • a panel with an icon in the header
    Implementation notes
    1. Just add any <svg> with class .icon before a text inside a panel's header.
    2. An icon can be aligned only before a text now.
    Header
    Text
  • Modification: static (with footer)
    Header
    Text
    Text
  • Modification: no-padding
    • .panel--mod-no-padding
    • a panel with 0 padding inside body.
    Header
    Text
    Text
  • Modification: collapsible
    • .panel--mod-collapsible
    • a panel with a toggler that can be collased by clicking on it
    Implementation notes
    1. When implementing a collapsible panel, you need to write a js-logic to a toggle class .collapsed on a .panel HTML element.
    2. You also need to use the #icon-arrow-up icon inside a toggler button: <svg class="icon">
          <use       xlink:href="#icon-arrow-up"></use>
      </svg>

Tabs

Configurations
Common layout
  • Modification: static
    • tab
      • min-width
      • height
      • margin-side
      • padding-horizontal
    • content
      • padding-top
Theme dependent layout
  • tab
    • border-radius
    • font-size
    • font-weight
  • content
    • border-radius
Skin
  • block
    • shadow
    • shadow-color
  • tab
    • State: static
      • background
      • color
    • State: active
      • background
  • content
    • background
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • default
Component demo / Layout + Skin
Content of the Tab 1.
Content of the Tab 2.

Pagination

Configurations
Common layout
  • Modification: static
    • button
      • height
      • icon-size
      • border-width
      • space-between
  • Modification: text
    • button
      • space-between
Theme dependent layout
  • button
    • border-radius
    • font-size
  • label
    • font-size
Skin
  • page
    • State: static
      • color
  • label
    • color
  • current-page
    • color
Modifications
Common layout
  • default
Theme dependent layout
  • default
Skin
  • inherits from common-buttons-colors
  • default
Component demo / Layout
  • Modification: static
    • You need to use .pagination__button class for Pagination Buttons.
    • You need to use .pagination__page class for Pagination Page Buttons for their proper styling as they differ from simple Pagination Buttons lacking border and background rules.
    • You need to both .pagination__page and .pagination__page--dots classes for Pagination Dots between Pagination Page Buttons. You can use <button> HTML element for Pagination Dots, but it is styled to be non-clickable by the Redesign Lib.
  • Modification: text
    • .pagination--mod-text
    • Pagination with text labels and only next/prev buttons.
    • Can be "<label> + <button>" as rtl, or "<button> + <label>" as ltr.


Component demo / Skin
  • .pagination--color-brand
  • .pagination--color-default-dark
Implementation notes
  1. You can experiment with coloring by applying classes from common-buttons-colors list to the .pagination HTML element itself. This impacts skins of all states of .pagination__button and active state skin of .pagination__page (since it doesn't have static and hover states as buttons do).
Default Skin (no additional classes):





Default-dark Skin with .pagination--color-default-dark class:





Brand Skin with .pagination--color-brand class:



Page

Configurations
Common layout
  • button
    • padding-bottom
    • padding-horizontal
  • header
    • height
  • link
    • width
    • side-indent
Theme dependent layout
  • header
    • font-size
    • font-weight
    • line-height
  • link
    • font-size
    • font-weight
    • line-height
    • icon-size
    • icon-indent
Skin
  • -
Modifications
Common layout
  • default
Theme dependent layout
  • -
Skin
  • default
Component demo / Layout + Skin
Implementation notes:
  1. The 'page' style component doesn't have any specific styles for the .page__contentm but this class can be used for the content section.
  2. You can put a link inside a .page__header, if you need a 'go back to ...' link on your layout. You can use a simple .link or add the .page__link class to your <a> HTML element.
    Important note: the link is absolutely positioned at the left side of the component and can reach maximum width of 180px.
  3. .page__header has default styles for the text inside of it, but you can use any .heading or any other text component inside of it.
  4. In this demo the black border is added only for the component's dimension demonstration, it is not a real part of the component itself.
Back to Previous Page Page Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.