#72 Вёрстка уведомления

index.html

@@ -119,5 +119,14 @@ <h3>Добавить тег</h3>
     </div>
   </article>
 
+
+  <div id="notify" class="state active info">
+    <h5>Заголовок уведомления</h5>
+    <div>
+      <p>Текст уведомления из нескольких строк</p>
+      <p>вторая строка</p>
+      <p>Третья строка</p>
+    </div>
+  </div>
 </body>
 </html>

script.js

@@ -39,5 +39,8 @@
 
 /** @section INIT */
   $.ready(_ => ui.ready());
+  $.ready(function() {
+    UI.notify('Тест','текст').info();
+  });
 
 })(window, document);

script/ui.js

@@ -40,6 +40,23 @@ class UI {
   static value(input) { // ?
     return $(input).value();
   }
+
+  static notify(header = '', ...text) {
+    return {
+      info() {
+        show();
+      }
+    }
+
+    function show() {
+      $('#notify > h5').text(header);
+      $('#notify > div').clear().loop(init, text.length, text);
+    }
+
+    function init(index, string) {
+      this.add('p').text(string);
+    }
+  }
 }
 
 class Controller {

style.less

@@ -103,3 +103,4 @@ input.splash { display: none;
 #layer-editor-toggle:checked ~ #splash > label[for="layer-editor-toggle"] { display: block; }
 
 @import "style/control.less";
+@import "style/notify.less";

style/notify.less

@@ -0,0 +1,15 @@
+#notify {
+  .font(1em);
+  .color(@color-second, @color-black);
+  .edge(@color-accent);
+  .shadow(@shadow-offset, @shadow-offset, @shadow-blur, @color-shadow);
+  width: 320px;
+  min-height: 4em;
+  position: fixed;
+  left: 1em;
+  bottom: 1em;
+  padding: 1em;
+}
+#notify > h5 {
+  .font(1em, bold);
+}