Skip to content

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

Добавил ефиду

parent 13bd5c87
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 94 deletions
package.json
View file @ 225a1801
......@@ -38,7 +38,8 @@
"dropdown": [],
"menu": [],
"label": [],
"loader": []
"loader": [],
"table": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......
src/blocks-demo.html
View file @ 225a1801
......@@ -1211,6 +1211,116 @@
</section>
<section class="blocks-library__item" id="table" data-name=".table">
<h2 class="blocks-library__item-title">Таблицы</h2>
<table class="table">
<caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
<tbody>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Мыло</th>
<th>Статус</th>
<th>Политическая ориентация</th>
</tr>
<tr>
<td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td>
<td>Хозяйственное</td>
<td>Администратор</td>
<td>«ВСЕГДА!»</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепневмомешковыколачивателев</td>
<td>Душистое</td>
<td>Юзверь</td>
<td>Нижняя</td>
</tr>
</tbody>
</table>
<table class="table">
<caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption>
<thead class="table__header">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Мыло</th>
<th>Статус</th>
<th>Политическая ориентация</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td>
<td>Хозяйственное</td>
<td>Администратор</td>
<td>«ВСЕГДА!»</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепневмомешковыколачивателев</td>
<td>Душистое</td>
<td>Юзверь</td>
<td>Нижняя</td>
</tr>
<tr>
<td>Ктулху</td>
<td>Втанк</td>
<td>ktulkhu@ad.ru</td>
<td>Патриарх</td>
<td>Яизм</td>
</tr>
</tbody>
<tfoot class="table__footer">
<tr>
<td colspan="5">Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи.</td>
</tr>
</tfoot>
</table>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;table class="table"></code>
<code> &lt;caption>Таблица&lt;/caption></code>
<code> &lt;thead class="table__header"></code>
<code> &lt;tr></code>
<code> &lt;th>Имя&lt;/th></code>
<code> &lt;th>Фамилия&lt;/th></code>
<code> &lt;/tr></code>
<code> &lt;/thead></code>
<code> &lt;tbody class="table__body"></code>
<code> &lt;tr></code>
<code> &lt;td>Иннокентий&lt;/td></code>
<code> &lt;td>Барлаухенштицкен-Ламанческий&lt;/td></code>
<code> &lt;/tr></code>
<code> &lt;tr></code>
<code> &lt;td>Васисуалий&lt;/td></code>
<code> &lt;td>Пылепневмомешковыколачивателев&lt;/td></code>
<code> &lt;/tr></code>
<code> &lt;tr></code>
<code> &lt;td>Ктулху&lt;/td></code>
<code> &lt;td>Втанк&lt;/td></code>
<code> &lt;/tr></code>
<code> &lt;/tbody></code>
<code> &lt;tfoot class="table__footer"></code>
<code> &lt;tr></code>
<code> &lt;td colspan="2">Итого:&lt;/td></code>
<code> &lt;/tr></code>
<code> &lt;/tfoot></code>
<code>&lt;/table></code>
</pre>
</div>
</div>
</section>
</div>
<style>
......
src/blocks/loader/loader.scss
View file @ 225a1801
......@@ -8,8 +8,8 @@
&:before {
content: '';
display: block;
width: 1.2em;
height: 1.2em;
width: 1em;
height: 1em;
border: 3px solid $gray-lightest;
border-top: 3px solid $gray-lighter;
border-radius: 50%;
......
src/blocks/table-responsive/table-responsive--horizontal.less deleted 100644 → 0
View file @ 13bd5c87
// Для импорта в диспетчер подключений: @import './src/blocks/table-responsive/table-responsive--horizontal.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
//------------------------------------------------------------------------------
// Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
//------------------------------------------------------------------------------
.table-responsive {
&--horizontal {
@media (max-width: (@screen-md - 1)) {
tbody {
td {
display: block;
width: 100%;
padding-left: 19rem;
&:before {
width: 18rem;
min-width: 18rem;
padding-right: 1rem;
float: left;
margin-left: -19rem + 0.6rem;
}
&:after {
content: '';
display: table;
clear: both;
}
}
}
}
}
}
src/blocks/table/table--hover.less deleted 100644 → 0
View file @ 13bd5c87
// Для импорта в диспетчер подключений: @import './src/blocks/table/table--hover.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table {
&--hover {
tbody {
tr:hover {
background-color: @gray-lightest;
}
}
}
}
src/blocks/table/table--not-greed.less deleted 100644 → 0
View file @ 13bd5c87
// Для импорта в диспетчер подключений: @import './src/blocks/table/table--not-greed.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table {
&--not-greed {
width: auto;
}
}
src/blocks/table/table--striped.less deleted 100644 → 0
View file @ 13bd5c87
// Для импорта в диспетчер подключений: @import './src/blocks/table/table--striped.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table {
&--striped {
tbody {
tr:nth-child(2n) {
background-color: @gray-lightest;
}
}
}
}
src/blocks/table/table.html
View file @ 225a1801
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/table/table.html')
<table class="table">
<caption>Таблица</caption>
<thead class="table__header">
<tr>
<th>Имя</th>
<th>Фамилия</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td>Иннокентий</td>
<td>Барлаухенштицкен-Ламанческий</td>
</tr>
<tr>
<td>Васисуалий</td>
<td>Пылепневмомешковыколачивателев</td>
</tr>
<tr>
<td>Ктулху</td>
<td>Втанк</td>
</tr>
</tbody>
<tfoot class="table__footer">
<tr>
<td colspan="2">Итого:</td>
</tr>
</tfoot>
</table>
-->
<div class="table">content</div>
src/blocks/table/table.less → src/blocks/table/table.scss
View file @ 225a1801
// Для импорта в диспетчер подключений: @import './src/blocks/table/table.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
// В этом файле должны быть стили только для БЭМ-блока table, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
.table {
border-collapse: collapse;
width: 100%;
border: 1px solid @border-color;
border: 1px solid $border-color;
margin: $line-height 0;
caption {
padding: round(0.6em * (100 / @font-size--small-percent), 2);
padding-top: 0.4em;
text-align: right;
caption-side: bottom;
font-size: @font-size--small-percent;
font-size: $font-size--small;
line-height: 1em;
color: @text-color--muted;
color: $text-color--muted;
}
td,
th {
padding: $field-padding-vertical $field-padding-horizontal;
vertical-align: top;
border-bottom: 1px solid @border-color;
border-bottom: 1px solid $border-color;
&:not(:first-child) {
border-left: 1px solid @border-color;
border-left: 1px solid $border-color;
}
}
th {
text-align: left;
padding: 0.6em;
}
td {
padding: 0.6em;
}
&__header {
background-color: @gray-lightest;
background-color: $gray-lightest;
}
&__body {}
&__footer {
background-color: @gray-lightest;
color: @gray;
background-color: $gray-lightest;
}
}
src/blocks/typo/typo.scss
View file @ 225a1801
......@@ -112,8 +112,7 @@ dl,
blockquote,
pre,
address,
figure,
table {
figure {
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
}
......
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