Sidemenucustom (#619)

* More space in sidemenu * Endrer stil på sidemeny * Endrer til å bruke padding for størrelse på subheadings
kartverket · Nov 7, 2023 · 1c19f1b · 1c19f1b
1 parent 1fda9b6
commit 1c19f1b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git a/apps/storybook/.storybook/docs-root.css b/apps/storybook/.storybook/docs-root.css
@@ -1,4 +1,3 @@
-
 /* Main container outside MDX files - removing border */
 div[role="main"] > :first-child {
   box-shadow: none;
@@ -11,22 +10,57 @@ div[role="main"] > :first-child {
   background-attachment: fixed;
 }
 
+#storybook-explorer-searchfield {
+  border-radius: 4px !important;
+}
+
 /* Sidebar */
 /* .container.sidebar-container {
 } */
 
+/* Sidebar item */
+.sidebar-item {
+  border-radius: 4px !important;
+  margin: 0 auto !important;
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  display: flex !important;
+  align-items: center !important;
+  width: 90% !important;
+}
+
+button.sidebar-item.sidebar-item {
+  height: 32.5px !important;
+  width: 90% !important;
+  margin: 0 auto !important;
+}
+
+/* Folder when open */
+.sidebar-item.sidebar-item:focus {
+  background: #e9f4ec !important;
+}
+
 /* Icons on sidebar */
 .sidebar-item.sidebar-item svg {
   color: #156630;
 }
 
-/* Sidebar item */
+/* Sidebar item on hover */
 .sidebar-item.sidebar-item[data-selected="false"]:hover,
 .sidebar-item.sidebar-item[data-nodetype="group"]:hover,
 .sidebar-item.sidebar-item[data-nodetype="component"]:hover {
   background: #e9f4ec !important;
 }
 
+/* Sidebar subheadings */
+.sidebar-subheading {
+  color: black !important;
+  margin: auto;
+  width: 90%;
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
+
 /* Color for searched term when searching */
 .search-result-item .search-result-item--label mark {
   color: #2472c4;
@@ -37,11 +71,6 @@ div[role="main"] > :first-child {
   color: #156630;
 }
 
-/* Folder when open */
-.sidebar-item.sidebar-item:focus {
-  background: #e9f4ec !important;
-}
-
 /* Canvas */
 .sbdocs.sbdocs-preview.sb-unstyled {
   box-shadow: none !important;
@@ -60,30 +89,29 @@ div[role="main"] > :first-child {
 
 /* Common properties for both Firefox and Chrome */
 input[type="range"]::-moz-range-thumb {
-  background: #1A833B;
+  background: #1a833b;
 }
 
 input[type="range"]::-webkit-slider-thumb {
-  background: #1A833B;
+  background: #1a833b;
 }
 
 /* Firefox specific hover effect */
 input[type="range"]::-moz-range-thumb:hover {
-  background:  #156630;
+  background: #156630;
 }
 
 /* Chrome specific hover effect */
 input[type="range"]::-webkit-slider-thumb:hover {
-  background:  #156630;
+  background: #156630;
 }
 
 /* Firefox specific hover effect */
 input[type="range"]::-moz-range-thumb:active {
-  background:  #156630;
+  background: #156630;
 }
 
 /* Chrome specific hover effect */
 input[type="range"]::-webkit-slider-thumb:active {
-  background:  #156630;
+  background: #156630;
 }
-
diff --git a/apps/storybook/.storybook/theme.js b/apps/storybook/.storybook/theme.js
@@ -14,7 +14,7 @@ export default create({
 
   //
   colorPrimary: "#D0ECD6",
-  colorSecondary: "#1A833B",
+  colorSecondary: "#156630",
 
   // UI
   appBg: "white",