Добавил Область уведомлений

TODO

+☐ Исправить: адаптивные таблицы — адаптировать до бОльших ширин
 ☐ Сделать кнопку закрытия алерта
 ☐ Сделать фиксированного родителя алерта и механизм появления-сокрытия алертов в нем
 ☐ Сделать: кастомные радиокнопки и чекбоксы без графики (CSS-графикой)

src/blocks/alert-area/alert-area.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/alert-area/alert-area.html')
+
+-->
+<div class="alert-area">content</div>

src/blocks/alert-area/alert-area.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.alert-area {
+  position: fixed;
+  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;
+  }
+}

src/blocks_library.html

@@ -4875,6 +4875,57 @@
 
 
 
+  <section class="blocks-library__item" id="alert-area" data-name=".alert-area">
+
+    <h1 class="blocks-library__item-title">Область показа уведомлений</h1>
+
+    <p>Фиксированная во вьюпорте область, в которой показываются уведомления.</p>
+
+    <p>
+      <button class="btn" id="show-alert-area" onclick="showAlertArea();">Показать / Скрыть</button>
+      <script>
+        function showAlertArea() {
+          document.getElementById('demo-alert-area').classList.toggle('alert-area--shown');
+        }
+      </script>
+    </p>
+
+    <div class="alert-area" id="demo-alert-area">
+      <div class="alert  alert--danger-invert">
+        <button class="alert__close" aria-label="Close">×</button>
+        <p><strong>Что-то пошло не так!</strong></p>
+      </div>
+      <div class="alert  alert--success-invert">
+        <button class="alert__close" aria-label="Close">×</button>
+        <p>Шутка, все хорошо.</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-area&quot;&gt;</code>
+          <code class="html"> </code>
+          <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;p&gt;&lt;strong&gt;&#x427;&#x442;&#x43e;-&#x442;&#x43e; &#x43f;&#x43e;&#x448;&#x43b;&#x43e; &#x43d;&#x435; &#x442;&#x430;&#x43a;!&lt;/strong&gt;&lt;/p&gt;</code>
+          <code class="html">  &lt;/div&gt;</code>
+          <code class="html">  </code>
+          <code class="html">  &lt;div class=&quot;alert  alert--success-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;p&gt;&#x428;&#x443;&#x442;&#x43a;&#x430;, &#x432;&#x441;&#x435; &#x445;&#x43e;&#x440;&#x43e;&#x448;&#x43e;.&lt;/p&gt;</code>
+          <code class="html">  &lt;/div&gt;</code>
+          <code class="html"> </code>
+          <code class="html">&lt;/div&gt;</code>
+        </pre>
+      </div>
+    </div>
+
+  </section>
+
+
+
 </section>
 
 @@include('blocks/page-footer/page-footer.html')

src/less/global/global-scaffolding.less

@@ -66,6 +66,7 @@ html {
   -ms-overflow-style: scrollbar;
   -ms-text-size-adjust: 100%;
   min-width: 320px;
+  min-height: 100%;
   site: be cool; // :)
 
   @media (min-width: @screen-sm) {
@@ -80,6 +81,7 @@ body {
   color: @text-color;
   background-color: @body-bg;
   margin: 0;
+  min-height: 100%;
 }
 
 a {

src/less/style.less

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