From be222643c25d6ad9141c291beba68a342d10d69b Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Wed, 6 Mar 2024 10:02:17 +0200 Subject: [PATCH 01/25] feat: add html structure --- blocks/fieldset/__title/fieldset__title.css | 0 components.html | 9 +++++++++ 2 files changed, 9 insertions(+) create mode 100644 blocks/fieldset/__title/fieldset__title.css diff --git a/blocks/fieldset/__title/fieldset__title.css b/blocks/fieldset/__title/fieldset__title.css new file mode 100644 index 00000000..e69de29b diff --git a/components.html b/components.html index 9efab1cc..ae152e3f 100644 --- a/components.html +++ b/components.html @@ -111,6 +111,15 @@

Section Intro

+
  • +

    Fieldset

    +

    A gray frame with a heading

    +
    +
    + С каким приложением путешествовали? +
    +
    +
    • From ddad635b923c258fb26c5623be77dc400282d361 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Wed, 6 Mar 2024 10:06:31 +0200 Subject: [PATCH 02/25] feat: add css structure --- blocks/fieldset/fieldset.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 blocks/fieldset/fieldset.css diff --git a/blocks/fieldset/fieldset.css b/blocks/fieldset/fieldset.css new file mode 100644 index 00000000..e69de29b From d41e35f4a6dd57003eae34eac3bda613ad473b9f Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Wed, 6 Mar 2024 10:10:38 +0200 Subject: [PATCH 03/25] feat: add styles for the fieldset.css file --- blocks/fieldset/fieldset.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/blocks/fieldset/fieldset.css b/blocks/fieldset/fieldset.css index e69de29b..206e523c 100644 --- a/blocks/fieldset/fieldset.css +++ b/blocks/fieldset/fieldset.css @@ -0,0 +1,10 @@ +.fieldset{ + border: rgb(229, 229, 229) solid 2px; + max-width: 431px; + width: 100%; +} +@media(max-width:1199px){ + .fieldset{ + max-width: 616px; + } +} \ No newline at end of file From b84fc1ef6938e3f2224217604cb3e70a32802675 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Wed, 6 Mar 2024 10:12:48 +0200 Subject: [PATCH 04/25] feat: add styles for the fieldset__title.css file --- blocks/fieldset/__title/fieldset__title.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/blocks/fieldset/__title/fieldset__title.css b/blocks/fieldset/__title/fieldset__title.css index e69de29b..ad9fa697 100644 --- a/blocks/fieldset/__title/fieldset__title.css +++ b/blocks/fieldset/__title/fieldset__title.css @@ -0,0 +1,7 @@ +.fieldset__title{ + color: rgb(210, 40, 86); + text-transform: uppercase; + font-size: 14px; + margin: 0 auto; + padding: 14px 25px; +} \ No newline at end of file From c25b60bc3b19c701c475d695e32970493e8a84c7 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Wed, 6 Mar 2024 10:16:45 +0200 Subject: [PATCH 05/25] feat:imported styles into components.css --- pages/components.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pages/components.css b/pages/components.css index a801d51d..c37b6c44 100644 --- a/pages/components.css +++ b/pages/components.css @@ -50,3 +50,7 @@ @import url(../blocks/section/__intro/_place/section__intro_place_gallery.css); @import url(../blocks/section/__intro/_place/section__intro_place_photo-editor.css); +/* Fieldset */ +@import url(../blocks/fieldset/fieldset.css); +@import url(../blocks/fieldset/__title/fieldset__title.css); + From 345c8fe1fac7a095511c6efd4b722ea1455980b8 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:19:56 +0200 Subject: [PATCH 06/25] fix:changed the html structure, names of classes and modifiers --- blocks/fieldset/__title/fieldset__title.css | 7 ------- blocks/fieldset/fieldset.css | 10 ---------- .../form-fieldset__legend_for_achievements.css | 0 .../_for/form-fieldset__legend_for_app-type.css | 0 .../form-fieldset__legend_for_contact-info.css | 0 .../form-fieldset__legend_for_impressions.css | 0 .../__legend/form-fieldset__legend.css | 0 .../_for/form-fieldset_for_achievements.css | 0 .../_for/form-fieldset_for_app-type.css | 0 .../_for/form-fieldset_for_contact-info.css | 0 .../_for/form-fieldset_for_impressions.css | 0 blocks/form-fieldset/form-fieldset.css | 0 components.html | 4 ++-- pages/components.css | 17 +++++++++++++---- 14 files changed, 15 insertions(+), 23 deletions(-) delete mode 100644 blocks/fieldset/__title/fieldset__title.css delete mode 100644 blocks/fieldset/fieldset.css create mode 100644 blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css create mode 100644 blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css create mode 100644 blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css create mode 100644 blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css create mode 100644 blocks/form-fieldset/__legend/form-fieldset__legend.css create mode 100644 blocks/form-fieldset/_for/form-fieldset_for_achievements.css create mode 100644 blocks/form-fieldset/_for/form-fieldset_for_app-type.css create mode 100644 blocks/form-fieldset/_for/form-fieldset_for_contact-info.css create mode 100644 blocks/form-fieldset/_for/form-fieldset_for_impressions.css create mode 100644 blocks/form-fieldset/form-fieldset.css diff --git a/blocks/fieldset/__title/fieldset__title.css b/blocks/fieldset/__title/fieldset__title.css deleted file mode 100644 index ad9fa697..00000000 --- a/blocks/fieldset/__title/fieldset__title.css +++ /dev/null @@ -1,7 +0,0 @@ -.fieldset__title{ - color: rgb(210, 40, 86); - text-transform: uppercase; - font-size: 14px; - margin: 0 auto; - padding: 14px 25px; -} \ No newline at end of file diff --git a/blocks/fieldset/fieldset.css b/blocks/fieldset/fieldset.css deleted file mode 100644 index 206e523c..00000000 --- a/blocks/fieldset/fieldset.css +++ /dev/null @@ -1,10 +0,0 @@ -.fieldset{ - border: rgb(229, 229, 229) solid 2px; - max-width: 431px; - width: 100%; -} -@media(max-width:1199px){ - .fieldset{ - max-width: 616px; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/__legend/form-fieldset__legend.css b/blocks/form-fieldset/__legend/form-fieldset__legend.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css new file mode 100644 index 00000000..e69de29b diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css new file mode 100644 index 00000000..e69de29b diff --git a/components.html b/components.html index ae152e3f..d01992c5 100644 --- a/components.html +++ b/components.html @@ -115,8 +115,8 @@

    Section Intro

    Fieldset

    A gray frame with a heading

    -
    - С каким приложением путешествовали? +
    + С каким приложением путешествовали?
    diff --git a/pages/components.css b/pages/components.css index c37b6c44..4959f108 100644 --- a/pages/components.css +++ b/pages/components.css @@ -50,7 +50,16 @@ @import url(../blocks/section/__intro/_place/section__intro_place_gallery.css); @import url(../blocks/section/__intro/_place/section__intro_place_photo-editor.css); -/* Fieldset */ -@import url(../blocks/fieldset/fieldset.css); -@import url(../blocks/fieldset/__title/fieldset__title.css); - +/* Form-fieldset */ +/* fieldset */ +@import url(../blocks/form-fieldset/form-fieldset.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_contact-info.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_app-type.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_achievements.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_impressions.css); +/* legend */ +@import url(../blocks/form-fieldset/__legend/form-fieldset__legend.css); +@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css); +@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css); +@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css); +@import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css); From 4b4d8a216ad688fffb4edbd3fa409761dbfcf0e4 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:23:17 +0200 Subject: [PATCH 07/25] feat: add styles for the form-fieldset__legend.css file --- .../form-fieldset/__legend/form-fieldset__legend.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/blocks/form-fieldset/__legend/form-fieldset__legend.css b/blocks/form-fieldset/__legend/form-fieldset__legend.css index e69de29b..797e35eb 100644 --- a/blocks/form-fieldset/__legend/form-fieldset__legend.css +++ b/blocks/form-fieldset/__legend/form-fieldset__legend.css @@ -0,0 +1,11 @@ +.form-fieldset__legend{ + color: rgb(210, 40, 86); + text-transform: uppercase; + font-size: 14px; + margin: 0 auto; +} +@media (max-width:659px){ + .form-fieldset__legend{ + text-align: center; + } +} \ No newline at end of file From b8b18d5a9489fc904c0010f0b1b2cdc26ccb46d9 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:24:20 +0200 Subject: [PATCH 08/25] feat: add styles for the form-fieldset.css file --- blocks/form-fieldset/form-fieldset.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index e69de29b..f366c820 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -0,0 +1,11 @@ + +.form-fieldset{ + border: rgb(229, 229, 229) solid 2px; + width: 100%; + box-sizing: border-box; +} +@media screen and (max-width:659px){ + .form-fieldset{ + border:0; + } +} \ No newline at end of file From 96b6643a0bcd883e9707381b8256aab0bd855b59 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:37:51 +0200 Subject: [PATCH 09/25] feat: add styles for form-fieldset__legend_for_impressions and form-fieldset_for_impressions modifiers --- .../_for/form-fieldset__legend_for_impressions.css | 3 +++ .../_for/form-fieldset_for_impressions.css | 13 +++++++++++++ blocks/form-fieldset/form-fieldset.css | 3 +-- components.html | 4 ++-- 4 files changed, 19 insertions(+), 4 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css index e69de29b..51d05bca 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css @@ -0,0 +1,3 @@ +.form-fieldset__legend_for_impressions{ + padding: 14px 38px; +} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css index e69de29b..861dc5d9 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css @@ -0,0 +1,13 @@ +.form-fieldset_for_impressions{ + padding: 44px 60px; +} +@media (max-width:1199px){ + .form-fieldset_for_impressions{ + padding: 47px 60px 53px 60px; + } +} +@media (max-width:659px){ + .form-fieldset_for_impressions{ + padding:0; + } +} \ No newline at end of file diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index f366c820..1620d48e 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -1,10 +1,9 @@ - .form-fieldset{ border: rgb(229, 229, 229) solid 2px; width: 100%; box-sizing: border-box; } -@media screen and (max-width:659px){ +@media (max-width:659px){ .form-fieldset{ border:0; } diff --git a/components.html b/components.html index d01992c5..249964e8 100644 --- a/components.html +++ b/components.html @@ -115,8 +115,8 @@

    Section Intro

    Fieldset

    A gray frame with a heading

    -
    - С каким приложением путешествовали? +
    + ОПИШИТЕ СВОИ ЭМОЦИИ
    From 37fbb7248757b8e6fa1314f0e768f6be0633bd68 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:46:45 +0200 Subject: [PATCH 10/25] feat: add styles for form-fieldset__legend_for_achievements and form-fieldset_for_achievements modifiers --- .../_for/form-fieldset__legend_for_achievements.css | 3 +++ .../_for/form-fieldset_for_achievements.css | 13 +++++++++++++ components.html | 4 ++-- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css index e69de29b..bc6a5f88 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css @@ -0,0 +1,3 @@ +.form-fieldset__legend_for_achievements{ + padding:14px 31px; +} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css index e69de29b..1b91b851 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css @@ -0,0 +1,13 @@ +.form-fieldset_for_achievements{ + padding:54px 66px; +} +@media (max-width:1199px){ + .form-fieldset_for_achievements{ + padding: 54px 60px; + } +} +@media (max-width:659px){ + .form-fieldset_for_achievements{ + padding:0; + } +} \ No newline at end of file diff --git a/components.html b/components.html index 249964e8..97bc5ba0 100644 --- a/components.html +++ b/components.html @@ -115,8 +115,8 @@

    Section Intro

    Fieldset

    A gray frame with a heading

    -
    - ОПИШИТЕ СВОИ ЭМОЦИИ +
    + Ваши безбашенные достижения в путешествии
    From 37da65421ee1107cd8f587198aa0de03bed55f2c Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:51:06 +0200 Subject: [PATCH 11/25] feat: add styles for form-fieldset__legend_for_contact-info and form-fieldset_for_contact-info modifiers --- .../_for/form-fieldset__legend_for_contact-info.css | 3 +++ .../_for/form-fieldset_for_contact-info.css | 13 +++++++++++++ components.html | 4 ++-- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css index e69de29b..4369f2c4 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css @@ -0,0 +1,3 @@ +.form-fieldset__legend_for_contact-info{ + padding: 14px 31px; +} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css index e69de29b..0bc51cd8 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css @@ -0,0 +1,13 @@ +.form-fieldset_for_contact-info{ + padding: 44px 62px 23px 60px; +} +@media (max-width:1199px) { + .form-fieldset_for_contact-info{ + padding: 46px 60px 37px; + } +} +@media (max-width:659px) { + .form-fieldset_for_contact-info{ + padding:0; + } +} \ No newline at end of file diff --git a/components.html b/components.html index 97bc5ba0..9172224f 100644 --- a/components.html +++ b/components.html @@ -115,8 +115,8 @@

    Section Intro

    Fieldset

    A gray frame with a heading

    -
    - Ваши безбашенные достижения в путешествии +
    + контактная информация
    From b83f3003223975c8843f4b085644bc5e99512253 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 09:54:17 +0200 Subject: [PATCH 12/25] feat: add styles for form-fieldset_for_app-type and form-fieldset__legend_for_app-type modifiers --- .../_for/form-fieldset__legend_for_app-type.css | 3 +++ .../_for/form-fieldset_for_app-type.css | 13 +++++++++++++ components.html | 4 ++-- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css index e69de29b..920e7b60 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css @@ -0,0 +1,3 @@ +.form-fieldset__legend_for_app-type{ + padding: 14px 25px; +} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css index e69de29b..94742c68 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css @@ -0,0 +1,13 @@ +.form-fieldset_for_app-type{ + padding: 54px 74px; +} +@media (max-width:1199px){ + .form-fieldset_for_app-type{ + padding: 54px 60px; + } +} +@media (max-width:659px){ + .form-fieldset_for_app-type{ + padding: 0px; + } +} \ No newline at end of file diff --git a/components.html b/components.html index 9172224f..d01992c5 100644 --- a/components.html +++ b/components.html @@ -115,8 +115,8 @@

    Section Intro

    Fieldset

    A gray frame with a heading

    -
    - контактная информация +
    + С каким приложением путешествовали?
    From c784d5e88dde5319fd8e9ff7989d01d49b153457 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 10:18:57 +0200 Subject: [PATCH 13/25] feat: added description to the element --- components.html | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/components.html b/components.html index d01992c5..a633f264 100644 --- a/components.html +++ b/components.html @@ -112,8 +112,23 @@

    Section Intro

  • -

    Fieldset

    -

    A gray frame with a heading

    +

    Form-fieldset

    +

    The Form-fieldset component follows the BEM naming. The base class for this component is form-fieldset. + The Form-fieldset component serves as a container for grouping related form controls. It provides a gray frame with a heading, aiding in structuring and organizing form elements. The heading inside the Fieldset, known as the form-fieldset__legend, helps users understand the purpose of the grouped form elements.

    +

    In addition to the mandatory base class form-fieldset, the fieldset element also uses modifiers:

    +
      +
    • form-fieldset_for_app-type
      • +
    • form-fieldset_for_contact-info
      • +
    • form-fieldset_for_impressions
      • +
    • form-fieldset_for_achievements
      • +
    +

    also, for the correct settings for the legend element with the base class form-fieldset__legend, the following modifiers are used:

    +
      +
    • form-fieldset__legend_for_app-type
      • +
    • form-fieldset__legend_for_contact-info
      • +
    • form-fieldset__legend_for_impressions
      • +
    • form-fieldset__legend_for_achievements
      • +
    С каким приложением путешествовали? From e06c952c2cf0530aafd581b0b52c2d7513c8f6aa Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 20:18:50 +0200 Subject: [PATCH 14/25] fix:set the margin of the form-fieldset element to zero --- blocks/form-fieldset/form-fieldset.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index 1620d48e..2d80280f 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -2,6 +2,7 @@ border: rgb(229, 229, 229) solid 2px; width: 100%; box-sizing: border-box; + margin: 0; } @media (max-width:659px){ .form-fieldset{ From b0bd4c45dc29ecf1579b06db1bb32a580f1551bc Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 12 Mar 2024 20:21:21 +0200 Subject: [PATCH 15/25] fix:added centering to the form-fieldset__legend element --- blocks/form-fieldset/__legend/form-fieldset__legend.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/form-fieldset/__legend/form-fieldset__legend.css b/blocks/form-fieldset/__legend/form-fieldset__legend.css index 797e35eb..d367af59 100644 --- a/blocks/form-fieldset/__legend/form-fieldset__legend.css +++ b/blocks/form-fieldset/__legend/form-fieldset__legend.css @@ -2,6 +2,7 @@ color: rgb(210, 40, 86); text-transform: uppercase; font-size: 14px; + text-align: center; margin: 0 auto; } @media (max-width:659px){ From a487e4ae351bebea3688e32341494ed9e0cc746b Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Wed, 20 Mar 2024 19:13:30 +0200 Subject: [PATCH 16/25] fix: changed legend positioning for desktop version --- .../__legend/_for/form-fieldset__legend_for_app-type.css | 8 +++++++- blocks/form-fieldset/form-fieldset.css | 3 ++- index.html | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css index 920e7b60..83711dfb 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css @@ -1,3 +1,9 @@ .form-fieldset__legend_for_app-type{ - padding: 14px 25px; + width: 370px; + padding: 0; + position: absolute; + background-color:rgb(255, 255, 255); + top: -9px; + left: 50%; + transform: translateX(-50%); } \ No newline at end of file diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index 2d80280f..e4bb61d0 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -3,9 +3,10 @@ width: 100%; box-sizing: border-box; margin: 0; + position: relative; } @media (max-width:659px){ .form-fieldset{ border:0; } -} \ No newline at end of file +} diff --git a/index.html b/index.html index 7646488c..57594db4 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@

    Взгляните на жизнь иначе!

    - Картинка таймера + Картинка таймера

    Эффект на 24 часа!

    From de14a905ccd31cf01ba3f3bcf35b2e2f4e3f3bb5 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Fri, 5 Apr 2024 14:12:37 +0300 Subject: [PATCH 17/25] fix: fixed legend behavior on phone versions on the _for_app-type modifier --- ...form-fieldset__legend_for_achievements.css | 22 ++++++++++++++++++- .../form-fieldset__legend_for_app-type.css | 20 ++++++++++++++--- .../_for/form-fieldset_for_achievements.css | 1 + .../_for/form-fieldset_for_app-type.css | 3 +++ .../_for/form-fieldset_for_personal-info.css | 5 +++++ blocks/form-fieldset/form-fieldset.css | 1 - components.html | 8 ++++--- pages/components.css | 1 + 8 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 blocks/form-fieldset/_for/form-fieldset_for_personal-info.css diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css index bc6a5f88..a7fea456 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css @@ -1,3 +1,23 @@ .form-fieldset__legend_for_achievements{ - padding:14px 31px; + padding: 0 25px; + background-color:rgb(255, 255, 255); + position: absolute; + top: -9px; + left: 50%; + transform: translateX(-50%); +} +/* @media screen and (max-width: 1199px) { + .form-fieldset__legend_for_achievements{ + padding: 0; + width: 370px; + } +} */ +@media screen and (max-width: 659px) { + .form-fieldset__legend_for_achievements{ + width: 100%; + position: static; + transform: none; + padding:42px 0 40px; + background-color:rgba(242, 242, 242, 1); + } } \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css index 83711dfb..e5003cfc 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css @@ -1,9 +1,23 @@ .form-fieldset__legend_for_app-type{ - width: 370px; - padding: 0; - position: absolute; + padding: 0 25px; background-color:rgb(255, 255, 255); + position: absolute; top: -9px; left: 50%; transform: translateX(-50%); +} +@media screen and (max-width: 1199px) { + .form-fieldset__legend_for_app-type{ + padding: 0; + width: 370px; + } +} +@media screen and (max-width: 659px) { + .form-fieldset__legend_for_app-type{ + width: 100%; + position: static; + transform: none; + padding:42px 0 40px; + background-color:rgba(242, 242, 242, 1); + } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css index 1b91b851..0b454c56 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css @@ -9,5 +9,6 @@ @media (max-width:659px){ .form-fieldset_for_achievements{ padding:0; + background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css index 94742c68..1fbe924c 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css @@ -1,5 +1,7 @@ .form-fieldset_for_app-type{ padding: 54px 74px; + display: flex; + flex-wrap: wrap; } @media (max-width:1199px){ .form-fieldset_for_app-type{ @@ -9,5 +11,6 @@ @media (max-width:659px){ .form-fieldset_for_app-type{ padding: 0px; + background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css b/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css new file mode 100644 index 00000000..725f82ec --- /dev/null +++ b/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css @@ -0,0 +1,5 @@ +.form-fieldset_for_personal-info{ + border: none; + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index e4bb61d0..b5db36fd 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -1,5 +1,4 @@ .form-fieldset{ - border: rgb(229, 229, 229) solid 2px; width: 100%; box-sizing: border-box; margin: 0; diff --git a/components.html b/components.html index a633f264..a52d954c 100644 --- a/components.html +++ b/components.html @@ -129,11 +129,13 @@

    Form-fieldset

  • form-fieldset__legend_for_impressions
  • form-fieldset__legend_for_achievements
    • -
    -
    - С каким приложением путешествовали? +
    +
    + Ваши безбашенные + достижения в путешествии
    +
    • diff --git a/pages/components.css b/pages/components.css index 4959f108..51cc8d6b 100644 --- a/pages/components.css +++ b/pages/components.css @@ -57,6 +57,7 @@ @import url(../blocks/form-fieldset/_for/form-fieldset_for_app-type.css); @import url(../blocks/form-fieldset/_for/form-fieldset_for_achievements.css); @import url(../blocks/form-fieldset/_for/form-fieldset_for_impressions.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_personal-info.css); /* legend */ @import url(../blocks/form-fieldset/__legend/form-fieldset__legend.css); @import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css); From e73d7bd240e96aa24a530b29b38e2994f2c8d1c5 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 9 Apr 2024 13:08:26 +0300 Subject: [PATCH 18/25] fix: added absolute positioning to the _achievements and _app-type modifier --- .../_for/form-fieldset__legend_for_achievements.css | 12 ++++++------ .../_for/form-fieldset__legend_for_app-type.css | 2 +- .../form-fieldset/__legend/form-fieldset__legend.css | 1 + .../_for/form-fieldset_for_achievements.css | 7 +++++-- .../_for/form-fieldset_for_app-type.css | 2 +- blocks/form-fieldset/form-fieldset.css | 1 + 6 files changed, 15 insertions(+), 10 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css index a7fea456..9606c9d7 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css @@ -1,23 +1,23 @@ .form-fieldset__legend_for_achievements{ - padding: 0 25px; + padding: 0 31px; background-color:rgb(255, 255, 255); position: absolute; top: -9px; left: 50%; transform: translateX(-50%); } -/* @media screen and (max-width: 1199px) { +@media screen and (max-width: 1199px) { .form-fieldset__legend_for_achievements{ - padding: 0; - width: 370px; + padding: 0 31px; + width: 470px; } -} */ +} @media screen and (max-width: 659px) { .form-fieldset__legend_for_achievements{ width: 100%; position: static; transform: none; - padding:42px 0 40px; + padding:42px 35px 44px; background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css index e5003cfc..26ed9cd8 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css @@ -17,7 +17,7 @@ width: 100%; position: static; transform: none; - padding:42px 0 40px; + padding:42px 20px 40px; background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/form-fieldset__legend.css b/blocks/form-fieldset/__legend/form-fieldset__legend.css index d367af59..a1cae499 100644 --- a/blocks/form-fieldset/__legend/form-fieldset__legend.css +++ b/blocks/form-fieldset/__legend/form-fieldset__legend.css @@ -4,6 +4,7 @@ font-size: 14px; text-align: center; margin: 0 auto; + letter-spacing: 0.2px; } @media (max-width:659px){ .form-fieldset__legend{ diff --git a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css index 0b454c56..7aa6ecf2 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css @@ -1,5 +1,8 @@ + .form-fieldset_for_achievements{ - padding:54px 66px; + padding: 54px 74px; + display: flex; + flex-wrap: wrap; } @media (max-width:1199px){ .form-fieldset_for_achievements{ @@ -8,7 +11,7 @@ } @media (max-width:659px){ .form-fieldset_for_achievements{ - padding:0; + padding: 0 0 42px; background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css index 1fbe924c..381423a6 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css @@ -10,7 +10,7 @@ } @media (max-width:659px){ .form-fieldset_for_app-type{ - padding: 0px; + padding: 0 0 42px; background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index b5db36fd..5a17f3e5 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -3,6 +3,7 @@ box-sizing: border-box; margin: 0; position: relative; + border: rgb(229, 229, 229) solid 2px; } @media (max-width:659px){ .form-fieldset{ From 21acb5bf2c77cc57bed08c4de50edb43012e9aa8 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Mon, 15 Apr 2024 11:26:27 +0300 Subject: [PATCH 19/25] fix: indentation in modifiers for the fieldset element --- .../_for/form-fieldset__legend_for_contact-info.css | 7 ++++++- .../_for/form-fieldset__legend_for_impressions.css | 7 ++++++- .../form-fieldset/_for/form-fieldset_for_contact-info.css | 4 ++-- .../form-fieldset/_for/form-fieldset_for_impressions.css | 4 ++-- components.html | 8 +++++--- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css index 4369f2c4..6955fefb 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css @@ -1,3 +1,8 @@ .form-fieldset__legend_for_contact-info{ - padding: 14px 31px; + padding: 0 31px; +} +@media (max-width:659px) { + .form-fieldset__legend_for_contact-info{ + display: none; + } } \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css index 51d05bca..18942a95 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css @@ -1,3 +1,8 @@ .form-fieldset__legend_for_impressions{ - padding: 14px 38px; + padding: 0 38px; +} +@media (max-width:1199px){ + .form-fieldset__legend_for_impressions{ + padding: 14px 38px; + } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css index 0bc51cd8..8cecfbb2 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css @@ -1,9 +1,9 @@ .form-fieldset_for_contact-info{ - padding: 44px 62px 23px 60px; + padding: 25px 62px 23px 62px; } @media (max-width:1199px) { .form-fieldset_for_contact-info{ - padding: 46px 60px 37px; + padding: 27px 60px 37px; } } @media (max-width:659px) { diff --git a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css index 861dc5d9..cb7b6551 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css @@ -1,9 +1,9 @@ .form-fieldset_for_impressions{ - padding: 44px 60px; + padding: 25px 60px; } @media (max-width:1199px){ .form-fieldset_for_impressions{ - padding: 47px 60px 53px 60px; + padding: 28px 60px 53px 60px; } } @media (max-width:659px){ diff --git a/components.html b/components.html index a52d954c..d278c795 100644 --- a/components.html +++ b/components.html @@ -128,11 +128,13 @@

    Form-fieldset

  • form-fieldset__legend_for_contact-info
  • form-fieldset__legend_for_impressions
  • form-fieldset__legend_for_achievements
    • +
  • form-fieldset_for_personal-info
    • +

    For the legend element in this form, the base class + visually-hidden is used

    -
    - Ваши безбашенные - достижения в путешествии +
    + С каким приложением + путешествовали?
    From fc2d97b27924daaafcdcb2a9c9e8b5710d6af272 Mon Sep 17 00:00:00 2001 From: rasokolovska Date: Tue, 23 Apr 2024 14:27:32 +0300 Subject: [PATCH 20/25] fix: corrected errors --- ...form-fieldset__legend_for_achievements.css | 26 +++++-------------- .../form-fieldset__legend_for_app-type.css | 25 +++++++----------- .../form-fieldset__legend_for_impressions.css | 7 ++--- .../__legend/form-fieldset__legend.css | 19 +++++++++----- .../_for/form-fieldset_for_achievements.css | 22 ++++++---------- .../_for/form-fieldset_for_app-type.css | 21 ++++++++------- .../_for/form-fieldset_for_contact-info.css | 18 +++++-------- .../_for/form-fieldset_for_impressions.css | 16 +++++------- .../_for/form-fieldset_for_personal-info.css | 9 ++++--- blocks/form-fieldset/form-fieldset.css | 16 +++++------- components.html | 4 +-- 11 files changed, 78 insertions(+), 105 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css index 9606c9d7..8b2de5fb 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css @@ -1,23 +1,9 @@ -.form-fieldset__legend_for_achievements{ - padding: 0 31px; - background-color:rgb(255, 255, 255); - position: absolute; - top: -9px; - left: 50%; - transform: translateX(-50%); -} -@media screen and (max-width: 1199px) { - .form-fieldset__legend_for_achievements{ - padding: 0 31px; - width: 470px; - } +.form-fieldset__legend_for_achievements { + padding: 0 31px; } @media screen and (max-width: 659px) { - .form-fieldset__legend_for_achievements{ - width: 100%; - position: static; - transform: none; - padding:42px 35px 44px; - background-color:rgba(242, 242, 242, 1); + .form-fieldset__legend_for_achievements { + top: 38px; + padding: 0; } -} \ No newline at end of file +} diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css index 26ed9cd8..2573af4b 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css @@ -1,23 +1,16 @@ -.form-fieldset__legend_for_app-type{ - padding: 0 25px; - background-color:rgb(255, 255, 255); +.form-fieldset__legend_for_app-type { position: absolute; - top: -9px; + top: -15px; left: 50%; transform: translateX(-50%); -} -@media screen and (max-width: 1199px) { - .form-fieldset__legend_for_app-type{ - padding: 0; - width: 370px; - } + width: max-content; + padding: 0 25px; + background-color:rgb(255, 255, 255); } @media screen and (max-width: 659px) { - .form-fieldset__legend_for_app-type{ - width: 100%; - position: static; - transform: none; - padding:42px 20px 40px; - background-color:rgba(242, 242, 242, 1); + .form-fieldset__legend_for_app-type { + top: 40px; + padding: 0; + background-color:rgb(242,242,242); } } \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css index 18942a95..f7c05c87 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css @@ -1,8 +1,9 @@ .form-fieldset__legend_for_impressions{ padding: 0 38px; } -@media (max-width:1199px){ - .form-fieldset__legend_for_impressions{ - padding: 14px 38px; +@media screen and (max-width: 659px) { + .form-fieldset__legend_for_impressions { + top: 34px; + padding: 0; } } \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/form-fieldset__legend.css b/blocks/form-fieldset/__legend/form-fieldset__legend.css index a1cae499..045de149 100644 --- a/blocks/form-fieldset/__legend/form-fieldset__legend.css +++ b/blocks/form-fieldset/__legend/form-fieldset__legend.css @@ -1,13 +1,20 @@ .form-fieldset__legend{ + margin: 0 auto; + font-size: 14px; + line-height: 30px; + letter-spacing: -.15px; color: rgb(210, 40, 86); text-transform: uppercase; - font-size: 14px; text-align: center; - margin: 0 auto; - letter-spacing: 0.2px; } -@media (max-width:659px){ - .form-fieldset__legend{ - text-align: center; +@media screen and (max-width: 659px) { + .form-fieldset__legend { + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 240px; + line-height: 18px; + letter-spacing: unset; } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css index 7aa6ecf2..8d7fcfe3 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css @@ -1,17 +1,11 @@ - -.form-fieldset_for_achievements{ - padding: 54px 74px; - display: flex; - flex-wrap: wrap; +.form-fieldset_for_achievements { + grid-area: achievements; + padding: 42px 60px 60px; } -@media (max-width:1199px){ - .form-fieldset_for_achievements{ - padding: 54px 60px; - } -} -@media (max-width:659px){ - .form-fieldset_for_achievements{ - padding: 0 0 42px; - background-color:rgba(242, 242, 242, 1); +@media screen and (max-width: 659px) { + .form-fieldset_for_achievements { + position: relative; + padding: 117px 20px 46px; + background-color: rgb(242, 242, 242); } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css index 381423a6..c954064c 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css @@ -1,16 +1,17 @@ -.form-fieldset_for_app-type{ - padding: 54px 74px; - display: flex; - flex-wrap: wrap; +.form-fieldset_for_app-type { + grid-area: app-type; + position: relative; + top: -3px; + padding: 59px 59px 56px; } -@media (max-width:1199px){ - .form-fieldset_for_app-type{ - padding: 54px 60px; +@media screen and (max-width: 1199px) { + .form-fieldset_for_app-type { + padding: 59px 45px 56px; } } -@media (max-width:659px){ - .form-fieldset_for_app-type{ - padding: 0 0 42px; +@media screen and (max-width: 659px) { + .form-fieldset_for_app-type { + padding: 116px 20px 46px; background-color:rgba(242, 242, 242, 1); } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css index 8cecfbb2..a891abc4 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css @@ -1,13 +1,9 @@ -.form-fieldset_for_contact-info{ - padding: 25px 62px 23px 62px; +.form-fieldset_for_contact-info { + grid-area: contact-info; + padding: 28px 58px 10px; } -@media (max-width:1199px) { - .form-fieldset_for_contact-info{ - padding: 27px 60px 37px; - } -} -@media (max-width:659px) { - .form-fieldset_for_contact-info{ - padding:0; - } +@media screen and (max-width: 659px) { + .form-fieldset_for_contact-info { + padding: 32px 20px 44px; + } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css index cb7b6551..cba3c984 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css @@ -1,13 +1,9 @@ -.form-fieldset_for_impressions{ - padding: 25px 60px; +.form-fieldset_for_impressions { + padding: 29px 60px 43px; } -@media (max-width:1199px){ - .form-fieldset_for_impressions{ - padding: 28px 60px 53px 60px; - } -} -@media (max-width:659px){ - .form-fieldset_for_impressions{ - padding:0; +@media screen and (max-width: 659px) { + .form-fieldset_for_impressions { + position: relative; + padding: 68px 20px 52px; } } \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css b/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css index 725f82ec..6a361d24 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css @@ -1,5 +1,8 @@ -.form-fieldset_for_personal-info{ +.form-fieldset_for_personal-info { border: none; - padding: 0; - margin: 0; +} +@media screen and (max-width: 659px) { + .form-fieldset_for_personal-info { + padding: 0 20px 44px; + } } \ No newline at end of file diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index 5a17f3e5..97090a20 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -1,12 +1,8 @@ -.form-fieldset{ - width: 100%; - box-sizing: border-box; - margin: 0; - position: relative; - border: rgb(229, 229, 229) solid 2px; -} -@media (max-width:659px){ - .form-fieldset{ - border:0; +.form-fieldset { + border: 2px solid rgb(229, 229, 229); } + +@media screen and (max-width: 659px) { + .form-fieldset { + border: none; } } diff --git a/components.html b/components.html index d278c795..e02fc6a8 100644 --- a/components.html +++ b/components.html @@ -132,8 +132,8 @@

    Form-fieldset

    For the legend element in this form, the base class + visually-hidden is used

    -
    - С каким приложением +
    + С каким приложением путешествовали?
    From d140ce036e30561698ab20159a3744fd811105ef Mon Sep 17 00:00:00 2001 From: Irina Naumchik Date: Tue, 23 Apr 2024 20:18:46 -0500 Subject: [PATCH 21/25] fix: reverts changes to index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 57594db4..7646488c 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@

    Взгляните на жизнь иначе!

    - Картинка таймера + Картинка таймера

    Эффект на 24 часа!

    From 8b753d71b9448b4ca6ed2b4745b13bec9b277b07 Mon Sep 17 00:00:00 2001 From: Irina Naumchik Date: Tue, 23 Apr 2024 20:44:58 -0500 Subject: [PATCH 22/25] style: ensures CSS formatting follows project code style --- ...form-fieldset__legend_for_achievements.css | 14 ++++---- .../form-fieldset__legend_for_app-type.css | 30 ++++++++-------- ...form-fieldset__legend_for_contact-info.css | 12 +++---- .../form-fieldset__legend_for_impressions.css | 14 ++++---- .../__legend/form-fieldset__legend.css | 36 +++++++++---------- .../_for/form-fieldset_for_achievements.css | 19 +++++----- .../_for/form-fieldset_for_app-type.css | 29 ++++++++------- .../_for/form-fieldset_for_contact-info.css | 15 ++++---- .../_for/form-fieldset_for_impressions.css | 16 ++++----- .../_for/form-fieldset_for_personal-info.css | 14 ++++---- blocks/form-fieldset/form-fieldset.css | 14 ++++---- 11 files changed, 105 insertions(+), 108 deletions(-) diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css index 8b2de5fb..9b54a7fb 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css @@ -1,9 +1,9 @@ -.form-fieldset__legend_for_achievements { - padding: 0 31px; +.form-fieldset__legend_for_achievements{ + padding: 0 31px; } -@media screen and (max-width: 659px) { - .form-fieldset__legend_for_achievements { - top: 38px; - padding: 0; - } +@media screen and (max-width: 659px){ + .form-fieldset__legend_for_achievements{ + top: 38px; + padding: 0; + } } diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css index 2573af4b..7ccaba35 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css @@ -1,16 +1,16 @@ -.form-fieldset__legend_for_app-type { - position: absolute; - top: -15px; - left: 50%; - transform: translateX(-50%); - width: max-content; - padding: 0 25px; - background-color:rgb(255, 255, 255); +.form-fieldset__legend_for_app-type{ + position: absolute; + top: -15px; + left: 50%; + transform: translateX(-50%); + width: max-content; + padding: 0 25px; + background-color: rgb(255, 255, 255); +} +@media screen and (max-width: 659px){ + .form-fieldset__legend_for_app-type{ + top: 40px; + padding: 0; + background-color: rgb(242, 242, 242); + } } -@media screen and (max-width: 659px) { - .form-fieldset__legend_for_app-type { - top: 40px; - padding: 0; - background-color:rgb(242,242,242); - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css index 6955fefb..566d3556 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css @@ -1,8 +1,8 @@ .form-fieldset__legend_for_contact-info{ - padding: 0 31px; + padding: 0 31px; +} +@media (max-width:659px){ + .form-fieldset__legend_for_contact-info{ + display: none; + } } -@media (max-width:659px) { - .form-fieldset__legend_for_contact-info{ - display: none; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css index f7c05c87..d77a50de 100644 --- a/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css +++ b/blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css @@ -1,9 +1,9 @@ .form-fieldset__legend_for_impressions{ - padding: 0 38px; + padding: 0 38px; +} +@media screen and (max-width: 659px){ + .form-fieldset__legend_for_impressions{ + top: 34px; + padding: 0; + } } -@media screen and (max-width: 659px) { - .form-fieldset__legend_for_impressions { - top: 34px; - padding: 0; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/__legend/form-fieldset__legend.css b/blocks/form-fieldset/__legend/form-fieldset__legend.css index 045de149..cf51ca16 100644 --- a/blocks/form-fieldset/__legend/form-fieldset__legend.css +++ b/blocks/form-fieldset/__legend/form-fieldset__legend.css @@ -1,20 +1,20 @@ .form-fieldset__legend{ - margin: 0 auto; - font-size: 14px; - line-height: 30px; - letter-spacing: -.15px; - color: rgb(210, 40, 86); - text-transform: uppercase; - text-align: center; + margin: 0 auto; + font-size: 14px; + line-height: 30px; + letter-spacing: -.15px; + color: rgb(210, 40, 86); + text-transform: uppercase; + text-align: center; +} +@media screen and (max-width: 659px){ + .form-fieldset__legend{ + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 240px; + line-height: 18px; + letter-spacing: unset; + } } -@media screen and (max-width: 659px) { - .form-fieldset__legend { - position: absolute; - left: 50%; - transform: translateX(-50%); - width: 100%; - max-width: 240px; - line-height: 18px; - letter-spacing: unset; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css index 8d7fcfe3..9590be26 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_achievements.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_achievements.css @@ -1,11 +1,10 @@ -.form-fieldset_for_achievements { - grid-area: achievements; - padding: 42px 60px 60px; +.form-fieldset_for_achievements{ + padding: 42px 60px 60px; +} +@media screen and (max-width: 659px){ + .form-fieldset_for_achievements{ + position: relative; + padding: 117px 20px 46px; + background-color: rgb(242, 242, 242); + } } -@media screen and (max-width: 659px) { - .form-fieldset_for_achievements { - position: relative; - padding: 117px 20px 46px; - background-color: rgb(242, 242, 242); - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css index c954064c..1e1c2500 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_app-type.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_app-type.css @@ -1,17 +1,16 @@ -.form-fieldset_for_app-type { - grid-area: app-type; - position: relative; - top: -3px; - padding: 59px 59px 56px; +.form-fieldset_for_app-type{ + position: relative; + top: -3px; + padding: 59px 59px 56px; } -@media screen and (max-width: 1199px) { - .form-fieldset_for_app-type { - padding: 59px 45px 56px; - } +@media screen and (max-width: 1199px){ + .form-fieldset_for_app-type{ + padding: 59px 45px 56px; + } +} +@media screen and (max-width: 659px){ + .form-fieldset_for_app-type{ + padding: 116px 20px 46px; + background-color: rgb(242, 242, 242); + } } -@media screen and (max-width: 659px) { - .form-fieldset_for_app-type { - padding: 116px 20px 46px; - background-color:rgba(242, 242, 242, 1); - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css index a891abc4..4ef0e907 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_contact-info.css @@ -1,9 +1,8 @@ -.form-fieldset_for_contact-info { - grid-area: contact-info; - padding: 28px 58px 10px; +.form-fieldset_for_contact-info{ + padding: 28px 58px 10px; +} +@media screen and (max-width: 659px){ + .form-fieldset_for_contact-info{ + padding: 32px 20px 44px; + } } -@media screen and (max-width: 659px) { - .form-fieldset_for_contact-info { - padding: 32px 20px 44px; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css index cba3c984..1095840f 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_impressions.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_impressions.css @@ -1,9 +1,9 @@ -.form-fieldset_for_impressions { - padding: 29px 60px 43px; +.form-fieldset_for_impressions{ + padding: 29px 60px 43px; +} +@media screen and (max-width: 659px){ + .form-fieldset_for_impressions{ + position: relative; + padding: 68px 20px 52px; + } } -@media screen and (max-width: 659px) { - .form-fieldset_for_impressions { - position: relative; - padding: 68px 20px 52px; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css b/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css index 6a361d24..0dd4b5b8 100644 --- a/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css +++ b/blocks/form-fieldset/_for/form-fieldset_for_personal-info.css @@ -1,8 +1,8 @@ -.form-fieldset_for_personal-info { - border: none; +.form-fieldset_for_personal-info{ + border: none; +} +@media screen and (max-width: 659px){ + .form-fieldset_for_personal-info{ + padding: 0 20px 44px; + } } -@media screen and (max-width: 659px) { - .form-fieldset_for_personal-info { - padding: 0 20px 44px; - } -} \ No newline at end of file diff --git a/blocks/form-fieldset/form-fieldset.css b/blocks/form-fieldset/form-fieldset.css index 97090a20..fbef33f8 100644 --- a/blocks/form-fieldset/form-fieldset.css +++ b/blocks/form-fieldset/form-fieldset.css @@ -1,8 +1,8 @@ -.form-fieldset { - border: 2px solid rgb(229, 229, 229); } - -@media screen and (max-width: 659px) { - .form-fieldset { - border: none; - } +.form-fieldset{ + border: 2px solid rgb(229, 229, 229); +} +@media screen and (max-width: 659px){ + .form-fieldset{ + border: none; + } } From a6cae232fae5273e6af42540515636900a40b7ca Mon Sep 17 00:00:00 2001 From: Irina Naumchik Date: Tue, 23 Apr 2024 20:54:11 -0500 Subject: [PATCH 23/25] fix: removes extra closing div tag, ensures proper indentation in components.html --- components.html | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/components.html b/components.html index e02fc6a8..3368c6e1 100644 --- a/components.html +++ b/components.html @@ -110,33 +110,32 @@

    Section Intro

    Видите, как не хватает ваших?

    - +

  • Form-fieldset

    The Form-fieldset component follows the BEM naming. The base class for this component is form-fieldset. - The Form-fieldset component serves as a container for grouping related form controls. It provides a gray frame with a heading, aiding in structuring and organizing form elements. The heading inside the Fieldset, known as the form-fieldset__legend, helps users understand the purpose of the grouped form elements.

    -

    In addition to the mandatory base class form-fieldset, the fieldset element also uses modifiers:

    -
      -
    • form-fieldset_for_app-type
      • -
    • form-fieldset_for_contact-info
      • -
    • form-fieldset_for_impressions
      • -
    • form-fieldset_for_achievements
      • -
    -

    also, for the correct settings for the legend element with the base class form-fieldset__legend, the following modifiers are used:

    -
      -
    • form-fieldset__legend_for_app-type
      • -
    • form-fieldset__legend_for_contact-info
      • -
    • form-fieldset__legend_for_impressions
      • -
    • form-fieldset__legend_for_achievements
      • -
    • form-fieldset_for_personal-info
      • -
    -

    For the legend element in this form, the base class + visually-hidden is used

    -
    -
    - С каким приложением - путешествовали? -
    -
    + The Form-fieldset component serves as a container for grouping related form controls. It provides a gray frame with a heading, aiding in structuring and organizing form elements. The heading inside the Fieldset, known as the form-fieldset__legend, helps users understand the purpose of the grouped form elements. +

    +

    In addition to the mandatory base class form-fieldset, the fieldset element also uses modifiers:

    +
      +
    • form-fieldset_for_app-type
      • +
    • form-fieldset_for_contact-info
      • +
    • form-fieldset_for_impressions
      • +
    • form-fieldset_for_achievements
      • +
    +

    also, for the correct settings for the legend element with the base class form-fieldset__legend, the following modifiers are used:

    +
      +
    • form-fieldset__legend_for_app-type
      • +
    • form-fieldset__legend_for_contact-info
      • +
    • form-fieldset__legend_for_impressions
      • +
    • form-fieldset__legend_for_achievements
      • +
    • form-fieldset_for_personal-info
      • +
    +

    For the legend element in this form, the base class + visually-hidden is used

    +
    +
    + С каким приложением путешествовали? +
    • From 896fbb99668d4f4b75a9dea9c96fd7da4790d94e Mon Sep 17 00:00:00 2001 From: Irina Naumchik Date: Tue, 23 Apr 2024 21:20:11 -0500 Subject: [PATCH 24/25] docs: improves Form Fieldset UI Component description --- components.html | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/components.html b/components.html index 3368c6e1..15aa3c02 100644 --- a/components.html +++ b/components.html @@ -112,29 +112,33 @@

    Section Intro

  • -

    Form-fieldset

    -

    The Form-fieldset component follows the BEM naming. The base class for this component is form-fieldset. - The Form-fieldset component serves as a container for grouping related form controls. It provides a gray frame with a heading, aiding in structuring and organizing form elements. The heading inside the Fieldset, known as the form-fieldset__legend, helps users understand the purpose of the grouped form elements. +

    Form Fieldset

    +

    + This component serves as a container for grouping related form controls, providing a gray frame with a heading to structure and organize form elements. + Heading element, identified by the form-fieldset__legend class, specifies the purpose of the grouped elements. +

    +

    + Base class for the block is form-fieldset. Along with the mandatory base class, it requires the corresponding modifier:

    -

    In addition to the mandatory base class form-fieldset, the fieldset element also uses modifiers:

      +
    • form-fieldset_for_personal-info
    • form-fieldset_for_app-type
    • form-fieldset_for_contact-info
      • -
    • form-fieldset_for_impressions
    • form-fieldset_for_achievements
      • +
    • form-fieldset_for_impressions
    -

    also, for the correct settings for the legend element with the base class form-fieldset__legend, the following modifiers are used:

    +

    + The correct settings for the legend element demand the base class form-fieldset__legend paired with the corresponding modifier: +

    • form-fieldset__legend_for_app-type
    • form-fieldset__legend_for_contact-info
      • -
    • form-fieldset__legend_for_impressions
    • form-fieldset__legend_for_achievements
      • -
    • form-fieldset_for_personal-info
      • +
    • form-fieldset__legend_for_impressions
    -

    For the legend element in this form, the base class + visually-hidden is used

    -
    +
    - С каким приложением путешествовали? + Ваши безбашенные достижения в путешествии
    • From c841f99439d2ec806e7b762997a273573da80db4 Mon Sep 17 00:00:00 2001 From: Irina Naumchik Date: Tue, 23 Apr 2024 21:25:02 -0500 Subject: [PATCH 25/25] style: updates components.css for formatting consistency, ensures visually-hidden mix imports the last --- pages/components.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/pages/components.css b/pages/components.css index 51cc8d6b..f7d6d03d 100644 --- a/pages/components.css +++ b/pages/components.css @@ -40,27 +40,25 @@ /* Textarea UI Component */ @import url(../blocks/textarea/textarea.css); -/* Visually Hidden Mix */ -@import url(../blocks/visually-hidden/visually-hidden.css); - -/* Section-intro Block*/ +/* Section Intro UI Component */ @import url(../blocks/section/__intro/section__intro.css); @import url(../blocks/section/section.css); @import url(../blocks/section/__intro/_place/section__intro_place_form.css); @import url(../blocks/section/__intro/_place/section__intro_place_gallery.css); @import url(../blocks/section/__intro/_place/section__intro_place_photo-editor.css); -/* Form-fieldset */ -/* fieldset */ +/* Form Fieldset UI Component */ @import url(../blocks/form-fieldset/form-fieldset.css); -@import url(../blocks/form-fieldset/_for/form-fieldset_for_contact-info.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_personal-info.css); @import url(../blocks/form-fieldset/_for/form-fieldset_for_app-type.css); +@import url(../blocks/form-fieldset/_for/form-fieldset_for_contact-info.css); @import url(../blocks/form-fieldset/_for/form-fieldset_for_achievements.css); @import url(../blocks/form-fieldset/_for/form-fieldset_for_impressions.css); -@import url(../blocks/form-fieldset/_for/form-fieldset_for_personal-info.css); -/* legend */ @import url(../blocks/form-fieldset/__legend/form-fieldset__legend.css); @import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_app-type.css); @import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_contact-info.css); @import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_achievements.css); @import url(../blocks/form-fieldset/__legend/_for/form-fieldset__legend_for_impressions.css); + +/* Visually Hidden Mix */ +@import url(../blocks/visually-hidden/visually-hidden.css);