Закрытие для алертов

src/blocks-demo.pug

@@ -144,6 +144,7 @@ block content
     include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/close/readme.md
     div
       +close('Закрыть')
+      +close('Закрыть', 'sm')
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') blocks/close/close.pug
 
@@ -171,8 +172,10 @@ block content
     include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/alert/readme.md
     +alert()
       p Обычное сообщение
+      +close('Закрыть', 'sm')(class='alert__close')
     +alert('Заголовок', 'warning, some-mod-name')
       p Блок сообщения с модификаторами.
+      +close('Закрыть', 'sm')(class='alert__close')
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') blocks/alert/alert.pug
 

src/blocks/alert/alert.pug

@@ -7,13 +7,16 @@ mixin alert(title, mods)
   //-   mods {string}  - стилевые модификаторы
   //- Вызов:
         +alert()
-          p Успех
-        +alert('Внимание!', 'warning, some-mod-name')
           p Текст
-        +alert()
-          p Сообщение без модификаторов
-        +alert('Заголовok', 'danger')
+        +alert('Внимание', 'warning, some-mod-name')
+          p Предупреждение
+          +close('Закрыть', 'sm')(class='alert__close')
+        +alert('Внимание', 'danger')
           p Проблема
+          +close('Закрыть', 'sm')(class='alert__close')
+        +alert('Внимание', 'success')
+          p Успех
+          +close('Закрыть', 'sm')(class='alert__close')
 
   -
     //- список модификаторов

src/blocks/alert/alert.scss

@@ -15,7 +15,7 @@ $border-radius:               3px !default;
   $block-name:                &; // #{$block-name}__element
 
   position: relative;
-  padding: 0.7em 1em;
+  padding: 0.7em 1.5em 0.7em 1em;
   margin-top: 1em;
   margin-bottom: 1em;
   border: 1px solid $gray-lighter;
@@ -44,6 +44,12 @@ $border-radius:               3px !default;
     color: inherit;
   }
 
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
 
 
   &--warning {

src/blocks/close/close.pug

 //- Все примеси в этом файле должны начинаться c имени блока (close)
 
-mixin close(label)
+mixin close(label, mods)
 
   //- Принимает:
   //-   label {string} - описание, значение атрибута aria-label
   //- Вызов:
         +close('Закрыть')
+        +close('Закрыть', 'sm')
 
-  button.close(aria-label=label)&attributes(attributes)
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' close--' + modsList[i].trim();
+      }
+    }
+
+  button.close(class=allMods, aria-label=label)&attributes(attributes)
     span= label

src/blocks/close/close.scss

@@ -50,4 +50,22 @@ $toggler-part-bg-color:       #000 !default;
       transform: rotate3d(0, 0, 1, -45deg);
     }
   }
+
+  &--sm {
+
+    $toggler-part-height:     1px;
+
+    width: 20px;
+    line-height: 20px;
+
+    > span {
+      width: 60%;
+
+      &:before,
+      &:after {
+        height: $toggler-part-height;
+        background: $toggler-part-bg-color;
+      }
+    }
+  }
 }