Skip to content

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

Сократил глобальные стили

parent 2dc079ab
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 274 deletions
src/blocks/btn/btn.less
View file @ 101b7293
...@@ -4,28 +4,156 @@ ...@@ -4,28 +4,156 @@
.btn { .btn {
.btn(); box-sizing: border-box;
.btn-color(@text-color; @gray-lighter; @gray-light); position: relative;
.btn-size(); display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
white-space: nowrap;
cursor: pointer;
vertical-align: middle;
user-select: none;
text-align: center;
font-size: 1em;
font-family: inherit;
line-height: @line-height;
text-decoration: none;
text-transform: none;
border-radius: @border-radius;
min-height: 2.125em;
border: 1px solid @gray-light;
color: @text-color;
background-color: @gray-lighter;
background-image: none;
&--hover,
&:hover {
text-decoration: none;
color: @text-color;
background-color: darken(@gray-lighter, 10%);
border-color: darken(@gray-light, 12%);
}
&--active,
&:active,
&:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
color: @text-color;
background-color: darken(@gray-lighter, 15%);
border-color: darken(@gray-light, 17%);
}
&--disabled,
&:disabled {
cursor: not-allowed;
opacity: @opacity;
color: @text-color;
background-color: @gray-lighter;
border-color: @gray-light;
a& {
pointer-events: none;
}
}
&--main { &--main {
.btn-color(#fff; @color-main; @color-main); color: #fff;
background-color: @color-main;
border: 1px solid @color-main;
&--hover,
&:hover {
color: #fff;
background-color: darken(@color-main, 10%);
border-color: darken(@color-main, 12%);
}
&--active,
&:active,
&:focus {
color: #fff;
background-color: darken(@color-main, 15%);
border-color: darken(@color-main, 17%);
}
&--disabled,
&:disabled {
color: #fff;
background-color: @color-main;
border-color: @color-main;
}
} }
&--danger { &--danger {
.btn-color(#fff; @color-danger; @color-danger); color: #fff;
background-color: @color-danger;
border: 1px solid @color-danger;
&--hover,
&:hover {
color: #fff;
background-color: darken(@color-danger, 10%);
border-color: darken(@color-danger, 12%);
}
&--active,
&:active,
&:focus {
color: #fff;
background-color: darken(@color-danger, 15%);
border-color: darken(@color-danger, 17%);
}
&--disabled,
&:disabled {
color: #fff;
background-color: @color-danger;
border-color: @color-danger;
}
} }
&--success { &--success {
.btn-color(#fff; @color-success; @color-success); color: #fff;
background-color: @color-success;
border: 1px solid @color-success;
&--hover,
&:hover {
color: #fff;
background-color: darken(@color-success, 10%);
border-color: darken(@color-success, 12%);
}
&--active,
&:active,
&:focus {
color: #fff;
background-color: darken(@color-success, 15%);
border-color: darken(@color-success, 17%);
}
&--disabled,
&:disabled {
color: #fff;
background-color: @color-success;
border-color: @color-success;
}
} }
&--lg { &--lg {
.btn-size(lg); font-size: @font-size--h3;
} }
&--sm { &--sm {
.btn-size(sm); font-size: @font-size--small;
padding-top: round((@field-padding-top / 2), 2);
padding-bottom: round((@field-padding-bottom / 2), 2);
} }
&--block { &--block {
......
src/blocks/field-checkbox/field-checkbox.less
View file @ 101b7293
...@@ -28,7 +28,9 @@ ...@@ -28,7 +28,9 @@
&__input { &__input {
position: absolute; position: absolute;
top: 0.7em; top: 0.8em;
padding: 0;
margin: 0;
transform: translateY(-50%); transform: translateY(-50%);
left: 0; left: 0;
} }
......
src/blocks/field-radio/field-radio.less
View file @ 101b7293
...@@ -28,7 +28,9 @@ ...@@ -28,7 +28,9 @@
&__input { &__input {
position: absolute; position: absolute;
top: 0.7em; top: 0.8em;
padding: 0;
margin: 0;
transform: translateY(-50%); transform: translateY(-50%);
left: 0; left: 0;
} }
......
src/blocks/field-select/field-select.less
View file @ 101b7293
...@@ -16,16 +16,18 @@ ...@@ -16,16 +16,18 @@
&__input-wrap {} &__input-wrap {}
&__select { &__select {
background-color: #fff;
border: 1px solid @border-color;
border-radius: @border-radius;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
line-height: @line-height;
height: 2.125em; height: 2.125em;
line-height: @line-height;
padding: @field-padding-top 1.8em @field-padding-bottom @field-padding-horizontal; padding: @field-padding-top 1.8em @field-padding-bottom @field-padding-horizontal;
font-size: inherit;
font-family: inherit;
border: 1px solid @border-color;
border-radius: @border-radius;
appearance: none; appearance: none;
background-color: #fff;
background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-select/img_to_bg/select-down.svg'); background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-select/img_to_bg/select-down.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 0.3em center; background-position: right 0.3em center;
...@@ -33,12 +35,23 @@ ...@@ -33,12 +35,23 @@
&[multiple] { &[multiple] {
background-image: none; background-image: none;
height: auto;
min-height: 6.8em; min-height: 6.8em;
} }
&::-ms-expand { &::-ms-expand {
display: none; display: none;
} }
&:focus {
.focus();
}
&[disabled],
&[readonly] {
cursor: default;
background-color: @gray-lighter;
}
} }
&__help-text { &__help-text {
......
src/blocks/field-text/field-text.less
View file @ 101b7293
...@@ -8,27 +8,62 @@ ...@@ -8,27 +8,62 @@
margin-bottom: (@line-height / 2); margin-bottom: (@line-height / 2);
&__name { &__name {
font-weight: 700;
display: block; display: block;
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 4, 2);
line-height: @line-height; line-height: @line-height;
font-weight: 700;
} }
&__input-wrap {} &__input-wrap {}
&__input { &__input {
background-color: #fff;
border: 1px solid @border-color;
border-radius: @border-radius;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
line-height: @line-height;
height: 2.125em; height: 2.125em;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom; padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
line-height: @line-height;
font-size: inherit;
font-family: inherit;
background-color: #fff;
border: 1px solid @border-color;
border-radius: @border-radius;
-webkit-appearance: textfield;
&:focus {
.focus();
}
&[disabled],
&[readonly] {
cursor: default;
background-color: @gray-lighter;
}
&[type='search']::-webkit-search-cancel-button,
&[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
&[type='number']::-webkit-inner-spin-button,
&[type='number']::-webkit-outer-spin-button {
height: auto;
}
&[type='color'] {
max-width: 100px;
padding: 0;
}
&::placeholder {
color: @text-color--muted;
opacity: 1;
}
textarea& { textarea& {
height: auto;
min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + .2; // .2 — поправка на бордюр min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + .2; // .2 — поправка на бордюр
resize: vertical;
} }
} }
......
src/blocks/form/form.less
View file @ 101b7293
...@@ -10,9 +10,26 @@ ...@@ -10,9 +10,26 @@
} }
fieldset { fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: @line-height; margin-bottom: @line-height;
} }
} }
legend {
display: block;
width: 100%;
font-size: @font-size--h3;
font-family: @font-family--headings;
font-weight: 700;
line-height: 1.4;
color: currentColor;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
} }
src/blocks/table/table.less
View file @ 101b7293
...@@ -4,6 +4,38 @@ ...@@ -4,6 +4,38 @@
.table { .table {
border: 0;
border-collapse: collapse;
width: 100%;
border: 1px solid @border-color;
caption {
padding: round(0.6em * (100 / @font-size--small-percent), 2);
text-align: right;
caption-side: bottom;
font-size: @font-size--small-percent;
line-height: 1em;
color: @text-color--muted;
}
td,
th {
vertical-align: top;
border-bottom: 1px solid @border-color;
&:not(:first-child) {
border-left: 1px solid @border-color;
}
}
th {
text-align: left;
padding: 0.6em;
}
td {
padding: 0.6em;
}
&__header { &__header {
background-color: @gray-lightest; background-color: @gray-lightest;
......
src/blocks_library.html
View file @ 101b7293
...@@ -1259,12 +1259,13 @@ ...@@ -1259,12 +1259,13 @@
<h1 class="blocks-library__item-title">Адаптивные таблицы с повторяющимися названиями ячеек</h1> <h1 class="blocks-library__item-title">Адаптивные таблицы с повторяющимися названиями ячеек</h1>
<p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p> <p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p>
<p>TODO: сделать модификатором блока <code>.table</code></p>
<p class="alert alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов.</p> <p class="alert alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов.</p>
<p class="alert alert--danger"><strong>Внимание!</strong> Применение варианта по умолчанию ограничено таблицами, имеющими заголовочные ячейки сверху.</p> <p class="alert alert--danger"><strong>Внимание!</strong> Применение варианта по умолчанию ограничено таблицами, имеющими заголовочные ячейки сверху.</p>
<table class="table-responsive"> <table class="table table-responsive">
<caption>Адаптивная таблица с перестроением блоков</caption> <caption>Адаптивная таблица с перестроением блоков</caption>
<thead> <thead>
<tr> <tr>
...@@ -1291,7 +1292,7 @@ ...@@ -1291,7 +1292,7 @@
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <pre class="code">
<code class="code__syntax html"> <code class="code__syntax html">
<span class="code__line">&lt;table class="table-responsive"></span> <span class="code__line">&lt;table class="table table-responsive"></span>
<span class="code__line"> &lt;thead></span> <span class="code__line"> &lt;thead></span>
<span class="code__line"> &lt;tr></span> <span class="code__line"> &lt;tr></span>
<span class="code__line"> &lt;th>Имя и фамилия&lt;/th></span> <span class="code__line"> &lt;th>Имя и фамилия&lt;/th></span>
...@@ -1320,7 +1321,8 @@ ...@@ -1320,7 +1321,8 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Модификация для горизонтального перестроения</h2> <h2 class="blocks-library__sub-item-title">Модификация для горизонтального перестроения</h2>
<p>Модификатор <code>table-responsive--horizontal</code>, отдельный less-файл.</p> <p>Модификатор <code>table-responsive--horizontal</code>, отдельный less-файл.</p>
<table class="table-responsive table-responsive--horizontal"> <p>TODO: сделать модификатором блока <code>.table</code></p>
<table class="table table-responsive table-responsive--horizontal">
<thead> <thead>
<tr> <tr>
<th>Имя и фамилия</th> <th>Имя и фамилия</th>
...@@ -1346,7 +1348,7 @@ ...@@ -1346,7 +1348,7 @@
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <pre class="code">
<code class="code__syntax html"> <code class="code__syntax html">
<span class="code__line">&lt;table class="table-responsive table-responsive--horizontal"></span> <span class="code__line">&lt;table class="table table-responsive table-responsive--horizontal"></span>
<span class="code__line"> &lt;thead></span> <span class="code__line"> &lt;thead></span>
<span class="code__line"> &lt;tr></span> <span class="code__line"> &lt;tr></span>
<span class="code__line"> &lt;th>Имя и фамилия&lt;/th></span> <span class="code__line"> &lt;th>Имя и фамилия&lt;/th></span>
...@@ -1382,8 +1384,9 @@ ...@@ -1382,8 +1384,9 @@
<h1 class="blocks-library__item-title">Адаптивные таблицы c горизонтальной прокруткой</h1> <h1 class="blocks-library__item-title">Адаптивные таблицы c горизонтальной прокруткой</h1>
<p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p> <p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p>
<p>TODO: сделать модификатором блока <code>.table</code></p>
<div class="table-responsive-scroll"> <div class="table table-responsive-scroll">
<table> <table>
<tbody> <tbody>
<tr> <tr>
...@@ -1455,7 +1458,7 @@ ...@@ -1455,7 +1458,7 @@
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre class="code"> <pre class="code">
<code class="code__syntax html"> <code class="code__syntax html">
<span class="code__line">&lt;div class=&quot;table-responsive-scroll&quot;&gt;</span> <span class="code__line">&lt;div class=&quot;table table-responsive-scroll&quot;&gt;</span>
<span class="code__line"> &lt;table&gt; &lt;!-- Можно с class=&quot;table&quot;, можно без. --&gt;</span> <span class="code__line"> &lt;table&gt; &lt;!-- Можно с class=&quot;table&quot;, можно без. --&gt;</span>
<span class="code__line"> ...</span> <span class="code__line"> ...</span>
<span class="code__line"> &lt;/table&gt;</span> <span class="code__line"> &lt;/table&gt;</span>
...@@ -1473,6 +1476,7 @@ ...@@ -1473,6 +1476,7 @@
<h1 class="blocks-library__item-title">Адаптивные таблицы cо сменой строк на колонки</h1> <h1 class="blocks-library__item-title">Адаптивные таблицы cо сменой строк на колонки</h1>
<p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p> <p>Для просмотра адаптации таблицы сделайте вьюпорт узким.</p>
<p>TODO: сделать модификатором блока <code>.table</code></p>
<p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> При перестройке контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).</p> <p class="alert alert--danger"><strong>ВНИМАНИЕ!</strong> При перестройке контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).</p>
...@@ -1541,6 +1545,7 @@ ...@@ -1541,6 +1545,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">С неподвижными названиями</h2> <h2 class="blocks-library__sub-item-title">С неподвижными названиями</h2>
<p>Модификатор <code>table-responsive-rotate--thead-fix</code>, отдельный less-файл. Требует наличия <code>thead</code>, чтобы было что фиксировать.</p> <p>Модификатор <code>table-responsive-rotate--thead-fix</code>, отдельный less-файл. Требует наличия <code>thead</code>, чтобы было что фиксировать.</p>
<p>TODO: сделать модификатором блока <code>.table</code></p>
<p class="alert alert--danger">Требует дополнительной обёртки, см. код примера.</p> <p class="alert alert--danger">Требует дополнительной обёртки, см. код примера.</p>
<div class="table-responsive-rotate table-responsive-rotate--thead-fix"> <div class="table-responsive-rotate table-responsive-rotate--thead-fix">
<div class="table-responsive-rotate__inner"> <div class="table-responsive-rotate__inner">
......
src/less/global/global-scaffolding.less
View file @ 101b7293
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Базовая стилизация. Одновременно и аналог CSS-normalize, и стилизация тегов. // Базовая стилизация. Одновременно и аналог CSS-normalize, и стилизация тегов.
// Общие правила, типографика, формы по умолчанию, таблицы по умолчанию. // Общие правила, типографика.
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
...@@ -311,140 +311,3 @@ pre { ...@@ -311,140 +311,3 @@ pre {
white-space: normal; white-space: normal;
tab-size: 2; tab-size: 2;
} }
//------------------------------------------------------------------------------
// Формы
//------------------------------------------------------------------------------
label {
display: inline-block;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
line-height: inherit;
font-size: inherit;
font-family: inherit;
text-transform: none;
}
button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type='search'] {
-webkit-appearance: textfield;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
input[type='checkbox'],
input[type='radio'] {
padding: 0;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
height: auto;
}
::placeholder {
color: @text-color--muted;
opacity: 1;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
textarea,
select[multiple] {
height: auto;
}
input[type='color'] {
max-width: 100px;
}
input[type='range'] {
width: 100%;
}
input[disabled],
input[readonly] {
background-color: @gray-lighter;
}
select,
textarea,
input {
&:focus {
.focus();
}
}
//------------------------------------------------------------------------------
// Таблицы
//------------------------------------------------------------------------------
table {
border: 0;
border-collapse: collapse;
width: 100%;
border: 1px solid @border-color;
}
caption {
padding: round(0.6em * (100 / @font-size--small-percent), 2);
text-align: right;
caption-side: bottom;
font-size: @font-size--small-percent;
line-height: 1em;
color: @text-color--muted;
}
td,
th {
vertical-align: top;
border-bottom: 1px solid @border-color;
&:not(:first-child) {
border-left: 1px solid @border-color;
}
}
th {
text-align: left;
padding: 0.6em;
}
td {
padding: 0.6em;
}
src/less/mixins/btn-mixins.less deleted 100644 → 0
View file @ 2dc079ab
//------------------------------------------------------------------------------
// КНОПКИ
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
// Общие стили любой кнопки
//------------------------------------------------------------------------------
.btn() {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
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-size: 1em;
line-height: @line-height;
text-decoration: none;
border: 1px solid;
box-sizing: border-box;
border-radius: @border-radius;
min-height: 2.125em;
&--hover,
&:hover {
text-decoration: none;
}
&--active,
&:active,
&:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
&--disabled,
&:disabled {
cursor: not-allowed;
opacity: @opacity;
a& {
pointer-events: none;
}
}
}
//------------------------------------------------------------------------------
// Примесь-генератор цветовых стилей
//------------------------------------------------------------------------------
.btn-color(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter;) {
color: @color;
background-color: @background;
border-color: @border;
&--hover,
&:hover {
.btn-color--mod(@color; darken(@background, 10%); darken(@border, 12%));
}
&--active,
&:active,
&:focus {
.btn-color--mod(@color; darken(@background, 15%); darken(@border, 17%));
}
&--disabled,
&:disabled {
.btn-color--mod(@color; @background; @border);
}
}
//------------------------------------------------------------------------------
// Вспомогательная примесь-генератор цветовых стилей для disabled
//------------------------------------------------------------------------------
.btn-color--mod(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
}
//------------------------------------------------------------------------------
// Примесь-генератор размера кнопок
//------------------------------------------------------------------------------
.btn-size(@size: md) {
& 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/mixins.less
View file @ 101b7293
@import 'grid-mixins.less'; @import 'grid-mixins.less';
@import 'btn-mixins.less';
@import 'responsive-mixins.less'; @import 'responsive-mixins.less';
@import 'forms-mixins.less'; @import 'forms-mixins.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