From 18b79e8ac0cbe86e9c0176c1cb855f0c06bb6c5c Mon Sep 17 00:00:00 2001 From: Grzegorz Date: Sat, 3 Aug 2024 10:09:33 +0200 Subject: [PATCH 1/4] search-bar ver 1.0.0 --- package.json | 2 +- src/index.html | 36 ++++++++++---- src/style.css | 126 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 152 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index b3b9ce4091..40559d1158 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.2.2", "jest": "^29.7.0", diff --git a/src/index.html b/src/index.html index abe507e10c..9ffb0e10f0 100644 --- a/src/index.html +++ b/src/index.html @@ -17,16 +17,32 @@ /> - +
+
+ +
+
- +
+
+ +
+
diff --git a/src/style.css b/src/style.css index a63fa10d43..e0d89bc47c 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,125 @@ -/* add styles here */ +@font-face { + font-family: Avenir; + src: url(./fonts/Avenir-Book.ttf); + font-weight: 300; +} + +.search { + margin-top: 20px; + position: relative; +} + +.search-bar_big { + height: 68px; + + display: flex; + position: relative; + + border: 1px solid rgba(225, 231, 237, 1); + box-shadow: 0 1px 8px 0 #3d4e611a; + border-radius: 4px; +} + +.search-bar_big:hover { + box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); +} + +.search-bar_big::after { + background-image: url('./images/Search.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + position: absolute; + height: 19px; + width: 19px; + top: 24px; + left: 25px; +} + +.search-bar_big__form { + position: relative; + left: 60px; + line-height: 21px; + + border: none; + + font-family: Avenir, sans-serif; + font-size: 16px; +} + +.search-bar_big__form:focus { + margin-top: 25px; + max-height: 22px; + + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); + background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); + + font-weight: bold; +} + +.search-bar_big__form:placeholder-shown { + max-height: 22px; + margin-top: 21px; +} + +.search-bar-big__form::placeholder { + font-size: 25px; +} + +input.search-bar_big__form { + font-weight: 500; + margin-bottom: 2px; +} + +.search-bar_small { + height: 40px; + margin-top: 8px; + + display: flex; + position: relative; + + border: 1px solid rgba(225, 231, 237, 1); + border-radius: 4px; + box-shadow: 0 1px 8px 0 #3d4e611a; +} + +.search-bar_small:hover { + box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); +} + +.search-bar_small::after { + background-image: url('./images/Search.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ''; + width: 11px; + height: 11px; + position: absolute; + top: 14px; + left: 12px; +} + +.search-bar_small__form { + position: relative; + left: 31px; + line-height: 19px; + border: none; + font-family: Avenir, sans-serif; + font-size: 14px; +} + +.search-bar_small__form:focus { + margin-top: 8px; + max-height: 22px; + + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); + background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); + font-weight: bold; +} + +input.search-bar_small__form { + font-weight: 500; + margin-bottom: 2px; +} From e4767bd60890c60af487d03361eaca7250035135 Mon Sep 17 00:00:00 2001 From: Grzegorz Date: Thu, 8 Aug 2024 18:29:51 +0200 Subject: [PATCH 2/4] Simplyfied name convention, removed outline --- src/index.html | 37 ++++++++++++++----------------------- src/style.css | 44 +++++++++++++++++--------------------------- 2 files changed, 31 insertions(+), 50 deletions(-) diff --git a/src/index.html b/src/index.html index 9ffb0e10f0..5aa2a1cca0 100644 --- a/src/index.html +++ b/src/index.html @@ -17,31 +17,22 @@ /> -
-
- -
+ +
-
-
- + +
diff --git a/src/style.css b/src/style.css index e0d89bc47c..744aee013e 100644 --- a/src/style.css +++ b/src/style.css @@ -9,22 +9,24 @@ position: relative; } -.search-bar_big { - height: 68px; +.search_big { + height: 70px; display: flex; + align-items: center; position: relative; + box-sizing: border-box; border: 1px solid rgba(225, 231, 237, 1); box-shadow: 0 1px 8px 0 #3d4e611a; border-radius: 4px; } -.search-bar_big:hover { +.search_big:hover { box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); } -.search-bar_big::after { +.search_big::after { background-image: url('./images/Search.svg'); background-position: center; background-repeat: no-repeat; @@ -37,18 +39,17 @@ left: 25px; } -.search-bar_big__form { +.search__input_big { position: relative; left: 60px; line-height: 21px; - border: none; font-family: Avenir, sans-serif; font-size: 16px; } -.search-bar_big__form:focus { +.search__input_big:focus { margin-top: 25px; max-height: 22px; @@ -56,23 +57,10 @@ background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); font-weight: bold; + outline: none; } -.search-bar_big__form:placeholder-shown { - max-height: 22px; - margin-top: 21px; -} - -.search-bar-big__form::placeholder { - font-size: 25px; -} - -input.search-bar_big__form { - font-weight: 500; - margin-bottom: 2px; -} - -.search-bar_small { +.search__small { height: 40px; margin-top: 8px; @@ -84,11 +72,11 @@ input.search-bar_big__form { box-shadow: 0 1px 8px 0 #3d4e611a; } -.search-bar_small:hover { +.search__small:hover { box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); } -.search-bar_small::after { +.search__small::after { background-image: url('./images/Search.svg'); background-position: center; background-repeat: no-repeat; @@ -101,7 +89,7 @@ input.search-bar_big__form { left: 12px; } -.search-bar_small__form { +.search__input_small { position: relative; left: 31px; line-height: 19px; @@ -110,16 +98,18 @@ input.search-bar_big__form { font-size: 14px; } -.search-bar_small__form:focus { +.search__input_small:focus { margin-top: 8px; max-height: 22px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); font-weight: bold; + + outline: none; } -input.search-bar_small__form { +input.search__input_small { font-weight: 500; margin-bottom: 2px; } From c01a8c546d6c117d87f78f94d02c2a88534d27fe Mon Sep 17 00:00:00 2001 From: Grzegorz Date: Thu, 15 Aug 2024 19:37:23 +0200 Subject: [PATCH 3/4] Final version --- src/index.html | 15 ++++++++----- src/style.css | 61 +++++++++++++++++++++----------------------------- 2 files changed, 36 insertions(+), 40 deletions(-) diff --git a/src/index.html b/src/index.html index 5aa2a1cca0..782ad4cbe5 100644 --- a/src/index.html +++ b/src/index.html @@ -17,23 +17,28 @@ /> -
+
-
+ -
diff --git a/src/style.css b/src/style.css index 744aee013e..a402106336 100644 --- a/src/style.css +++ b/src/style.css @@ -2,6 +2,7 @@ font-family: Avenir; src: url(./fonts/Avenir-Book.ttf); font-weight: 300; + color: rgba(61, 78, 97, 1); } .search { @@ -13,13 +14,8 @@ height: 70px; display: flex; - align-items: center; position: relative; box-sizing: border-box; - - border: 1px solid rgba(225, 231, 237, 1); - box-shadow: 0 1px 8px 0 #3d4e611a; - border-radius: 4px; } .search_big:hover { @@ -35,41 +31,39 @@ position: absolute; height: 19px; width: 19px; - top: 24px; - left: 25px; + top: 25px; + left: 26px; } .search__input_big { - position: relative; - left: 60px; + padding-left: 62px; + height: 100%; + width: 100%; line-height: 21px; - border: none; + outline: none; + box-sizing: border-box; + border: 1px solid rgba(225, 231, 237, 1); + border-radius: 4px; + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); font-family: Avenir, sans-serif; font-size: 16px; } .search__input_big:focus { - margin-top: 25px; - max-height: 22px; - box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); font-weight: bold; - outline: none; } .search__small { - height: 40px; - margin-top: 8px; + height: 42px; + margin-top: 20px; display: flex; position: relative; - - border: 1px solid rgba(225, 231, 237, 1); - border-radius: 4px; - box-shadow: 0 1px 8px 0 #3d4e611a; + box-sizing: border-box; } .search__small:hover { @@ -85,31 +79,28 @@ width: 11px; height: 11px; position: absolute; - top: 14px; - left: 12px; + top: 15px; + left: 13px; } .search__input_small { - position: relative; - left: 31px; + padding-left: 33px; + height: 100%; + width: 100%; line-height: 19px; - border: none; + outline: none; + box-sizing: border-box; + border: 1px solid rgba(225, 231, 237, 1); + border-radius: 4px; + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); + font-family: Avenir, sans-serif; font-size: 14px; } .search__input_small:focus { - margin-top: 8px; - max-height: 22px; - box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); - font-weight: bold; - - outline: none; -} -input.search__input_small { - font-weight: 500; - margin-bottom: 2px; + font-weight: bold; } From 4a21e6d29647a1eae11e0e20ee69a6ff9c10e513 Mon Sep 17 00:00:00 2001 From: Grzegorz Date: Sat, 17 Aug 2024 12:24:03 +0200 Subject: [PATCH 4/4] Improwing BEM --- src/index.html | 8 +++--- src/style.css | 73 +++++++++++++++++++------------------------------- 2 files changed, 32 insertions(+), 49 deletions(-) diff --git a/src/index.html b/src/index.html index 782ad4cbe5..e03de369c0 100644 --- a/src/index.html +++ b/src/index.html @@ -18,24 +18,24 @@
diff --git a/src/style.css b/src/style.css index a402106336..e896817ed5 100644 --- a/src/style.css +++ b/src/style.css @@ -7,49 +7,61 @@ .search { margin-top: 20px; - position: relative; -} - -.search_big { - height: 70px; display: flex; position: relative; box-sizing: border-box; } -.search_big:hover { - box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); -} - -.search_big::after { +.search::after { background-image: url('./images/Search.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; position: absolute; +} + +.search:hover { + box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); +} + +.search--big { + height: 70px; +} + +.search--big::after { height: 19px; width: 19px; top: 25px; left: 26px; } -.search__input_big { - padding-left: 62px; +.search__input { height: 100%; width: 100%; - line-height: 21px; + outline: none; box-sizing: border-box; + box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); border: 1px solid rgba(225, 231, 237, 1); border-radius: 4px; - box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); font-family: Avenir, sans-serif; +} + +.search__input--big { + padding-left: 62px; + line-height: 21px; font-size: 16px; } +.search__input--small { + padding-left: 33px; + line-height: 19px; + font-size: 14px; +} + .search__input_big:focus { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%); @@ -57,47 +69,18 @@ font-weight: bold; } -.search__small { +.search--small { height: 42px; margin-top: 20px; - - display: flex; - position: relative; - box-sizing: border-box; -} - -.search__small:hover { - box-shadow: 0 3px 8px 0 rgba(61, 78, 97, 0.2); } -.search__small::after { - background-image: url('./images/Search.svg'); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - content: ''; +.search--small::after { width: 11px; height: 11px; - position: absolute; top: 15px; left: 13px; } -.search__input_small { - padding-left: 33px; - height: 100%; - width: 100%; - line-height: 19px; - outline: none; - box-sizing: border-box; - border: 1px solid rgba(225, 231, 237, 1); - border-radius: 4px; - box-shadow: 0 1px 8px 0 rgba(61, 78, 97, 0.1); - - font-family: Avenir, sans-serif; - font-size: 14px; -} - .search__input_small:focus { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(180deg, #fff 0%, #f6f6f7 100%);