Алерты (незавершенное)

src/blocks/alert/alert.html

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

src/blocks/alert/alert.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.alert {
+  position: relative;
+  padding: 0.7em 1em;
+  background-color: @gray-lightest;
+  color: @text-color;
+  border: 1px solid @gray-lighter;
+  border-radius: @border-radius;
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  > * {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__header {
+    font-size: @font-size--h3;
+    margin-top: 0.3em;
+    margin-bottom: 0;
+  }
+
+  &--danger {
+    background-color: lighten(saturate(spin(@color-danger, 2.2609), 35.5140%), 38%);
+    border: 1px solid lighten(saturate(spin(@color-danger, 8.2609), 6.9426%), 25.4902%);
+    color: @color-danger;
+;
+  }
+}

src/blocks_library.html

@@ -530,7 +530,7 @@
 
 
   <section class="alert  alert--danger" id="text-helpers">
-    <h1>Текстовые хелперы</h1>
+    <h1 class="alert__header">Текстовые хелперы</h1>
     <p>Классов, вроде <code>.test-accent</code> (увеличенный текст), <code>.test-secondary</code> (уменьшенный текст), <code>.test-muted</code> («приглушенный» текст), <code>.align-center</code> (выравнивание текста по центру), <code>.bg-primary</code> (заданный цвет фона) и т.п. тут не будет. Это не фреймворк, это стартовая библиотека блоков. Предполагается, что пользователь в состоянии прицельно применить любую стилизацию по семантическому классу уровня блока/элемента/модификатора.</p>
   </section>
 
@@ -4594,6 +4594,22 @@
 
 
 
+  <section class="blocks-library__item" id="alert" data-name=".alert">
+
+    <h1 class="blocks-library__item-title">Сообщения</h1>
+
+    <div class="js-font-resizer">
+      <div class="alert  alert--danger">
+          <h1 class="alert__header">Большой заголовок сообщения</h1>
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!</p>
+        </div>
+    </div>
+
+  </section>
+
+
+
 </section>
 
 @@include('blocks/page-footer/page-footer.html')

src/less/style.less

@@ -64,3 +64,4 @@
 @import './src/blocks/label/label--absolute.less';
 @import './src/blocks/label/label--tag.less';
 @import './src/blocks/label/label--circle.less';
+@import './src/blocks/alert/alert.less';

src/less/variables.less

@@ -40,7 +40,7 @@
 @font-size--small:            0.75em;
 @font-size--small-percent:    75%;
 
-@line-height:                 1.375em;
+@line-height:                 1.375;
 
 @font-family:                 -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
 @font-family--serif:          Georgia, 'Times New Roman', Times, serif;