superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/menus/_sd-sidebar-menu.scss

@@ -0,0 +1,465 @@
+@use "sass:math";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+$sd-sidebarMenu-background: var(--sd-colour-sidebar-menu--00);
+$sd-sidebarMenu-secondLevel-background: var(--sd-colour-sidebar-menu--10);
+$sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
+
+.sd-sidebar-menu {
+	position: absolute;
+	inset-block-end: 0;
+	width: dimensions.$sd-sidebarMenu-width;
+	inset-block-start: dimensions.$nav-height;
+	background-color: $sd-sidebarMenu-background;
+	z-index: dimensions.$zindexFixedNavbar - 1;
+	transition: all .3s ease;
+}
+
+.sd-sidebar-menu--left {
+	inset-inline-start: 0;
+	box-shadow: 2px 0 5px 0 rgba(0, 0, 0, .25);
+
+	&.main-menu__open {
+		inset-inline-start: dimensions.$sd-main-menu-width;
+		//inset-inline-end: 0; This doesn't seam to have any function; To be tested;
+	}
+}
+
+.sd-sidebar-menu--second-level {
+	background-color: $sd-sidebarMenu-secondLevel-background;
+	z-index: dimensions.$zindexFixedNavbar - 2;
+}
+
+.sd-sidebar-menu__spacer {
+	width: math.div(dimensions.$sd-sidebarMenu-width, 2);
+	margin: 1.8rem auto;
+	border-block-start: 1px dotted var(--sd-colour-line--medium);
+	border-block-end: 0;
+}
+
+.sd-sidebar-menu__btn {
+	display: block;
+	margin: 0.6rem auto;
+	border-radius: dimensions.$border-radius__base--full;
+	height: 3.6rem;
+	width: 3.6rem;
+	opacity: .7;
+	overflow: hidden;
+	transition: opacity 0.2s, background-color 0.2s;
+	position: relative;
+	cursor: pointer;
+
+	&:hover {
+		opacity: 1;
+		background-color: var(--sd-colour-sidebar-menu--10);
+	}
+
+	&:active {
+		background-color: var(--sd-colour-interactive--active);
+		opacity: 1;
+	}
+}
+
+.sd-sidebar-menu__btn--active,
+.sd-sidebar-menu__btn--active:hover {
+	background-color: var(--sd-colour-interactive--active);
+	opacity: 1;
+
+	.sd-sidebar-menu__main-icon {
+		color: colors.$white;
+
+		[class^="big-icon--"],
+		[class*=" big-icon--"],
+		[class^="icon-"],
+		[class*=" icon-"] {
+			color: inherit;
+		}
+	}
+}
+
+.sd-sidebar-menu__main-icon {
+	position: absolute;
+	inset-block-start: 0.5rem;
+	inset-inline-start: 0.5rem;
+	transition: left 0.2s ease-out;
+}
+
+.sd-sidebar-menu__helper-icon {
+	position: absolute;
+	inset-block-start: 0.5rem;
+	inset-inline-start: 3rem;
+	transition: left 0.2s ease-out, transform 0.2s;
+}
+
+.authoring-active__item {
+	.sd-sidebar-menu__btn--active {
+
+		.sd-sidebar-menu__main-icon,
+		.sd-sidebar-menu__helper-icon {
+			color: #fff;
+		}
+
+		&:hover {
+			.sd-sidebar-menu__main-icon {
+				inset-inline-start: -3rem;
+			}
+
+			.sd-sidebar-menu__helper-icon {
+				inset-inline-start: 0.5rem;
+			}
+		}
+	}
+
+	&.list-hidden {
+		.sd-sidebar-menu__btn--active {
+			.sd-sidebar-menu__helper-icon {
+				transform: rotate(180deg);
+				inset-inline-start: -3rem;
+			}
+
+			&:hover {
+				.sd-sidebar-menu__main-icon {
+					inset-inline-start: 4rem;
+				}
+
+				.sd-sidebar-menu__helper-icon {
+					inset-inline-start: 0.5rem;
+				}
+			}
+		}
+	}
+}
+
+.sd-sidetab-menu {
+	position: absolute;
+	inset-block-end: 0;
+	inset-block-start: 0;
+	width: dimensions.$sd-sidebarMenu-width;
+	background-color: $sd-sideTabMenu-background;
+	z-index: 16;
+	transition: all .3s ease;
+	overflow-y: auto;
+
+	.badge {
+		position: absolute;
+		inset-block-start: 3px;
+		inset-inline-end: 3px;
+		z-index: 1;
+	}
+}
+
+.sd-sidetab-menu--right {
+	inset-inline-end: 0;
+	box-shadow: inset 4px 0 5px -3px rgba(0, 0, 0, 0.25);
+
+}
+
+.sd-sidetab-menu--static {
+	position: static;
+}
+
+.sd-sidetab-menu__btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	width: 100%;
+	height: dimensions.$sd-sidebarMenu-width;
+	text-align: center;
+	padding: 0;
+	margin: 0;
+	box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
+	border-width: 0 0 1px 0;
+	background: none;
+
+	&:hover {
+		background: hsla(0, 0%, 0%, 0.1);
+		cursor: pointer;
+	}
+}
+
+.sd-sidetab-menu__helper-icon,
+.sd-sidetab-menu__main-icon {
+	color: colors.$sd-text-light;
+	position: absolute;
+	inset-block-start: 1rem;
+	inset-inline-start: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	i {
+		color: colors.$sd-text-light;
+	}
+}
+
+.sd-sidetab-menu__helper-icon,
+i.sd-sidetab-menu__helper-icon {
+	opacity: 0;
+	margin: 0;
+	inset-block-start: 1.2rem;
+	inset-inline-start: 1.2rem;
+	width: 2.4rem;
+	height: 2.4rem;
+	font-size: 2.4rem;
+	line-height: 2.4rem;
+	z-index: 2;
+	transition: all 0.4s 0s, transform 0.3s 0s;
+}
+
+.sd-sidetab-menu__main-icon,
+.sd-sidetab-menu__main-icon i {
+	opacity: 1;
+	transition: all 0.2s, transform 0.2s;
+}
+
+.sd-sidetab-menu__info-label {
+	position: absolute;
+	inset-block-start: 0.3rem;
+	inset-inline-end: 0.3rem;
+	text-shadow: none;
+	z-index: 3;
+	margin: 0;
+}
+
+.active {
+	.sd-sidetab-menu__btn {
+		background: hsla(0, 0%, 0%, 0.2);
+	}
+
+	.sd-sidetab-menu__btn:hover {
+		.sd-sidetab-menu__helper-icon {
+			opacity: 1;
+			transform: rotate(180deg);
+			transition: all 0.3s 0.2s, transform 0.2s 0.2s;
+		}
+
+		.sd-sidetab-menu__main-icon {
+			opacity: 0;
+			height: 0.8rem;
+			width: 0.8rem;
+			inset-inline-start: 2.0rem;
+			font-size: 8px;
+
+			i {
+				opacity: 0;
+				height: 0.8rem;
+				width: 0.8rem;
+				inset-inline-start: 2.0rem;
+				font-size: 8px;
+			}
+		}
+	}
+}
+
+.sd-sidetab-menu__btn--active {
+	background: hsla(0, 0%, 100%, 0.24);
+
+	.sd-sidetab-menu__main-icon,
+	.sd-sidetab-menu__main-icon i {
+		color: var(--sd-colour-interactive--active) !important;
+	}
+
+	&:hover {
+
+		.sd-sidetab-menu__helper-icon,
+		.sd-sidetab-menu__helper-icon i {
+			opacity: 1;
+			transform: rotate(180deg);
+			transition: all 0.3s 0.2s, transform 0.2s 0.2s;
+		}
+
+		.sd-sidetab-menu__main-icon {
+			opacity: 0;
+			//height:0.8rem;
+			//width:0.8rem;
+			//inset-inline-start: 2.0rem;
+			font-size: 8px;
+
+			i {
+				opacity: 0;
+				height: 0.8rem !important;
+				width: 0.8rem !important;
+				font-size: 8px !important;
+				//inset-inline-start: 2.0rem
+			}
+		}
+	}
+}
+
+
+/// --------------------------- ////
+
+.sd-side-menu__btn {
+	display: block;
+	margin: 0.6rem auto;
+	border-radius: dimensions.$border-radius__base--full;
+	height: 3.6rem;
+	width: 3.6rem;
+	opacity: .7;
+	overflow: hidden;
+	transition: opacity 0.2s, background-color 0.2s;
+	position: relative;
+
+	&:hover {
+		opacity: 1;
+		background-color: var(--sd-colour__side-menu--hover);
+	}
+
+	&:active {
+		background-color: colors.$sd-colour-interactive;
+		opacity: 1;
+	}
+}
+
+.sd-side-menu__btn--active,
+.sd-side-menu__btn--active:hover {
+	background-color: var(--sd-colour-interactive--active);
+	opacity: 1;
+}
+
+.sd-side-menu__helper-icon,
+.sd-side-menu__main-icon {
+	position: absolute;
+	inset-block-start: 0.5rem;
+	inset-inline-start: 0.5rem;
+}
+
+.sd-side-menu__helper-icon {
+	opacity: 0;
+	margin: 0;
+	inset-inline-start: 0.6rem;
+	width: 2.4rem;
+	height: 2.4rem;
+	font-size: 2.4rem;
+	line-height: 2.4rem;
+	z-index: 2;
+	transition: all 0.4s 0s, transform 0.3s 0s;
+}
+
+.sd-side-menu__main-icon {
+	opacity: 1;
+	transition: all 0.2s, transform 0.2s;
+}
+
+.sd-side-menu__info-label {
+	position: absolute;
+	inset-block-start: 0.3rem;
+	inset-inline-end: 0.3rem;
+	text-shadow: none;
+	z-index: 3;
+	margin: 0;
+}
+
+// .active {
+//   .sd-side-menu__btn {
+//     background: rgba(255,255,255,0.2);
+//     border-color: rgba(0,0,0,0.18);
+//   }
+//   .sd-side-menu__btn:hover {
+//     .sd-side-menu__helper-icon {
+//       opacity: 1;
+//       transform: rotate(180deg);
+//       transition: all 0.3s 0.2s, transform 0.2s 0.2s;
+//     }
+//     .sd-side-menu__main-icon {
+//       opacity: 0;
+//       height:0.8rem;
+//       width:0.8rem;
+//       inset-inline-start: 2.0rem;
+//       font-size: 8px;
+//     }
+//   }
+// }
+
+.sd-side-menu__btn--active {
+	.sd-side-menu__helper-icon,
+	.sd-side-menu__main-icon {
+		color: colors.$white;
+	}
+
+	&:hover {
+		.sd-side-menu__helper-icon {
+			opacity: 1;
+			transform: rotate(180deg);
+			transition: all 0.3s 0.2s, transform 0.2s 0.2s;
+		}
+
+		.sd-side-menu__main-icon {
+			opacity: 0;
+			height: 0.8rem;
+			width: 0.8rem;
+			inset-inline-start: 2.0rem;
+			font-size: 8px;
+		}
+	}
+}
+
+.sd-quickbar-menu {
+	width: dimensions.$sd-sidebarMenu-width;
+	background-color: var(--sd-colour-panel-bg--050);
+	z-index: 1;
+	overflow-y: auto;
+	position: relative;
+
+	ul {
+		margin-block-start: 24px;
+	}
+}
+
+.sd-quickbar-menu--right {
+	.sd-quickbar__btn--active {
+		border-inline-end-color: transparent;
+		border-inline-start-color: var(--sd-colour-interactive);
+	}
+
+}
+
+.sd-quickbar-menu__list-item--active {
+
+	.sd-quickbar__btn,
+	.sd-quickbar__btn:hover {
+		background-color: var(--sd-colour-interactive--alpha-10);
+		border-inline-end-color: var(--sd-colour-interactive);
+	}
+}
+
+.sd-quickbar__btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	width: dimensions.$sd-sidebarMenu-width;
+	height: dimensions.$sd-sidebarMenu-width;
+	text-align: center;
+	padding: 0;
+	margin: 0;
+	border: 2px solid transparent;
+	border-width: 0 2px;
+	transition: all .3s ease;
+
+	i {
+		color: var(--color-text-muted);
+		opacity: 0.75;
+	}
+
+	&:hover {
+		background-color: var(--sd-colour-panel-bg--200);
+		cursor: pointer;
+
+		i {
+			opacity: 1;
+		}
+	}
+}
+
+.sd-quickbar__btn--active {
+	background-color: var(--sd-colour-interactive--alpha-10);
+	border-inline-end-color: var(--sd-colour-interactive);
+
+	i {
+		opacity: 1;
+		color: var(--sd-colour-interactive);
+	}
+}

package/app/styles/menus/_sd-top-menu.scss

@@ -0,0 +1,105 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+$sd-topMenu-background: var(--sd-colour-top-menu);
+
+.sd-top-menu {
+    background: $sd-topMenu-background;
+    height: dimensions.$nav-height;
+    position: absolute;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    z-index: dimensions.$zindexFixedNavbar;
+    margin-block-end: 0;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: colors.$white;
+}
+
+.sd-top-menu__collapse-nav {
+    height: dimensions.$nav-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: dimensions.$sd-sidebarMenu-width;
+    text-align: center;
+    padding: 0;
+    background-color: var(--sd-colour-top-menu__btn);
+    box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
+    position: relative;
+    transition: all 0.3s ease;
+
+    &:hover {
+        background-color: hsl(0, 0%, 0%);
+        cursor: pointer;
+    }
+
+    &.is-active {
+        margin-inline-start: -(dimensions.$sd-sidebarMenu-width);
+        background-color: hsla(0, 0%, 0%, 0.02);
+        box-shadow: none;
+
+        &:hover {
+            background-color: hsla(0, 0%, 0%, 0.24);
+        }
+    }
+}
+
+.sd-top-menu__collapse-nav--disabled {
+    pointer-events: none !important;
+    opacity: 0.5;
+}
+
+.sd-top-menu__header {
+    display: inline-block;
+    height: dimensions.$nav-height;
+    line-height: dimensions.$nav-height;
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 0 2rem;
+    color: hsl(214, 13%, 75%);
+    margin: 0;
+}
+
+.sd-top-menu__current-user {
+    width: dimensions.$nav-height;
+    position: relative;
+    padding: 0 10px;
+    width: 48px;
+
+    .avatar {
+        border-radius: dimensions.$border-radius__base--full;
+    }
+
+    .label {
+        position: absolute;
+        inset-block-start: 3px;
+        inset-inline-start: 3px;
+        text-shadow: none;
+    }
+}
+
+.current-user-details--compact {
+    padding: var(--space--1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: colors.$sd-text;
+    min-width: 26rem;
+}
+
+.current-user-details__full-name {
+    font-weight: 400;
+    font-size: 1.8rem;
+    margin: 16px 0 2px;
+
+}
+
+.current-user-details__username {
+    opacity: 0.75;
+    font-size: 1.4rem;
+}

package/app/styles/pr-superdesk-theme.scss

@@ -0,0 +1,7 @@
+@import 'primereact/pr-general.scss';
+@import 'primereact/pr-autocomplete.scss';
+@import 'primereact/pr-dropdown.scss';
+@import 'primereact/pr-datepicker.scss';
+@import 'primereact/pr-dialog.scss';
+@import 'primereact/pr-menu.scss';
+@import 'primereact/pr-skeleton.scss';

package/app/styles/primereact/_pr-autocomplete.scss

@@ -0,0 +1,27 @@
+@use "pr-general";
+
+.p-autocomplete {
+    display: contents;
+}
+
+.p-inputwrapper {
+    position: relative;
+}
+
+.p-autocomplete-panel {
+    @include pr-general.pr-dropdown-panel-base;
+    margin-block-start: 16px;
+    padding: 1rem 0;
+
+    .p-autocomplete-items {
+        padding: 0;
+    }
+
+    .p-autocomplete-list-item, .p-autocomplete-item {
+        @include pr-general.pr-menu-item-base;
+        
+        b {
+            font-weight: 600;
+        }
+    }
+}