Merge pull request #109 from EgorUlitin/landing-stylefix

update accordion style on landing page
hexlet-rus · Dec 12, 2022 · e3a0060 · e3a0060
2 parents 22715d4 + 4cbada4
commit e3a0060
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/app/assets/landing/styles/style.css b/app/assets/landing/styles/style.css
@@ -25,6 +25,48 @@ body {
   font-family: 'Onest', sans-serif;
 }
 
+.accordion {
+  --bs-accordion-bg: none;
+  --bs-accordion-color: white;
+  --bs-accordion-btn-color: white;
+  --bs-accordion-icon-color: #fff;
+  --bs-accordion-border-width: 0px;
+}
+
+.accordion-collapse {
+  margin-left: 35px;
+}
+
+.accordion-button:focus {
+  box-shadow: none;
+  border-color: rgba(0, 0, 0, 0);
+}
+
+.accordion-button:not(.collapsed) {
+  background-color: transparent;
+}
+
+.accordion-button:not(.collapsed)::before {
+  transform: var(--bs-accordion-btn-icon-transform);
+  background-image: var(--bs-accordion-btn-active-icon);
+}
+
+.accordion-button::before {
+  content: '';
+  flex-shrink: 0;
+  width: var(--bs-accordion-btn-icon-width);
+  height: var(--bs-accordion-btn-icon-width);
+  background-repeat: no-repeat;
+  background-size: var(--bs-accordion-btn-icon-width);
+  transition: var(--bs-accordion-btn-icon-transition);
+  margin-right: 15px;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+}
+
+.accordion-button::after {
+  display: none;
+}
+
 .btn-primary {
   --bs-btn-bg: var(--color-blue);
   --bs-btn-border-color: var(--color-blue);
@@ -151,4 +193,4 @@ body {
   top: 0;
   left: -40px;
   background: url('../images/checked.svg') no-repeat;
-}
+}
diff --git a/app/javascript/components/Faq.jsx b/app/javascript/components/Faq.jsx
@@ -11,7 +11,7 @@ export function Faq() {
       <div className="row">
         <h2 className="text-center h2 fw-bold mb-0">{t('faq.faq')}</h2>
       </div>
-      <Accordion flush>
+      <Accordion className="mt-40" flush>
         <Accordion.Item eventKey="0">
           <Accordion.Header>{t('faq.q0')}</Accordion.Header>
           <Accordion.Body>{t('faq.a0')}</Accordion.Body>

diff --git a/views/landing/modules/faq.pug b/views/landing/modules/faq.pug
@@ -1,6 +1,6 @@
 .row
     h2.text-center.h2.fw-bold.mb-0 FAQ
-.accordion.accordion-flush(id="accordionFlushExample")
+.accordion.accordion-flush.mt-40(id="accordionFlushExample")
     .accordion-item
         h2.accordion-header(id="flush-headingOne")
           button.accordion-button.collapsed.fs-4(type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne") Что такое IDE?