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

package/app/styles/form-elements/_forms-general.scss

@@ -0,0 +1,543 @@
+@use "../mixins";
+@use "../variables/dimensions";
+@use "../variables/typography";
+
+.form__row {
+	width: 100%;
+	padding-block-end: 2rem;
+}
+
+.form__row--flex {
+	display: flex;
+	align-items: baseline;
+}
+
+.form__row--no-padding {
+	padding-block-end: 0;
+}
+
+.form__row--small-padding,
+.form__row--s-padding {
+	padding-block-end: 0.8rem;
+}
+
+.form__row--l-padding {
+	padding-block-end: 3rem;
+}
+
+.form__row--xl-padding {
+	padding-block-end: 4rem;
+}
+
+.form__row--inner {
+	padding-block-end: 0;
+	padding-block-start: 1rem;
+}
+
+.form__row--bordered {
+	padding: 1rem 0;
+	border-block-end: 1px solid rgba(123, 123, 123, 0.3);
+
+	&:first-child,
+	&:only-child {
+		border-block-start: 1px solid rgba(123, 123, 123, 0.3);
+	}
+}
+
+.form__row--flex-NEW {
+	display: flex;
+	align-items: baseline;
+}
+
+.form__row--flex {
+	// behavior for simple inline form inputs
+	.sd-line-input {
+		flex-grow: 1;
+	}
+
+	.sd-line-input+.btn {
+		flex-grow: 0;
+		vertical-align: bottom;
+		margin: 0 0 0 1.2rem;
+	}
+
+	.sd-line-input+.sd-line-input {
+		margin-inline-start: 1.2rem;
+	}
+
+	// For more complex inline form combinations an additional element that goes inside .form__row--flex container is provided.
+	.form__row-item {
+		flex-grow: 1;
+		margin: 0 0.6rem;
+
+		&:first-child {
+			margin-inline-start: 0;
+		}
+
+		&:last-child {
+			margin-inline-end: 0;
+		}
+
+		&:only-child {
+			margin: 0;
+		}
+	}
+
+	.form__row-item--no-grow {
+		flex-basis: auto;
+		flex-grow: 0;
+	}
+}
+
+.form__row,
+.form__row-item {
+	label {
+		vertical-align: middle;
+		line-height: 1;
+		margin-inline-end: 0.6rem;
+		@include mixins.transition(color, 0.15s, ease-in);
+
+		&.form__row-label.form-label {
+			display: block;
+			width: 100%;
+			margin-block-end: 1rem;
+			margin-inline-end: 0;
+		}
+	}
+}
+
+.label--active {
+	color: var(--sd-colour-interactive--darken-10);
+}
+
+.form__block {
+	display: block;
+	margin-block-end: 1rem;
+	padding: 2rem;
+	border-radius: dimensions.$border-radius__base--x-small;
+	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+.form__heading {
+	font-size: 1.6rem;
+	padding-block-end: 1.2rem;
+	line-height: 120%;
+}
+
+
+
+/// ---------------------------- NEW FORM LAYOUT ---------------------------- ///
+
+.form__group {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	align-items: flex-start;
+	gap: dimensions.$sd-base-increment * 2;
+
+	.form__item {
+		margin-block-end: dimensions.$sd-base-increment * 2;
+	}
+}
+
+.form__group--condensed {
+	gap: dimensions.$sd-base-increment;
+}
+
+.form__group--relaxed {
+	gap: dimensions.$sd-base-increment * 3;
+}
+
+.form__group--mb-0 {
+	.form__item {
+		margin-block-end: 0;
+	}
+}
+
+.form__group--mb-1 {
+	.form__item {
+		margin-block-end: dimensions.$sd-base-increment;
+	}
+}
+
+.form__group--mb-2 {
+	.form__item {
+		margin-block-end: dimensions.$sd-base-increment * 2;
+	}
+}
+
+.form__group--mb-3 {
+	.form__item {
+		margin-block-end: dimensions.$sd-base-increment * 3;
+	}
+}
+
+.form__group--mb-4 {
+	.form__item {
+		margin-block-end: dimensions.$sd-base-increment * 4;
+	}
+}
+
+.form__group--rows,
+.form__group--vertical {
+	flex-direction: column;
+	align-items: stretch;
+
+	.form__item {
+		margin-block-end: 0 !important;
+	}
+
+	&.form__group--mb-0 {
+		margin-block-end: 0;
+
+	}
+
+	&.form__group--mb-1 {
+		margin-block-end: dimensions.$sd-base-increment;
+
+	}
+
+	&.form__group--mb-2 {
+		margin-block-end: dimensions.$sd-base-increment * 2;
+
+	}
+
+	&.form__group--mb-3 {
+		margin-block-end: dimensions.$sd-base-increment * 3;
+
+	}
+
+	&.form__group--mb-4 {
+		margin-block-end: dimensions.$sd-base-increment * 4;
+	}
+}
+
+.form__header {
+	margin-block-end: 1rem;
+	font-size: 1.6rem;
+}
+
+.form__label {
+	margin-block-end: 0.8rem;
+}
+
+.form__item {
+	flex: 1 1 0;
+	min-width: 12rem;
+	margin: 0;
+}
+
+.form__item--auto-width {
+	flex-grow: 0;
+	min-width: 0;
+	flex-basis: auto;
+}
+
+.form__text-block {
+	min-height: var(--form-element-height-default);
+	margin-block-start: dimensions.$form-label-height;
+	color: inherit;
+	font-size: 1.3rem;
+	display: inline-flex;
+	align-items: center;
+}
+
+.form__item.form__item--auto-width {
+
+	.btn,
+	.icn-btn {
+		margin-block-start: dimensions.$form-label-height;
+	}
+}
+
+.form__group.form__group--inline-label {
+	.sd-input {
+		grid-template-columns: auto 1fr auto;
+		grid-template-rows: auto auto auto;
+
+		.sd-input__label {
+			grid-row: 2/3;
+			grid-column: 1/2;
+			padding-inline-end: 1rem;
+			padding-inline-start: 0;
+			padding-block-start: 0.4rem;
+			padding-block-end: 0;
+			position: relative;
+			max-width: 260px;
+			min-width: 100px;
+			text-align: end;
+			position: relative;
+			align-self: center;
+			line-height: 1.2;
+
+			&.a11y-only {
+				font-size: 0.01px !important;
+				height: 0;
+				width: 0;
+				min-width: 0;
+				overflow: hidden;
+				padding: 0 !important;
+				margin: 0 !important;
+				opacity: 0 !important;
+			}
+		}
+	}
+
+	.form__text-block {
+		margin-block-start: 0;
+	}
+
+	.form__item.form__item--auto-width {
+
+		.btn,
+		.icn-btn {
+			margin-block-start: 0;
+		}
+	}
+}
+
+.sd-form-element {
+	background-color: var(--color-form-bg);
+	color: var(--color-text);
+}
+
+
+
+/// ----------------------------  FORM LAYOUT (Do not use anymore) --------------------------- ///
+
+.form__group-new {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	align-items: flex-start;
+	gap: dimensions.$sd-base-increment * 2;
+
+	.sd-input {
+		flex: 1 1 0;
+		min-width: 12rem;
+		margin: 0;
+		align-self: flex-start;
+	}
+
+	.btn,
+	.icn-btn {
+		flex: 0 0 auto;
+		margin-block-start: dimensions.$form-label-height;
+	}
+
+	.sd-text {
+		min-height: var(--form-element-height-default);
+		margin-block-start: dimensions.$form-label-height;
+		line-height: var(--form-element-height-default);
+	}
+}
+
+.form__group-new--condensed {
+	gap: dimensions.$sd-base-increment;
+}
+
+.form__group-new--relaxed {
+	gap: dimensions.$sd-base-increment * 3;
+}
+
+.form__group-new--mb-0 {
+	margin-block-end: 0;
+}
+
+.form__group-new--mb-1 {
+	margin-block-end: dimensions.$sd-base-increment;
+}
+
+.form__group-new--mb-2 {
+	margin-block-end: dimensions.$sd-base-increment * 2;
+}
+
+.form__group-new--mb-3 {
+	margin-block-end: dimensions.$sd-base-increment * 3;
+}
+
+.form__group-new--mb-4 {
+	margin-block-end: dimensions.$sd-base-increment * 4;
+}
+
+.form__group-new--inline-labels {
+
+	.btn,
+	.icn-btn,
+	.sd-text {
+		margin-block-start: 0;
+	}
+}
+
+.form__group-new--inline-labels {
+
+	.btn,
+	.icn-btn,
+	.sd-text {
+		margin-block-start: 0;
+	}
+}
+
+.form__group-new__wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	.form__group-new__label {
+		flex: 0 0 auto;
+		min-height: dimensions.$form-label-height + 0.4rem;
+		display: inline-block;
+		font-size: 1.6rem;
+		margin: 0;
+		margin-block-end: dimensions.$sd-base-increment * 1.5;
+		line-height: 1;
+		color: var(--color-label-text);
+		font-weight: 500;
+		letter-spacing: 0.02em;
+	}
+}
+/// --------------------------  FORM LAYOUT (Do not use anymore) END ------------------------ ///
+/// ----------------------------------------------------------------------------------------- ///
+
+
+/// ---------------------------- NEW FORM LAYOUT !!! USE THIS ONE INSTEAD OF THE OLD ONE ---------------------------- ///
+
+.form-layout {
+	container-type: inline-size;
+    container-name: form-container;
+	--form-layout-row-gap: var(--gap-4);
+    --form-padding: 0;
+    --form-heading-font-size: clamp(1.8rem, 4cqi, 2.1rem);
+	--form-heading-margin: 0;
+    padding: var(--form-padding);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--form-layout-row-gap);
+	width: 100%;
+    .form-heading-new {
+        font-family: typography.$baseFontFamilySerif;
+        font-weight: 900;
+        font-size: var(--form-heading-font-size);
+        line-height: 1.1;
+		margin-block-end: var(--form-heading-margin);
+    }
+    legend {
+        float: left;
+    }
+	&.form-layout--compact {
+		--form-layout-row-gap: var(--gap-2);
+	}
+	&.form-layout--standard {
+		--form-layout-row-gap: var(--gap-4);
+	}
+	&.form-layout--relaxed {
+		--form-layout-row-gap: var(--gap-5);
+	}
+	&.form-layout--preserve-spaces {
+		--form-layout-row-gap: var(--gap-1-5);
+		--form-heading-margin: var(--space--2);
+		.sd-input .sd-input__message-box {
+			min-height: var(--space--3);
+		}
+		&.form-layout--compact {
+			--form-layout-row-gap: var(--gap-0-5);
+			--form-heading-margin: var(--space--2);
+		}
+		&.form-layout--standard {
+			--form-layout-row-gap: var(--gap-1-5);
+			--form-heading-margin: var(--space--2);
+		}
+		&.form-layout--relaxed {
+			--form-layout-row-gap: var(--gap-2);
+			--form-heading-margin: var(--space--1);
+		}
+	}
+	&.form-layout--mb-none {
+		margin-block-end: 0;
+	}
+	&.form-layout--mb-spaces {
+		margin-block-end: var(--form-layout-row-gap);
+	}
+}
+
+.form-group {
+	--form-group-col-gap: var(--gap-5);
+    display: flex;
+	row-gap: var(--form-layout-row-gap);
+    column-gap: var(--form-group-col-gap);
+    &.form-group--grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+    }
+	.form-group__text-block {
+		min-height: var(--form-element-height-default);
+		color: inherit;
+		font-size: 1.3rem;
+		display: inline-flex;
+		align-items: center;
+	}
+}
+
+.form-group__wrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	row-gap: var(--form-layout-row-gap);
+	.form-group__label {
+		font-size: 1.6rem;
+		font-weight: 500;
+		color: var(--color-text);
+		line-height: 1;
+		margin-block-end: var(--space--0-5);
+	}
+}
+
+.form-group-item {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+	min-height: var(--form-element-height-default);
+    &.form-group-item--span-2 {
+        grid-column: span 2;
+    }
+    &.form-group-item--span-3 {
+        grid-column: span 3;
+    }
+    &.form-group-item--span-4 {
+        grid-column: span 4;
+    }
+	&.form-group-item--auto-width {
+		flex-grow: 0;
+		min-width: 0;
+		flex-basis: auto;
+	}
+	> *:not(.sd-input):not(.form-group-item__inner):not(.sd-check__group-new) {
+		margin-block-start: 1.6rem;
+	}
+	.form-group-item__inner {
+		display: flex;
+		gap: var(--space--1);
+		align-items: flex-start;
+		> *:not(.sd-input) {
+			margin-block-start: 1.6rem;
+		}
+	}
+}
+
+.form-group-item--auto-width {
+	flex-grow: 0;
+	min-width: 0;
+	flex-basis: auto;
+}
+
+@container form-container (width <= 900px) {
+    .form-group {
+        --form-group-col-gap: var(--gap-3);
+    }
+}
+
+@container form-container (width<= 500px) {
+    .form-group {
+        --form-group-col-gap: var(--gap-1-5);
+    }
+}

package/app/styles/form-elements/_input-preview.scss

@@ -0,0 +1,80 @@
+@use "sass:math";
+@use "../tag-labels";
+@use "../variables/dimensions";
+
+.tags-preview {
+    display: flex;
+    align-items: flex-start;
+    word-wrap: break-word;
+    min-height: var(--form-element-height-default);
+    padding: 0.4rem 0.4rem 0.3rem 0.4rem;
+    overflow: hidden;
+    background-color: transparent;
+
+    .tags-preview__tag-list {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: math.div(dimensions.$sd-base-increment, 2);
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .tags-preview__tag-item {
+        @include tag-labels.tag-label;
+        color: currentColor;
+        background: tag-labels.$tag-label-BG-default;
+    }
+
+    .tags-preview__tag-item--single-select {
+        border-radius: 2px;
+        padding-inline-start: 0.714em;
+        padding-inline-end: 0.857em;
+    }
+
+    .tags-preview__tag-item--border {
+        border-inline-start: solid;
+        border-left-width: 5px;
+    }
+
+    .tags-input__helper-box {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.sd-input__duration-input-preview {
+    display: flex;
+    gap: 2px;
+    grid-row: 2/3;
+    grid-column: 2/4;
+
+    &:focus-within {
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        background-color: var(--sd-colour-interactive--alpha-20);
+    }
+
+    .duration-input-preview {
+        display: inline-block;
+        text-align: end;
+        color: var(--color-text);
+        width: 2.5ch;
+        height: 3.2rem;
+        font-size: 1.4rem;
+        line-height: 3.2rem;
+    }
+
+    .sd-input__suffix {
+        height: 3.2rem;
+        line-height: 3.2rem;
+        font-size: 1.4rem;
+        color: var(--color-text-muted);
+        display: inline-block;
+        pointer-events: none;
+        margin-inline-end: 2px;
+        text-align: center;
+    }
+}