aril 0.0.21 → 0.0.22

package/theme/styles/layout/_sidebar_reveal.scss

@@ -1,201 +1,201 @@
-@media screen and (min-width: $breakpoint) {
-	.layout-container {
-		&.layout-reveal {
-			.layout-topbar {
-				.topbar-menubutton {
-					display: none;
-				}
-			}
-
-			.layout-sidebar {
-				height: 100%;
-				top: 0;
-				transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
-				transform: translateX(-14.75rem);
-				z-index: 999;
-
-				.sidebar-header {
-					display: flex;
-					justify-content: flex-end;
-					align-items: center;
-					gap: 1rem;
-					padding: 1.5rem 1rem;
-
-					.app-logo {
-						.app-logo-small {
-							display: inline;
-							order: 1;
-						}
-
-						.app-logo-normal {
-							display: none;
-						}
-					}
-
-					.layout-sidebar-anchor {
-						display: none;
-						width: 1.25rem;
-						height: 1.25rem;
-						border-radius: 50%;
-						border: 2px solid var(--logo-color);
-						background-color: transparent;
-						transition:
-							background-color var(--transition-duration),
-							transform 0.3s;
-					}
-				}
-				.layout-menu-container {
-					overflow: hidden;
-				}
-
-				.layout-menu {
-					.layout-root-menuitem {
-						> .layout-menuitem-root-text {
-							> span {
-								margin-right: auto;
-							}
-
-							> .layout-menuitem-root-icon {
-								display: block;
-								margin-right: 0.125rem;
-							}
-						}
-					}
-
-					ul {
-						margin: 0;
-						padding: 0;
-						list-style-type: none;
-
-						a {
-							padding: 0.75rem 1rem;
-
-							.layout-menuitem-text {
-								order: 1;
-								margin-right: auto;
-							}
-
-							.layout-submenu-toggler {
-								order: 2;
-								display: none;
-								margin-right: 0.5rem;
-							}
-
-							.layout-menuitem-icon {
-								order: 3;
-								margin-right: 0;
-								font-size: 1.25rem;
-								width: auto;
-							}
-						}
-					}
-				}
-			}
-
-			&.layout-reveal {
-				.layout-content-wrapper {
-					margin-left: 4.25rem;
-					transition: margin-left 0.3s cubic-bezier(0, 0, 0.2, 1);
-				}
-			}
-
-			&.layout-sidebar-active {
-				.layout-sidebar {
-					transform: translateX(0);
-					.layout-menu-container {
-						overflow: auto;
-					}
-					.sidebar-header {
-						padding: 1.5rem 2rem;
-						justify-content: space-between;
-						.app-logo {
-							.app-logo-normal {
-								display: inline;
-							}
-
-							.app-logo-small {
-								display: none;
-							}
-						}
-						.layout-sidebar-anchor {
-							display: block;
-							animation: px-fadein 0.15s linear;
-						}
-					}
-
-					.layout-menu {
-						.layout-root-menuitem {
-							> .layout-menuitem-root-text {
-								> .layout-menuitem-root-icon {
-									display: none;
-								}
-							}
-						}
-
-						ul {
-							a {
-								padding: 0.5rem 2rem;
-
-								.layout-submenu-toggler {
-									display: block;
-								}
-							}
-							ul {
-								overflow: hidden;
-								border-radius: var(--border-radius);
-
-								li {
-									a {
-										padding-left: 2.5rem;
-									}
-
-									li {
-										a {
-											padding-left: 3rem;
-										}
-
-										li {
-											a {
-												padding-left: 3.5rem;
-											}
-
-											li {
-												a {
-													padding-left: 4rem;
-												}
-
-												li {
-													a {
-														padding-left: 5.5rem;
-													}
-
-													li {
-														a {
-															padding-left: 5rem;
-														}
-													}
-												}
-											}
-										}
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-
-			&.layout-sidebar-anchored {
-				.sidebar-header {
-					.layout-sidebar-anchor {
-						background-color: var(--logo-color);
-					}
-				}
-
-				.layout-content-wrapper {
-					margin-left: 18rem;
-				}
-			}
-		}
-	}
-}
+@media screen and (min-width: $breakpoint) {
+	.layout-container {
+		&.layout-reveal {
+			.layout-topbar {
+				.topbar-menubutton {
+					display: none;
+				}
+			}
+
+			.layout-sidebar {
+				height: 100%;
+				top: 0;
+				transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
+				transform: translateX(-14.75rem);
+				z-index: 999;
+
+				.sidebar-header {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					gap: 1rem;
+					padding: 1.5rem 1rem;
+
+					.app-logo {
+						.app-logo-small {
+							display: inline;
+							order: 1;
+						}
+
+						.app-logo-normal {
+							display: none;
+						}
+					}
+
+					.layout-sidebar-anchor {
+						display: none;
+						width: 1.25rem;
+						height: 1.25rem;
+						border-radius: 50%;
+						border: 2px solid var(--logo-color);
+						background-color: transparent;
+						transition:
+							background-color var(--transition-duration),
+							transform 0.3s;
+					}
+				}
+				.layout-menu-container {
+					overflow: hidden;
+				}
+
+				.layout-menu {
+					.layout-root-menuitem {
+						> .layout-menuitem-root-text {
+							> span {
+								margin-right: auto;
+							}
+
+							> .layout-menuitem-root-icon {
+								display: block;
+								margin-right: 0.125rem;
+							}
+						}
+					}
+
+					ul {
+						margin: 0;
+						padding: 0;
+						list-style-type: none;
+
+						a {
+							padding: 0.75rem 1rem;
+
+							.layout-menuitem-text {
+								order: 1;
+								margin-right: auto;
+							}
+
+							.layout-submenu-toggler {
+								order: 2;
+								display: none;
+								margin-right: 0.5rem;
+							}
+
+							.layout-menuitem-icon {
+								order: 3;
+								margin-right: 0;
+								font-size: 1.25rem;
+								width: auto;
+							}
+						}
+					}
+				}
+			}
+
+			&.layout-reveal {
+				.layout-content-wrapper {
+					margin-left: 4.25rem;
+					transition: margin-left 0.3s cubic-bezier(0, 0, 0.2, 1);
+				}
+			}
+
+			&.layout-sidebar-active {
+				.layout-sidebar {
+					transform: translateX(0);
+					.layout-menu-container {
+						overflow: auto;
+					}
+					.sidebar-header {
+						padding: 1.5rem 2rem;
+						justify-content: space-between;
+						.app-logo {
+							.app-logo-normal {
+								display: inline;
+							}
+
+							.app-logo-small {
+								display: none;
+							}
+						}
+						.layout-sidebar-anchor {
+							display: block;
+							animation: px-fadein 0.15s linear;
+						}
+					}
+
+					.layout-menu {
+						.layout-root-menuitem {
+							> .layout-menuitem-root-text {
+								> .layout-menuitem-root-icon {
+									display: none;
+								}
+							}
+						}
+
+						ul {
+							a {
+								padding: 0.5rem 2rem;
+
+								.layout-submenu-toggler {
+									display: block;
+								}
+							}
+							ul {
+								overflow: hidden;
+								border-radius: var(--border-radius);
+
+								li {
+									a {
+										padding-left: 2.5rem;
+									}
+
+									li {
+										a {
+											padding-left: 3rem;
+										}
+
+										li {
+											a {
+												padding-left: 3.5rem;
+											}
+
+											li {
+												a {
+													padding-left: 4rem;
+												}
+
+												li {
+													a {
+														padding-left: 5.5rem;
+													}
+
+													li {
+														a {
+															padding-left: 5rem;
+														}
+													}
+												}
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+
+			&.layout-sidebar-anchored {
+				.sidebar-header {
+					.layout-sidebar-anchor {
+						background-color: var(--logo-color);
+					}
+				}
+
+				.layout-content-wrapper {
+					margin-left: 18rem;
+				}
+			}
+		}
+	}
+}

package/theme/styles/layout/_sidebar_slim.scss

@@ -1,144 +1,144 @@
-@media screen and (min-width: $breakpoint) {
-	.layout-container {
-		&.layout-slim {
-			.layout-topbar {
-				.topbar-menubutton {
-					display: none;
-				}
-			}
-
-			.sidebar-header {
-				.app-logo {
-					.app-logo-normal {
-						display: none;
-					}
-
-					.app-logo-small {
-						display: inline;
-					}
-				}
-			}
-
-			.layout-sidebar {
-				width: 5rem;
-				overflow: visible;
-				z-index: 999;
-
-				.layout-menu-container {
-					overflow: auto;
-
-					&::-webkit-scrollbar {
-						display: none;
-					}
-				}
-			}
-
-			.layout-content-wrapper {
-				margin-left: 5rem;
-			}
-
-			.layout-menu {
-				.layout-root-menuitem {
-					> .layout-menuitem-root-text {
-						display: none;
-					}
-
-					> a {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						border-radius: 50%;
-						cursor: pointer;
-						outline: none;
-						transition: background-color var(--transition-duration);
-						width: 3rem;
-						height: 3rem;
-						margin: 0 auto 1rem auto;
-
-						.layout-submenu-toggler {
-							display: none;
-						}
-
-						.layout-menuitem-icon {
-							font-size: 1.5rem;
-							color: var(--menuitem-icon-color);
-						}
-
-						.layout-menuitem-text {
-							display: none;
-						}
-
-						&:hover {
-							background-color: var(--menuitem-hover-bg-color);
-						}
-					}
-
-					> ul {
-						position: absolute;
-						left: 5rem;
-						top: 0;
-						min-width: 15rem;
-						background-color: var(--surface-overlay);
-						border-radius: var(--border-radius);
-						box-shadow: var(--sidebar-shadow);
-						border: var(--sidebar-border);
-						padding: 0.5rem;
-						max-height: 20rem;
-						overflow: auto;
-						z-index: 999;
-
-						a {
-							padding-right: 0.5rem;
-							color: var(--popup-submenu-item-text-color);
-							border-radius: var(--border-radius);
-
-							.layout-menuitem-icon {
-								color: var(--popup-submenu-item-icon-color);
-							}
-
-							&:hover {
-								background-color: var(--popup-submenu-item-hover-bg-color);
-							}
-						}
-
-						li {
-							a {
-								padding-left: 0.5rem;
-							}
-
-							li {
-								a {
-									padding-left: 1rem;
-								}
-
-								li {
-									a {
-										padding-left: 1.5rem;
-									}
-
-									li {
-										a {
-											padding-left: 2rem;
-										}
-
-										li {
-											a {
-												padding-left: 2.5rem;
-											}
-
-											li {
-												a {
-													padding-left: 3rem;
-												}
-											}
-										}
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
+@media screen and (min-width: $breakpoint) {
+	.layout-container {
+		&.layout-slim {
+			.layout-topbar {
+				.topbar-menubutton {
+					display: none;
+				}
+			}
+
+			.sidebar-header {
+				.app-logo {
+					.app-logo-normal {
+						display: none;
+					}
+
+					.app-logo-small {
+						display: inline;
+					}
+				}
+			}
+
+			.layout-sidebar {
+				width: 5rem;
+				overflow: visible;
+				z-index: 999;
+
+				.layout-menu-container {
+					overflow: auto;
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+				}
+			}
+
+			.layout-content-wrapper {
+				margin-left: 5rem;
+			}
+
+			.layout-menu {
+				.layout-root-menuitem {
+					> .layout-menuitem-root-text {
+						display: none;
+					}
+
+					> a {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 50%;
+						cursor: pointer;
+						outline: none;
+						transition: background-color var(--transition-duration);
+						width: 3rem;
+						height: 3rem;
+						margin: 0 auto 1rem auto;
+
+						.layout-submenu-toggler {
+							display: none;
+						}
+
+						.layout-menuitem-icon {
+							font-size: 1.5rem;
+							color: var(--menuitem-icon-color);
+						}
+
+						.layout-menuitem-text {
+							display: none;
+						}
+
+						&:hover {
+							background-color: var(--menuitem-hover-bg-color);
+						}
+					}
+
+					> ul {
+						position: absolute;
+						left: 5rem;
+						top: 0;
+						min-width: 15rem;
+						background-color: var(--surface-overlay);
+						border-radius: var(--border-radius);
+						box-shadow: var(--sidebar-shadow);
+						border: var(--sidebar-border);
+						padding: 0.5rem;
+						max-height: 20rem;
+						overflow: auto;
+						z-index: 999;
+
+						a {
+							padding-right: 0.5rem;
+							color: var(--popup-submenu-item-text-color);
+							border-radius: var(--border-radius);
+
+							.layout-menuitem-icon {
+								color: var(--popup-submenu-item-icon-color);
+							}
+
+							&:hover {
+								background-color: var(--popup-submenu-item-hover-bg-color);
+							}
+						}
+
+						li {
+							a {
+								padding-left: 0.5rem;
+							}
+
+							li {
+								a {
+									padding-left: 1rem;
+								}
+
+								li {
+									a {
+										padding-left: 1.5rem;
+									}
+
+									li {
+										a {
+											padding-left: 2rem;
+										}
+
+										li {
+											a {
+												padding-left: 2.5rem;
+											}
+
+											li {
+												a {
+													padding-left: 3rem;
+												}
+											}
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}