From 76066755171ab765c6819b8c1b3bca538fc3ac8e Mon Sep 17 00:00:00 2001 From: Mariia Date: Wed, 14 Aug 2024 14:12:48 +0300 Subject: [PATCH 1/3] add task solution --- readme.md | 4 +-- src/index.html | 55 +++++++++++++++++++++++++------- src/style.css | 1 - src/style/blocks/input.css | 50 +++++++++++++++++++++++++++++ src/style/blocks/main.css | 7 ++++ src/style/blocks/page.css | 17 ++++++++++ src/style/blocks/search-form.css | 43 +++++++++++++++++++++++++ src/style/blocks/search-icon.css | 16 ++++++++++ src/style/style.css | 5 +++ 9 files changed, 184 insertions(+), 14 deletions(-) delete mode 100644 src/style.css create mode 100644 src/style/blocks/input.css create mode 100644 src/style/blocks/main.css create mode 100644 src/style/blocks/page.css create mode 100644 src/style/blocks/search-form.css create mode 100644 src/style/blocks/search-icon.css create mode 100644 src/style/style.css diff --git a/readme.md b/readme.md index b635aa290b..f7112d4f2a 100644 --- a/readme.md +++ b/readme.md @@ -25,8 +25,8 @@ ___ ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_search-bar-airbnb/) -- [TEST REPORT LINK](https://.github.io/layout_search-bar-airbnb/report/html_report/) +- [DEMO LINK](https://hma-3.github.io/layout_search-bar-airbnb/) +- [TEST REPORT LINK](https://hma-3.github.io/layout_search-bar-airbnb/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index abe507e10c..a30807b456 100644 --- a/src/index.html +++ b/src/index.html @@ -2,31 +2,64 @@ + + + Document + + - +
+
+
+ - + +
+
+ +
+
+ + + +
+
+
diff --git a/src/style.css b/src/style.css deleted file mode 100644 index a63fa10d43..0000000000 --- a/src/style.css +++ /dev/null @@ -1 +0,0 @@ -/* add styles here */ diff --git a/src/style/blocks/input.css b/src/style/blocks/input.css new file mode 100644 index 0000000000..651816bf24 --- /dev/null +++ b/src/style/blocks/input.css @@ -0,0 +1,50 @@ +/* #region default */ +.search-form__input { + height: 100%; + width: 100%; + border: none; +} + +.search-form__input::placeholder { + color: #3d4e61; +} + +.search-form--large .search-form__input { + font-size: 16px; +} + +.search-form--small .search-form__input { + font-size: 14px; + font-weight: 400; +} + +/* #endregion */ + +/* #region focus */ +.search-form__input:focus { + outline: none; + font-weight: 900; + + background: linear-gradient(#fff, #f6f6f7); +} + +.search-form--large .search-form__input:focus { + text-shadow: 0 4px 4px #00000040; +} + +.search-form__input--small:focus { + text-shadow: none; +} + +.search-form--small .search-form__input:active { + text-shadow: none; +} + +/* #endregion */ + +/* #region hover */ +.search-form--small .search-form__input:hover { + text-shadow: none; +} + +/* #endregion */ diff --git a/src/style/blocks/main.css b/src/style/blocks/main.css new file mode 100644 index 0000000000..5f245fed5e --- /dev/null +++ b/src/style/blocks/main.css @@ -0,0 +1,7 @@ +.main { + margin: 0 8px; +} + +.main__form { + margin-top: 20px; +} diff --git a/src/style/blocks/page.css b/src/style/blocks/page.css new file mode 100644 index 0000000000..c467cf292f --- /dev/null +++ b/src/style/blocks/page.css @@ -0,0 +1,17 @@ +@font-face { + font-family: Avenir; + src: url(../../fonts/Avenir.ttc); +} + +html, +input { + font-family: Avenir, Arial, Helvetica, sans-serif; + color: #3d4e61; + font-weight: 300; +} + +body, +input { + margin: 0; + padding: 0; +} diff --git a/src/style/blocks/search-form.css b/src/style/blocks/search-form.css new file mode 100644 index 0000000000..54b9ce11fe --- /dev/null +++ b/src/style/blocks/search-form.css @@ -0,0 +1,43 @@ +/* #region default */ +.search-form { + display: flex; + box-sizing: border-box; + align-items: center; + + border: 1px solid #e1e7ed; + border-radius: 4px; + box-shadow: 0 1px 8px #3d4e611a; +} + +.search-form--large { + height: 70px; +} + +.search-form--small { + height: 42px; +} + +/* #endregion */ + +/* #region hover */ +.search-form--large:hover { + box-shadow: 0 4px 4px #00000040; +} + +.search-form--small:hover { + box-shadow: 0 3px 8px #3d4e6133; +} + +/* #endregion */ + +/* #region focus */ +.search-form--small:has(.search-form__input:focus) { + box-shadow: none; +} + +.search-form:has(.search-form__input:focus) { + background: linear-gradient(#fff, #f6f6f7); + box-shadow: 0 4px 4px #00000040; +} + +/* #endregion */ diff --git a/src/style/blocks/search-icon.css b/src/style/blocks/search-icon.css new file mode 100644 index 0000000000..eb1365c898 --- /dev/null +++ b/src/style/blocks/search-icon.css @@ -0,0 +1,16 @@ +.search-form__search-icon { + background: center no-repeat url(../../images/Search.svg); + background-size: cover; +} + +.search-form--large .search-form__search-icon { + min-height: 19px; + min-width: 19px; + margin: 0 17px 0 26px; +} + +.search-form--small .search-form__search-icon { + min-height: 11px; + min-width: 11px; + margin: 0 9px 0 13px; +} diff --git a/src/style/style.css b/src/style/style.css new file mode 100644 index 0000000000..a641af3885 --- /dev/null +++ b/src/style/style.css @@ -0,0 +1,5 @@ +@import 'blocks/page.css'; +@import 'blocks/main.css'; +@import 'blocks/search-form.css'; +@import 'blocks/search-icon.css'; +@import 'blocks/input.css'; From 9b37adf361ef00523ca62d579b7535911d99f836 Mon Sep 17 00:00:00 2001 From: Mariia Date: Wed, 14 Aug 2024 15:44:41 +0300 Subject: [PATCH 2/3] improved as directed by the mentor --- src/index.html | 8 +++---- src/style/blocks/input.css | 20 +++++++--------- src/style/blocks/page.css | 12 ++++++---- src/style/blocks/search-form.css | 41 +++++++++++++++++++++----------- src/style/blocks/search-icon.css | 16 ------------- src/style/style.css | 1 - src/style/variables.css | 9 +++++++ 7 files changed, 56 insertions(+), 51 deletions(-) delete mode 100644 src/style/blocks/search-icon.css create mode 100644 src/style/variables.css diff --git a/src/index.html b/src/index.html index a30807b456..a90dcd40da 100644 --- a/src/index.html +++ b/src/index.html @@ -30,14 +30,14 @@ > @@ -49,14 +49,14 @@ > diff --git a/src/style/blocks/input.css b/src/style/blocks/input.css index 651816bf24..89ac0c63a2 100644 --- a/src/style/blocks/input.css +++ b/src/style/blocks/input.css @@ -1,4 +1,5 @@ -/* #region default */ +@import '../variables.css'; + .search-form__input { height: 100%; width: 100%; @@ -6,7 +7,7 @@ } .search-form__input::placeholder { - color: #3d4e61; + color: var(--text-color); } .search-form--large .search-form__input { @@ -18,18 +19,18 @@ font-weight: 400; } -/* #endregion */ - -/* #region focus */ .search-form__input:focus { outline: none; font-weight: 900; - background: linear-gradient(#fff, #f6f6f7); + background: linear-gradient( + var(--first-gradient-form-color), + var(--second-gradient-form-color) + ); } .search-form--large .search-form__input:focus { - text-shadow: 0 4px 4px #00000040; + text-shadow: 0 4px 4px var(--box-shadow-dark-color); } .search-form__input--small:focus { @@ -40,11 +41,6 @@ text-shadow: none; } -/* #endregion */ - -/* #region hover */ .search-form--small .search-form__input:hover { text-shadow: none; } - -/* #endregion */ diff --git a/src/style/blocks/page.css b/src/style/blocks/page.css index c467cf292f..0d20b3bddb 100644 --- a/src/style/blocks/page.css +++ b/src/style/blocks/page.css @@ -1,17 +1,21 @@ +@import '../variables.css'; + @font-face { font-family: Avenir; src: url(../../fonts/Avenir.ttc); } html, -input { +.search-form__input { font-family: Avenir, Arial, Helvetica, sans-serif; - color: #3d4e61; + color: var(--text-color); font-weight: 300; } -body, -input { +body { margin: 0; +} + +.search-form__input { padding: 0; } diff --git a/src/style/blocks/search-form.css b/src/style/blocks/search-form.css index 54b9ce11fe..da5a7e05ab 100644 --- a/src/style/blocks/search-form.css +++ b/src/style/blocks/search-form.css @@ -1,12 +1,13 @@ -/* #region default */ +@import '../variables.css'; + .search-form { display: flex; box-sizing: border-box; align-items: center; - border: 1px solid #e1e7ed; + border: 1px solid var(--border-color); border-radius: 4px; - box-shadow: 0 1px 8px #3d4e611a; + box-shadow: 0 1px 8px var(--box-shadow-light-color); } .search-form--large { @@ -17,27 +18,39 @@ height: 42px; } -/* #endregion */ - -/* #region hover */ .search-form--large:hover { - box-shadow: 0 4px 4px #00000040; + box-shadow: 0 4px 4px var(--box-shadow-dark-color); } .search-form--small:hover { - box-shadow: 0 3px 8px #3d4e6133; + box-shadow: 0 3px 8px var(--box-shadow-darker-color); } -/* #endregion */ - -/* #region focus */ .search-form--small:has(.search-form__input:focus) { box-shadow: none; } .search-form:has(.search-form__input:focus) { - background: linear-gradient(#fff, #f6f6f7); - box-shadow: 0 4px 4px #00000040; + background: linear-gradient( + var(--first-gradient-form-color), + var(--second-gradient-form-color) + ); + box-shadow: 0 4px 4px var(--box-shadow-dark-color); +} + +.search-form__search-icon { + background: center no-repeat url(../../images/Search.svg); + background-size: cover; +} + +.search-form--large .search-form__search-icon { + min-height: 19px; + min-width: 19px; + margin: 0 17px 0 26px; } -/* #endregion */ +.search-form--small .search-form__search-icon { + min-height: 11px; + min-width: 11px; + margin: 0 9px 0 13px; +} diff --git a/src/style/blocks/search-icon.css b/src/style/blocks/search-icon.css deleted file mode 100644 index eb1365c898..0000000000 --- a/src/style/blocks/search-icon.css +++ /dev/null @@ -1,16 +0,0 @@ -.search-form__search-icon { - background: center no-repeat url(../../images/Search.svg); - background-size: cover; -} - -.search-form--large .search-form__search-icon { - min-height: 19px; - min-width: 19px; - margin: 0 17px 0 26px; -} - -.search-form--small .search-form__search-icon { - min-height: 11px; - min-width: 11px; - margin: 0 9px 0 13px; -} diff --git a/src/style/style.css b/src/style/style.css index a641af3885..ff8b97c4a0 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -1,5 +1,4 @@ @import 'blocks/page.css'; @import 'blocks/main.css'; @import 'blocks/search-form.css'; -@import 'blocks/search-icon.css'; @import 'blocks/input.css'; diff --git a/src/style/variables.css b/src/style/variables.css new file mode 100644 index 0000000000..b3e06a3950 --- /dev/null +++ b/src/style/variables.css @@ -0,0 +1,9 @@ +html { + --text-color: #3d4e61; + --border-color: #e1e7ed; + --box-shadow-light-color: #3d4e611a; + --box-shadow-darker-color: #3d4e6133; + --box-shadow-dark-color: #00000040; + --first-gradient-form-color: #fff; + --second-gradient-form-color: #f6f6f7; +} From 818f1cabcfa7b4f3e47878638ac8244001e2cec1 Mon Sep 17 00:00:00 2001 From: Mariia Date: Sat, 17 Aug 2024 14:46:13 +0300 Subject: [PATCH 3/3] fixed --- src/index.html | 12 ++--- .../{blocks/page.css => base/normalize.css} | 16 ++---- src/style/base/reset.css | 3 ++ src/style/blocks/input.css | 29 +++-------- src/style/blocks/search-form.css | 52 ++++++++----------- src/style/style.css | 4 +- src/style/utils/variables.css | 11 ++++ src/style/variables.css | 9 ---- 8 files changed, 57 insertions(+), 79 deletions(-) rename src/style/{blocks/page.css => base/normalize.css} (62%) create mode 100644 src/style/base/reset.css create mode 100644 src/style/utils/variables.css delete mode 100644 src/style/variables.css diff --git a/src/index.html b/src/index.html index a90dcd40da..09d9606e68 100644 --- a/src/index.html +++ b/src/index.html @@ -28,16 +28,16 @@ class="search-form search-form--large" data-qa="big" > - + class="search-form__search-icon search-form__search-icon--large" + > @@ -49,14 +49,14 @@ > diff --git a/src/style/blocks/page.css b/src/style/base/normalize.css similarity index 62% rename from src/style/blocks/page.css rename to src/style/base/normalize.css index 0d20b3bddb..68e02d7923 100644 --- a/src/style/blocks/page.css +++ b/src/style/base/normalize.css @@ -1,21 +1,15 @@ -@import '../variables.css'; - @font-face { font-family: Avenir; src: url(../../fonts/Avenir.ttc); } +* { + box-sizing: border-box; +} + html, -.search-form__input { +input { font-family: Avenir, Arial, Helvetica, sans-serif; color: var(--text-color); font-weight: 300; } - -body { - margin: 0; -} - -.search-form__input { - padding: 0; -} diff --git a/src/style/base/reset.css b/src/style/base/reset.css new file mode 100644 index 0000000000..293d3b1f13 --- /dev/null +++ b/src/style/base/reset.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} diff --git a/src/style/blocks/input.css b/src/style/blocks/input.css index 89ac0c63a2..4cb9997302 100644 --- a/src/style/blocks/input.css +++ b/src/style/blocks/input.css @@ -1,22 +1,19 @@ -@import '../variables.css'; - .search-form__input { height: 100%; width: 100%; + padding: 0; + + font-size: 16px; + border: none; } .search-form__input::placeholder { - color: var(--text-color); -} - -.search-form--large .search-form__input { - font-size: 16px; + color: inherit; } -.search-form--small .search-form__input { +.search-form__input--small { font-size: 14px; - font-weight: 400; } .search-form__input:focus { @@ -29,18 +26,6 @@ ); } -.search-form--large .search-form__input:focus { +.search-form__input--large:focus { text-shadow: 0 4px 4px var(--box-shadow-dark-color); } - -.search-form__input--small:focus { - text-shadow: none; -} - -.search-form--small .search-form__input:active { - text-shadow: none; -} - -.search-form--small .search-form__input:hover { - text-shadow: none; -} diff --git a/src/style/blocks/search-form.css b/src/style/blocks/search-form.css index da5a7e05ab..44b98777a2 100644 --- a/src/style/blocks/search-form.css +++ b/src/style/blocks/search-form.css @@ -1,29 +1,39 @@ -@import '../variables.css'; - .search-form { display: flex; - box-sizing: border-box; align-items: center; + height: 70px; - border: 1px solid var(--border-color); + border: 1px solid var(--box-border-color); border-radius: 4px; - box-shadow: 0 1px 8px var(--box-shadow-light-color); -} - -.search-form--large { - height: 70px; + box-shadow: 0 1px 8px var(--box-shadow-color); } .search-form--small { height: 42px; } -.search-form--large:hover { - box-shadow: 0 4px 4px var(--box-shadow-dark-color); +.search-form__search-icon { + height: var(--icon-large-size); + min-width: var(--icon-large-size); + margin: 0 17px 0 26px; + + background: center no-repeat url(../../images/Search.svg); + background-size: cover; +} + +.search-form__search-icon--small { + height: var(--icon-small-size); + min-width: var(--icon-small-size); + margin: 0 9px 0 13px; +} + +.search-form--large:hover, +.search-form:has(.search-form__input--large:focus) { + box-shadow: 0 4px 4px var(--box-large-hover-shadow-color); } .search-form--small:hover { - box-shadow: 0 3px 8px var(--box-shadow-darker-color); + box-shadow: 0 3px 8px var(--box-small-hover-shadow-color); } .search-form--small:has(.search-form__input:focus) { @@ -35,22 +45,4 @@ var(--first-gradient-form-color), var(--second-gradient-form-color) ); - box-shadow: 0 4px 4px var(--box-shadow-dark-color); -} - -.search-form__search-icon { - background: center no-repeat url(../../images/Search.svg); - background-size: cover; -} - -.search-form--large .search-form__search-icon { - min-height: 19px; - min-width: 19px; - margin: 0 17px 0 26px; -} - -.search-form--small .search-form__search-icon { - min-height: 11px; - min-width: 11px; - margin: 0 9px 0 13px; } diff --git a/src/style/style.css b/src/style/style.css index ff8b97c4a0..ca68706a80 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -1,4 +1,6 @@ -@import 'blocks/page.css'; +@import 'utils/variables.css'; +@import 'base/normalize.css'; +@import 'base/reset.css'; @import 'blocks/main.css'; @import 'blocks/search-form.css'; @import 'blocks/input.css'; diff --git a/src/style/utils/variables.css b/src/style/utils/variables.css new file mode 100644 index 0000000000..7caa3bb5d8 --- /dev/null +++ b/src/style/utils/variables.css @@ -0,0 +1,11 @@ +html { + --text-color: #3d4e61; + --box-border-color: #e1e7ed; + --box-shadow-color: #3d4e611a; + --box-large-hover-shadow-color: #00000040; + --box-small-hover-shadow-color: #3d4e6133; + --first-gradient-form-color: #fff; + --second-gradient-form-color: #f6f6f7; + --icon-large-size: 19px; + --icon-small-size: 11px; +} diff --git a/src/style/variables.css b/src/style/variables.css deleted file mode 100644 index b3e06a3950..0000000000 --- a/src/style/variables.css +++ /dev/null @@ -1,9 +0,0 @@ -html { - --text-color: #3d4e61; - --border-color: #e1e7ed; - --box-shadow-light-color: #3d4e611a; - --box-shadow-darker-color: #3d4e6133; - --box-shadow-dark-color: #00000040; - --first-gradient-form-color: #fff; - --second-gradient-form-color: #f6f6f7; -}