Skip to content

Instantly share code, notes, and snippets.

@faforty faforty/ui-kit@1.0
Created Dec 9, 2016

Embed
What would you like to do?
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
</div>
</div>
<div class="col-md-6">
<div class="ui-toggleBox ">
<input id="ui-toggleBox-PZ9hS" class="ui-toggleBox__field" type="checkbox">
<label for="ui-toggleBox-PZ9hS" class="ui-toggleBox__label ">Label</label>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<style>
.colors {
display: flex;
justify-content: space-between;
margin: 0 0 60px;
padding: 0;
}
.colors > li {
display: flex;
flex-direction: column;
align-items: center;
list-style: none;
float: left;
text-align: center;
position: relative;
-webkit-print-color-adjust: exact;
}
.colors__preview {
height: 60px;
width: 60px;
/*background: #F8F8F8;*/
display: block;
border-radius: 50%;
margin: 0 0 15px;
position: relative;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .025);
color: rgba(255, 255, 255, 0);
transition: color .5s ease;
font-size: 12px;
overflow: hidden;
}
.colors__name {
text-overflow: clip;
margin-bottom: 10px
display: block;
font-size: .9rem;
font-weight: 700;
line-height: 1.5;
color: #565454;
width: 110px;
overflow: hidden;
white-space: nowrap;
}
.colors li > ul {
margin: 0;
padding: 0;
}
.colors li {
list-style: none;
}
.colors_list-colorspaces {
font-size: 13px;
line-height: 1.5;
color: #676767;
}
</style>
<div class="form-group" style="margin-bottom: 40px;text-align: center">
Фон: <span class="text-color--gray">get-color--*</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Текст: <span class="text-color--gray">text-color--*</span>
</div>
<ul class="colors">
<li>
<span class="get-color--base colors__preview"></span>
<span class="colors__name">base</span>
</li>
<li>
<span class="colors__preview get-color--gray"></span>
<span class="colors__name">gray</span>
</li>
<li>
<span class="colors__preview get-color--grayLight"></span>
<span class="colors__name">grayLight</span>
</li>
<li>
<span class="colors__preview get-color--forestGreen"></span>
<span class="colors__name">forestGreen</span>
</li>
<li>
<span class="colors__preview get-color--green"></span>
<span class="colors__name">green</span>
</li>
<li>
<span class="colors__preview get-color--limeGreen"></span>
<span class="colors__name">limeGreen</span>
</li>
<li>
<span class="colors__preview get-color--mediumSeaGreen"></span>
<span class="colors__name">mediumSeaGreen</span>
</li>
<li>
<span class="colors__preview get-color--paleGreen"></span>
<span class="colors__name">paleGreen</span>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="25">
<h1>Мега-заголовок</h1>
<h2>Подзаголовок</h2>
<h3>Заголовок</h3>
<h3 class="text-color--gray">Заголовок</h3>
<h4>Мини-заголовок</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim in ipsam neque officia
quaerat
quas quos, repellat velit. Aliquam.</p>
<p class="text-color--gray">подпись, комментарий, чета сопроводительное</p>
</div>
<div class="form-group">
<small class="text-color--gray">Подсказка, пояснение, правовой текст</small>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="27">
<div class="alert alert-info" role="alert">
<div class="alert-info__i ui-action">
<i class="uikit-information"></i>
</div>
Вы не можете оставить заявку на любой продукт питания и затем указать для него параметры. Например,
выбрать продукт "молоко" и затем указать, что требуется только молоко пастеризованное.
<div class="alert-info__close">
<a href="/" class="ui-close" data-hide=".alert-info">
<i class="uikit-close-empty"></i>
</a>
</div>
</div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="24">
<div class="ui-tabs" id="tab-33">
<ul class="ui-tabs__bar">
<li class="ui-tabs__bar__tab" data-tab="ui-tab-1"><a href=""><span class="ui-badge"
data-badge="3">Пункт 1</span></a>
</li>
<li class="ui-tabs__bar__tab ui-tabs__bar__tab--active" data-tab="ui-tab-2"><a href=""><span
class="ui-badge" data-badge="3">Пункт 2</span></a></li>
<li class="ui-tabs__bar__tab ui-tabs__bar__tab--disabled" data-tab="ui-tab-3"><a href="">Нельзя
выбрать</a></li>
</ul>
<div class="ui-tabs__pane ui-tabs__pane--active" id="ui-tab-1">dssd</div>
<div class="ui-tabs__pane" id="ui-tab-2">dssd 2</div>
<div class="ui-tabs__pane" id="ui-tab-3">dssd 3</div>
</div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="30">
<div class="ui-tabs-material" id="tab-333">
<div class="ui-tabs-material__ink-bar"></div>
<ul class="ui-tabs-material__bar">
<li class="ui-tabs-material__bar__tab ui-tabs-material__bar__tab--active"
data-tab-material="ui-tab-31"><a href="">Пункт 1</a></li>
<li class="ui-tabs-material__bar__tab" data-tab-material="ui-tab-32"><a href="">Пункт 2</a></li>
<li class="ui-tabs-material__bar__tab ui-tabs-material__bar__tab--disabled"
data-tab-material="ui-tab-33"><a href="">Нельзя выбрать</a></li>
</ul>
<div class="ui-tabs__pane ui-tabs__pane--active" id="ui-tab-31">dssd</div>
<div class="ui-tabs__pane" id="ui-tab-32">dssd 2</div>
<div class="ui-tabs__pane" id="ui-tab-33">dssd 3</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<a href="/">Ссылка</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="29">
<a href=""
data-popup="Кукурузный монстр пришел обглодать ваши чахлые початки, сукины дети. Новые продукты прибавляются и не все этим довольны, но это не повод отказываться от годного и ароматного урожая.">Ссылка
на попап</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="37">
<a href=""><span class="ui-badge" data-badge="2">Бейдж</span></a>
</div>
<div class="form-group">
<nav class="nav">
<ul>
<li><a href="#" title="Home">Пункт меню</a></li>
<li class="active"><a href="#" title="Blog">Активный пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
</ul>
</nav>
</div>
<div class="form-group">
<a href="" class="ui-btn ui-btn--xs">Кнопка</a>
<a href="" class="ui-btn ui-btn--xs" disabled>Кнопка</a>
<a href="" class="ui-btn ui-btn--green ui-btn--xs ui-btn--no-shadow">Кнопка</a>
</div>
<div class="form-group">
<a href="" class="ui-btn ui-btn--sm">Кнопка</a>
<a href="" class="ui-btn ui-btn--sm" disabled>Кнопка</a>
<a href="" class="ui-btn ui-btn--green ui-btn--sm ui-btn--no-shadow">Кнопка</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="11">
<a href="" class="ui-btn">Кнопка</a>
<a href="" class="ui-btn" disabled>Кнопка</a>
<a href="" class="ui-btn ui-btn--green ui-btn--no-shadow">Кнопка</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="12">
<a href="" class="ui-btn ui-btn--lg">Кнопка</a>
<a href="" class="ui-btn ui-btn--lg" disabled>Кнопка</a>
<a href="" class="ui-btn ui-btn--green ui-btn--lg">Кнопка</a>
</div>
<div class="form-group">
<a href="" class="ui-btn ui-btn--circle">Кнопка</a>
<a href="" class="ui-btn ui-btn--circle" disabled>Кнопка</a>
<a href="" class="ui-btn ui-btn--green ui-btn--circle">Кнопка</a>
<a href="" class="ui-btn ui-btn--green ui-btn--circle ui-btn--lg">Кнопка</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="14, 15, 16">
<a href="" class="ui-btn ui-btn--green ui-btn--circle ui-btn--checkmark">
<i class="uikit-check"></i>
</a>
<a href="" class="ui-btn ui-btn--green ui-btn--circle ui-btn--plus">
<i class="uikit-plus"></i>
</a>
<a href="" class="ui-btn ui-btn--green ui-btn--circle ui-btn--edit">
<i class="uikit-edit"></i>
</a>
<span class="form-group ui-badge ui-badge--rectangle" data-badge="33">
<a href="" class="ui-btn ui-btn--lg ui-btn--lg--green ui-btn--circle ui-btn--plus">
<i class="uikit-plus"></i>
</a>
</span>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="9">
<ul class="ui-pagination">
<li class="ui-pagination__prev">
<a href="" class="ui-btn ui-btn--circle">
<i class="uikit-arrow-back"></i>
</a> Назад
</li>
<li class="ui-pagination__next">
Вперед <a href="" class="ui-btn ui-btn--green ui-btn--circle">
<i class="uikit-arrow-forward"></i>
</a>
</li>
<li class="ui-pagination__next">
<a href="" class="ui-btn ui-btn--green ui-btn--circle" disabled>
<i class="uikit-arrow-forward"></i>
</a>
</li>
</ul>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="18">
<a href="" class="ui-btn ui-btn--circle ui-btn--sm">
<i class="uikit-arrow-back"></i>
</a>
<a href="" class="ui-btn ui-btn--circle ui-btn--sm">
<i class="uikit-arrow-forward"></i>
</a>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="3, 4, 5">
<a href="" class="ui-action"></a>
<a href="" class="ui-action"><i class="uikit-edit"></i></a>
<a href="" class="ui-action"><i class="uikit-trash"></i></a>
<a href="" class="ui-action"><i class="uikit-arrow-right"></i></a>
<a href="" class="ui-action"><i class="uikit-plus-round"></i></a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="21">
<a href="" class="ui-action">
<i class="uikit-information"></i>
</a>
<a href="" class="ui-action ui-action--danger">
<i class="uikit-exclamation"></i>
</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="17">
<a href=""><span class="ui-action"><i class="uikit-arrow-right"></i></span> Узнать
подробности</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="36">
<a href="" class="ui-link--more"><span class="ui-action"><i class="uikit-plus-round"></i></span>
Показать еще</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="19">
<a href="" class="ui-action ui-action--close ui-action--close--circle uikit-close-empty"></a>
<a href="" class="ui-action--close uikit-close-empty"></a>
</div>
</div>
<div class="col-md-6">
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="23">
<input class="ui-checkbox" type="checkbox" name="checkbox" id="1" value="option">
<label class="text" for="1">
Кликни меня
</label>
</div>
<div class="form-group">
<input class="ui-radio" type="radio" name="radio" id="2" value="option">
<label class="text" for="2">
Кликни меня
</label>
</div>
<div class="form-group">
<input class="ui-radio" type="radio" name="radio" id="3" value="option">
<label class="text" for="3">
Кликни меня
</label>
</div>
<div class="form-group">
<div class="loader-spinner"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6">
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="6">
<label>Загловок</label>
<input class="form-control" name="name" type="text" placeholder="Введите что нибудь">
</div>
<div class="form-group">
<label class="text-color--gray">Загловок</label>
<input class="form-control" name="name" type="text" placeholder="Введите что нибудь" disabled>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="7">
<label>Заголовок поля с автопоиском</label>
<div class="drop-out">
<div class="inner-addon right-addon">
<i class="ico uikit-search"></i>
<input class="form-control" name="name" placeholder="Введите что нибудь"
onkeyup="return uiKit.dropbox(this, '/api/v1/company' , { query: 'name' })">
<div class="drop-out__results"></div>
</div>
</div>
</div>
<div class="form-group">
<label>Заголовок поля с автопоиском и выбором</label>
<div class="drop-out">
<div class="inner-addon right-addon">
<i class="ico uikit-search"></i>
<script>
var cites = [
{name: 'Москва', brief: 'Московская обл.'},
{name: 'Москва Москва Москва Москва Москва Москва Москва', brief: 'Московская обл.'},
{name: 'Москаль', brief: 'Москальский район'},
{name: 'Мосальский район', brief: 'Калужская обл.'},
{name: 'Санкт-Петербург', brief: 'Ленинградская обл.'},
];
</script>
<input id="autosearch" type="text" onkeyup="return uiKit.dropbox(this, cites)"
class="form-control" placeholder="Плейсхолдер">
<div class="drop-out__results"></div>
</div>
</div>
<div class="search-results"></div>
<script>
// $(function () {
// var count = 0;
// $('#autosearch').on('changeDrop', function () {
// count++;
//
// $('.search-results').append($(this).val() + ',');
// });
// });
</script>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="form-group has-danger">
<label class="text-muted">Заголовок</label>
<input type="email" class="form-control" placeholder="Пример">
<small class="form-text text-color--gray">Описание возникшей проблемы и способ ее решения</small>
</div>
<div class="form-group">
<label class="text-muted">Multislect</label>
<select multiple="multiple" id="select-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3ss">3</option>
<option value="3d">3</option>
<option value="3f">3</option>
<option value="3g">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form-group">
<label>Загловок</label>
<select>
<option value="0" >32</option>
<option value="1">43</option>
<option value="dsd">dsd выаыва 54</option>
</select>
</div>
<div class="form-group">
<label>Дата</label>
<div class="inner-addon right-addon">
<i class="ico ion-calendar"></i>
<input type="email" class="form-control" placeholder="Плейсхолдер">
</div>
</div>
<div class="form-group">
<div class="ui-material-select">
<div class="ui-material-select__box">
<a class="ui-material-select__value" href="/" data-dropdown="">
<span></span>
<span class="ui-material-select__value__icon">
<i class="uikit-chevron-down"></i>
</span>
</a>
<ul class="ui-material-select__items">
<li data-value="32">
<span class="ui-badge" data-badge="2">Item</span>
</li>
<li data-value="33">
<span class="ui-badge" data-badge="3">Item 2</span>
</li>
<li data-value="34">
<span class="ui-badge" data-badge="44">Item 3</span>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<div class="ui-material-select">
<div class="ui-material-select__box">
<a class="ui-material-select__value" href="/" data-dropdown="">
<span>Тип продавца</span>
<span class="ui-material-select__value__icon">
<i class="uikit-chevron-down"></i>
</span>
</a>
<ul class="ui-material-select__items">
<li data-value="32">
Item
</li>
<li data-value="33">
Item 2
</li>
<li data-value="34">
Item 3
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="26">
<div class="ui-accordion">
<div class="ui-accordion__item ui-accordion__item--active">
<h4 class="ui-accordion__item__head" data-accordion="true">Заголовок блока<span class="down up"><i
class="icon icon--down"></i></span></h4>
<div class="ui-accordion__item__content">
sadasd
</div>
</div>
<div class="ui-accordion__item">
<h4 class="ui-accordion__item__head" data-accordion="true">Заголовок блока 2<span
class="down"><i class="icon icon--down"></i></span></h4>
<div class="ui-accordion__item__content">
sadasd
</div>
</div>
</div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="13">
<div class="form-group">
<label class="text-muted">Комментарий</label>
<textarea class="form-control ui-comment-field"></textarea>
</div>
<div class="form-group">
<button class="ui-btn ui-btn--green ui-btn--sm ui-btn--no-shadow">Отправить</button>
</div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="35">
<div class="ui-box ui-box--yellow">
<h1 class="ui-head--spacing"><span class="ui-badge" data-badge="2">ТОВАРЫ</span></h1>
</div>
<div class="ui-box ui-box--green">
<a href="" class="ui-btn ui-btn--circle ui-btn--sm uikit-edit"></a>
<a href="" class="ui-btn ui-btn--green ui-btn--circle ui-btn--sm ui-btn--no-shadow uikit-check"></a>
</div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="31">
<div class="ui-tags">
<i class="icon icon--tag"></i>
<div class="ui-tags__info">
<h5>Чай "Гринфилдс"</h5>
<p class="text-color--gray accompany">140 г, Россия, в пирамидках</p>
</div>
</div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="32">
<div class="ui-logo"></div>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="22">
<a href="" class="social icon--social--vk--color">
<i class="icon icon--social--white icon--social--vk"></i>
</a>
<a href="" class="social icon--social--mailru--color">
<i class="icon icon--social--white icon--social--mailru"></i>
</a>
<a href="" class="social icon--social--instagram--color">
<i class="icon icon--social--white icon--social--instagram"></i>
</a>
<a href="" class="social icon--social--twitter--color">
<i class="icon icon--social--white icon--social--twitter"></i>
</a>
<a href="" class="social icon--social--fb--color">
<i class="icon icon--social--white icon--social--fb"></i>
</a>
<a href="" class="social icon--social--ok--color">
<i class="icon icon--social--white icon--social--ok"></i>
</a>
<a href="" class="social icon--social--gplus--color">
<i class="icon icon--social--white icon--social--gplus"></i>
</a>
<a href="" class="social icon--social--youtube--color">
<i class="icon icon--social--white icon--social--youtube"></i>
</a>
</div>
<div class="form-group">
<a href="" class="social social--default">
<i class="icon icon--social--vk"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--mailru"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--instagram"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--twitter"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--fb"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--ok"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--gplus"></i>
</a>
<a href="" class="social social--default">
<i class="icon icon--social--youtube"></i>
</a>
</div>
<div class="form-group">
<a href="" class="social">
<i class="icon icon--social--vk"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--mailru"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--instagram"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--twitter"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--fb"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--ok"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--gplus"></i>
</a>
<a href="" class="social">
<i class="icon icon--social--youtube"></i>
</a>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="1">
<div class="scroll-example" style="max-height: 100px;">
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
text, text, text <br />
</div>
<script>
$(function () {
$('.scroll-example').mCustomScrollbar({
axis:'y',
theme:'light'});
});
</script>
</div>
<div class="form-group ui-badge ui-badge--rectangle ui-badge--left" data-badge="8">
<div class="ui-input-group">
<span class="ui-input-group__btn ui-input-group__btn--left">
<a href="" onclick="uiKit.upDown(this).down()">
<i class="uikit-minus"></i>
</a>
</span>
<input class="form-control ui-input-updown" value="0">
<span class="ui-input-group__btn ui-input-group__btn--right">
<a href="" onclick="uiKit.upDown(this).up()">
<i class="uikit-plus"></i>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.