From 6bceddddc5d058c52bc00acac42aac23c96c864b Mon Sep 17 00:00:00 2001 From: Julie Date: Wed, 25 Dec 2024 23:29:50 +0200 Subject: [PATCH 1/3] Created radio buttons --- 07-lection5/02-radio/index.html | 65 ++++++++++++++++++++++++++++---- 07-lection5/02-radio/radio.css | 67 +++++++++++++++++++++++++++++++++ 2 files changed, 124 insertions(+), 8 deletions(-) diff --git a/07-lection5/02-radio/index.html b/07-lection5/02-radio/index.html index 6ce2cb0..48d06ea 100644 --- a/07-lection5/02-radio/index.html +++ b/07-lection5/02-radio/index.html @@ -1,11 +1,60 @@ - - - - - - - - + + + + + + Radio + + + + + +
+
+ + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/07-lection5/02-radio/radio.css b/07-lection5/02-radio/radio.css index e69de29..617654e 100644 --- a/07-lection5/02-radio/radio.css +++ b/07-lection5/02-radio/radio.css @@ -0,0 +1,67 @@ +.radio { + display: flex; + flex-direction: column; + gap: 16px; +} + +.radio__label { + display: inline-flex; +} + +.radio__state { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +.radio__circle { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 50%; + border: 1px solid var(--grey-2, #DDE2E5); +} + +.radio__icon { + display: none; + width: 18px; + height: 18px; +} + +.radio__title { + color: var(--grey-4, #495057); + font-family: Inter, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 1.5; +} + +.radio__input { + position: absolute; + left: -100vh; +} + +.radio__input:checked ~ .radio__state .radio__circle { + border-color: var(--blue, #374FC7); +} + +.radio__input:checked ~ .radio__state .radio__icon { + display: block; + color: var(--blue, #374FC7); +} + +.radio__input:focus ~ .radio__state .radio__title { + text-decoration: underline; +} + +.radio__input:disabled ~ .radio__state .radio__title { + color: var(--grey-2, #DDE2E5); +} + +.radio__input:disabled ~ .radio__state .radio__circle { + background-color: var(--grey-2, #DDE2E5); +} \ No newline at end of file From 03b2f7a0b7acf22b979d355a07b6b0131dbe1603 Mon Sep 17 00:00:00 2001 From: Julie Date: Mon, 30 Dec 2024 22:55:16 +0200 Subject: [PATCH 2/3] Removed fieldset --- 07-lection5/02-radio/index.html | 53 ++++++++++++++++----------------- 07-lection5/02-radio/radio.css | 9 +++--- 2 files changed, 29 insertions(+), 33 deletions(-) diff --git a/07-lection5/02-radio/index.html b/07-lection5/02-radio/index.html index 48d06ea..8ee2121 100644 --- a/07-lection5/02-radio/index.html +++ b/07-lection5/02-radio/index.html @@ -13,48 +13,45 @@
-
- - - -
+
+
+ +
+

Disabled

+
+
- + + \ No newline at end of file diff --git a/07-lection5/02-radio/radio.css b/07-lection5/02-radio/radio.css index 617654e..63b88dd 100644 --- a/07-lection5/02-radio/radio.css +++ b/07-lection5/02-radio/radio.css @@ -1,17 +1,16 @@ .radio { + display: inline-flex; +} + +.radio__wrapper { display: flex; flex-direction: column; gap: 16px; } -.radio__label { - display: inline-flex; -} - .radio__state { display: flex; align-items: center; - justify-content: center; gap: 12px; } From a21afe767a71c6386851d7f37ba4ed9896f3b9f9 Mon Sep 17 00:00:00 2001 From: Julie Date: Mon, 30 Dec 2024 23:37:02 +0200 Subject: [PATCH 3/3] Removed wrapper --- 07-lection5/02-radio/index.html | 5 ++--- 07-lection5/02-radio/radio.css | 7 +------ 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/07-lection5/02-radio/index.html b/07-lection5/02-radio/index.html index 8ee2121..97e3c3a 100644 --- a/07-lection5/02-radio/index.html +++ b/07-lection5/02-radio/index.html @@ -15,7 +15,6 @@