Форматирует код

doka-guide · Oct 24, 2023 · c50183f · c50183f
1 parent 2048b12
commit c50183f
Showing 1 changed file with 188 additions and 188 deletions.
diff --git a/recipes/popup/demos/popup-demo/index.html b/recipes/popup/demos/popup-demo/index.html
@@ -2,198 +2,198 @@
 <html lang="ru">
 
 <head>
-    <title>Пример попапа — Как реализовать попап — Дока</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
-    <style>
-        *,
-        *::before,
-        *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html {
-            color-scheme: dark;
-            height: 100vh;
-        }
-
-        body {
-            min-height: 100vh;
-            padding: 50px;
-            display: grid;
-            justify-items: center;
-            align-items: center;
-            background-color: #18191C;
-            color: #FFFFFF;
-            font-family: "Roboto", sans-serif;
-            font-size: 18px;
-            scrollbar-gutter: stable;
-        }
-
-        .container {
-            width: 100%;
-            display: grid;
-            justify-items: center;
-            align-items: center;
-            position: relative;
-            border: 2.5px solid #41E847;
-            flex-grow: 1;
-            width: 100%;
-            align-self: stretch;
-            height: 900px;
-        }
-
-        dialog {
-            position: static;
-            height: 200px;
-            width: 300px;
-            margin-inline: auto;
-            margin-block: auto;
-            inset-inline: 0;
-            inset-block: 0;
-            border: none;
-            padding: 0;
-            background-color: #FFFFFF;
-            color: #000000;
-            text-align: center;
-        }
-
-        .openDialogBtn {
-            justify-self: start;
-            align-self: start;
-            margin-top: 5%;
-            margin-left: 5%;
-            min-width: 210px;
-            border: 2px solid transparent;
-            border-radius: 6px;
-            padding: 9px 15px;
-            color: #000000;
-            font-size: 18px;
-            font-weight: 300;
-            font-family: inherit;
-            transition: background-color 0.2s linear;
-        }
-
-        .closeDialogBtn {
-            margin: 15% auto 0;
-            border: 2px solid transparent;
-            min-width: 210px;
-            border-radius: 6px;
-            padding: 9px 15px;
-            color: #000000;
-            font-size: 18px;
-            font-weight: 300;
-            font-family: inherit;
-            transition: background-color 0.2s linear;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-        }
-
-        h2 {
-            margin-top: 15%;
-            font-weight: 500;
-            font-size: 1.375rem;
-        }
-
-        .openDialogBtn:hover {
-            background-color: #FFFFFF;
-            cursor: pointer;
-            transition: background-color 0.2s linear;
-        }
-
-        .openDialogBtn:focus-visible {
-            border: 2px solid #FFFFFF;
-            outline: none;
-        }
-
-        .openDialogBtn:focus {
-            border: 2px solid #FFFFFF;
-            outline: none;
-        }
-
-        .button-violet {
-            background-color: #C56FFF;
-        }
-
-        .button-black {
-            background-color: #000000;
-        }
-
-        .dialog__wrapper {
-            padding: 1em;
-        }
-
-
-        dialog::backdrop {
-            background-color: rgba(0, 0, 0, 0.5);
-        }
-
-
-        .scroll-lock {
-            overflow: hidden;
-        }
-
-        @media (max-width: 768px) {
-            body {
-                padding: 30px;
-            }
-        }
-    </style>
+  <title>Пример попапа — Как реализовать попап — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      height: 100vh;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+      font-size: 18px;
+      scrollbar-gutter: stable;
+    }
+
+    .container {
+      width: 100%;
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      position: relative;
+      border: 2.5px solid #41E847;
+      flex-grow: 1;
+      width: 100%;
+      align-self: stretch;
+      height: 900px;
+    }
+
+    dialog {
+      position: static;
+      height: 200px;
+      width: 300px;
+      margin-inline: auto;
+      margin-block: auto;
+      inset-inline: 0;
+      inset-block: 0;
+      border: none;
+      padding: 0;
+      background-color: #FFFFFF;
+      color: #000000;
+      text-align: center;
+    }
+
+    .openDialogBtn {
+      justify-self: start;
+      align-self: start;
+      margin-top: 5%;
+      margin-left: 5%;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 18px;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+    }
+
+    .closeDialogBtn {
+      margin: 15% auto 0;
+      border: 2px solid transparent;
+      min-width: 210px;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 18px;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+    }
+
+    h2 {
+      margin-top: 15%;
+      font-weight: 500;
+      font-size: 1.375rem;
+    }
+
+    .openDialogBtn:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .openDialogBtn:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .openDialogBtn:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-violet {
+      background-color: #C56FFF;
+    }
+
+    .button-black {
+      background-color: #000000;
+    }
+
+    .dialog__wrapper {
+      padding: 1em;
+    }
+
+
+    dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+
+    .scroll-lock {
+      overflow: hidden;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
 </head>
 
 <body class="parent">
-    <dialog class='child' id="myDialog">
-        <div class="dialog__wrapper">
-            <h2>Привет, я и есть попап!</h2>
-            <button class="closeDialogBtn button-black" type="button">
-                Закрыть попап
-            </button>
-        </div>
-    </dialog>
-    <div class="container">
-        <button class='openDialogBtn button-violet' type="button">Открыть попап</button>
+  <dialog class="child" id="myDialog">
+    <div class="dialog__wrapper">
+      <h2>Привет, я и есть попап!</h2>
+      <button class="closeDialogBtn button-black" type="button">
+        Закрыть попап
+      </button>
     </div>
-    <script>
-        const dialog = document.getElementById('myDialog')
-        const dialogOpener = document.querySelector('.openDialogBtn')
-        const dialogCloser = document.querySelector('.closeDialogBtn')
-
-        function closeOnBackDropClick({ currentTarget, target }) {
-            const dialog = currentTarget
-            const isClickedOnBackDrop = target === dialog
-            if (isClickedOnBackDrop) {
-                dialog.close()
-            }
-        }
-
-        function openModalAndLockScroll() {
-            dialog.showModal()
-            document.body.classList.add('scroll-lock')
-        }
-
-        function returnScroll() {
-            document.body.classList.remove('scroll-lock')
-        }
-
-        function close() {
-            dialog.close()
-            returnScroll()
-        }
-
-        dialog.addEventListener('click', closeOnBackDropClick)
-        dialogOpener.addEventListener('click', openModalAndLockScroll)
-        dialogCloser.addEventListener('click', (event) => {
-            event.stopPropagation()
-            close()
-        })
-    </script>
+  </dialog>
+  <div class="container">
+    <button class="openDialogBtn button-violet" type="button">Открыть попап</button>
+  </div>
+  <script>
+    const dialog = document.getElementById('myDialog')
+    const dialogOpener = document.querySelector('.openDialogBtn')
+    const dialogCloser = document.querySelector('.closeDialogBtn')
+
+    function closeOnBackDropClick({ currentTarget, target }) {
+      const dialog = currentTarget
+      const isClickedOnBackDrop = target === dialog
+      if (isClickedOnBackDrop) {
+        dialog.close()
+      }
+    }
+
+    function openModalAndLockScroll() {
+      dialog.showModal()
+      document.body.classList.add('scroll-lock')
+    }
+
+    function returnScroll() {
+      document.body.classList.remove('scroll-lock')
+    }
+
+    function close() {
+      dialog.close()
+      returnScroll()
+    }
+
+    dialog.addEventListener('click', closeOnBackDropClick)
+    dialogOpener.addEventListener('click', openModalAndLockScroll)
+    dialogCloser.addEventListener('click', (event) => {
+      event.stopPropagation()
+      close()
+    })
+  </script>
 </body>
 
 </html>