Add forgotten studio-edit-accordion.css (#258)

raccoongang · Jul 12, 2017 · b299d96 · b299d96
1 parent 85db242
commit b299d96
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/video_xblock/static/css/studio-edit-accordion.css 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;
+}