Добавляет статью про стилизацию чекбокса (#5413)

* Добавляет статью про стилизацию чекбокса * Исправляет очепятки * Добавляет предложенные изменения и меняет раздел * Добавляет радиокнопку в статью и исправляет дэмки * Чистит текст "На практике" * Дописывает про focus-visible и подгоняет высоту iframe-ов * Добавляет fieldset и legend, уточняет про доступность, выпендривается в описании автора * Добавил про aria-disabled и добавил в дэмках aria-hidden, переименовал способы в заключении * Причёсывает демки * Редачит текст * Переименовывает демки * Синхронизует тайтлы * Правит демки, исправляет цвет, добавляет про понятный дизайн * Вычитывает, форматирует и редачит * Улучшает демку с accent-color * Улучшает демку с гав * Улучшает демку с псевдо * Форматирует инлайновые SVG в примерах * Исправляет работоспособность кода из статьи и исправляет цвет бордера * Добавляет рецепт в индекс раздела * Чуть-чуть правит демки * Меняет альт аватарки * Форматирует пример * Сдаётся --------- Co-authored-by: Svetlana Korobtseva <[email protected]> Co-authored-by: Tatiana Fokina <[email protected]> Co-authored-by: Alena Batitskaia <[email protected]>
doka-guide · Jul 22, 2024 · d58a485 · d58a485
1 parent 4183874
commit d58a485
Show file tree

Hide file tree

Showing 7 changed files with 1,058 additions and 0 deletions.
diff --git a/people/lonlylokly/index.md b/people/lonlylokly/index.md
@@ -0,0 +1,10 @@
+---
+name: "Михаил Кривдин"
+url: https://github.com/loonlylokly
+photo: photo.png
+photoAlt: "Инвертированный круг Малевича."
+badges:
+  - first-contribution-small
+---
+
+Магистр ордена Дырявой Верстки.
diff --git a/people/lonlylokly/photo.png b/people/lonlylokly/photo.png
diff --git a/recipes/checkbox-radio-style/demos/checkbox-radio-accent-color/index.html b/recipes/checkbox-radio-style/demos/checkbox-radio-accent-color/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <title>Стилизация при помощи accent-color — Стилизация чекбоксов и радиокнопок — Дока</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&display=swap"
+    >
+    <style>
+      *,
+      *::after,
+      *::before {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html, body {
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #FFFFFF;
+        padding: 50px;
+        background: #18191C;
+        font-family: Roboto, sans-serif;
+        font-size: 18px;
+      }
+
+      form {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+      }
+
+      fieldset {
+        min-width: 350px;
+        padding: 25px 15px 15px;
+      }
+
+      .checkbox > *, .radio > *{
+        vertical-align: middle;
+      }
+
+      .checkbox + .checkbox, .radio + .radio {
+        margin-block-start: 10px;
+      }
+
+      input[type="checkbox"],
+      input[type="radio"] {
+        accent-color: #C56FFF;
+        width: 20px;
+        height: 20px;
+      }
+
+      input:not(:disabled),
+      input:not(:disabled) ~ * {
+        cursor: pointer;
+      }
+
+      @media (width <= 768px) {
+        body {
+          padding: 30px;
+        }
+
+        fieldset {
+          min-width: initial;
+          width: 100%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <form>
+      <fieldset>
+        <legend>Чекбоксы</legend>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1">
+          <label for="checkbox1">Чекбокс 1</label>
+        </div>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1-c" checked>
+          <label for="checkbox1-c">Чекбокс 1 (отмечен)</label>
+        </div>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1-d-c" disabled checked>
+          <label for="checkbox1-d-c">Чекбокс 1 (отмечен и неактивен)</label>
+        </div>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1-d-u" disabled />
+          <label for="checkbox1-d-u">Чекбокс 1 (неактивен)</label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Радиокнопки</legend>
+        <div class="radio">
+          <input type="radio" id="radio1" name="radio">
+          <label for="radio1">Радиокнопка 1</label>
+        </div>
+        <div class="radio">
+          <input type="radio" id="radio1-c" name="radio" checked>
+          <label for="radio1-c">Радиокнопка 1 (отмечена)</label>
+        </div>
+        <div class="radio">
+          <input type="radio" id="radio1-d-c" disabled checked>
+          <label for="radio1-d-c">Радиокнопка 1 (отмечена и неактивна)</label>
+        </div>
+        <div class="radio">
+          <input type="radio" id="radio1-d-u" disabled>
+          <label for="radio1-d-u">Радиокнопка 1 (неактивна)</label>
+        </div>
+      </fieldset>
+    </form>
+  </body>
+</html>