FAQブロックの.not-nested-style修正前・修正後共通のCSSを統一するリファクタリング

xserver-inc · Apr 9, 2024 · 3600b56 · 3600b56
1 parent 6901968
commit 3600b56
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 255 deletions.
diff --git a/amp.css b/amp.css
@@ -7765,7 +7765,7 @@ div.fb-like-mobile {
   text-align: center;
   font-weight: 900;
   line-height: 50px;
-  min-width: 200px;
+  width: 100%;
   overflow: hidden;
 }
 .logo-menu-button img {
@@ -8578,80 +8578,56 @@ ul.timeline ul ul ul {
   color: var(--cocoon-custom-answer-color);
 }
 
+.is-style-square .faq-item-label {
+  font-size: 20px;
+  padding: 5px 8px;
+  height: 100%;
+}
+
 .is-style-accordion {
   padding: 0;
 }
-.is-style-accordion:not(.not-nested-style) .faq-question {
+.is-style-accordion .faq-question {
   padding: 0.5em;
   margin: 0;
   cursor: pointer;
   position: relative;
   background-color: #e8ecef;
   border-color: var(--cocoon-three-d-border-colors);
 }
-.is-style-accordion:not(.not-nested-style) .faq-question::before {
+.is-style-accordion .faq-question::before {
   content: "+";
   position: absolute;
   right: 1em;
   opacity: 0.5;
 }
-.is-style-accordion:not(.not-nested-style) .faq-question.active::before {
+.is-style-accordion .faq-question.active::before {
   content: "-";
 }
-.is-style-accordion:not(.not-nested-style) .faq-answer {
+.is-style-accordion .faq-answer {
   padding: 1em 0.5em;
 }
-.is-style-accordion:not(.not-nested-style).has-border-color .faq-question,
-.is-style-accordion:not(.not-nested-style).has-border-color .faq-question-label {
-  color: var(--cocoon-white-color);
+.is-style-accordion.has-border-color .faq-question {
   border: none;
 }
-
-.faq-wrap.not-nested-style {
-  background-color: var(--cocoon-custom-background-color) !important;
-  border-color: var(--cocoon-custom-border-color) !important;
-  color: var(--cocoon-custom-text-color);
+.is-style-accordion:not(.not-nested-style).has-border-color .faq-question {
+  color: var(--cocoon-white-color);
 }
 
 .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-item-label {
-  color: #fff !important;
+  color: #fff;
+}
+
+.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label {
   background-color: var(--cocoon-custom-question-color);
-  font-size: 20px;
-  padding: 5px 8px;
-  height: 100%;
 }
 
 .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label {
   background-color: var(--cocoon-custom-answer-color);
 }
 
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question {
-  padding: 0.5em;
-  margin: 0;
-  cursor: pointer;
-  position: relative;
-  background-color: #e8ecef;
-  border-color: var(--cocoon-three-d-border-colors);
-}
-
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question::before {
-  content: "+";
-  position: absolute;
-  right: 1em;
-  opacity: 0.5;
-}
-
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question.active::before {
-  content: "-";
-}
-
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-answer {
-  padding: 1em 0.5em;
-}
-
 .faq-wrap.is-style-accordion.has-border-color.not-nested-style > .faq > .faq-question {
   color: var(--cocoon-white-color);
-  border: none;
   background-color: var(--cocoon-custom-border-color);
 }
 

diff --git a/css/admin.css b/css/admin.css
@@ -7326,7 +7326,7 @@ body.wp-admin {
   text-align: center;
   font-weight: 900;
   line-height: 50px;
-  min-width: 200px;
+  width: 100%;
   overflow: hidden;
 }
 .admin-settings .demo .logo-menu-button img {
@@ -8013,72 +8013,51 @@ body.wp-admin {
 .admin-settings .demo .faq-answer-label {
   color: var(--cocoon-custom-answer-color);
 }
+.admin-settings .demo .is-style-square .faq-item-label {
+  font-size: 20px;
+  padding: 5px 8px;
+  height: 100%;
+}
 .admin-settings .demo .is-style-accordion {
   padding: 0;
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-question {
+.admin-settings .demo .is-style-accordion .faq-question {
   padding: 0.5em;
   margin: 0;
   cursor: pointer;
   position: relative;
   background-color: #e8ecef;
   border-color: var(--cocoon-three-d-border-colors);
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-question::before {
+.admin-settings .demo .is-style-accordion .faq-question::before {
   content: "+";
   position: absolute;
   right: 1em;
   opacity: 0.5;
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-question.active::before {
+.admin-settings .demo .is-style-accordion .faq-question.active::before {
   content: "-";
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-answer {
+.admin-settings .demo .is-style-accordion .faq-answer {
   padding: 1em 0.5em;
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style).has-border-color .faq-question,
-.admin-settings .demo .is-style-accordion:not(.not-nested-style).has-border-color .faq-question-label {
-  color: var(--cocoon-white-color);
+.admin-settings .demo .is-style-accordion.has-border-color .faq-question {
   border: none;
 }
-.admin-settings .demo .faq-wrap.not-nested-style {
-  background-color: var(--cocoon-custom-background-color) !important;
-  border-color: var(--cocoon-custom-border-color) !important;
-  color: var(--cocoon-custom-text-color);
+.admin-settings .demo .is-style-accordion:not(.not-nested-style).has-border-color .faq-question {
+  color: var(--cocoon-white-color);
 }
 .admin-settings .demo .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-item-label {
-  color: #fff !important;
+  color: #fff;
+}
+.admin-settings .demo .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label {
   background-color: var(--cocoon-custom-question-color);
-  font-size: 20px;
-  padding: 5px 8px;
-  height: 100%;
 }
 .admin-settings .demo .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label {
   background-color: var(--cocoon-custom-answer-color);
 }
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question {
-  padding: 0.5em;
-  margin: 0;
-  cursor: pointer;
-  position: relative;
-  background-color: #e8ecef;
-  border-color: var(--cocoon-three-d-border-colors);
-}
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question::before {
-  content: "+";
-  position: absolute;
-  right: 1em;
-  opacity: 0.5;
-}
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question.active::before {
-  content: "-";
-}
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-answer {
-  padding: 1em 0.5em;
-}
 .admin-settings .demo .faq-wrap.is-style-accordion.has-border-color.not-nested-style > .faq > .faq-question {
   color: var(--cocoon-white-color);
-  border: none;
   background-color: var(--cocoon-custom-border-color);
 }
 .admin-settings .demo .ribbon {
@@ -15787,7 +15766,7 @@ body.wp-admin {
   text-align: center;
   font-weight: 900;
   line-height: 50px;
-  min-width: 200px;
+  width: 100%;
   overflow: hidden;
 }
 .admin-settings .demo .logo-menu-button img {
@@ -16474,72 +16453,51 @@ body.wp-admin {
 .admin-settings .demo .faq-answer-label {
   color: var(--cocoon-custom-answer-color);
 }
+.admin-settings .demo .is-style-square .faq-item-label {
+  font-size: 20px;
+  padding: 5px 8px;
+  height: 100%;
+}
 .admin-settings .demo .is-style-accordion {
   padding: 0;
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-question {
+.admin-settings .demo .is-style-accordion .faq-question {
   padding: 0.5em;
   margin: 0;
   cursor: pointer;
   position: relative;
   background-color: #e8ecef;
   border-color: var(--cocoon-three-d-border-colors);
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-question::before {
+.admin-settings .demo .is-style-accordion .faq-question::before {
   content: "+";
   position: absolute;
   right: 1em;
   opacity: 0.5;
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-question.active::before {
+.admin-settings .demo .is-style-accordion .faq-question.active::before {
   content: "-";
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style) .faq-answer {
+.admin-settings .demo .is-style-accordion .faq-answer {
   padding: 1em 0.5em;
 }
-.admin-settings .demo .is-style-accordion:not(.not-nested-style).has-border-color .faq-question,
-.admin-settings .demo .is-style-accordion:not(.not-nested-style).has-border-color .faq-question-label {
-  color: var(--cocoon-white-color);
+.admin-settings .demo .is-style-accordion.has-border-color .faq-question {
   border: none;
 }
-.admin-settings .demo .faq-wrap.not-nested-style {
-  background-color: var(--cocoon-custom-background-color) !important;
-  border-color: var(--cocoon-custom-border-color) !important;
-  color: var(--cocoon-custom-text-color);
+.admin-settings .demo .is-style-accordion:not(.not-nested-style).has-border-color .faq-question {
+  color: var(--cocoon-white-color);
 }
 .admin-settings .demo .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-item-label {
-  color: #fff !important;
+  color: #fff;
+}
+.admin-settings .demo .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label {
   background-color: var(--cocoon-custom-question-color);
-  font-size: 20px;
-  padding: 5px 8px;
-  height: 100%;
 }
 .admin-settings .demo .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label {
   background-color: var(--cocoon-custom-answer-color);
 }
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question {
-  padding: 0.5em;
-  margin: 0;
-  cursor: pointer;
-  position: relative;
-  background-color: #e8ecef;
-  border-color: var(--cocoon-three-d-border-colors);
-}
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question::before {
-  content: "+";
-  position: absolute;
-  right: 1em;
-  opacity: 0.5;
-}
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question.active::before {
-  content: "-";
-}
-.admin-settings .demo .faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-answer {
-  padding: 1em 0.5em;
-}
 .admin-settings .demo .faq-wrap.is-style-accordion.has-border-color.not-nested-style > .faq > .faq-question {
   color: var(--cocoon-white-color);
-  border: none;
   background-color: var(--cocoon-custom-border-color);
 }
 .admin-settings .demo .ribbon {

diff --git a/css/gutenberg-editor.css b/css/gutenberg-editor.css
@@ -4190,80 +4190,56 @@ figcaption {
   color: var(--cocoon-custom-answer-color);
 }
 
+.is-style-square .faq-item-label {
+  font-size: 20px;
+  padding: 5px 8px;
+  height: 100%;
+}
+
 .is-style-accordion {
   padding: 0;
 }
-.is-style-accordion:not(.not-nested-style) .faq-question {
+.is-style-accordion .faq-question {
   padding: 0.5em;
   margin: 0;
   cursor: pointer;
   position: relative;
   background-color: #e8ecef;
   border-color: var(--cocoon-three-d-border-colors);
 }
-.is-style-accordion:not(.not-nested-style) .faq-question::before {
+.is-style-accordion .faq-question::before {
   content: "+";
   position: absolute;
   right: 1em;
   opacity: 0.5;
 }
-.is-style-accordion:not(.not-nested-style) .faq-question.active::before {
+.is-style-accordion .faq-question.active::before {
   content: "-";
 }
-.is-style-accordion:not(.not-nested-style) .faq-answer {
+.is-style-accordion .faq-answer {
   padding: 1em 0.5em;
 }
-.is-style-accordion:not(.not-nested-style).has-border-color .faq-question,
-.is-style-accordion:not(.not-nested-style).has-border-color .faq-question-label {
-  color: var(--cocoon-white-color);
+.is-style-accordion.has-border-color .faq-question {
   border: none;
 }
-
-.faq-wrap.not-nested-style {
-  background-color: var(--cocoon-custom-background-color) !important;
-  border-color: var(--cocoon-custom-border-color) !important;
-  color: var(--cocoon-custom-text-color);
+.is-style-accordion:not(.not-nested-style).has-border-color .faq-question {
+  color: var(--cocoon-white-color);
 }
 
 .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-item-label {
-  color: #fff !important;
+  color: #fff;
+}
+
+.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label {
   background-color: var(--cocoon-custom-question-color);
-  font-size: 20px;
-  padding: 5px 8px;
-  height: 100%;
 }
 
 .faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label {
   background-color: var(--cocoon-custom-answer-color);
 }
 
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question {
-  padding: 0.5em;
-  margin: 0;
-  cursor: pointer;
-  position: relative;
-  background-color: #e8ecef;
-  border-color: var(--cocoon-three-d-border-colors);
-}
-
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question::before {
-  content: "+";
-  position: absolute;
-  right: 1em;
-  opacity: 0.5;
-}
-
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-question.active::before {
-  content: "-";
-}
-
-.faq-wrap.is-style-accordion.not-nested-style > .faq > .faq-answer {
-  padding: 1em 0.5em;
-}
-
 .faq-wrap.is-style-accordion.has-border-color.not-nested-style > .faq > .faq-question {
   color: var(--cocoon-white-color);
-  border: none;
   background-color: var(--cocoon-custom-border-color);
 }