Skip to content

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

reColbas

parent 696a4643
Show whitespace changes
Inline Side-by-side
Showing with 208 additions and 30 deletions
src/_blocks_library.html
View file @ b326f89b
......@@ -313,7 +313,7 @@
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<div class="field-checkbox__help-text">Есть общее название.</div>
<div class="field-checkbox__help-text">Есть общее название. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные.</div>
</div>
</div>
<div class="field-radio">
......@@ -343,6 +343,20 @@
<div class="field-checkbox__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--custom" style="font-size: 24px">
<div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Флажок</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<div class="field-checkbox__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__input-wrap">
......@@ -413,6 +427,18 @@
<div class="field-checkbox">
<div class="field-checkbox__title">Общее название</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
......@@ -479,9 +505,10 @@
<section class="blocks-library__item">
<h2 id="btn">Кнопки</h2>
<p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p>
<p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>. Это не всегда удобно (бывает сложно получить цвета состояний кнопки преобразованием цветов по умолчанию).</p>
<p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code>, <code>.btn-color(цвет_текста; цвет_фона; цвет_бордюра)</code> и <code>.btn-size([sm|md|lg])</code>.</p>
<p class="alert alert--success">Все кнопки — <code>display: inline-flex;</code>.</p>
<p>
<!-- <input type="text" value="Текстово поле" style="width:80px"> -->
<input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
<a href="" class="btn">Cсылка</a>
<input type="submit" class="btn" value="Input">
<button class="btn">Button</button>
......@@ -495,6 +522,20 @@
<input type="submit" class="btn btn--danger" value="Input">
<button class="btn btn--danger">Button</button>
</p>
<p>
<a href="" class="btn btn--lg">Cсылка (lg)</a>
<input type="submit" class="btn btn--lg" value="Input (lg)">
<button class="btn btn--lg">Button (lg)</button>
<a href="" class="btn">Cсылка</a>
<input type="submit" class="btn" value="Input">
<button class="btn">Button</button>
<a href="" class="btn btn--sm">Cсылка (sm)</a>
<input type="submit" class="btn btn--sm" value="Input (sm)">
<button class="btn btn--sm">Button (sm)</button>
</p>
<p>
<button class="btn btn--block">Button (block)</button>
</p>
</section>
......@@ -572,6 +613,22 @@
</div>
</div>
</section>
<section class="blocks-library__item">
<h2 id="responsive-mixins">Примеси адаптивности</h2>
<p>Стилизация: нет, только примеси.</p>
<p>К нужным элементам добавляем примеси, элементы скрываются на тех или иных ширинах вьюпорта.</p>
<p class="alert alert--success">В примесях указано только значение <code>display: none;</code>, без <code>!important</code>.</p>
<pre>
.block-name {
.hidden-up(lg); // Скрыть на LG (включительно) и более широких
.hidden-down(sm); // Скрыть на SM (включительно) и более узких
}</pre>
</section>
</section>
@@include('_include/page_footer.html')
......
src/less/blocks/btn.less
View file @ b326f89b
.btn {
.btn();
.btn-color-variant(@text-color; @gray-lighter; @gray-lighter);
.btn-color(@text-color; @gray-lighter; @gray-lighter);
.btn-size();
&--main {
.btn-color-variant(#fff; @color-main; @color-main);
.btn-color(#fff; @color-main; @color-main);
}
&--danger {
.btn-color-variant(#fff; @color-danger; @color-danger);
.btn-color(#fff; @color-danger; @color-danger);
}
&--success {
.btn-color-variant(#fff; @color-success; @color-success);
.btn-color(#fff; @color-success; @color-success);
}
&--lg {
.btn-size(lg);
}
&--sm {
.btn-size(sm);
}
&--block {
width: 100%;
text-align: center;
justify-content: center;
}
}
src/less/blocks/field-checkbox--custom.less
View file @ b326f89b
......@@ -7,7 +7,7 @@
}
.field-checkbox__help-text {
padding-left: 1.9em; // 1.6 + 0.3
padding-left: round(1.6em * (100 / @font-size--small-percent), 2);
}
.field-checkbox__input {
......@@ -21,7 +21,7 @@
top: .1em;
left: 0;
content: '';
background-size: 100%;
background-size: 1.125em 1.125em;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox.svg');
}
......
src/less/blocks/field-checkbox.less
View file @ b326f89b
......@@ -18,6 +18,7 @@
font-weight: 400;
display: inline-block;
margin-right: .6em;
margin-bottom: .2em;
line-height: @line-height;
}
......@@ -30,9 +31,14 @@
&__help-text {
display: block;
font-size: @font-size--small;
font-size: @font-size--small-percent;
line-height: 1.2em;
color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3
// Задача: здесь левый padding должен совпадать с левым padding .field-checkbox__name-text и должен быть
// в относительных единицах.
// Левый padding у .field-checkbox__name-text = 1.3em от размера шрифта родителя (указано выше в этом файле).
// Нужно получить 1.3em от размера шрифта родителя, отталкиваясь от здешнего (уменьшенного) размера шрифта.
// Фактор увеличения: 100 / @font-size--small-percent
padding-left: round(1.3em * (100 / @font-size--small-percent), 2);
}
}
src/less/blocks/field-file.less
View file @ b326f89b
......@@ -59,7 +59,7 @@
&__help-text {
display: block;
font-size: @font-size--small;
font-size: @font-size--small-percent;
line-height: 1.2em;
color: @text-color--muted;
}
......
src/less/blocks/field-radio--custom.less
View file @ b326f89b
......@@ -7,7 +7,7 @@
}
.field-radio__help-text {
padding-left: 1.9em; // 1.6 + 0.3
padding-left: round(1.6em * (100 / @font-size--small-percent), 2);
}
.field-radio__input {
......@@ -15,13 +15,13 @@
opacity: 0;
& + .field-radio__name-text:before {
width: 1.125em;
height: 1.125em;
width: 1.13em;
height: 1.13em;
position: absolute;
top: .1em;
left: 0;
content: '';
background-size: 100%;
background-size: 1.125em 1.125em;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton.svg');
}
......
src/less/blocks/field-radio.less
View file @ b326f89b
......@@ -29,9 +29,14 @@
&__help-text {
display: block;
font-size: @font-size--small;
font-size: @font-size--small-percent;
line-height: 1.2em;
color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3
// Задача: здесь левый padding должен совпадать с левым padding .field-checkbox__name-text и должен быть
// в относительных единицах.
// Левый padding у .field-checkbox__name-text = 1.3em от размера шрифта родителя (указано выше в этом файле).
// Нужно получить 1.3em от размера шрифта родителя, отталкиваясь от здешнего (уменьшенного) размера шрифта.
// Фактор увеличения: 100 / @font-size--small-percent
padding-left: round(1.3em * (100 / @font-size--small-percent), 2);
}
}
src/less/blocks/field-select.less
View file @ b326f89b
......@@ -16,7 +16,7 @@
&__help-text {
display: block;
font-size: @font-size--small;
font-size: @font-size--small-percent;
line-height: 1.2em;
color: @text-color--muted;
}
......
src/less/blocks/field-text.less
View file @ b326f89b
......@@ -16,7 +16,7 @@
&__help-text {
display: block;
font-size: @font-size--small;
font-size: @font-size--small-percent;
line-height: 1.2em;
color: @text-color--muted;
}
......
src/less/global_print.less 0 → 100644
View file @ b326f89b
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline !important;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999 !important;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
table {
border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
}
}
src/less/global_scaffolding.less
View file @ b326f89b
......@@ -70,7 +70,7 @@ body {
font-size: @font-size;
line-height: @line-height;
color: @text-color;
background: @body-bg;
background-color: @body-bg;
margin: 0;
}
......@@ -180,7 +180,7 @@ hr {
// .small,
small {
font-size: 80%;
font-size: @font-size--small-percent;
}
sub,
......@@ -199,6 +199,10 @@ strong {
font-weight: bolder;
}
abbr[title] {
border-bottom: 1px dotted;
}
blockquote {
padding: .5em 0 .5em 1.8em;
margin-left: 0;
......@@ -405,7 +409,6 @@ input[type="tel"] {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 2.125em; // 16 × 2.125 = 34
line-height: @line-height;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
}
......
src/less/mixins/btn-mixins.less
View file @ b326f89b
......@@ -14,8 +14,6 @@
.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;
......@@ -23,6 +21,7 @@
cursor: pointer;
user-select: none;
font: inherit;
line-height: @line-height;
text-decoration: none;
border: 1px solid;
box-sizing: border-box;
......@@ -59,7 +58,7 @@
// Примесь-генератор цветовых стилей
//------------------------------------------------------------------------------
.btn-color-variant(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
.btn-color(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
color: @color;
background-color: @background;
border-color: @border;
......@@ -86,3 +85,26 @@
border-color: @border;
}
}
//------------------------------------------------------------------------------
// Примесь-генератор размера кнопок
//------------------------------------------------------------------------------
.btn-size(@size: md) {
& when (@size = md) {
font-size: @font-size;
}
& when (@size = sm) {
font-size: @font-size--small;
padding-top: round((@field-padding-top / 2), 2);
padding-bottom: round((@field-padding-bottom / 2), 2);
}
& when (@size = lg) {
font-size: @font-size--h3;
}
}
src/less/mixins/responsive-mixins.less
View file @ b326f89b
......@@ -2,8 +2,8 @@
// Сокрытие блоков на указанных вьюпортах
//------------------------------------------------------------------------------
// .selector {
// .hidden-up(lg); // Скрыть на LG (включительно) и шире
// .hidden-down(sm); // Скрыть на SM (включительно) и уже
// .hidden-up(lg); // Скрыть на LG (включительно) и более широких
// .hidden-down(sm); // Скрыть на SM (включительно) и более узких
// }
//------------------------------------------------------------------------------
......
src/less/style.less
View file @ b326f89b
......@@ -2,6 +2,7 @@
@import "mixins/mixins.less";
@import "global_scaffolding.less";
@import "global_print.less";
@import "global_grid.less";
@import "blocks/table-responsive.less";
......
src/less/variables.less
View file @ b326f89b
......@@ -36,7 +36,8 @@
@font-size--h4: 2.0rem;
@font-size--h5: 1.6rem;
@font-size--h6: 1.6rem;
@font-size--small: 80%;
@font-size--small: round((@font-size / 100 * @font-size--small-percent), 2);
@font-size--small-percent: 75%;
@line-height: 1.375em;
......@@ -74,7 +75,7 @@
// Формы, кнопки
@field-padding-top: 0.313em;
@field-padding-bottom: 0.188em;
@field-padding-bottom: 0.313em;
@field-padding-horizontal: 0.438em;
......
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