Добавил блок close и мобильный вариант modal

projectConfig.json

@@ -51,7 +51,8 @@
     "burger": [],
     "progress": [],
     "media": [],
-    "modal": []
+    "modal": [],
+    "close": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1889,11 +1889,21 @@
     <div class="modal__dialog" role="document">
       <div class="modal__content">
         <div class="modal__header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+          <span class="close  modal__close" data-dismiss="modal" aria-label="Закрыть"><span></span></span>
           <h4 class="modal__title">Modal 01 title</h4>
         </div>
         <div class="modal__body">
           <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
+          <p>Далеко-далеко за словесными горами...</p>
         </div>
         <div class="modal__footer">
           <button type="button" class="btn" data-dismiss="modal">Закрыть</button>
@@ -1906,7 +1916,7 @@
     <div class="modal__dialog" role="document">
       <div class="modal__content">
         <div class="modal__header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+          <span class="close  modal__close" data-dismiss="modal" aria-label="Закрыть"><span></span></span>
           <h4 class="modal__title">Modal 02 title</h4>
         </div>
         <div class="modal__body">
@@ -1923,7 +1933,7 @@
     <div class="modal__dialog" role="document">
       <div class="modal__content">
         <div class="modal__header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
+          <span class="close  modal__close" data-dismiss="modal" aria-label="Закрыть"><span></span></span>
           <h4 class="modal__title">Modal 03 title</h4>
         </div>
         <div class="modal__body">

src/blocks/close/close.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/close/close.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<span class="close" aria-label="Закрыть"><span></span></span>

src/blocks/close/close.scss

+// В этом файле должны быть стили только для БЭМ-блока close, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+$toggler-part-height:         3px !default;
+$toggler-part-bg-color:       #000 !default;
+
+.close {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  user-select: none;
+  cursor: pointer;
+
+  > span {
+    display: inline-block;
+    width: 100%;
+    height: $toggler-part-height;
+    background: transparent;
+    position: relative;
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: $toggler-part-height;
+      background: $toggler-part-bg-color;
+      transform-origin: 50% 50%;
+    }
+
+    &:before {
+      transform: rotate3d(0, 0, 1, 45deg);
+    }
+
+    &:after {
+      transform: rotate3d(0, 0, 1, -45deg);
+    }
+  }
+}

src/blocks/modal/modal.scss

@@ -2,6 +2,13 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Не пишите здесь другие селекторы.
 
+$font-family:                 -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
+$font-family--headings:       $font-family !default;
+
+$font-size--h4:               1.25em !default;
+
+$line-height:                 1.375em !default;
+
 $opacity:                     0.7 !default;
 $transition-time:             0.3s !default;
 
@@ -33,20 +40,49 @@ $z-index-modal:               100 !default;
   &__dialog {
     position: relative;
     margin: 0;
-    width: auto;
+    width: 100%;
+    height: 100%;
   }
 
   &__content {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    min-height: 100%;
     background-color: #fff;
     outline: 0;
   }
 
-  // &__header {}
+  &__header {
+    padding: 5px 40px 0 10px;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    margin-top: ($line-height / 2);
+    margin-bottom: ($line-height / 2);
+    font-size: $font-size--h4;
+    line-height: 1.4;
+    font-weight: 700;
+    color: currentColor;
+  }
 
-  // &__body {}
+  &__close {
+    position: absolute !important;
+    top: 5px;
+    right: 5px;
+  }
 
-  // &__footer {}
+  &__body {
+    padding: 0 10px;
+    flex-grow: 1;
+  }
+
+  &__footer {
+    padding: 10px;
+    flex-shrink: 0;
+  }
 
   &__backdrop {
     position: fixed;

src/blocks/page/page.scss

@@ -8,10 +8,10 @@
   }
 }
 
-.page {
+.page { // html
   box-sizing: border-box;
   font-size: 10px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -ms-overflow-style: scrollbar;
   -ms-text-size-adjust: 100%; /* stylelint-disable-line  property-no-vendor-prefix */
   min-width: 320px;