diff --git a/web/assets/css/accordions.css b/web/assets/css/accordions.css new file mode 100644 index 0000000..f46ac5c --- /dev/null +++ b/web/assets/css/accordions.css @@ -0,0 +1,73 @@ +.editor__output-result { + list-style: none; + display: none; + flex-direction: column; + gap: 1rem; + position: absolute; + top: 0; + left: 0; + bottom: 0; + margin: 0; + padding: 1rem; + max-height: 370px; + width: 100%; + height: 100%; + background-color: #1d1f21; + overflow-y: auto; +} + +.editor__output-result .editor__output-result-accordion { + width: calc(100% - 4rem); + display: flex; + flex-direction: column; + gap: 10px; + padding: 1rem; + background-color: #25282c; + border-radius: 8px; + cursor: pointer; +} + +.editor__output-result .editor__output-result-accordion[data-open="false"] { + height: 24px; +} + +.editor__output-result .editor__output-result-accordion[data-open="true"] { + background-color: #33373d; + border: 1px solid #41464e; +} + +.editor__output-result .editor__output-result-accordion:hover { + background-color: #33373d; +} + +.editor__output-result-accordion .result-accordion-content { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} + +.editor__output-result-accordion .result-arrow { + transition: transform 300ms; +} + +.editor__output-result-accordion .result-accordion-expansible-content { + transition: max-height 400ms, visibility 50ms; +} + +.editor__output-result-accordion[data-open="false"] + .result-accordion-expansible-content { + max-height: 0; + visibility: hidden; +} + +.editor__output-result-accordion[data-open="true"] + .result-accordion-expansible-content { + max-height: 250px; + visibility: visible; +} + +.editor__output-result-accordion[data-open="true"] .result-arrow { + transform: rotate(90deg); +} diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css index 6840cb2..40bb363 100644 --- a/web/assets/css/styles.css +++ b/web/assets/css/styles.css @@ -367,80 +367,6 @@ a { width: 100%; } -.editor__output-holder .editor__output-result { - list-style: none; - display: none; - flex-direction: column; - gap: 1rem; - position: absolute; - top: 0; - left: 0; - bottom: 0; - margin: 0; - padding: 1rem; - max-height: 370px; - width: 100%; - height: 100%; - background-color: #1d1f21; - overflow-y: auto; -} - -.editor__output-result .editor__output-result-accordion { - width: calc(100% - 4rem); - display: flex; - flex-direction: column; - gap: 10px; - padding: 1rem; - background-color: #25282c; - border-radius: 8px; - cursor: pointer; -} - -.editor__output-result .editor__output-result-accordion[data-open="false"] { - height: 24px; -} - -.editor__output-result .editor__output-result-accordion[data-open="true"] { - background-color: #33373d; - border: 1px solid #41464e; -} - -.editor__output-result .editor__output-result-accordion:hover { - background-color: #33373d; -} - -.editor__output-result-accordion .result-accordion-content { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - position: relative; -} - -.editor__output-result-accordion .result-arrow { - transition: transform 300ms; -} - -.editor__output-result-accordion .result-accordion-expansible-content { - transition: max-height 400ms, visibility 50ms; -} - -.editor__output-result-accordion[data-open="false"] - .result-accordion-expansible-content { - max-height: 0; - visibility: hidden; -} - -.editor__output-result-accordion[data-open="true"] - .result-accordion-expansible-content { - max-height: 250px; - visibility: visible; -} - -.editor__output-result-accordion[data-open="true"] .result-arrow { - transform: rotate(90deg); -} - .editor > .editor__output::placeholder { color: #e1e7ea; } diff --git a/web/index.html b/web/index.html index 47f4cce..60fb6c8 100644 --- a/web/index.html +++ b/web/index.html @@ -24,6 +24,7 @@ +