Merge branch 'master' of github.com:nicothin/NTH-start-project

gulpfile.js

@@ -92,11 +92,6 @@ gulp.task('copy:css', function(callback) {
           mqpacker
       ]))
       .pipe(cleanss())
-      .pipe(rename(function (path) {
-        path.basename = 'additional-styles',
-        path.extname = '.min.css'
-      }))
-      .pipe(debug({title: "RENAME:"}))
       .pipe(gulp.dest(dirs.build + '/css'));
   }
   else {
@@ -118,7 +113,7 @@ gulp.task('img', function () {
     .pipe(gulp.dest(dirs.build + '/img'));
 });
 
-// Оптимизация изображений // folder=src/blocks/block-name/img_to_bg/ npm start img:opt
+// Оптимизация изображений // folder=src/img/icons/ npm start img:opt
 const folder = process.env.folder;
 gulp.task('img:opt', function (callback) {
   if(folder){

src/blocks/collapse/collapse.html

+<!--DEV
+
+<a
+  class="navbar__toggler"
+  href="#main-nav-wrapper"
+  id="navbar-toggler"
+  data-toggle="collapse"
+  data-toggle-this-class="navbar__toggler-icon--open"
+  aria-controls="main-nav-wrapper"
+  aria-expanded="false">
+    <span class="navbar__toggler-icon"></span>
+</a>
+
+<button
+  class="btn"
+  data-toggle-this-class="btn--primary"
+  data-toggle="collapse"
+  data-target="#main-nav-wrapper"
+  aria-controls="main-nav-wrapper"
+  aria-expanded="false">
+  показать меню
+</button>
+
+-->

src/blocks/collapse/collapse.less

+// Для импорта в диспетчер подключений: @import './src/blocks/collapse/collapse.less';
+
+@import '../../less/variables.less';     // только для удобства обращения к переменным

src/blocks/main-nav/main-nav.less

@@ -4,6 +4,8 @@
 
 
 .main-nav {
+  margin-left: (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
 
   &__list {
     padding: 0;
@@ -27,4 +29,20 @@
   &__item {
     display: block;
   }
+
+  &__link {
+    display: block;
+    padding-top: 0.4em;
+    padding-bottom: 0.4em;
+    padding-left: (@grid-gutter-width / 2);
+    padding-right: (@grid-gutter-width / 2);
+    color: @gray;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: @text-color;
+      background-color: @gray-lighter;
+      text-decoration: none;
+    }
+  }
 }

src/blocks/navbar/navbar.js

-$('#navbar-toggler').on('click', function(){
-  $(this).closest('.navbar')
-    .find('.navbar__slidable-content').slideToggle(250) // Показываем блок панели
-    .end()
-    .find('.navbar__toggler-icon').toggleClass('navbar__toggler-icon--open'); // Меняем вид иконки
-});

src/blocks/navbar/navbar.less

@@ -38,6 +38,13 @@
   &__logo {
     font-size: @font-size--h3;
     line-height: 4rem;
+    color: @text-color;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      text-decoration: none;
+      color: @text-color;
+    }
   }
 
   &__toggler {
@@ -115,6 +122,7 @@
   }
 
   &__slidable-content {
+    padding-top: 0.5em;
 
     // Если JS работает, будем скрывать и показывать по клику
     .js & {

src/blocks_library.html

@@ -24,12 +24,13 @@
     <div class="navbar__inner">
       <div class="navbar__left">
         <a href="/" class="logo  navbar__logo">NTH start project</a>
-        <span class="navbar__toggler" id="navbar-toggler">
+        <a class="navbar__toggler" href="#main-nav-wrapper" id="navbar-toggler" data-toggle="collapse" data-toggle-this-class="navbar__toggler-icon--open" aria-controls="main-nav-wrapper" aria-expanded="false">
           <span class="navbar__toggler-icon"></span>
-        </span>
+        </a>
+        <button class="btn" data-toggle-this-class="btn--primary" data-toggle="collapse" data-target="#main-nav-wrapper" aria-controls="main-nav-wrapper" aria-expanded="false">показать меню</button>
       </div>
       <div class="navbar__right">
-        <div class="navbar__slidable-content">
+        <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">
@@ -71,6 +72,7 @@
               </li>
             </ul>
           </nav>
+          <p>Внимание! Работа этого компонента зависит от наличия в сборке компонента collapse</p>
           <form class="navbar__form">
             <div class="fields-group">
               <label class="field-text  fields-group__item">

src/less/mixins/grid-mixins.less

@@ -194,6 +194,48 @@
 
 
 
+//------------------------------------------------------------------------------
+//  Генератор правил для отступа одной ячейки с возможностью указать @media
+//------------------------------------------------------------------------------
+//  Принимает:
+//  @screen:      xs                    - тип сетки [xs|sm|md|lg|xl|xxl]
+//  @column:      1                     - ширина отступа (кол-во колонок)
+//  @columns:     @grid-columns;        - общее количество ячеек на 1 ряд
+//------------------------------------------------------------------------------
+
+.col-offset(@screen: xs, @column: 1, @columns: @grid-columns) {
+  & when (@screen = xs) {
+    margin-left: (@column * 100% / @columns);
+  }
+  & when (@screen = sm) {
+    @media (min-width: @screen-sm) {
+      margin-left: (@column * 100% / @columns);
+    }
+  }
+  & when (@screen = md) {
+    @media (min-width: @screen-md) {
+      margin-left: (@column * 100% / @columns);
+    }
+  }
+  & when (@screen = lg) {
+    @media (min-width: @screen-lg) {
+      margin-left: (@column * 100% / @columns);
+    }
+  }
+  & when (@screen = xl) {
+    @media (min-width: @screen-xl) {
+      margin-left: (@column * 100% / @columns);
+    }
+  }
+  & when (@screen = xxl) {
+    @media (min-width: @screen-xxl) {
+      margin-left: (@column * 100% / @columns);
+    }
+  }
+}
+
+
+
 //------------------------------------------------------------------------------
 //  Генератор списка селекторов .col-[указанный тип]-[] и их общих свойств
 //------------------------------------------------------------------------------

src/less/style.less

@@ -63,3 +63,4 @@
 @import './src/blocks/alert-area/alert-area.less';
 @import './src/blocks/loader/loader.less';
 @import './src/blocks/code/code.less';
+@import './src/blocks/collapse/collapse.less';