PHP Classes

File: src/scss/style.scss

Recommend this page to a friend!
  Classes of Adeleye Ayodeji   WordPress FAQ Plugin Block Element   src/scss/style.scss   Download  
File: src/scss/style.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: WordPress FAQ Plugin Block Element
Show frequently asked questions in WordPress pages
Author: By
Last change:
Date: 8 months ago
Size: 2,664 bytes
 

Contents

Class file image Download
@import url("https://fonts.googleapis.com/css?family=Hind:300,400&display=swap"); $adeleye-faq-bg: #fff; $adeleye-faq-text: #7288a2; $adeleye-faq-gray: #4d5974; $adeleye-faq-lightgray: #e5e5e5; $adeleye-faq-blue: #03b5d2; .faq-block-element-for-wp-frontend { margin: 0; padding: 0; font-family: "Hind", sans-serif; background: $adeleye-faq-bg; color: $adeleye-faq-gray; display: flex; min-height: 100vh; * { box-sizing: border-box; &::before, &::after { box-sizing: border-box; } } .container { margin: 0 auto; padding: 4rem; width: 48rem; } .accordion { .accordion-item { border-bottom: 1px solid $adeleye-faq-lightgray; button[aria-expanded="true"] { border-bottom: 1px solid $adeleye-faq-blue; } } button { position: relative; display: block; text-align: left; width: 100%; padding: 1em 0; color: $adeleye-faq-text; font-size: 1.15rem; font-weight: 400; border: none; background: none; outline: none; &:hover, &:focus { cursor: pointer; color: $adeleye-faq-blue; &::after { cursor: pointer; color: $adeleye-faq-blue; border: 1px solid $adeleye-faq-blue; } } .accordion-title { padding: 1em 1.5em 1em 0; } .icon { display: inline-block; position: absolute; top: 18px; right: 0; width: 22px; height: 22px; border: 1px solid; border-radius: 22px; &::before { display: block; position: absolute; content: ""; top: 9px; left: 5px; width: 10px; height: 2px; background: currentColor; } &::after { display: block; position: absolute; content: ""; top: 5px; left: 9px; width: 2px; height: 10px; background: currentColor; } } } button[aria-expanded="true"] { color: $adeleye-faq-blue; .icon { &::after { width: 0; } } + .accordion-content { opacity: 1; max-height: 9em; transition: all 200ms linear; will-change: opacity, max-height; } } .accordion-content { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 200ms linear, max-height 200ms linear; will-change: opacity, max-height; p { font-size: 1rem; font-weight: 300; margin: 2em 0; } } } }