Алерты: добавил возможность закрытия

src/blocks/alert/alert.html

@@ -43,4 +43,10 @@
   </div>
 </div>
 
+<div class="alert">
+  <button class="alert__close" aria-label="Close">×</button>
+  <h1 class="alert__header">Заголовок</h1>
+  ...
+</div>
+
 -->

src/blocks/alert/alert__close.js

+(function(){
+  // получим все закрывающих элементы в Алертах
+  var alertCloseBtns = [].slice.call(document.querySelectorAll('.alert .alert__close') || []);
+  // Навесим отслеживание событий клика
+  alertCloseBtns.forEach(function(item) {
+    item.addEventListener('click', function(){
+      // По клику поднимемся к родительскому Алерту и скроем его
+      this.closest('.alert').style.display = 'none';
+    });
+  });
+}());

src/blocks/alert/alert__close.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.alert {
+
+  &__close {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 2em;
+    min-height: 2em;
+    margin: 0;
+    padding: 0.3em;
+    top: 0;
+    right: 0;
+    background: none;
+    border: 0;
+    border-radius: @border-radius;
+    color: inherit;
+    font-weight: 700;
+    opacity: 0.7;
+
+    & + * {
+      margin-top: 0;
+    }
+
+    &:hover, &:focus {
+      opacity: 1;
+      background-color: rgba(255,255,255,0.15);
+    }
+  }
+
+}

src/blocks_library.html

@@ -4723,6 +4723,31 @@
       </div>
     </div>
 
+    <div class="blocks-library__sub-item">
+      <h2 class="blocks-library__sub-item-title">Кнопка закрытия</h2>
+      <p>Дополнительный элемент <code>alert__close</code>, отдельный less-файл.</p>
+      <p>Использует JS для сокрытия Алерта по нажатию. Алерт только скрывается, не убирается из DOM.</p>
+      <div class="js-font-resizer">
+        <div class="alert  alert--danger">
+          <button class="alert__close" aria-label="Close">×</button>
+          <h1 class="alert__header">Внимание, опасность, отказ</h1>
+          <p>Далеко-далеко за <a href="" class="alert__link">словесными</a> горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, <a href="">послушавшись</a>!</p>
+        </div>
+      </div>
+      <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>
+            <code class="html">&lt;div class=&quot;alert  alert--danger-invert&quot;&gt;</code>
+            <code class="html">  &lt;button class=&quot;alert__close&quot; aria-label=&quot;Close&quot;&gt;&times;&lt;/button&gt;</code>
+            <code class="html">  &lt;h1 class=&quot;alert__header&quot;&gt;Внимание, опасность, отказ&lt;/h1&gt; &lt;!-- &#x41d;&#x435;&#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b;&#x439; &#x437;&#x430;&#x433;&#x43e;&#x43b;&#x43e;&#x432;&#x43e;&#x43a; --&gt;</code>
+            <code class="html">  &lt;p&gt;...&lt;/p&gt;</code>
+            <code class="html">&lt;/div&gt;</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+
     <div class="blocks-library__sub-item">
       <h2 class="blocks-library__sub-item-title">Инвертированный блок «опасность, внимание»</h2>
       <p>Модификатор <code>alert--danger-invert</code>, отдельный less-файл.</p>

src/js/global-script.js

@@ -34,6 +34,16 @@ function ready(fn) {
 
 
 
+/*
+  При добавлении новых дополнительных функций, изолируйте их!
+*/
+
+// (function(){
+//   // код
+// }());
+
+
+
 
 
 // Свой код с jQuery

src/less/style.less

@@ -68,3 +68,4 @@
 @import './src/blocks/alert/alert--danger-invert.less';
 @import './src/blocks/alert/alert--success-invert.less';
 @import './src/blocks/alert/alert--icon.less';
+@import './src/blocks/alert/alert__close.less';