@stack-spot/portal-layout 0.0.54 → 0.0.56

package/src/layout.css

@@ -1,467 +1,472 @@
-/* Scrollbars */
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar {
-  width: 0.25rem;
-  height: 0.5rem;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--light-600);
-}
-
-/* Layout */
-
-html {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  background: var(--light-400);
-  font: var(--font);
-  color: var(--light-contrastText);
-}
-
-#root, #layout {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-#layout {
-  --header-height: 56px;
-  --menu-sections-width: 135px;
-  --menu-content-width: 240px;
-  --menu-item-height: 74px;
-  --modal-animation-duration: 0.3s;
-  --right-panel-animation-duration: 0.3s;
-  --menu-animation-duration: 0.3s;
-  --menu-overlay-width: 240px;
-  --toastify-font-family: 'Roboto', sans-serif;
-}
-
-#layout:not(.menu-compact) {
-  --menu-sections-width: 135px;
-  --menu-item-height: 56px;
-}
-
-#layout.menu-compact  {
-  --menu-sections-width: 56px;
-  --menu-item-height: 56px;
-}
-
-#layout.no-menu-sections {
-  --menu-sections-width: 0px;
-}
-
-#header {
-  height: var(--header-height);
-  padding: 0 24px;
-  align-items: center;
-  flex-direction: row;
-  display: flex;
-  justify-content: space-between;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  background-color: var(--light-400);
-  z-index: 2;
-}
-
-#page {
-  position: absolute;
-  top: var(--header-height);
-  left: var(--menu-sections-width);
-  right: 0;
-  bottom: 0;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--light-300);
-  align-items: center;
-  padding: 24px;
-  transition: left ease-in-out var(--menu-animation-duration);
-}
-
-#layout.menu-content-visible #page {
-  left: calc(var(--menu-sections-width) + var(--menu-content-width));
-}
-
-#layout.no-menu-sections:not(.menu-content-visible) #page {
-  border-top-left-radius: 0;
-}
-
-#content {
-  width: 100%;
-  max-width: 1144px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Menu */
-
-#menu {
-  position: fixed;
-  display: flex;
-  flex-direction: row;
-  top: var(--header-height);
-  bottom: 0;
-}
-
-#menu svg {
-  fill: var(--light-contrastText);
-}
-
-#menu .item-row-group svg {
-  fill: var(--light-700);
-}
-
-#menu .toggle .expand {
-  fill: var(--primary-500);
-}
-
-#menu .toggle .expand,
-#menu .toggle .collapse {
-  position: absolute;
-  transition: opacity 0.3s;
-}
-
-#menu .toggle .expand,
-#layout.menu-compact .toggle .collapse {
-  opacity: 0;
-}
-
-#menu .toggle .collapse,
-#layout.menu-compact .toggle .expand {
-  opacity: 1;
-}
-
-#layout .section-label {
-  line-height: 0.875rem;
-}
-
-#layout.menu-compact .section-label {
-  display: none;
-}
-
-#layout:not(.menu-compact) .section-label {
-  display: block;
-}
-
-#menuSections {
-  width: var(--menu-sections-width);
-  display: flex;
-  flex-direction: column;
-  padding: 0 0 10px;
-  justify-content: space-between;
-  background-color: var(--light-400);
-  position: relative;
-  border-right: 1px solid var(--light-300);
-  border-top: 1px solid var(--light-300);
-}
-
-#menuSections .sections-footer {
-  padding: 16px;
-}
-
-#menuSections .toggle,
-#menuSections > ul li a {
-  background: transparent;
-  border: none;
-  outline: none;
-  width: var(--menu-sections-width);
-  height: var(--menu-item-height);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: flex-start;
-  justify-content: center;
-  transition: background-color 0.2s;
-  cursor: pointer;
-  position: relative;
-  z-index: 2;
-}
-
-#menuSections > ul li a:before {
-  content: '';
-  position: absolute;
-  width: 2px;
-  height: 24px;
-  transform: scaleY(0);
-  transition: transform ease-in 0.2s;
-  left: 0;
-}
-
-#menuSections > ul li.active a {
-  background-color: var(--light-500);
-  border-right: 1px solid var(--light-300);
-}
-
-#menuSections > ul li.active a:before {
-  transform: scaleY(1);
-  background-color: var(--primary-500);
-}
-
-#menuSections .toggle:hover,
-#menuSections > ul li a:hover,
-#menuSections .toggle:focus,
-#menuSections > ul li a:focus {
-  background: var(--light-500);
-  border-right: 1px solid var(--light-300);
-}
-
-#menuSections > ul li:not(.active) a:hover:before {
-  transform: scaleY(1); 
-  background-color: var(--light-contrastText);
-}
-
-#menuSections .toggle i {
-  position: relative;
-}
-
-#menuContentOverlay {
-  width: var(--menu-overlay-width);
-  position: fixed;
-  top: calc(var(--header-height));
-  left: calc(var(--menu-sections-width));
-  bottom: 1px;
-  background-color: var(--light-500);
-  border-top: 1px solid var(--light-300);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  z-index: 1;
-  transition: opacity 0.3s;
-}
-
-#menuContentOverlay.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-#menuContentOverlay > div {
-  flex: 1;
-  overflow: auto;
-}
-
-#menuContent {
-  width: var(--menu-content-width);
-  transition: left ease-out var(--menu-animation-duration);
-  background-color: var(--light-400);
-  overflow: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc(var(--menu-sections-width) - var(--menu-content-width) - 2px); /* 2px from border */
-  border-top: 1px solid var(--light-300);
-}
-
-#layout.menu-content-visible #menuContent {
-  left: var(--menu-sections-width);
-}
-
-/* Overlays */
-
-#backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--backdrop-color);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity ease-in-out var(--modal-animation-duration);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 3;
-}
-
-#backdrop.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-#modal {
-  transform: scale(0);
-  display: flex;
-  flex-direction: column;
-  transition: transform ease-in-out var(--modal-animation-duration);
-  width: calc(100% - 60px);
-}
-
-#modal.fit-content {
-  width: auto;
-}
-
-#modal.large {
-  max-width: 1000px;
-}
-
-#modal.medium {
-  max-width: 800px;
-}
-
-#modal.small {
-  max-width: 600px;
-}
-
-#modal.visible {
-  transform: scale(1);
-}
-
-#rightPanel {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  top: 0;
-  bottom: 0;
-  transition: right var(--right-panel-animation-duration);
-  background-color: var(--light-400);
-  right: -800px;
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
-}
-
-#rightPanel.small {
-  right: -400px;
-  width: 400px;
-}
-
-#rightPanel.medium {
-  right: -600px;
-  width: 600px;
-}
-
-#rightPanel.large {
-  right: -800px;
-  width: 800px;
-}
-
-#rightPanel.visible {
-  right: 0;
-}
-
-#bottomPanel {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  bottom: -420px;
-  left: 20px;
-  height: 400px;
-  transition: bottom 0.3s;
-}
-
-#bottomPanel.visible {
-  bottom: 20px;
-}
-
-#bottomDialog {
-  position: fixed;
-  display: flex;
-  flex-direction: row;
-  bottom: -80px;
-  left: 0;
-  right: 0;
-  height: 80px;
-  transition: bottom 0.3s;
-  background-color: var(--inverse-500);
-  color: var(--inverse-contrastText);
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-}
-
-#bottomDialog .btn-group {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}
-
-#bottomDialog.visible {
-  bottom: 0;
-}
-
-/* Overlay: toaster */
-
-.main-toaster h1 {
-  font-size: 14px;
-  font-weight: 500;
-  margin: 0 0 8px 0;
-}
-
-.main-toaster p {
-  margin: 0;
-  font-size: 12px;
-}
-
-.main-toaster .toast-body {
-  align-items: start;
-}
-
-.main-toaster .Toastify__toast-icon {
-  margin-top: 2px;
-  width: auto;
-}
-
-/* Other */
-
-svg path.stackspot-text {
-  fill: var(--light-contrastText)
-}
-
-a {
-  color: var(--light-contrastText);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-i {
-  fill: var(--light-contrastText);
-}
-
-/* Accessibility */
-#accessibilityAnnouncer {
-  position: fixed;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-}
-
-#menuSections .section-submenu {
-  position: relative;
-}
-
-#menuSections .section-submenu-icon {
-  opacity: 0;
-  position: absolute;
-  top: 27%;
-  right: 10px;
-  background-color: inherit;
-  z-index: 1;
-}
-
-#menuSections .section-submenu-icon:focus-visible {
-  opacity: 1; 
-}
+/* Scrollbars */
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+  height: 0.5rem;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--light-600);
+}
+
+/* Layout */
+
+html {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background: var(--light-400);
+  font: var(--font);
+  color: var(--light-contrastText);
+}
+
+#root, #layout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+#layout {
+  --header-height: 56px;
+  --menu-sections-width: 135px;
+  --menu-content-width: 240px;
+  --menu-item-height: 74px;
+  --modal-animation-duration: 0.3s;
+  --right-panel-animation-duration: 0.3s;
+  --menu-animation-duration: 0.3s;
+  --menu-overlay-width: 240px;
+  --toastify-font-family: 'Roboto', sans-serif;
+}
+
+#layout:not(.menu-compact) {
+  --menu-sections-width: 135px;
+  --menu-item-height: 56px;
+}
+
+#layout.menu-compact  {
+  --menu-sections-width: 56px;
+  --menu-item-height: 56px;
+}
+
+#layout.no-menu-sections {
+  --menu-sections-width: 0px;
+}
+
+#header {
+  height: var(--header-height);
+  padding: 0 24px;
+  align-items: center;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-color: var(--light-400);
+  z-index: 2;
+}
+
+#page {
+  position: absolute;
+  top: var(--header-height);
+  left: var(--menu-sections-width);
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--light-300);
+  align-items: center;
+  padding: 24px;
+  transition: left ease-in-out var(--menu-animation-duration);
+}
+
+#layout.menu-content-visible #page {
+  left: calc(var(--menu-sections-width) + var(--menu-content-width));
+}
+
+#layout.no-menu-sections:not(.menu-content-visible) #page {
+  border-top-left-radius: 0;
+}
+
+#content {
+  width: 100%;
+  max-width: 1144px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Menu */
+
+#menu {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  top: var(--header-height);
+  bottom: 0;
+}
+
+#menu svg {
+  fill: var(--light-contrastText);
+}
+
+#menu .item-row-group svg {
+  fill: var(--light-700);
+}
+
+#menu .toggle .expand {
+  fill: var(--primary-500);
+}
+
+#menu .toggle .expand,
+#menu .toggle .collapse {
+  position: absolute;
+  transition: opacity 0.3s;
+}
+
+#menu .toggle .expand,
+#layout.menu-compact .toggle .collapse {
+  opacity: 0;
+}
+
+#menu .toggle .collapse,
+#layout.menu-compact .toggle .expand {
+  opacity: 1;
+}
+
+#layout .section-label {
+  line-height: 0.875rem;
+}
+
+#layout.menu-compact .section-label {
+  display: none;
+}
+
+#layout:not(.menu-compact) .section-label {
+  display: block;
+}
+
+#menuSections {
+  width: var(--menu-sections-width);
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 10px;
+  justify-content: space-between;
+  background-color: var(--light-400);
+  position: relative;
+  border-right: 1px solid var(--light-300);
+  border-top: 1px solid var(--light-300);
+}
+
+#menuSections .sections-footer {
+  padding: 16px;
+}
+
+#menuSections .toggle,
+#menuSections > ul li a {
+  background: transparent;
+  border: none;
+  outline: none;
+  width: var(--menu-sections-width);
+  height: var(--menu-item-height);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: center;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+}
+
+#menuSections > ul li a:before {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 24px;
+  transform: scaleY(0);
+  transition: transform ease-in 0.2s;
+  left: 0;
+}
+
+#menuSections > ul li.active a {
+  background-color: var(--light-500);
+  border-right: 1px solid var(--light-300);
+}
+
+#menuSections > ul li.active a:before {
+  transform: scaleY(1);
+  background-color: var(--primary-500);
+}
+
+#menuSections .toggle:hover,
+#menuSections > ul li a:hover,
+#menuSections .toggle:focus,
+#menuSections > ul li a:focus {
+  background: var(--light-500);
+  border-right: 1px solid var(--light-300);
+}
+
+#menuSections > ul li:not(.active) a:hover:before {
+  transform: scaleY(1); 
+  background-color: var(--light-contrastText);
+}
+
+#menuSections .toggle i {
+  position: relative;
+}
+
+#menuContentOverlay {
+  width: var(--menu-overlay-width);
+  position: fixed;
+  top: calc(var(--header-height));
+  left: calc(var(--menu-sections-width));
+  bottom: 1px;
+  background-color: var(--light-500);
+  border-top: 1px solid var(--light-300);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.3s;
+}
+
+#menuContentOverlay.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#menuContentOverlay > div {
+  flex: 1;
+  overflow: auto;
+}
+
+#menuContent {
+  width: var(--menu-content-width);
+  transition: left ease-out var(--menu-animation-duration);
+  background-color: var(--light-400);
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--menu-sections-width) - var(--menu-content-width) - 2px); /* 2px from border */
+  border-top: 1px solid var(--light-300);
+}
+
+#layout.menu-content-visible #menuContent {
+  left: var(--menu-sections-width);
+}
+
+/* Overlays */
+
+#backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--backdrop-color);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity ease-in-out var(--modal-animation-duration);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+
+#backdrop.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#modal {
+  transform: scale(0);
+  display: flex;
+  flex-direction: column;
+  transition: transform ease-in-out var(--modal-animation-duration);
+  width: calc(100% - 60px);
+}
+
+#modal.fit-content {
+  width: auto;
+}
+
+#modal.large {
+  max-width: 1000px;
+}
+
+#modal.medium {
+  max-width: 800px;
+}
+
+#modal.small {
+  max-width: 600px;
+}
+
+#modal.visible {
+  transform: scale(1);
+}
+
+#rightPanel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  bottom: 0;
+  transition: right var(--right-panel-animation-duration);
+  background-color: var(--light-400);
+  right: -800px;
+  border-top-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+
+#rightPanel.small {
+  right: -400px;
+  width: 400px;
+}
+
+#rightPanel.medium {
+  right: -600px;
+  width: 600px;
+}
+
+#rightPanel.large {
+  right: -800px;
+  width: 800px;
+}
+
+#rightPanel.visible {
+  right: 0;
+}
+
+#bottomPanel {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  bottom: -420px;
+  left: 20px;
+  height: 400px;
+  transition: bottom 0.3s;
+}
+
+#bottomPanel.visible {
+  bottom: 20px;
+}
+
+#bottomDialog {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  bottom: -80px;
+  left: 0;
+  right: 0;
+  height: 80px;
+  transition: bottom 0.3s;
+  background-color: var(--inverse-500);
+  color: var(--inverse-contrastText);
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+#bottomDialog .btn-group {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+#bottomDialog.visible {
+  bottom: 0;
+}
+
+/* Overlay: toaster */
+
+.main-toaster h1 {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.main-toaster p {
+  margin: 0;
+  font-size: 12px;
+}
+
+.main-toaster .toast-body {
+  align-items: start;
+}
+
+.main-toaster .Toastify__toast-icon {
+  width: auto;
+}
+
+.main-toaster .Toastify__toast-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+
+/* Other */
+
+svg path.stackspot-text {
+  fill: var(--light-contrastText)
+}
+
+a {
+  color: var(--light-contrastText);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+i {
+  fill: var(--light-contrastText);
+}
+
+/* Accessibility */
+#accessibilityAnnouncer {
+  position: fixed;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+#menuSections .section-submenu {
+  position: relative;
+}
+
+#menuSections .section-submenu-icon {
+  opacity: 0;
+  position: absolute;
+  top: 27%;
+  right: 10px;
+  background-color: inherit;
+  z-index: 1;
+}
+
+#menuSections .section-submenu-icon:focus-visible {
+  opacity: 1; 
+}