Refactor styles in authoring extension

DigiKlausur · Dec 20, 2024 · ef18a49 · ef18a49
1 parent aca5ad1
commit ef18a49
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 59 deletions.
diff --git a/packages/authoring-celltoolbar-extension/style/base.css b/packages/authoring-celltoolbar-extension/style/base.css
@@ -4,60 +4,3 @@
   --e2x-dark-blue: #005d92;
   --e2x-gray: #eee;
 }
-
-.jp-Cell-header {
-  height: auto;
-}
-
-.e2x-authoring-celltoolbar {
-  border: 0.5px solid var(--e2x-blue);
-  border-radius: 5px;
-}
-
-.e2x-authoring-toolbar-standard-cell {
-  background: var(--e2x-gray);
-  color: black;
-}
-
-.e2x-authoring-toolbar-grading-cell {
-  background: var(--e2x-dark-blue);
-  color: white;
-}
-
-.e2x-authoring-toolbar {
-  margin-left: calc(
-    var(--jp-cell-prompt-width) + var(--jp-code-padding) + 3 *
-      var(--jp-border-width)
-  );
-  min-height: 30px;
-  width: calc(
-    100% -
-      calc(
-        var(--jp-cell-prompt-width) + var(--jp-code-padding) + 3 *
-          var(--jp-border-width)
-      )
-  );
-  border-radius: 10px 10px 0 0;
-  border-bottom: none;
-  padding: 2px 10px 2px 10px;
-}
-
-.e2x-authoring-toolbar .jp-InputGroup {
-  background: white;
-}
-
-.e2x-points-input {
-  width: 8em;
-}
-
-.e2x-authoring-toolbar-element {
-  margin-right: 10px;
-}
-
-.e2x-authoring-toolbar-element label {
-  margin-right: 5px;
-}
-
-#grading-cell-type {
-  background: white;
-}
diff --git a/packages/authoring-celltoolbar-extension/style/celltoolbar.css b/packages/authoring-celltoolbar-extension/style/celltoolbar.css
@@ -0,0 +1,51 @@
+.jp-Cell-header {
+  height: auto;
+}
+
+.e2x-authoring-toolbar-standard-cell {
+  background: var(--e2x-gray);
+  color: black;
+}
+
+.e2x-authoring-toolbar-grading-cell {
+  background: var(--e2x-dark-blue);
+  color: white;
+}
+
+.e2x-authoring-toolbar {
+  margin-left: calc(
+    var(--jp-cell-prompt-width) + var(--jp-code-padding) + 3 *
+      var(--jp-border-width)
+  );
+  min-height: 30px;
+  width: calc(
+    100% -
+      calc(
+        var(--jp-cell-prompt-width) + var(--jp-code-padding) + 3 *
+          var(--jp-border-width)
+      )
+  );
+  border-radius: 10px 10px 0 0;
+  border-bottom: none;
+  padding: 2px 10px;
+}
+
+.e2x-points-input {
+  width: 8em;
+}
+
+.e2x-authoring-toolbar-element {
+  margin-right: 10px;
+}
+
+.e2x-authoring-toolbar-element label {
+  margin-right: 5px;
+}
+
+.e2x-authoring-toolbar .jp-InputGroup {
+  background: white;
+}
+
+.e2x-authoring-toolbar-element .jp-HTMLSelect {
+  background: white;
+}
diff --git a/packages/authoring-celltoolbar-extension/style/index.css b/packages/authoring-celltoolbar-extension/style/index.css
@@ -1 +1,3 @@
-@import url('base.css');
+@import url('./base.css');
+@import url('./menubar.css');
+@import url('./celltoolbar.css');
diff --git a/packages/authoring-celltoolbar-extension/style/index.js b/packages/authoring-celltoolbar-extension/style/index.js
@@ -1 +1 @@
-import './base.css';
+import './index.css';
diff --git a/packages/authoring-celltoolbar-extension/style/menubar.css b/packages/authoring-celltoolbar-extension/style/menubar.css
@@ -0,0 +1,11 @@
+.e2x-menubar {
+  background: var(--e2x-blue);
+}
+
+.e2x-menubar:hover {
+  background: var(--e2x-light-blue);
+}
+
+.e2x-menubar .lm-mod-active {
+  background: var(--e2x-light-blue);
+}