diff --git a/video_xblock/static/css/studio-edit-accordion.css b/video_xblock/static/css/studio-edit-accordion.css new file mode 100644 index 00000000..df021eca --- /dev/null +++ b/video_xblock/static/css/studio-edit-accordion.css @@ -0,0 +1,43 @@ +/* Style the buttons that are used to open and close the accordion panel */ +.accordion-btn { + background-color: #eee; + border: none; + color: #444; + cursor: pointer; + padding: 18px; + text-align: left; + transition: 0.4s; + width: 100%; +} + +.accordion-btn::after { + content: '\002B'; + color: #777; + font-weight: bold; + float: right; + margin-left: 5px; +} + +.accordion-btn.active::after { + content: "\2212"; +} + +/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ +.accordion-btn.active, .accordion-btn:hover { + background-color: #009fe6; + color: #fff; +} + +/* Style the accordion panel. Note: hidden by default */ +.accordion-panel { + background-color: white; + border: 1px solid #009fe6; + display: none; + overflow: hidden; + padding: 0 18px; + transition: max-height 0.2s ease-out; +} + +.accordion-panel.active { + display: block; +}