From 3600b56c15fa413fa5ba91572ffeb6819d3c3c3c Mon Sep 17 00:00:00 2001 From: yhira Date: Tue, 9 Apr 2024 19:19:21 +0900 Subject: [PATCH] =?UTF-8?q?FAQ=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=81=AE.not-nested-style=E4=BF=AE=E6=AD=A3=E5=89=8D=E3=83=BB?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=BE=8C=E5=85=B1=E9=80=9A=E3=81=AECSS?= =?UTF-8?q?=E3=82=92=E7=B5=B1=E4=B8=80=E3=81=99=E3=82=8B=E3=83=AA=E3=83=95?= =?UTF-8?q?=E3=82=A1=E3=82=AF=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- amp.css | 60 ++++++------------- css/admin.css | 106 ++++++++++----------------------- css/gutenberg-editor.css | 58 ++++++------------ scss/_faq.scss | 103 +++++++++++++++----------------- scss/_mobile-menu-buttons.scss | 2 +- style.css | 60 ++++++------------- 6 files changed, 134 insertions(+), 255 deletions(-) diff --git a/amp.css b/amp.css index fd6c71c47..fcc2f14c8 100644 --- 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,10 +8578,16 @@ 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; @@ -8589,69 +8595,39 @@ ul.timeline ul ul ul { 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 index f954dfda3..b3a820b0b 100644 --- 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,10 +8013,15 @@ 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; @@ -8024,61 +8029,35 @@ body.wp-admin { 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,10 +16453,15 @@ 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; @@ -16485,61 +16469,35 @@ body.wp-admin { 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 index efc442260..346dddf9a 100644 --- a/css/gutenberg-editor.css +++ b/css/gutenberg-editor.css @@ -4190,10 +4190,16 @@ 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; @@ -4201,69 +4207,39 @@ figcaption { 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/scss/_faq.scss b/scss/_faq.scss index ff1466c29..066add97d 100644 --- a/scss/_faq.scss +++ b/scss/_faq.scss @@ -58,84 +58,77 @@ 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; - &:not(.not-nested-style) { - - .faq-question{ - padding: .5em; - margin: 0; - cursor: pointer; - position: relative; - background-color: #e8ecef; - border-color: var(--cocoon-three-d-border-colors); - // align-items: center; - - &::before{ - content: "+"; - position: absolute; - right: 1em; - opacity: 0.5; - } + .faq-question{ + padding: .5em; + margin: 0; + cursor: pointer; + position: relative; + background-color: #e8ecef; + border-color: var(--cocoon-three-d-border-colors); + // align-items: center; + + &::before{ + content: "+"; + position: absolute; + right: 1em; + opacity: 0.5; + } - &.active::before{ - content: "-"; - } + &.active::before{ + content: "-"; } + } + + .faq-answer{ + padding: 1em .5em; + } - .faq-answer{ - padding: 1em .5em; + &.has-border-color{ + .faq-question{ + border: none; } + } + + &:not(.not-nested-style) { &.has-border-color{ - .faq-question, - .faq-question-label{ + .faq-question{ color: var(--cocoon-white-color); - 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); -} +//ブロックネスト時のスタイル .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: .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 .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); } \ No newline at end of file diff --git a/scss/_mobile-menu-buttons.scss b/scss/_mobile-menu-buttons.scss index 51a902df5..2c9c0f476 100644 --- a/scss/_mobile-menu-buttons.scss +++ b/scss/_mobile-menu-buttons.scss @@ -75,7 +75,7 @@ text-align: center; font-weight: 900; line-height: 50px; - min-width: 200px; + width: 100%; overflow: hidden; img { diff --git a/style.css b/style.css index e65c5f890..723e22cfd 100644 --- a/style.css +++ b/style.css @@ -7790,7 +7790,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 { @@ -8603,10 +8603,16 @@ 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; @@ -8614,69 +8620,39 @@ ul.timeline ul ul ul { 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); }