Skip to content

K
kpp
Commit 56c2c669 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

mixins separate

parent f9e730cb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 427 additions and 421 deletions
src/_blocks_library.html
View file @ 56c2c669
......@@ -271,6 +271,7 @@
<section>
<h2 id="btn">Исходное: кнопки</h2>
<p>
<input type="text" value="Ссылка" style="width:80px">
<a href="" class="btn">Cсылка</a>
<input type="submit" class="btn" value="Input">
<button class="btn">Button</button>
......@@ -284,7 +285,7 @@
<input type="submit" class="btn btn--danger" value="Input">
<button class="btn btn--danger">Button</button>
</p>
<p>Приоритетным является подход, в котором вместо классов <code>.btn</code> и их модификаторов используются семантические БЭМ-овские классы и LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет текста; цвет фона; цвет бордюра)</code>.</p>
<p>Приоритетным является подход, в котором вместо классов <code>.btn</code> и их модификаторов используются семантические БЭМ-овские классы и LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>.</p>
<hr>
</section>
......
src/_include/page_head.html
View file @ 56c2c669
<!--DEVCOMMENT Такой комментарий не попадет в собранный HTML
<meta name="viewport" content="width=1000">
-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.min.css" rel="stylesheet" media="screen">
......
src/less/global_scaffolding.less
View file @ 56c2c669
......@@ -392,14 +392,15 @@ input[type="tel"] {
border: 1px solid @border-color;
border-radius: @border-radius;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 2.125em; // 16 × 2.125 = 34
line-height: @line-height;
padding: 0.313em 0.438em 0.188em; // вебкиты, windows...
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
}
select[multiple],
textarea {
textarea,
select[multiple] {
height: auto;
}
......
src/less/mixins/btn-mixins.less 0 → 100644
View file @ 56c2c669
//------------------------------------------------------------------------------
// КНОПКИ
//------------------------------------------------------------------------------
// Использование:
// .super-button {
// .btn();
// .btn-color-variant(@text-color; @gray-lighter; @gray-lighter);
// }
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
// Общие стиля любой кнопки
//------------------------------------------------------------------------------
.btn() {
display: inline-block;
min-height: 2.125em; // 16 × 2.125 = 34
line-height: @line-height;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
font: inherit;
text-decoration: none;
border: 1px solid;
box-sizing: border-box;
border-radius: @border-radius;
// &--hover,
&:hover {
text-decoration: none;
}
// &--active,
&:active,
&:focus {
text-decoration: none;
}
// &--disabled,
&:disabled {
cursor: not-allowed;
opacity: @opacity;
a& {
pointer-events: none;
}
}
}
//------------------------------------------------------------------------------
// Примесь-генератор цветовых стилей
//------------------------------------------------------------------------------
.btn-color-variant(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: @background;
border-color: @border;
// &--hover,
&:hover {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
// &--active,
&:active,
&:focus {
color: @color;
background-color: darken(@background, 15%);
border-color: darken(@border, 17%);
}
// &--disabled,
&:disabled {
color: @color;
background-color: @background;
border-color: @border;
}
}
src/less/mixins/grid-mixins.less 0 → 100644
View file @ 56c2c669
//------------------------------------------------------------------------------
// Генератор правил для контейнера
//------------------------------------------------------------------------------
.container() {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
@media (min-width: @screen-sm) {
width: @container-sm;
}
@media (min-width: @screen-md) {
width: @container-md;
}
@media (min-width: @screen-lg) {
width: @container-lg;
}
@media (min-width: @screen-xl) {
width: @container-xl;
}
@media (min-width: @screen-xxl) {
width: @container-xxl;
}
}
//------------------------------------------------------------------------------
// Генератор правил для прямого родителя модульной сетки
//------------------------------------------------------------------------------
// Принимает:
// @gutter: @grid-gutter-width - промежуток между ячейками
//------------------------------------------------------------------------------
.row(@gutter: @grid-gutter-width) {
display: flex;
flex-wrap: wrap;
// ВНИМАНИЕ! если передан false, в CSS не попадут margin-ы
& when not (@gutter = false) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
//------------------------------------------------------------------------------
// Генератор ширины ячейки
//------------------------------------------------------------------------------
// Принимает:
// @column: 1 - ширина (кол-во колонок в этой ячейке)
// @columns: @grid-columns; - количество ячеек в ряду
//
// Возвращает переменную @width в контекст вызова.
//------------------------------------------------------------------------------
.get-width(@column: 1, @columns: @grid-columns) {
@width: (100% / @columns) * @column;
}
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки
//------------------------------------------------------------------------------
// Принимает:
// @column: 1 - ширина (кол-во колонок для этой ячейки)
// @columns: @grid-columns; - общее количество ячеек на 1 ряд
// @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
//------------------------------------------------------------------------------
.make-col(@column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
.get-width(@column, @columns); // Вернёт @width с шириной в процентах
display: block;
flex: 0 0 @width;
max-width: @width;
// ВНИМАНИЕ! если @gutter = false, в CSS не попадут правила padding-left и padding-right
& when not (@gutter = false) {
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
}
//------------------------------------------------------------------------------
// Генератор правил для одной ячейки с возможностью указать @media
//------------------------------------------------------------------------------
// Принимает:
// @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
// @column: 1 - ширина (кол-во колонок для этой ячейки)
// @columns: @grid-columns; - общее количество ячеек на 1 ряд
// @gutter: @grid-gutter-width - промежуток между ячейками (для padding-left и padding-right)
//------------------------------------------------------------------------------
.col(@screen: xs, @column: 1, @columns: @grid-columns, @gutter: @grid-gutter-width) {
& when (@screen = xs) {
.make-col(@column, @columns, @gutter);
}
& when (@screen = sm) {
@media (min-width: @screen-sm) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = md) {
@media (min-width: @screen-md) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = lg) {
@media (min-width: @screen-lg) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = xl) {
@media (min-width: @screen-xl) {
.make-col(@column, @columns, @gutter);
}
}
& when (@screen = xxl) {
@media (min-width: @screen-xxl) {
.make-col(@column, @columns, @gutter);
}
}
}
//------------------------------------------------------------------------------
// Генератор списка селекторов .col-[указанный тип]-[] и их общих свойств
//------------------------------------------------------------------------------
// Принимает:
// @screen: xs - тип сетки [xs|sm|md|lg|xl|xxl]
//------------------------------------------------------------------------------
.make-column-list-general-rules(@screen: xs) {
.column-list(@index) {
@item: ~".col-@{screen}-@{index}";
.column-list((@index + 1), @item);
}
.column-list(@index, @list) when (@index =< @grid-columns) {
@item: ~".col-@{screen}-@{index}";
.column-list((@index + 1), ~"@{list}, @{item}");
}
.column-list(@index, @list) when (@index > @grid-columns) {
@{list} {
display: block;
flex: 0 0 100%;
width: 100%;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.column-list(1);
}
//------------------------------------------------------------------------------
// Генератор селекторов .col-[указанный тип]-[] и их индивидуальных свойств (ширин)
//------------------------------------------------------------------------------
// Принимает:
// @n: - количество колонок
// @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
//------------------------------------------------------------------------------
.make-columns(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
.col-@{screen}-@{i} {
.make-col(@i, @n, false)
}
.make-columns(@n, @screen, (@i + 1));
}
//------------------------------------------------------------------------------
// Генератор селекторов .col-[]-offset-[] и их индивидуальных свойств (margin-left)
//------------------------------------------------------------------------------
// Принимает:
// @n: - количество колонок
// @screen: - тип сетки [xs|sm|md|lg|xl|xxl]
//------------------------------------------------------------------------------
.make-offsets(@n: @grid-columns, @screen: xs, @i: 1) when (@i =< @n) {
.col-@{screen}-offset-@{i} {
margin-left: (@i * 100% / @n);
}
.make-offsets(@n, @screen, (@i + 1));
}
src/less/mixins/mixins.less
View file @ 56c2c669
This diff is collapsed.
src/less/mixins/responsive-mixins.less 0 → 100644
View file @ 56c2c669
//------------------------------------------------------------------------------
// Сокрытие блоков на указанных вьюпортах
//------------------------------------------------------------------------------
// .selector {
// .hidden-up(lg); // Скрыть на LG (включительно) и шире
// .hidden-down(sm); // Скрыть на SM (включительно) и уже
// }
//------------------------------------------------------------------------------
.hidden-up(@screen: xs) {
// & when (@screen = xs) { // XS по умолчанию 0, так что это бессмысленно
// @media (min-width: @screen-xs) { display: none; }
// }
& when (@screen = sm) {
@media (min-width: @screen-sm) { display: none; }
}
& when (@screen = md) {
@media (min-width: @screen-md) { display: none; }
}
& when (@screen = lg) {
@media (min-width: @screen-lg) { display: none; }
}
& when (@screen = xl) {
@media (min-width: @screen-xl) { display: none; }
}
& when (@screen = xxl) {
@media (min-width: @screen-xxl) { display: none; }
}
}
.hidden-down(@screen: xs) {
& when (@screen = xs) {
@media (max-width: (@screen-sm - 1)) { display: none; }
}
& when (@screen = sm) {
@media (max-width: (@screen-md - 1)) { display: none; }
}
& when (@screen = md) {
@media (max-width: (@screen-lg - 1)) { display: none; }
}
& when (@screen = lg) {
@media (max-width: (@screen-xl - 1)) { display: none; }
}
& when (@screen = xl) {
@media (max-width: (@screen-xxl - 1)) { display: none; }
}
& when (@screen = xxl) {
@media (max-width: (@screen-xxl - 1)) { display: none; }
}
}
src/less/mixins/table-responsive-mixins.less 0 → 100644
View file @ 56c2c669
//------------------------------------------------------------------------------
// Правила для адаптивной таблицы
//------------------------------------------------------------------------------
// ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
//------------------------------------------------------------------------------
.table-responsive(@screen: md) {
& when (@screen = sm) {
@media (max-width: (@screen-md - 1)) {
.table-responsive-properties();
}
}
& when (@screen = md) {
@media (max-width: (@screen-lg - 1)) {
.table-responsive-properties();
}
}
& when (@screen = lg) {
@media (max-width: (@screen-xl - 1)) {
.table-responsive-properties();
}
}
& when (@screen = xl) {
@media (max-width: (@screen-xxl - 1)) {
.table-responsive-properties();
}
}
& when (@screen = xxl) {
@media (max-width: (@screen-xxl - 1)) {
.table-responsive-properties();
}
}
}
.table-responsive-properties() {
display: block;
border: 0;
overflow-x: auto; // IE11 отказывается переносить длинный текст в <td>, даём костыль
thead {
display: none;
}
tbody {
display: block;
width: 100%;
tr {
display: block;
border-top: 0;
&:not(:last-child) {
margin-bottom: @line-height;
}
}
td {
display: flex;
width: 100%;
&:before {
display: block;
padding-right: .5em;
font-weight: 700;
white-space: nowrap;
content: attr(data-label) + ":";
}
}
}
}
src/less/variables.less
View file @ 56c2c669
......@@ -71,6 +71,14 @@
// Формы
@field-padding-top: 0.375em;
@field-padding-bottom: 0.188em;
@field-padding-horizontal: 0.438em;
// Разное
@border-radius: .3rem;
......
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