@db-ux/core-components 4.4.0-loading-567cd0c → 4.4.1-floating-components-066d296

package/build/components/loading-indicator/loading-indicator.scss

@@ -1,515 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/animation";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/fonts";
-@use "@db-ux/core-foundations/build/styles/icons";
-@use "../../styles/dialog-init";
-@use "../../styles/internal/loading";
-
-$stroke-dasharray-inline: calc(var(--circle) * 2 - var(--stroke-width));
-$stroke-dasharray-onsite: calc(
-	var(--circle) * 2 + var(--stroke-width) + var(--radius)
-);
-$stroke-segment-length: calc((var(--circle) / 2 - var(--stroke-width)));
-$db-loading-indicator-track-color: color(
-	from var(--db-loading-indicator-segment-color) srgb r g b /
-		#{variables.$db-opacity-2xs}
-);
-
-%text-container {
-	div {
-		display: flex;
-
-		> label {
-			display: inline-flex;
-			align-items: center;
-
-			> progress {
-				display: none;
-			}
-		}
-
-		> span,
-		> label {
-			@extend %db-overwrite-font-size-xs;
-
-			color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
-		}
-	}
-
-	&:not([data-variant]),
-	&[data-variant="inline"] {
-		flex-direction: row;
-
-		div {
-			flex-direction: column;
-		}
-	}
-
-	&[data-variant="progress-bar"],
-	&[data-variant="onsite"] {
-		flex-direction: column;
-	}
-
-	&[data-variant="onsite"] {
-		div {
-			> span {
-				position: absolute;
-
-				// Center the progress text inside the spinner
-				inset-block-start: calc(
-					var(--db-loading-indicator-spinner-inline-size) / 2
-				);
-				inset-inline-start: calc(
-					var(--db-loading-indicator-spinner-inline-size) / 2
-				);
-				transform: translate(-50%, -50%);
-			}
-		}
-	}
-
-	[data-show-label="false"],
-	[data-show-progress-text="false"] {
-		display: none;
-	}
-}
-
-%spinner {
-	&:not([data-state]),
-	&[data-state="active"] {
-		&:not([data-indeterminate]),
-		&[data-indeterminate="true"] {
-			svg {
-				animation: rotate 1.5s linear 0s infinite normal none running;
-
-				@media screen and (prefers-reduced-motion: reduce) {
-					animation-duration: 5s;
-				}
-			}
-
-			&:not([data-variant]),
-			&[data-variant="inline"] {
-				.db-loading-indicator-circle-segment {
-					stroke-dashoffset: calc(
-						#{$stroke-dasharray-inline} - #{$stroke-segment-length}
-					);
-				}
-			}
-
-			&[data-variant="onsite"] {
-				.db-loading-indicator-circle-segment {
-					stroke-dashoffset: calc(
-						#{$stroke-dasharray-onsite} - #{$stroke-segment-length}
-					);
-				}
-			}
-		}
-
-		&[data-indeterminate="false"] {
-			&:not([data-variant]),
-			&[data-variant="inline"] {
-				.db-loading-indicator-circle-segment {
-					stroke-dashoffset: calc(
-						(1 - var(--db-loading-indicator-percentage, 0)) *
-							#{$stroke-dasharray-inline}
-					);
-				}
-			}
-
-			&[data-variant="onsite"] {
-				.db-loading-indicator-circle-segment {
-					stroke-dashoffset: calc(
-						(1 - var(--db-loading-indicator-percentage, 0)) *
-							#{$stroke-dasharray-onsite}
-					);
-				}
-			}
-		}
-	}
-
-	&[data-indeterminate="false"] {
-		svg {
-			transform: rotate(-90deg);
-		}
-	}
-
-	svg {
-		aspect-ratio: 1;
-		inline-size: var(--db-loading-indicator-spinner-inline-size, 1lh);
-	}
-
-	&:not([data-variant]),
-	&[data-variant="inline"] {
-		svg {
-			--radius: 6px; // This is the size based on the viewBox of the <svg>
-			--circle: 20px; // This is the size based on the viewBox of the <svg>
-			--stroke-width: 4px;
-		}
-
-		.db-loading-indicator-circle-segment {
-			stroke-dasharray: $stroke-dasharray-inline;
-		}
-
-		&[data-size="small"] {
-			svg {
-				@extend %db-overwrite-font-size-sm;
-			}
-
-			div > label::before {
-				@extend %db-overwrite-font-size-xs;
-			}
-		}
-
-		&:not([data-size]),
-		&[data-size="medium"] {
-			svg {
-				@extend %db-overwrite-font-size-md;
-			}
-
-			div > label::before {
-				@extend %db-overwrite-font-size-sm;
-			}
-		}
-	}
-
-	&[data-variant="onsite"] {
-		.db-loading-indicator-circle-segment {
-			stroke-dasharray: $stroke-dasharray-onsite;
-		}
-
-		svg {
-			--radius: 27px; // This is the size based on the viewBox of the <svg>
-			--circle: 64px; // This is the size based on the viewBox of the <svg>
-			--stroke-width: 10px;
-		}
-
-		&[data-size="small"] {
-			--db-loading-indicator-spinner-inline-size: #{variables.$db-sizing-md};
-
-			div {
-				> span {
-					// Hide progress text for onsite spinner, as it is centered inside the spinner and can overlap with the segment
-					display: none;
-				}
-			}
-		}
-
-		&:not([data-size]),
-		&[data-size="medium"] {
-			--db-loading-indicator-spinner-inline-size: #{variables.$db-sizing-lg};
-		}
-	}
-
-	circle {
-		cx: var(--circle);
-		cy: var(--circle);
-		r: var(--radius);
-		stroke-width: var(--stroke-width);
-		stroke-linecap: round;
-		fill: none;
-	}
-
-	.db-loading-indicator-circle-track {
-		stroke: $db-loading-indicator-track-color;
-	}
-
-	.db-loading-indicator-circle-segment {
-		stroke: var(--db-loading-indicator-segment-color);
-	}
-}
-
-$progress-bar-full-segment-inline-size: calc(
-	100% - var(--db-loading-indicator-progress-bar-segment-padding) * 2
-);
-
-%progress-bar {
-	inline-size: 100%;
-
-	&[data-size="small"] {
-		div {
-			&::before,
-			&::after {
-				--db-loading-indicator-progress-bar-track-block-size: #{variables.$db-sizing-3xs};
-			}
-		}
-	}
-
-	&:not([data-size]),
-	&[data-size="medium"] {
-		div {
-			&::before,
-			&::after {
-				--db-loading-indicator-progress-bar-track-block-size: #{variables.$db-sizing-2xs};
-			}
-		}
-	}
-
-	&:not([data-state]),
-	&[data-state="inactive"] {
-		div {
-			&::after {
-				inline-size: 0;
-			}
-		}
-	}
-
-	&[data-state="active"] {
-		&:not([data-indeterminate]),
-		&[data-indeterminate="true"] {
-			div {
-				&::after {
-					inline-size: 25%;
-					animation: wobbling 2.5s infinite linear;
-
-					@media screen and (prefers-reduced-motion: reduce) {
-						animation-duration: 5s;
-					}
-				}
-			}
-		}
-
-		&[data-indeterminate="false"] {
-			div {
-				&::after {
-					inline-size: calc(
-						var(--db-loading-indicator-percentage, 0) *
-							#{$progress-bar-full-segment-inline-size}
-					);
-				}
-			}
-		}
-	}
-
-	&[data-state="successful"],
-	&[data-state="critical"] {
-		div {
-			&::after {
-				inline-size: $progress-bar-full-segment-inline-size;
-			}
-		}
-	}
-
-	div {
-		&::before,
-		&::after {
-			content: "";
-			border-radius: variables.$db-border-radius-sm;
-			position: absolute;
-		}
-
-		&::before {
-			inline-size: 100%;
-			min-inline-size: variables.$db-sizing-md;
-			inset-block-start: 0;
-			inset-inline-start: 0;
-			block-size: var(
-				--db-loading-indicator-progress-bar-track-block-size
-			);
-			background-color: $db-loading-indicator-track-color;
-		}
-
-		&::after {
-			--db-loading-indicator-progress-bar-segment-padding: 2px;
-
-			z-index: 1;
-			inset-block-start: var(
-				--db-loading-indicator-progress-bar-segment-padding
-			);
-			inset-inline: var(
-				--db-loading-indicator-progress-bar-segment-padding
-			);
-			block-size: calc(
-				var(--db-loading-indicator-progress-bar-track-block-size) - 2 *
-					var(--db-loading-indicator-progress-bar-segment-padding)
-			);
-			background-color: var(--db-loading-indicator-segment-color);
-		}
-
-		// Provide space for the progress bar because it is absolute
-		padding-block-start: calc(
-			#{variables.$db-sizing-2xs} + var(--db-indicator-gap)
-		);
-		position: relative;
-		flex-direction: row;
-		justify-content: space-between;
-		gap: variables.$db-spacing-fixed-md;
-		inline-size: 100%;
-		align-items: center;
-
-		> label {
-			align-self: flex-start;
-		}
-
-		> span {
-			align-self: flex-end;
-		}
-	}
-}
-
-@mixin get-state-icon($name) {
-	@include icons.to-filled-icon;
-	@include icons.set-icon($name);
-	@include icons.variant-icons($name);
-
-	&::before {
-		--db-icon-color: var(--db-#{$name}-on-bg-basic-emphasis-70-default);
-	}
-}
-
-%states {
-	&:not([data-state="successful"], [data-state="critical"]) {
-		--db-loading-indicator-segment-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
-		--db-loading-indicator-segment-color-overlay: #{colors.$db-adaptive-on-bg-inverted-default};
-	}
-
-	&[data-state="inactive"] {
-		&:not([data-variant]),
-		&[data-variant="inline"],
-		&[data-variant="onsite"] {
-			.db-loading-indicator-circle-segment {
-				display: none;
-			}
-		}
-	}
-
-	@each $name in (successful, critical) {
-		&[data-state="#{$name}"] {
-			--db-loading-indicator-segment-color: var(
-				--db-#{$name}-on-bg-basic-emphasis-70-default
-			);
-
-			&:not([data-variant]),
-			&[data-variant="inline"] {
-				svg {
-					display: none;
-				}
-
-				div {
-					@include get-state-icon($name);
-
-					display: grid;
-					grid-template-columns: min-content 1fr;
-
-					&:has(> label) {
-						grid-template-areas: "icon label";
-					}
-
-					&:has(> span) {
-						grid-template-areas: "icon progress";
-
-						&:has(> label) {
-							grid-template-areas: "icon label" "icon progress";
-						}
-					}
-
-					&::before {
-						--db-icon-margin-end: var(--db-indicator-gap);
-
-						grid-area: icon;
-						align-self: center;
-					}
-
-					> label {
-						grid-area: label;
-					}
-
-					> span {
-						grid-area: progress;
-					}
-				}
-			}
-
-			&[data-variant="progress-bar"],
-			&[data-variant="onsite"] {
-				div {
-					> label {
-						@include get-state-icon($name);
-
-						&::before {
-							--db-icon-margin-end: var(--db-indicator-gap);
-						}
-					}
-				}
-			}
-
-			div {
-				> label,
-				> span {
-					color: var(--db-#{$name}-on-bg-basic-emphasis-80-default);
-				}
-			}
-		}
-	}
-}
-
-%overlay {
-	&:not([data-overlay="true"]) {
-		position: relative;
-		block-size: fit-content;
-	}
-
-	&[data-overlay="true"] {
-		// Hide label and progress when overlay
-		@extend %hide-label-and-progress-text;
-
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-
-		&::before {
-			content: "";
-			position: absolute;
-			inset: 0;
-			border-radius: inherit;
-			background-color: dialog-init.$backdrop-color-strong;
-		}
-
-		&[data-variant="progress-bar"] {
-			div {
-				max-inline-size: calc(100% - #{variables.$db-spacing-fixed-md});
-			}
-		}
-	}
-}
-
-*:has(
-	> .db-loading-indicator[data-overlay="true"],
-	> db-loading-indicator > .db-loading-indicator[data-overlay="true"]
-) {
-	position: relative;
-
-	.db-loading-indicator {
-		--db-loading-indicator-segment-color: var(
-			--db-loading-indicator-segment-color-overlay
-		);
-	}
-}
-
-.db-loading-indicator {
-	--db-indicator-gap: #{variables.$db-spacing-fixed-2xs};
-
-	@extend %text-container;
-	@extend %states;
-	@extend %overlay;
-
-	display: flex;
-	/* stylelint-disable-next-line db-ux/use-spacings */
-	gap: var(--db-indicator-gap);
-	align-items: center;
-	justify-content: center;
-
-	&:not([data-variant]),
-	&[data-variant="inline"],
-	&[data-variant="onsite"] {
-		@extend %spinner;
-	}
-
-	&[data-variant="progress-bar"] {
-		@extend %progress-bar;
-	}
-
-	&[data-delay="slow"],
-	&[data-delay="fast"] {
-		display: none;
-	}
-}

package/build/styles/internal/_loading.scss

@@ -1,76 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/colors";
-
-%hide-label-and-progress-text {
-	div {
-		label,
-		span {
-			display: none;
-		}
-	}
-}
-
-%interactive-element-with-loading {
-	&:has(.db-loading-indicator:not([data-overlay="true"])) {
-		// Hide icon inside button when loading indicator is present
-		&[data-icon],
-		&[data-icon-before] {
-			&::before {
-				display: none;
-			}
-		}
-
-		&[data-icon-after] {
-			&::after {
-				display: none;
-			}
-		}
-	}
-
-	&:has(.db-loading-indicator[data-state="inactive"]) {
-		.db-loading-indicator {
-			display: none;
-		}
-	}
-
-	.db-loading-indicator {
-		&:not([data-state="successful"], [data-state="critical"]) {
-			--db-loading-indicator-segment-color: currentcolor;
-			--db-loading-indicator-segment-color-overlay: currentcolor;
-		}
-
-		&:not([data-overlay]),
-		&:not([data-overlay="true"]) {
-			// Hide label and progress inside a button
-			@extend %hide-label-and-progress-text;
-
-			margin-inline-end: variables.$db-spacing-fixed-xs; // same margin like a icon
-		}
-
-		&[data-overlay="true"] {
-			background-color: transparent;
-
-			&::before {
-				z-index: 1;
-				background-color: var(
-					--db-loading-indicator-button-overlay-color,
-					inherit
-				);
-			}
-
-			&::after {
-				z-index: 0;
-				content: "";
-				position: absolute;
-				inset: 0;
-				border-radius: inherit;
-				background-color: colors.$db-adaptive-bg-basic-level-1-default;
-			}
-
-			svg,
-			div {
-				z-index: 2;
-			}
-		}
-	}
-}