rc-1

frontend/source/components/layout/styles/SidebarItemIcon.css

@@ -0,0 +1,54 @@
+nav.layout-sidebar a.item-icon {
+    display: flex;
+    gap: 16px;
+    box-sizing: border-box;
+    padding: 12px 8px 12px 4px;
+    width: 100%;
+    text-decoration: none;
+}
+
+nav.layout-sidebar a.item-icon:hover,
+nav.layout-sidebar a.item-icon:focus-visible {
+    text-decoration: underline;
+}
+
+nav.layout-sidebar a.item-icon div.section-left {
+    flex-basis: 100%;
+}
+
+nav.layout-sidebar a.item-icon div.section-left span.header,
+nav.layout-sidebar a.item-icon div.section-left span.subheader {
+    font-size: 1em;
+    line-height: 1em;
+}
+
+/* nav.layout-sidebar a.item-icon div.section-left span.header {} */
+
+nav.layout-sidebar a.item-icon div.section-left span.subheader {
+    color: var(--font-color-secondary);
+}
+
+nav.layout-sidebar a.item-icon div.section-right {
+    display: grid;
+    align-items: center;
+    justify-items: center;
+}
+
+nav.layout-sidebar a.item-icon div.section-right div.background,
+nav.layout-sidebar a.item-icon div.section-right img.foreground {
+    grid-row: 1;
+    grid-column: 1;
+}
+
+nav.layout-sidebar a.item-icon div.section-right div.background {
+    transform: rotate(45deg);
+    background-color: var(--background-secondary);
+    width: 32px;
+    height: 32px;
+}
+
+nav.layout-sidebar a.item-icon div.section-right img.foreground {
+    z-index: 1;
+    width: 16px;
+    height: auto;
+}