vgapp 1.4.4 → 1.4.6

package/app/modules/vgrangeslider/scss/_variables.scss

@@ -1,55 +1,55 @@
-@use "../../../utils/scss" as vg;
-
-$range-slider-map: (
-	bg: var(--vg-control-muted-bg, #f1f4f8),
-	fill: var(--vg-control-strong-color, #111827),
-	thumb: var(--vg-control-bg, #ffffff),
-	thumb-border: var(--vg-control-strong-color, #111827),
-	text: var(--vg-control-strong-color, #111827),
-	muted: var(--vg-text-muted-color, #6b7280),
-	gap: 10px,
-	height: 6px,
-	radius: 999px,
-	z-ruler: 1,
-	z-track: 2,
-	z-fill: 3,
-	z-input: 4,
-	z-tooltip: 5,
-	wrapper-min-height: 36px,
-	wrapper-padding-top: 12px,
-	wrapper-padding-bottom: 6px,
-	input-height: 24px,
-	thumb-size: 18px,
-	thumb-border-width: 2px,
-	thumb-shadow: 0 2px 10px var(--vg-shadow-soft-color, rgba(17, 24, 39, .16)),
-	tooltip-bg: var(--vg-surface-inverse-bg, #111827),
-	tooltip-color: var(--vg-text-inverse-color, #ffffff),
-	tooltip-padding-y: 4px,
-	tooltip-padding-x: 8px,
-	tooltip-radius: 6px,
-	tooltip-shadow: 0 6px 18px var(--vg-shadow-soft-color, rgba(17, 24, 39, .18)),
-	tooltip-font-size: 12px,
-	tooltip-line-height: 1.2,
-	labels-gap: 6px,
-	labels-font-size: 13px,
-	labels-line-height: 1.4,
-	label-font-weight: 500,
-	ruler-mark-width: 1px,
-	ruler-mark-height: 8px,
-	ruler-mark-bg: var(--vg-control-mark-color, #cbd5e1),
-	ruler-gap-y: 13px,
-	ruler-label-offset: 8px,
-	ruler-label-font-size: 11px,
-	ruler-label-line-height: 1.2,
-	ruler-label-color: var(--vg-text-muted-color, #6b7280),
-	ruler-active-mark-bg: var(--vg-control-strong-color, #111827),
-	ruler-active-label-color: var(--vg-control-strong-color, #111827),
-	ruler-inactive-opacity: .5,
-	ruler-active-opacity: 1,
-	status-success: var(--vg-success-color, #{vg.$success}),
-	status-warning: var(--vg-warning-color, #{vg.$warning}),
-	status-danger: var(--vg-danger-color, #{vg.$danger}),
-	status-success-contrast: var(--vg-success-contrast-color, #ffffff),
-	status-warning-contrast: var(--vg-warning-contrast-color, #111827),
-	status-danger-contrast: var(--vg-danger-contrast-color, #ffffff),
-) !default;
+@use "../../../utils/scss" as vg;
+
+$range-slider-map: (
+	bg: var(--vg-control-muted-bg, #f1f4f8),
+	fill: var(--vg-control-strong-color, #111827),
+	thumb: var(--vg-control-bg, #ffffff),
+	thumb-border: var(--vg-control-strong-color, #111827),
+	text: var(--vg-control-strong-color, #111827),
+	muted: var(--vg-text-muted-color, #6b7280),
+	gap: 10px,
+	height: 6px,
+	radius: 999px,
+	z-ruler: 1,
+	z-track: 2,
+	z-fill: 3,
+	z-input: 4,
+	z-tooltip: 5,
+	wrapper-min-height: 36px,
+	wrapper-padding-top: 12px,
+	wrapper-padding-bottom: 6px,
+	input-height: 24px,
+	thumb-size: 18px,
+	thumb-border-width: 2px,
+	thumb-shadow: 0 2px 10px var(--vg-shadow-soft-color, rgba(17, 24, 39, .16)),
+	tooltip-bg: var(--vg-surface-inverse-bg, #111827),
+	tooltip-color: var(--vg-text-inverse-color, #ffffff),
+	tooltip-padding-y: 4px,
+	tooltip-padding-x: 8px,
+	tooltip-radius: 6px,
+	tooltip-shadow: 0 6px 18px var(--vg-shadow-soft-color, rgba(17, 24, 39, .18)),
+	tooltip-font-size: 12px,
+	tooltip-line-height: 1.2,
+	labels-gap: 6px,
+	labels-font-size: 13px,
+	labels-line-height: 1.4,
+	label-font-weight: 500,
+	ruler-mark-width: 1px,
+	ruler-mark-height: 8px,
+	ruler-mark-bg: var(--vg-control-mark-color, #cbd5e1),
+	ruler-gap-y: 13px,
+	ruler-label-offset: 8px,
+	ruler-label-font-size: 11px,
+	ruler-label-line-height: 1.2,
+	ruler-label-color: var(--vg-text-muted-color, #6b7280),
+	ruler-active-mark-bg: var(--vg-control-strong-color, #111827),
+	ruler-active-label-color: var(--vg-control-strong-color, #111827),
+	ruler-inactive-opacity: .5,
+	ruler-active-opacity: 1,
+	status-success: var(--vg-success-color, #{vg.$success}),
+	status-warning: var(--vg-warning-color, #{vg.$warning}),
+	status-danger: var(--vg-danger-color, #{vg.$danger}),
+	status-success-contrast: var(--vg-success-contrast-color, #ffffff),
+	status-warning-contrast: var(--vg-warning-contrast-color, #111827),
+	status-danger-contrast: var(--vg-danger-contrast-color, #ffffff),
+) !default;

package/app/modules/vgrangeslider/scss/vgrangeslider.scss

@@ -1,239 +1,239 @@
-/**
-*--------------------------------------------------------------------------
-* Module: VGRangeSlider
-*--------------------------------------------------------------------------
-**/
-
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
-
-.vg-range-slider {
-	@include vg.mix-vars('range-slider', vars.$range-slider-map);
-
-	--vg-range-slider-ruler-height: calc(
-		var(--vg-range-slider-ruler-mark-height) +
-		var(--vg-range-slider-ruler-label-offset) +
-		(var(--vg-range-slider-ruler-label-font-size) * var(--vg-range-slider-ruler-label-line-height))
-	);
-	--vg-range-slider-ruler-offset-y: calc(var(--vg-range-slider-ruler-gap-y) * -1);
-	--vg-range-slider-wrapper-padding-bottom-ruler: calc(
-		var(--vg-range-slider-ruler-height) + var(--vg-range-slider-ruler-gap-y)
-	);
-
-	position: relative;
-	display: grid;
-	gap: var(--vg-range-slider-gap);
-	color: var(--vg-range-slider-text);
-
-	&.disabled {
-		opacity: .65;
-	}
-
-	&__wrapper {
-		position: relative;
-		min-height: var(--vg-range-slider-wrapper-min-height);
-		padding: var(--vg-range-slider-wrapper-padding-top) 0 var(--vg-range-slider-wrapper-padding-bottom);
-	}
-
-	&.is-skin-ruler {
-		.vg-range-slider__wrapper {
-			padding-bottom: var(--vg-range-slider-wrapper-padding-bottom-ruler);
-		}
-
-		.vg-range-slider__labels {
-			display: none;
-		}
-	}
-
-	&.is-ruler-dim-inactive {
-		.vg-range-slider__ruler-item {
-			opacity: var(--vg-range-slider-ruler-inactive-opacity);
-		}
-
-		.vg-range-slider__ruler-item.is-active {
-			opacity: var(--vg-range-slider-ruler-active-opacity);
-		}
-	}
-
-	&.is-skin-status {
-		&.is-status-success {
-			--vg-range-slider-fill: var(--vg-range-slider-status-success);
-			--vg-range-slider-thumb-border: var(--vg-range-slider-status-success);
-			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-success);
-			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-success-contrast);
-		}
-
-		&.is-status-warning {
-			--vg-range-slider-fill: var(--vg-range-slider-status-warning);
-			--vg-range-slider-thumb-border: var(--vg-range-slider-status-warning);
-			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-warning);
-			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-warning-contrast);
-		}
-
-		&.is-status-danger {
-			--vg-range-slider-fill: var(--vg-range-slider-status-danger);
-			--vg-range-slider-thumb-border: var(--vg-range-slider-status-danger);
-			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-danger);
-			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-danger-contrast);
-		}
-	}
-
-	&__track,
-	&__fill {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		height: var(--vg-range-slider-height);
-		border-radius: var(--vg-range-slider-radius);
-	}
-
-	&__track {
-		left: 0;
-		right: 0;
-		z-index: var(--vg-range-slider-z-track);
-		background: var(--vg-range-slider-bg);
-	}
-
-	&__fill {
-		left: 0;
-		width: 0;
-		z-index: var(--vg-range-slider-z-fill);
-		background: var(--vg-range-slider-fill);
-	}
-
-	&__input {
-		position: absolute;
-		top: 50%;
-		left: 0;
-		width: 100%;
-		height: var(--vg-range-slider-input-height);
-		transform: translateY(-50%);
-		margin: 0;
-		background: transparent;
-		pointer-events: none;
-		z-index: var(--vg-range-slider-z-input);
-		appearance: none;
-		-webkit-appearance: none;
-
-		&::-webkit-slider-runnable-track {
-			height: var(--vg-range-slider-height);
-			background: transparent;
-		}
-
-		&::-moz-range-track {
-			height: var(--vg-range-slider-height);
-			background: transparent;
-		}
-
-		&::-webkit-slider-thumb {
-			width: var(--vg-range-slider-thumb-size);
-			height: var(--vg-range-slider-thumb-size);
-			margin-top: calc((var(--vg-range-slider-height) - var(--vg-range-slider-thumb-size)) / 2);
-			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
-			border-radius: 50%;
-			background: var(--vg-range-slider-thumb);
-			box-shadow: var(--vg-range-slider-thumb-shadow);
-			cursor: pointer;
-			pointer-events: auto;
-			appearance: none;
-			-webkit-appearance: none;
-		}
-
-		&::-moz-range-thumb {
-			width: var(--vg-range-slider-thumb-size);
-			height: var(--vg-range-slider-thumb-size);
-			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
-			border-radius: 50%;
-			background: var(--vg-range-slider-thumb);
-			box-shadow: var(--vg-range-slider-thumb-shadow);
-			cursor: pointer;
-			pointer-events: auto;
-		}
-
-		&:focus {
-			outline: none;
-		}
-	}
-
-	&__tooltip {
-		position: absolute;
-		top: 0;
-		z-index: var(--vg-range-slider-z-tooltip);
-		transform: translate(-50%, -100%);
-		padding: var(--vg-range-slider-tooltip-padding-y) var(--vg-range-slider-tooltip-padding-x);
-		border-radius: var(--vg-range-slider-tooltip-radius);
-		background: var(--vg-range-slider-tooltip-bg);
-		box-shadow: var(--vg-range-slider-tooltip-shadow);
-		color: var(--vg-range-slider-tooltip-color);
-		font-size: var(--vg-range-slider-tooltip-font-size);
-		line-height: var(--vg-range-slider-tooltip-line-height);
-		white-space: nowrap;
-		pointer-events: none;
-
-		&.is-hidden {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
-
-	&__labels {
-		display: flex;
-		align-items: center;
-		gap: var(--vg-range-slider-labels-gap);
-		font-size: var(--vg-range-slider-labels-font-size);
-		line-height: var(--vg-range-slider-labels-line-height);
-	}
-
-	&__label {
-		font-weight: var(--vg-range-slider-label-font-weight);
-	}
-
-	&__separator {
-		color: var(--vg-range-slider-muted);
-	}
-
-	&__ruler {
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: var(--vg-range-slider-ruler-offset-y);
-		z-index: var(--vg-range-slider-z-ruler);
-		height: var(--vg-range-slider-ruler-height);
-		pointer-events: none;
-	}
-
-	&__ruler-item {
-		position: absolute;
-		bottom: 0;
-		transform: translateX(-50%);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		transition: opacity .2s ease;
-
-		&.is-active {
-			.vg-range-slider__ruler-mark {
-				background: var(--vg-range-slider-ruler-active-mark-bg);
-			}
-
-			.vg-range-slider__ruler-label {
-				color: var(--vg-range-slider-ruler-active-label-color);
-			}
-		}
-	}
-
-	&__ruler-mark {
-		width: var(--vg-range-slider-ruler-mark-width);
-		height: var(--vg-range-slider-ruler-mark-height);
-		background: var(--vg-range-slider-ruler-mark-bg);
-	}
-
-	&__ruler-label {
-		margin-top: var(--vg-range-slider-ruler-label-offset);
-		font-size: var(--vg-range-slider-ruler-label-font-size);
-		line-height: var(--vg-range-slider-ruler-label-line-height);
-		color: var(--vg-range-slider-ruler-label-color);
-		white-space: nowrap;
-	}
-}
+/**
+*--------------------------------------------------------------------------
+* Module: VGRangeSlider
+*--------------------------------------------------------------------------
+**/
+
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
+
+.vg-range-slider {
+	@include vg.mix-vars('range-slider', vars.$range-slider-map);
+
+	--vg-range-slider-ruler-height: calc(
+		var(--vg-range-slider-ruler-mark-height) +
+		var(--vg-range-slider-ruler-label-offset) +
+		(var(--vg-range-slider-ruler-label-font-size) * var(--vg-range-slider-ruler-label-line-height))
+	);
+	--vg-range-slider-ruler-offset-y: calc(var(--vg-range-slider-ruler-gap-y) * -1);
+	--vg-range-slider-wrapper-padding-bottom-ruler: calc(
+		var(--vg-range-slider-ruler-height) + var(--vg-range-slider-ruler-gap-y)
+	);
+
+	position: relative;
+	display: grid;
+	gap: var(--vg-range-slider-gap);
+	color: var(--vg-range-slider-text);
+
+	&.disabled {
+		opacity: .65;
+	}
+
+	&__wrapper {
+		position: relative;
+		min-height: var(--vg-range-slider-wrapper-min-height);
+		padding: var(--vg-range-slider-wrapper-padding-top) 0 var(--vg-range-slider-wrapper-padding-bottom);
+	}
+
+	&.is-skin-ruler {
+		.vg-range-slider__wrapper {
+			padding-bottom: var(--vg-range-slider-wrapper-padding-bottom-ruler);
+		}
+
+		.vg-range-slider__labels {
+			display: none;
+		}
+	}
+
+	&.is-ruler-dim-inactive {
+		.vg-range-slider__ruler-item {
+			opacity: var(--vg-range-slider-ruler-inactive-opacity);
+		}
+
+		.vg-range-slider__ruler-item.is-active {
+			opacity: var(--vg-range-slider-ruler-active-opacity);
+		}
+	}
+
+	&.is-skin-status {
+		&.is-status-success {
+			--vg-range-slider-fill: var(--vg-range-slider-status-success);
+			--vg-range-slider-thumb-border: var(--vg-range-slider-status-success);
+			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-success);
+			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-success-contrast);
+		}
+
+		&.is-status-warning {
+			--vg-range-slider-fill: var(--vg-range-slider-status-warning);
+			--vg-range-slider-thumb-border: var(--vg-range-slider-status-warning);
+			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-warning);
+			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-warning-contrast);
+		}
+
+		&.is-status-danger {
+			--vg-range-slider-fill: var(--vg-range-slider-status-danger);
+			--vg-range-slider-thumb-border: var(--vg-range-slider-status-danger);
+			--vg-range-slider-tooltip-bg: var(--vg-range-slider-status-danger);
+			--vg-range-slider-tooltip-color: var(--vg-range-slider-status-danger-contrast);
+		}
+	}
+
+	&__track,
+	&__fill {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		height: var(--vg-range-slider-height);
+		border-radius: var(--vg-range-slider-radius);
+	}
+
+	&__track {
+		left: 0;
+		right: 0;
+		z-index: var(--vg-range-slider-z-track);
+		background: var(--vg-range-slider-bg);
+	}
+
+	&__fill {
+		left: 0;
+		width: 0;
+		z-index: var(--vg-range-slider-z-fill);
+		background: var(--vg-range-slider-fill);
+	}
+
+	&__input {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		width: 100%;
+		height: var(--vg-range-slider-input-height);
+		transform: translateY(-50%);
+		margin: 0;
+		background: transparent;
+		pointer-events: none;
+		z-index: var(--vg-range-slider-z-input);
+		appearance: none;
+		-webkit-appearance: none;
+
+		&::-webkit-slider-runnable-track {
+			height: var(--vg-range-slider-height);
+			background: transparent;
+		}
+
+		&::-moz-range-track {
+			height: var(--vg-range-slider-height);
+			background: transparent;
+		}
+
+		&::-webkit-slider-thumb {
+			width: var(--vg-range-slider-thumb-size);
+			height: var(--vg-range-slider-thumb-size);
+			margin-top: calc((var(--vg-range-slider-height) - var(--vg-range-slider-thumb-size)) / 2);
+			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
+			border-radius: 50%;
+			background: var(--vg-range-slider-thumb);
+			box-shadow: var(--vg-range-slider-thumb-shadow);
+			cursor: pointer;
+			pointer-events: auto;
+			appearance: none;
+			-webkit-appearance: none;
+		}
+
+		&::-moz-range-thumb {
+			width: var(--vg-range-slider-thumb-size);
+			height: var(--vg-range-slider-thumb-size);
+			border: var(--vg-range-slider-thumb-border-width) solid var(--vg-range-slider-thumb-border);
+			border-radius: 50%;
+			background: var(--vg-range-slider-thumb);
+			box-shadow: var(--vg-range-slider-thumb-shadow);
+			cursor: pointer;
+			pointer-events: auto;
+		}
+
+		&:focus {
+			outline: none;
+		}
+	}
+
+	&__tooltip {
+		position: absolute;
+		top: 0;
+		z-index: var(--vg-range-slider-z-tooltip);
+		transform: translate(-50%, -100%);
+		padding: var(--vg-range-slider-tooltip-padding-y) var(--vg-range-slider-tooltip-padding-x);
+		border-radius: var(--vg-range-slider-tooltip-radius);
+		background: var(--vg-range-slider-tooltip-bg);
+		box-shadow: var(--vg-range-slider-tooltip-shadow);
+		color: var(--vg-range-slider-tooltip-color);
+		font-size: var(--vg-range-slider-tooltip-font-size);
+		line-height: var(--vg-range-slider-tooltip-line-height);
+		white-space: nowrap;
+		pointer-events: none;
+
+		&.is-hidden {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+
+	&__labels {
+		display: flex;
+		align-items: center;
+		gap: var(--vg-range-slider-labels-gap);
+		font-size: var(--vg-range-slider-labels-font-size);
+		line-height: var(--vg-range-slider-labels-line-height);
+	}
+
+	&__label {
+		font-weight: var(--vg-range-slider-label-font-weight);
+	}
+
+	&__separator {
+		color: var(--vg-range-slider-muted);
+	}
+
+	&__ruler {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: var(--vg-range-slider-ruler-offset-y);
+		z-index: var(--vg-range-slider-z-ruler);
+		height: var(--vg-range-slider-ruler-height);
+		pointer-events: none;
+	}
+
+	&__ruler-item {
+		position: absolute;
+		bottom: 0;
+		transform: translateX(-50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		transition: opacity .2s ease;
+
+		&.is-active {
+			.vg-range-slider__ruler-mark {
+				background: var(--vg-range-slider-ruler-active-mark-bg);
+			}
+
+			.vg-range-slider__ruler-label {
+				color: var(--vg-range-slider-ruler-active-label-color);
+			}
+		}
+	}
+
+	&__ruler-mark {
+		width: var(--vg-range-slider-ruler-mark-width);
+		height: var(--vg-range-slider-ruler-mark-height);
+		background: var(--vg-range-slider-ruler-mark-bg);
+	}
+
+	&__ruler-label {
+		margin-top: var(--vg-range-slider-ruler-label-offset);
+		font-size: var(--vg-range-slider-ruler-label-font-size);
+		line-height: var(--vg-range-slider-ruler-label-line-height);
+		color: var(--vg-range-slider-ruler-label-color);
+		white-space: nowrap;
+	}
+}

package/app/modules/vgrollup/scss/_variables.scss

@@ -1,15 +1,15 @@
-@use "../../../utils/scss" as vg;
-
-$rollup-map: (
-		transition: vg.$transition-base,
-		fade-height: 100px,
-		fade-background: linear-gradient(
-			180deg,
-			var(--vg-surface-transparent, rgba(255, 255, 255, 0)) 0%,
-			var(--vg-surface-bg, #{vg.$surface-bg}) 100%
-		)
-) !default;
-
-$rollup-button-map: (
-		align: center
-) !default;
+@use "../../../utils/scss" as vg;
+
+$rollup-map: (
+		transition: vg.$transition-base,
+		fade-height: 100px,
+		fade-background: linear-gradient(
+			180deg,
+			var(--vg-surface-transparent, rgba(255, 255, 255, 0)) 0%,
+			var(--vg-surface-bg, #{vg.$surface-bg}) 100%
+		)
+) !default;
+
+$rollup-button-map: (
+		align: center
+) !default;

package/app/modules/vgrollup/scss/vgrollup.scss

@@ -6,16 +6,16 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-rollup {
-	@include vg.mix-vars('rollup', vars.$rollup-map);
+	@include vg.mix-vars('rollup', vars.$rollup-map);
 	transform: var(--vg-rollup-transition);
 
 	&-button {
-		@include vg.mix-vars('rollup-button', vars.$rollup-button-map);
+		@include vg.mix-vars('rollup-button', vars.$rollup-button-map);
 		text-align: var(--vg-rollup-button-align);
 	}
 
@@ -51,4 +51,4 @@
 			display: none !important;
 		}
 	}
-}
+}