Skip to content

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

reColbas

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