Skip to content

K
kpp
Commit 15e033e8 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

fxs

parent f9abddf8
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 29 deletions
TODO
View file @ 15e033e8
☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой...
☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
☐ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами
☐ Сделать: Флажки и радиокнопки, выглядящеи как обычные кнопки
☐ Сделать: Флажки и радиокнопки, выглядящие как обычные кнопки
☐ Сделать: Кнопка с иконкой
☐ Сделать: Кнопка-иконка
☐ Сделать: Алерт
......@@ -43,3 +42,4 @@
✔ Сделать: Текстовые поля: группа (в т.ч. с кнопками) @done (07.03.2016 23:03)
✔ Сделать: Текстовые поля: неинтерактивное дополнение справа, неинтерактивное дополнение слева @done (07.03.2016 23:04)
✔ Сделать: Текстовые поля: кнопка справа, кнопка слева @done (08.03.2016 16:11)
✔ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами @done (08.03.2016 18:33)
src/blocks/btn-group/btn-group.less
View file @ 15e033e8
......@@ -4,8 +4,9 @@
.btn-group {
display: inline-flex;
margin-bottom: (@line-height / 2);
.btn {
> .btn {
margin-left: -1px;
&:not(:last-child) {
......
src/blocks/checked-btn/checked-btn.html 0 → 100644
View file @ 15e033e8
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/checked-btn/checked-btn.html')
-->
<div class="checked-btn">content</div>
src/blocks/checked-btn/checked-btn.less 0 → 100644
View file @ 15e033e8
@import "../../less/variables.less"; // только для удобства обращения к переменным
@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
.checked-btn {
input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
&:checked {
& ~ .btn {
.btn-color--active(@text-color; @gray-lighter; @gray-lighter);
}
& ~ .btn--main {
.btn-color--active(#fff; @color-main; @color-main);
}
& ~ .btn--success {
.btn-color--active(#fff; @color-success; @color-success);
}
& ~ .btn--danger {
.btn-color--active(#fff; @color-danger; @color-danger);
}
}
}
}
src/blocks/fields-group/fields-group.less
View file @ 15e033e8
......@@ -53,14 +53,5 @@
border-bottom-left-radius: 0;
}
}
input {
position: relative;
&:focus {
z-index: 1;
}
}
}
}
src/blocks_library.html
View file @ 15e033e8
......@@ -661,6 +661,73 @@
</span>
</div>
<div class="btn-group">
<span role="presentation" class="dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<button class="btn">Отправить</button>
</div>
<h3>Флажки (чекбоксы) как кнопки</h3>
<!-- <div class="btn-group">
<label class="checked-btn">
<input type="checkbox">
<span class="btn">Флажок 1</span>
</label>
<label class="checked-btn">
<input type="checkbox">
<span class="btn btn--main">Флажок 2</span>
</label>
<label class="checked-btn">
<input type="checkbox">
<span class="btn btn--danger">Флажок 3</span>
</label>
<label class="checked-btn">
<input type="checkbox">
<span class="btn btn--success">Флажок 4</span>
</label>
</div> -->
<!-- <div class="btn-group">
<label class="checked-btn">
<input type="checkbox">
<span class="btn">Флажок 1</span>
</label>
<label class="checked-btn">
<input type="checkbox">
<span class="btn">Флажок 2</span>
</label>
<label class="checked-btn">
<input type="checkbox">
<span class="btn">Флажок 3</span>
</label>
<label class="checked-btn">
<input type="checkbox">
<span class="btn">Флажок 4</span>
</label>
</div> -->
<h3>Радиокнопки как кнопки</h3>
<div class="btn-group checked-btns">
<input type="radio" name="radio-btn" id="radio-btn-1">
<input type="radio" name="radio-btn" id="radio-btn-2">
<input type="radio" name="radio-btn" id="radio-btn-3">
<input type="radio" name="radio-btn" id="radio-btn-4">
<label class="btn" for="radio-btn-1">Флажок 1</label>
<label class="btn" for="radio-btn-2">Флажок 2</label>
<label class="btn" for="radio-btn-3">Флажок 3</label>
<label class="btn" for="radio-btn-4">Флажок 4</label>
</div>
</div>
</div>
</section>
......
src/less/mixins/btn-mixins.less
View file @ 15e033e8
//------------------------------------------------------------------------------
// КНОПКИ
//------------------------------------------------------------------------------
// Использование:
// .super-button {
// .btn();
// .btn-color-variant(@text-color; @gray-lighter; @gray-lighter);
// }
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
// Общие стиля любой кнопки
// Общие стили любой кнопки
//------------------------------------------------------------------------------
.btn() {
......@@ -27,7 +22,6 @@
box-sizing: border-box;
border-radius: @border-radius;
// &--hover,
&:hover {
text-decoration: none;
......@@ -65,29 +59,59 @@
// &--hover,
&:hover {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
.btn-color--hover(@color; @background; @border);
}
// &--active,
&:active,
&:focus {
color: @color;
background-color: darken(@background, 15%);
border-color: darken(@border, 17%);
.btn-color--active(@color; @background; @border);
}
// &--disabled,
&:disabled {
color: @color;
background-color: @background;
border-color: @border;
.btn-color--disabled(@color; @background; @border);
}
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для hover
//------------------------------------------------------------------------------
.btn-color--hover(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для active и focus
//------------------------------------------------------------------------------
.btn-color--active(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: darken(@background, 15%);
border-color: darken(@border, 50%);
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для disabled
//------------------------------------------------------------------------------
.btn-color--disabled(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: @background;
border-color: @border;
}
//------------------------------------------------------------------------------
// Примесь-генератор размера кнопок
//------------------------------------------------------------------------------
......
src/less/style.less
View file @ 15e033e8
......@@ -24,3 +24,4 @@
@import "./src/blocks/dropdown/dropdown.less";
@import "./src/blocks/fields-group/fields-group.less";
@import "./src/blocks/btn-group/btn-group.less";
@import "./src/blocks/checked-btn/checked-btn.less";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment