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

package/app/styles/_tooltips.scss

@@ -0,0 +1,431 @@
+/* Thanks to Jase Smith - codepen.io/jasesmith */
+[sd-tooltip],
+[data-sd-tooltip] {
+	position: relative;
+
+	/* Applies to all sd-tooltips */
+	&::before,
+	&::after {
+		text-transform: none;
+		font-size: 1.2rem;
+		line-height: 1;
+		user-select: none;
+		pointer-events: none;
+		position: absolute;
+		display: none;
+		opacity: 0;
+	}
+
+	&::before {
+		content: '';
+		border: 5px solid transparent;
+		z-index: 1001;
+	}
+
+	&::after {
+		text-align: center;
+		/* Let the content set the size of the sd-tooltips */
+		min-width: 3em;
+		max-width: 21em;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		padding: 0.8rem 1.2rem 0.9rem;
+		border-radius: var(--b-radius--small);
+		box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
+		background: var(--sd-colour-background__tooltip);
+		color: hsl(0, 0%, 100%);
+		font-weight: 400;
+		z-index: 1000;
+	}
+
+	/* Make the sd-tooltips respond to hover */
+	&:hover::before,
+	&:hover::after {
+		display: block;
+	}
+}
+
+// [sd-tooltip] [flow]
+[sd-tooltip] {
+
+	/* FLOW: UP */
+	&:not([flow])::before,
+	&[flow^="up"]::before {
+		inset-block-end: 100%;
+		border-bottom-width: 0;
+		border-top-color: var(--sd-colour-background__tooltip);
+	}
+
+	&:not([flow])::after,
+	&[flow^="up"]::after {
+		inset-block-end: calc(100% + 5px);
+	}
+
+	&:not([flow])::before,
+	&:not([flow])::after,
+	&[flow^="up"]::before,
+	&[flow^="up"]::after {
+		inset-inline-start: 50%;
+		transform: translate(-50%, -.5em);
+	}
+
+	/* FLOW: DOWN */
+	&[flow^="down"]::before {
+		inset-block-start: 100%;
+		border-top-width: 0;
+		border-bottom-color: var(--sd-colour-background__tooltip);
+	}
+
+	&[flow^="down"]::after {
+		inset-block-start: calc(100% + 5px);
+	}
+
+	&[flow^="down"]::before,
+	&[flow^="down"]::after {
+		inset-inline-start: 50%;
+		transform: translate(-50%, .5em);
+	}
+
+	/* FLOW: LEFT */
+	&[flow^="left"]::before {
+		inset-block-start: 50%;
+		border-right-width: 0;
+		border-left-color: var(--sd-colour-background__tooltip);
+		inset-inline-start: calc(0em - 5px);
+		transform: translate(-.5em, -50%);
+	}
+
+	&[flow^="left"]::after {
+		inset-block-start: 50%;
+		inset-inline-end: calc(100% + 5px);
+		transform: translate(-.5em, -50%);
+	}
+
+	/* FLOW: RIGHT */
+	&[flow^="right"]::before {
+		inset-block-start: 50%;
+		border-left-width: 0;
+		border-right-color: var(--sd-colour-background__tooltip);
+		inset-inline-end: calc(0em - 5px);
+		transform: translate(.5em, -50%);
+	}
+
+	&[flow^="right"]::after {
+		inset-block-start: 50%;
+		inset-inline-start: calc(100% + 5px);
+		transform: translate(.5em, -50%);
+	}
+
+	/* FX All The Things */
+	&:not([flow]):hover::before,
+	&:not([flow]):hover::after,
+	&[flow^="up"]:hover::before,
+	&[flow^="up"]:hover::after,
+	&[flow^="down"]:hover::before,
+	&[flow^="down"]:hover::after {
+		animation: tooltips-vert 200ms ease-out forwards;
+	}
+
+	&[flow^="left"]:hover::before,
+	&[flow^="left"]:hover::after,
+	&[flow^="right"]:hover::before,
+	&[flow^="right"]:hover::after {
+		animation: tooltips-horz 200ms ease-out forwards;
+	}
+}
+
+// [data-sd-tooltip] [data-flow]
+[data-sd-tooltip] {
+
+	/* FLOW: UP */
+	&:not([data-flow])::before,
+	&[data-flow^="up"]::before {
+		inset-block-end: 100%;
+		border-bottom-width: 0;
+		border-top-color: var(--sd-colour-background__tooltip);
+	}
+
+	&:not([data-flow])::after,
+	&[data-flow^="up"]::after {
+		inset-block-end: calc(100% + 5px);
+	}
+
+	&:not([data-flow])::before,
+	&:not([data-flow])::after,
+	&[data-flow^="up"]::before,
+	&[data-flow^="up"]::after {
+		inset-inline-start: 50%;
+		transform: translate(-50%, -.5em);
+	}
+
+	/* FLOW: DOWN */
+	&[data-flow^="down"]::before {
+		inset-block-start: 100%;
+		border-top-width: 0;
+		border-bottom-color: var(--sd-colour-background__tooltip);
+	}
+
+	&[data-flow^="down"]::after {
+		inset-block-start: calc(100% + 5px);
+	}
+
+	&[data-flow^="down"]::before,
+	&[data-flow^="down"]::after {
+		inset-inline-start: 50%;
+		transform: translate(-50%, .5em);
+	}
+
+	/* FLOW: LEFT */
+	&[data-flow^="left"]::before {
+		inset-block-start: 50%;
+		border-right-width: 0;
+		border-left-color: var(--sd-colour-background__tooltip);
+		inset-inline-start: calc(0em - 5px);
+		transform: translate(-.5em, -50%);
+	}
+
+	&[data-flow^="left"]::after {
+		inset-block-start: 50%;
+		inset-inline-end: calc(100% + 5px);
+		transform: translate(-.5em, -50%);
+	}
+
+	/* FLOW: RIGHT */
+	&[data-flow^="right"]::before {
+		inset-block-start: 50%;
+		border-left-width: 0;
+		border-right-color: var(--sd-colour-background__tooltip);
+		inset-inline-end: calc(0em - 5px);
+		transform: translate(.5em, -50%);
+	}
+
+	&[data-flow^="right"]::after {
+		inset-block-start: 50%;
+		inset-inline-start: calc(100% + 5px);
+		transform: translate(.5em, -50%);
+	}
+
+	/* FX All The Things */
+	&:not([data-flow]):hover::before,
+	&:not([data-flow]):hover::after,
+	&[data-flow^="up"]:hover::before,
+	&[data-flow^="up"]:hover::after,
+	&[data-flow^="down"]:hover::before,
+	&[data-flow^="down"]:hover::after {
+		animation: tooltips-vert 200ms ease-out forwards;
+	}
+
+	&[data-flow^="left"]:hover::before,
+	&[data-flow^="left"]:hover::after,
+	&[data-flow^="right"]:hover::before,
+	&[data-flow^="right"]:hover::after {
+		animation: tooltips-horz 200ms ease-out forwards;
+	}
+}
+
+/* magic! */
+[sd-tooltip]::after {
+	content: attr(sd-tooltip);
+}
+
+[data-sd-tooltip]::after {
+	content: attr(data-sd-tooltip);
+}
+
+/* don't show empty sd-tooltips */
+[sd-tooltip='']::before,
+[sd-tooltip='']::after,
+[data-sd-tooltip='']::before,
+[data-sd-tooltip='']::after {
+	display: none !important;
+}
+
+/* KEYFRAMES */
+@keyframes tooltips-vert {
+	to {
+		opacity: .95;
+		transform: translate(-50%, 0);
+	}
+}
+
+@keyframes tooltips-horz {
+	to {
+		opacity: .95;
+		transform: translate(0, -50%);
+	}
+}
+
+// ====== APEND TO BODY (Prime React) ====== //
+
+.p-tooltip {
+	position: absolute;
+	z-index: 2000 !important;
+	min-width: 3em;
+	max-width: 21em;
+}
+
+.p-tooltip.p-tooltip-right,
+.p-tooltip.p-tooltip-left {
+	padding: 0 5px;
+}
+
+.p-tooltip.p-tooltip-top,
+.p-tooltip.p-tooltip-bottom {
+	padding: 5px 0;
+}
+
+.p-tooltip .p-tooltip-text {
+	white-space: pre-line;
+	min-width: 3em;
+	max-width: 21em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0.8rem 1.2rem 0.9rem;
+	border-radius: var(--b-radius--small);
+	background: var(--sd-colour-background__tooltip);
+	box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
+	color: hsl(0, 0%, 100%);
+	font-weight: 400;
+	text-transform: none;
+	font-size: 1.2rem;
+	line-height: 1;
+}
+
+.p-tooltip-arrow {
+	--tooltip-arrow_border: 6px;
+	border: var(--tooltip-arrow_border) solid transparent;
+	z-index: 1001;
+	user-select: none;
+	pointer-events: none;
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	overflow: hidden;
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+	border-width: var(--tooltip-arrow_border);
+	inset-block-end: 0;
+	inset-inline-start: calc(50% - 3px);
+	border-bottom-width: 0;
+	border-top-color: var(--sd-colour-background__tooltip);
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+	border-width: var(--tooltip-arrow_border);
+	inset-block-start: 0;
+	inset-inline-start: calc(50% - 3px);
+	border-top-width: 0;
+	border-bottom-color: var(--sd-colour-background__tooltip);
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+	border-width: var(--tooltip-arrow_border);
+	inset-block-start: calc(50% - 3px);
+	inset-inline-start: 0;
+	border-left-width: 0;
+	border-right-color: var(--sd-colour-background__tooltip);
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+	border-width: var(--tooltip-arrow_border);
+	inset-block-start: calc(50% - 3px);
+	inset-inline-end: 0;
+	border-right-width: 0;
+	border-left-color: var(--sd-colour-background__tooltip);
+}
+
+.p-tooltip-right {
+	margin-inline-start: 8px;
+}
+
+
+
+
+// NEW TOOLTIP STYLES ----------------------------------------------------------------------------
+
+.tooltip {
+	--tooltip-arrow_border: 6px;
+	margin: calc(var(--tooltip-arrow_border) / 2);
+	border-radius: var(--b-radius--medium);
+	padding: var(--space--1) var(--space--1-5);
+	font-size: var(--text-size-small);
+	position: relative;
+	background-color: var(--sd-colour-background__tooltip);
+	box-shadow: var(--sd-shadow--z3);
+	color: var(--color-text-ondark);
+	opacity: 1;
+	transition: opacity 400ms ease-out, margin 200ms ease-out;
+	transition-behavior: allow-discrete;
+
+	@starting-style {
+		opacity: 0;
+	}
+
+	&::before {
+		content: '';
+		border: var(--tooltip-arrow_border) solid transparent;
+		border-width: var(--tooltip-arrow_border);
+		z-index: 1001;
+		user-select: none;
+		pointer-events: none;
+		position: absolute;
+		overflow: hidden;
+	}
+}
+
+[data-popper-placement^="top"] {
+    .tooltip {   
+		margin-block-end: var(--tooltip-arrow_border);
+        &::before {   
+            inset-block-end: calc(var(--tooltip-arrow_border) * -1);
+            inset-inline-start: calc(50% - var(--tooltip-arrow_border));
+            border-bottom-width: 0;
+            border-top-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+[data-popper-placement^="bottom"] {
+    .tooltip {
+        margin-block-start: var(--tooltip-arrow_border);
+        &::before {
+            inset-block-start: calc(var(--tooltip-arrow_border) * -1);
+            inset-inline-start: calc(50% - var(--tooltip-arrow_border));
+            border-top-width: 0;
+            border-bottom-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+[data-popper-placement^="left"] {
+    .tooltip {
+        margin-inline-end: var(--tooltip-arrow_border);
+        &::before {
+            inset-inline-end: calc(var(--tooltip-arrow_border) * -1);
+            inset-block-start: calc(50% - var(--tooltip-arrow_border));
+            border-right-width: 0;
+            border-left-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+[data-popper-placement^="right"] {
+    .tooltip {
+        margin-inline-start: var(--tooltip-arrow_border);
+        &::before {
+            inset-inline-start: calc(var(--tooltip-arrow_border) * -1);
+            inset-block-start: calc(50% - var(--tooltip-arrow_border));
+            border-left-width: 0;
+            border-right-color: var(--sd-colour-background__tooltip);
+        }
+    }
+}
+
+.sd-popup-positioner {
+	&:has(.tooltip) {
+		pointer-events: none;
+	}
+}

package/app/styles/_variables.scss

@@ -0,0 +1,4 @@
+@forward 'variables/dimensions';
+@forward 'variables/typography';
+@forward 'variables/colors';
+@forward 'variables/form-elements';

package/app/styles/app.scss

@@ -0,0 +1,127 @@
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:map';
+
+//@import 'normalize';
+@use "sass:meta";
+@use 'design-tokens';
+@use 'variables';
+@use 'reboot';
+@use 'animations';
+@use 'mixins';
+@use 'helpers';
+@use 'buttons';
+@use 'labels';
+@use 'icon-labels';
+@use 'badge';
+@use 'alerts';
+@use 'icon-font';
+@use 'big-icon-font';
+@use 'modals';
+@use 'tabs';
+@use 'tabs-vertical';
+@use 'tables';
+@use 'tooltips';
+@use 'carousel';
+@use 'panel-info';
+@use 'simple-list';
+@use 'toggle-box';
+@use 'drag-drop';
+@use 'tag-labels';
+@use 'sd-tag-input';
+@use 'boxed-list';
+@use 'empty-states';
+@use 'master-desk';
+@use 'accessibility';
+@use 'popover';
+@use 'thumb-carousel';
+@use 'content-divider';
+@use 'loaders';
+@use 'spinner';
+@use 'table-list';
+@use 'hamburger';
+@use 'drag-handle';
+@use 'expand-button';
+
+// Interface elements
+@use 'interface-elements/side-panel';
+
+// Grids
+@use 'grids/basic-grid';
+@use 'grids/layout-grid';
+@use 'grids/grid-layout';
+@use 'grids/sd-kanban-list';
+
+// Layout
+@use 'layout/general';
+@use 'layout/basic-layout';
+@use 'layout/editor';
+@use 'layout/container';
+
+// Components
+@use 'components/list-item';
+@use 'components/card-item';
+@use 'components/sd-grid-item';
+@use 'components/sd-searchbar';
+@use 'components/overflow-stack';
+@use 'components/sd-collapse-box';
+@use 'components/sd-photo-preview';
+@use 'components/sd-media-carousel';
+@use 'components/sd-editor-popup';
+@use 'components/sd-comment-box';
+@use 'components/sd-slider';
+@use 'components/sd-loader';
+@use 'components/sd-circular-progress';
+@use 'components/sd-toaster';
+@use 'components/subnav';
+@use 'components/theme-selector';
+@use 'components/sd-dropzone';
+@use 'components/sd-notification-panel';
+@use 'components/sd-pagination';
+@use 'components/calendar-week-day';
+@use 'components/load-more-indicator';
+
+// Dropdowns
+@use 'dropdowns/basic-dropdown';
+@use 'dropdowns/nested-dropdown';
+@use 'dropdowns/input-dropdown';
+@use 'dropdowns/_navigation_dropdown';
+@use 'dropdowns/dropdown2';
+
+// Form elements
+@use 'form-elements/forms-general';
+@use 'form-elements/inputs';
+@use 'form-elements/switch';
+@use 'form-elements/checkbox';
+@use 'form-elements/radio';
+@use 'form-elements/autocomplete';
+@use 'form-elements/select-grid';
+@use 'form-elements/input-wrap';
+@use 'form-elements/input-preview';
+
+// Menus
+@use 'menus/sd-sidebar-menu';
+@use 'menus/sd-top-menu';
+@use 'menus/sd-left-navigation';
+@use 'menus/sd-content-navigation';
+@use 'menus/sd-bottom-tabs';
+
+// Editor
+@use 'editor/editor-themes';
+@use 'editor/editor-buttons';
+
+// Publisher specific
+@use 'publisher-styles';
+
+// Prime React
+@import '../../node_modules/@superdesk/primereact/resources/primereact.min.css';
+@import '../../node_modules/primeicons/primeicons.css';
+@include meta.load-css('_pr-superdesk-theme');
+@include meta.load-css('primereact/pr-dialog');
+@include meta.load-css('primereact/pr-menu');
+@include meta.load-css('primereact/pr-skeleton');
+@include meta.load-css('primereact/pr-tag-input');
+
+// React Components
+@include meta.load-css('avatar');
+@include meta.load-css('time');

package/app/styles/components/_calendar-week-day.scss

@@ -0,0 +1,99 @@
+@use "../variables/dimensions";
+
+
+.calendar-week-day__item {
+    --item-bg-color: var(--sd-item__main-Bg);
+    --item-border-color: transparent;
+    --item-radius: var(--b-radius--small);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: var(--item-radius);
+    background-color: var(--item-bg-color);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+    min-height: 3.2rem;
+    padding: var(--space--1-5);
+    &::before {
+        content: "";
+        width: 4px;
+        height: 100%;
+        position: absolute;
+        inset-block-start: 0px;
+        inset-inline-start: 0px;
+        background-color: var(--item-border-color);
+        z-index: 1;
+        border-radius: var(--item-radius) 0 0 var(--item-radius);
+    }
+
+    &.calendar-week-day__item--colored-bg {
+        outline-offset: -1px;
+        --item-bg-color: var(--color-surface-faded);
+        color: var(--item-fg-color);
+        &.boxed-list__item--default {
+            --item-border-color: var(--color-neutral-medium-default);
+        }
+        &.calendar-week-day__item--primary {
+            --item-bg-color: var(--color-primary-translucent);
+            --item-fg-color: var(--color-primary-text);
+            --item-border-color: var(--color-primary-highlight);
+        }
+        &.calendar-week-day__item--success {
+            --item-bg-color: var(--color-success-translucent);
+            --item-fg-color: var(--color-success-text);
+            --item-border-color: var(--color-success-highlight);
+        }
+        &.calendar-week-day__item--alert {
+            --item-bg-color: var(--color-alert-translucent);
+            --item-fg-color: var(--color-alert-text);
+            --item-border-color: var(--color-alert-highlight);
+        }
+        &.calendar-week-day__item--warning {
+            --item-bg-color: var(--color-warning-translucent);
+            --item-fg-color: var(--color-warning-text);
+            --item-border-color: var(--color-warning-highlight);
+        }
+        &.calendar-week-day__item--highlight {
+            --item-bg-color: var(--color-highlight-translucent);
+            --item-fg-color: var(--color-highlight-text);
+            --item-border-color: var(--color-highlight-highlight);
+        }
+    }
+
+}
+
+.calendar-week-day__item--selected {
+    box-shadow: var(--sd-shadow__item--selected);
+}
+.calendar-week-day__item--clickable {
+    &:hover {
+        cursor: pointer;
+        box-shadow: dimensions.$shadow__base--z2;
+    }
+    &:active {
+        box-shadow: 0 0 2px 1px hsla(0, 0%, 0%, 0.12);
+    }
+}
+.calendar-week-day__item--disabled {
+    pointer-events: none;
+    opacity: 0.7;
+}
+.calendar-week-day__item--hidden {
+    pointer-events: none;
+    opacity: 0 !important;
+}
+.calendar-week-day__container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    gap: var(--gap-0-5);
+    .calendar-week-day__item {
+        flex-grow: 1;
+    }
+}
+.calendar-user-week-row {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: 1fr;
+    gap: var(--gap-1);
+}