From 394a1ba3aa0f2855f646ddf4b7e9fef6e658b7fd Mon Sep 17 00:00:00 2001 From: Julie Date: Mon, 23 Dec 2024 23:28:46 +0200 Subject: [PATCH 1/4] Created checkbox --- 07-lection5/01-checkbox/checkbox.css | 76 ++++++++++++++++++++++++++++ 07-lection5/01-checkbox/index.html | 64 ++++++++++++++++++++--- 2 files changed, 132 insertions(+), 8 deletions(-) diff --git a/07-lection5/01-checkbox/checkbox.css b/07-lection5/01-checkbox/checkbox.css index e69de29..4a51169 100644 --- a/07-lection5/01-checkbox/checkbox.css +++ b/07-lection5/01-checkbox/checkbox.css @@ -0,0 +1,76 @@ +.checkbox { + display: inline-block; + position: relative; +} + +.checkbox__input { + position: absolute; + left: -100vh; +} + +.checkbox__state{ + display: flex; + gap: 12px; + align-items: center; +} + +.checkbox__square { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 4px; + border: 1px solid var(--grey-2, #DDE2E5); +} + +.checkbox__icon{ + display: none; + fill: none; + stroke-width: 3px; +} + +.checkbox__label { + color: var(--gray-4, #495057); + font-family: Inter, sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 1.5; +} + +.checkbox__input:checked ~ .checkbox__state .checkbox__square { + background-color: var(--blue, #374FC7); + border-color: var(--blue, #374FC7); +} + +.checkbox__input:checked ~ .checkbox__state .checkbox__icon { + display: block; + color: var(--white, #ffffff); +} + +.checkbox__input:focus ~ .checkbox__state .checkbox__label { + text-decoration: underline; +} + +.checkbox__input:disabled ~ .checkbox__state .checkbox__square { + background-color: var(--grey-2, #DDE2E5); + border-color: var(--grey-2, #DDE2E5); +} + +.checkbox__input:disabled ~ .checkbox__state .checkbox__icon { + display: none; +} + +.checkbox__input:disabled ~ .checkbox__state .checkbox__label { + color: var(--grey-2, #DDE2E5); +} + +.checkbox__input:disabled ~ .checkbox__state { + cursor: not-allowed; +} + +/* Это вот костыль, который помог включая кросс браузерность. +.checkbox__input:checked ~ .checkbox__state .checkbox__square{ + transform: translateY(-2px); +} */ \ No newline at end of file diff --git a/07-lection5/01-checkbox/index.html b/07-lection5/01-checkbox/index.html index 5799c72..0e4770d 100644 --- a/07-lection5/01-checkbox/index.html +++ b/07-lection5/01-checkbox/index.html @@ -1,11 +1,59 @@ - - - - - - - - + + + + + + + + + Checkbox + + + + + +
+ + + + + +
+ + + + + + \ No newline at end of file From cc2b9f24ca684f5c269027c6994e42c8be7273cb Mon Sep 17 00:00:00 2001 From: Julie Date: Mon, 30 Dec 2024 22:31:38 +0200 Subject: [PATCH 2/4] Changed icon's optuins --- 07-lection5/01-checkbox/checkbox.css | 8 ++------ 07-lection5/01-checkbox/index.html | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/07-lection5/01-checkbox/checkbox.css b/07-lection5/01-checkbox/checkbox.css index 4a51169..665df82 100644 --- a/07-lection5/01-checkbox/checkbox.css +++ b/07-lection5/01-checkbox/checkbox.css @@ -1,6 +1,7 @@ .checkbox { display: inline-block; position: relative; + vertical-align: middle; /* параметр позволяет выравнить иконку по вертикали */ } .checkbox__input { @@ -68,9 +69,4 @@ .checkbox__input:disabled ~ .checkbox__state { cursor: not-allowed; -} - -/* Это вот костыль, который помог включая кросс браузерность. -.checkbox__input:checked ~ .checkbox__state .checkbox__square{ - transform: translateY(-2px); -} */ \ No newline at end of file +} \ No newline at end of file diff --git a/07-lection5/01-checkbox/index.html b/07-lection5/01-checkbox/index.html index 0e4770d..6efcc91 100644 --- a/07-lection5/01-checkbox/index.html +++ b/07-lection5/01-checkbox/index.html @@ -51,7 +51,7 @@ From 3cc486d6070fb6ae2fc40a6e14f074e1bcaa5886 Mon Sep 17 00:00:00 2001 From: Julie Date: Mon, 30 Dec 2024 22:43:43 +0200 Subject: [PATCH 3/4] Added wrapper for alignment --- 07-lection5/01-checkbox/checkbox.css | 6 ++++ 07-lection5/01-checkbox/index.html | 52 +++++++++++++++------------- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/07-lection5/01-checkbox/checkbox.css b/07-lection5/01-checkbox/checkbox.css index 665df82..086d79f 100644 --- a/07-lection5/01-checkbox/checkbox.css +++ b/07-lection5/01-checkbox/checkbox.css @@ -4,6 +4,12 @@ vertical-align: middle; /* параметр позволяет выравнить иконку по вертикали */ } +.checkbox__wrapper { + display: flex; + flex-direction: column; + gap: 16px; +} + .checkbox__input { position: absolute; left: -100vh; diff --git a/07-lection5/01-checkbox/index.html b/07-lection5/01-checkbox/index.html index 6efcc91..7945c4d 100644 --- a/07-lection5/01-checkbox/index.html +++ b/07-lection5/01-checkbox/index.html @@ -17,36 +17,40 @@