Commit 5095f062 authored by Nikolay Gromov's avatar Nikolay Gromov

Удалил старые компоненты, которые, полагаю, лишние

parent f1688660
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/alert-area/alert-area.html')
-->
<div class="alert-area">content</div>
// Для импорта в диспетчер подключений: @import './src/blocks/alert-area/alert-area.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.alert-area {
position: fixed;
z-index: 1;
bottom: 0;
right: 0;
width: 100%;
padding: 1em;
visibility: hidden;
opacity: 0;
transition: all @transition-time;
& > *:last-child {
margin-bottom: 0;
}
@media (min-width: @screen-sm) {
width: 40rem;
bottom: 1em;
right: 1em;
}
&:empty {
display: none;
}
&--shown {
visibility: visible;
opacity: 1;
}
}
<!--DEV
<div class="btn-group">
<button class="btn">Отправить</button>
<button class="btn btn--main">Отменить</button>
<button class="btn">Отменить</button>
</div>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/btn-group/btn-group.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.btn-group {
display: inline-flex;
vertical-align: middle;
margin-bottom: (@line-height / 2);
> .btn {
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
> * {
&:not(:last-child) {
.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
margin-left: -1px;
.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
.btn {
position: relative;
z-index: 0;
&:focus,
&:hover {
z-index: 1;
}
}
}
<!--DEV
<a
class="navbar__toggler"
href="#main-nav-wrapper"
data-toggle="collapse"
data-toggle-this-class="navbar__toggler--open"
aria-controls="main-nav-wrapper"
aria-expanded="false">
<span class="navbar__toggler-icon"></span>
</a>
<button
class="btn"
data-target="#main-nav-wrapper"
data-toggle-this-class="btn--primary"
data-toggle="collapse"
aria-controls="main-nav-wrapper"
aria-expanded="false">
показать меню
</button>
-->
$('[data-toggle="collapse"]').on('click.nth.collapse', function(e){
e.preventDefault();
// Определим ID целевого элемента
var $collapseBlockId = $(this).attr('href');
if(!$collapseBlockId) {
$collapseBlockId = $(this).data('target');
}
// Размернем или свернём целевой элемент
$($collapseBlockId).slideToggle(250);
// Найдем все триггеры открытия и переключим им классы
var $triggers = $('[data-toggle="collapse"][href="'+$collapseBlockId+'"], [data-toggle="collapse"][data-target="'+$collapseBlockId+'"]');
$triggers.each(function(){
$(this).toggleClass($(this).data('toggle-this-class'));
});
// Сменим aria-expanded
$triggers.each(function(){
if($(this).attr('aria-expanded') == 'false') {
$(this).attr('aria-expanded', 'true');
}
else {
$(this).attr('aria-expanded', 'false');
}
});
});
// Для импорта в диспетчер подключений: @import './src/blocks/collapse/collapse.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
<!--DEV
<dl class="dl-horizontal">
<dt>Ассоциативный список</dt>
<dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
<dt>Второй термин</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Второе определение подряд.</dd>
<dt>Конституционально-эзотерический концептуализм</dt>
<dd>Некое определение.</dd>
</dl>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/dl-horizontal/dl-horizontal.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.dl-horizontal {
@media (min-width: @screen-md) {
& > dt {
width: 19rem;
float: left;
margin: 0;
word-wrap: break-word;
text-align: right;
clear: both;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > dd {
margin-left: 20.5rem;
}
}
}
<!--DEV
<div class="navbar">
<div class="navbar__inner">
<div class="navbar__left">
<a href="/" class="logo navbar__logo">NTH start project</a>
<a class="toggler-burger navbar__toggler" href="#main-nav-wrapper" data-toggle="collapse" data-toggle-this-class="toggler-burger--open" aria-controls="main-nav-wrapper" aria-expanded="false">
<span class="toggler-burger__icon"></span>
</a>
</div>
<div class="navbar__right">
<div class="navbar__slidable-content" id="main-nav-wrapper">
<nav class="main-nav navbar__nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link" >
<span class="main-nav__link-text">Библиотека</span>
</a>
<div class="main-nav__lvl-2-wrapper">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Блочные цитаты по правому краю</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Контакты</span>
</a>
</li>
</ul>
</nav>
<div class="navbar__text">
<p>Внимание! Работа этого компонента зависит от наличия в сборке jQuery</p>
</div>
<form class="navbar__form">
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="search" placeholder="input[type=search]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Найти</button>
</div>
</form>
</div>
</div>
</div>
</div>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/navbar/navbar.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.navbar {
background-color: @gray-lightest;
border-bottom: 1px solid @gray-lighter;
&__inner {
.container();
@media (min-width: @screen-lg) {
display: flex;
align-items: center;
justify-content: space-between;
}
}
&__left {
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width: @screen-lg) {
margin-right: 2rem;
}
}
&__right {
@media (min-width: @screen-lg) {
flex-grow: 1;
}
}
&__logo {
font-size: @font-size--h3;
line-height: 4rem;
color: @text-color;
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
color: @text-color;
}
}
&__toggler {
@media (min-width: @screen-lg) {
display: none;
}
}
&__slidable-content {
// Если JS работает, будем скрывать и показывать по клику
.js & {
display: none;
}
// На большой ширине показываем вне зависимости от работы JS
.js &,
.no-js & {
@media (min-width: @screen-lg) {
display: flex !important; // он может иметь инлайновый display: none из-за JS
}
}
@media (min-width: @screen-lg) {
display: flex;
align-items: center;
justify-content: space-between;
}
}
&__nav {
@media (min-width: @screen-lg) {
margin-bottom: 0;
}
}
// Для текстового блока, если он тут есть
// &__text {}
// Для формы, если она тут есть
// &__form {
// .fields-group {
// margin-bottom: 0;
// }
// }
}
<!--DEV
<ol class="step-list">
<li class="step-list__item">
<h2 class="step-list__title">Автоматизируйте всё</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
</div>
<a href="https://github.com/nicothin/NTH-start-project" class="btn">Автоматизировать</a>
</li>
<li class="step-list__item step-list__item--main">
<h2 class="step-list__title">Используйте голову</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
</div>
<a href="" class="btn btn--main">Начать</a>
</li>
<li class="step-list__item step-list__item--danger">
<h2 class="step-list__title">Верстайте быстро</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
</div>
<a href="" class="btn btn--danger">Приступить</a>
</li>
<li class="step-list__item step-list__item--success">
<h2 class="step-list__title">Испытывайте удовольствие от работы</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
</div>
<a href="" class="btn btn--success">Да, детка, сверстай мне!</a>
</li>
</ol>
-->
// Для импорта в диспетчер подключений: @import './src/blocks/step-list/step-list.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.step-list {
list-style: none;
padding-left: 0;
counter-reset: step-list;
&__item {
position: relative;
@media (min-width: @screen-sm) {
margin-left: 5rem;
padding-left: 1.2rem;
border-left: 1px solid @border-color;
// На ширинах больше SM показываем цифру сбоку от элемента
&:before {
content: counter(step-list) '.';
counter-increment: step-list;
position: absolute;
top: 0;
left: -5rem;
font-size: @font-size--h1;
width: 1.2em;
height: 1em;
line-height: 1em;
color: @gray-light;
text-align: right;
}
}
&:not(:last-child) {
margin-bottom: 1.5rem;
}
// На узких ширинах показываем цифру в заголовке
& .step-list__title {
&:before {
content: counter(step-list) '. ';
counter-increment: step-list;
color: @gray-light;
// На ширинах больше SM скроем
@media (min-width: @screen-sm) {
display: none;
}
}
}
&--main {
.step-list__title {
border-color: @color-main;
}
}
&--danger {
.step-list__title {
border-color: @color-danger;
}
}
&--success {
.step-list__title {
border-color: @color-success;
}
}
}
&__title {
font-size: @font-size--h1;
font-weight: 400;
line-height: 1em;
padding: 0 0 1rem;
margin: 0 0 1.5rem;
border-bottom: 2px solid @border-color;
}
&__text {
margin-bottom: 2rem;
}
}
// Для импорта в диспетчер подключений: @import './src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table-responsive-rotate {
@media (max-width: (@screen-lg - 1)) {
&--thead-fix {
position: relative;
padding-left: 12rem;
.table-responsive-rotate__inner {
display: block;
width: 100%;
overflow-x: auto;
}
thead {
width: 12rem;
position: absolute;
top: 0;
left: 0;
}
}
}
}
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/table-responsive-rotate/table-responsive-rotate.html')
-->
<div class="table-responsive-rotate">content</div>
// Для импорта в диспетчер подключений: @import './src/blocks/table-responsive-rotate/table-responsive-rotate.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table-responsive-rotate {
@media (max-width: (@screen-lg - 1)) {
display: block;
width: 100%;
overflow-x: auto;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
border: 1px solid @border-color;
table {
display: flex;
margin: 0;
border: 0 !important;
width: 100%;
}
tbody {
display: flex;
}
tr {
display: block;
}
th,
td {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 0;
border-right: 1px solid @border-color;
&:last-child {
border-bottom: 0;
}
}
tfoot {
tr:last-child {
th,
td {
border-right: 0;
}
}
}
caption {
display: none;
}
}
}
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/table-responsive-scroll/table-responsive-scroll.html')
-->
<div class="table-responsive-scroll">content</div>
// Для импорта в диспетчер подключений: @import './src/blocks/table-responsive-scroll/table-responsive-scroll.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.table-responsive-scroll {
display: block;
width: 100%;
overflow-x: auto;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
border: 1px solid @border-color;
table {
margin: 0;
border: 0 !important;
width: 100%;
}
tbody,
thead,
tfoot {
&:last-child {
tr:last-child {
td,
th {
border-bottom: 0;
}
}
}
}
caption {
text-align: left;
border-bottom: 1px solid @border-color;
caption-side: top;
}
}
<!--DEV
<a class="toggler-burger" href="#">
<span class="toggler-burger__icon"></span>
</a>
<a class="toggler-burger toggler-burger--open" href="#">
<span class="toggler-burger__icon"></span>
</a>
-->
\ No newline at end of file
// Для импорта в диспетчер подключений: @import './src/blocks/toggler-burger/toggler-burger.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.toggler-burger {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 4rem;
height: 4rem;
padding: 0.5rem;
user-select: none;
cursor: pointer;
color: @text-color;
background-color: @gray-lighter;
border: 1px solid @gray-light;
border-radius: @border-radius;
&--open {
.toggler-burger__icon {
transition: background 0.2s 0;
background: transparent;
&:before,
&:after {
transition: top 0.2s, transform 0.2s 0.2s;
top: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
&__icon {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: 0.3rem;
background: @text-color;
border-radius: 0.2rem;
position: relative;
transition: background 0.2s 0.2s;
&:before,
&:after {
width: 100%;
height: 0.3rem;
background: @text-color;
border-radius: 0.2rem;
position: absolute;
left: 0;
content: '';
transform-origin: 50% 50%;
transition: top 0.2s 0.2s, transform 0.2s;
}
&:before {
top: 1rem;
}
&:after {
top: -1rem;
}
}
}
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