vgapp 1.3.0 → 1.3.1

package/app/modules/vgnestable/scss/_variables.scss

@@ -1,60 +1,60 @@
-$nestable-map: (
-	list-transition: "background-color .15s ease, outline-color .15s ease",
-	list-drop-target-bg: rgba(13, 110, 253, .06),
-	list-drop-target-outline: 1px dashed rgba(13, 110, 253, .45),
-	list-drop-target-outline-offset: 2px,
-	list-drop-denied-bg: rgba(220, 53, 69, .06),
-	list-drop-denied-outline: 1px dashed rgba(220, 53, 69, .5),
-	list-drop-denied-outline-offset: 2px,
-	list-nested-margin-top: .35rem,
-	list-nested-padding-left: 1.25rem,
-	list-nested-border-left: 1px dashed rgba(0, 0, 0, .12),
-
-	item-margin: .35rem 0,
-	item-transition: opacity .15s ease,
-	item-dragging-opacity: .85,
-	item-ghost-opacity: .3,
-
-	inner-gap: .5rem,
-	inner-min-height: 40px,
-	inner-padding: .45rem .65rem,
-	inner-border: 1px solid rgba(0, 0, 0, .12),
-	inner-bg: #fff,
-	inner-border-radius: .45rem,
-
-	handle-size: 1.85rem,
-	handle-border: 1px solid rgba(0, 0, 0, .12),
-	handle-bg: rgba(0, 0, 0, .03),
-	handle-border-radius: .35rem,
-	handle-cursor: grab,
-	handle-active-cursor: grabbing,
-
-	toggle-size: 1.85rem,
-	toggle-border: 1px solid rgba(0, 0, 0, .12),
-	toggle-bg: rgba(0, 0, 0, .03),
-	toggle-border-radius: .35rem,
-	toggle-color: rgba(0, 0, 0, .65),
-	toggle-font-weight: 700,
-	toggle-line-height: 1,
-	toggle-hover-bg: rgba(0, 0, 0, .07),
-	toggle-svg-size: 16px,
-	toggle-svg-transition: transform .2s ease,
-	toggle-svg-closed-transform: rotate(0deg),
-	toggle-svg-open-transform: rotate(180deg),
-
-	handle-icon-min-width: .9rem,
-	handle-icon-color: rgba(0, 0, 0, .45),
-	handle-icon-font-weight: 700,
-	handle-icon-line-height: 1,
-	handle-icon-letter-spacing: .06em,
-
-	placeholder-border: 1px dashed rgba(13, 110, 253, .7),
-	placeholder-bg: rgba(13, 110, 253, .08),
-	placeholder-border-radius: .45rem,
-	placeholder-margin: .35rem 0,
-	placeholder-min-height: 40px,
-
-	drag-element-opacity: .92,
-	drag-element-transform: rotate(.5deg),
-	drag-element-shadow: 0 8px 22px rgba(0, 0, 0, .18)
-);
+$nestable-map: (
+	list-transition: "background-color .15s ease, outline-color .15s ease",
+	list-drop-target-bg: rgba(13, 110, 253, .06),
+	list-drop-target-outline: 1px dashed rgba(13, 110, 253, .45),
+	list-drop-target-outline-offset: 2px,
+	list-drop-denied-bg: rgba(220, 53, 69, .06),
+	list-drop-denied-outline: 1px dashed rgba(220, 53, 69, .5),
+	list-drop-denied-outline-offset: 2px,
+	list-nested-margin-top: .35rem,
+	list-nested-padding-left: 1.25rem,
+	list-nested-border-left: 1px dashed rgba(0, 0, 0, .12),
+
+	item-margin: .35rem 0,
+	item-transition: opacity .15s ease,
+	item-dragging-opacity: .85,
+	item-ghost-opacity: .3,
+
+	inner-gap: .5rem,
+	inner-min-height: 40px,
+	inner-padding: .45rem .65rem,
+	inner-border: 1px solid rgba(0, 0, 0, .12),
+	inner-bg: #fff,
+	inner-border-radius: .45rem,
+
+	handle-size: 1.85rem,
+	handle-border: 1px solid rgba(0, 0, 0, .12),
+	handle-bg: rgba(0, 0, 0, .03),
+	handle-border-radius: .35rem,
+	handle-cursor: grab,
+	handle-active-cursor: grabbing,
+
+	toggle-size: 1.85rem,
+	toggle-border: 1px solid rgba(0, 0, 0, .12),
+	toggle-bg: rgba(0, 0, 0, .03),
+	toggle-border-radius: .35rem,
+	toggle-color: rgba(0, 0, 0, .65),
+	toggle-font-weight: 700,
+	toggle-line-height: 1,
+	toggle-hover-bg: rgba(0, 0, 0, .07),
+	toggle-svg-size: 16px,
+	toggle-svg-transition: transform .2s ease,
+	toggle-svg-closed-transform: rotate(0deg),
+	toggle-svg-open-transform: rotate(180deg),
+
+	handle-icon-min-width: .9rem,
+	handle-icon-color: rgba(0, 0, 0, .45),
+	handle-icon-font-weight: 700,
+	handle-icon-line-height: 1,
+	handle-icon-letter-spacing: .06em,
+
+	placeholder-border: 1px dashed rgba(13, 110, 253, .7),
+	placeholder-bg: rgba(13, 110, 253, .08),
+	placeholder-border-radius: .45rem,
+	placeholder-margin: .35rem 0,
+	placeholder-min-height: 40px,
+
+	drag-element-opacity: .92,
+	drag-element-transform: rotate(.5deg),
+	drag-element-shadow: 0 8px 22px rgba(0, 0, 0, .18)
+);

package/app/modules/vgnestable/scss/vgnestable.scss

@@ -1,163 +1,163 @@
-/**
-*--------------------------------------------------------------------------
-* Module: VGNestable
-* Author: Vegas DEV
-* License: see LICENSE
-*--------------------------------------------------------------------------
-**/
-
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
-
-.vg-nestable {
-	@include mix-vars('nestable', $nestable-map);
-
-	&-list {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		transition: var(--vg-nestable-list-transition);
-
-		&.is-drop-target {
-			background: var(--vg-nestable-list-drop-target-bg);
-			outline: var(--vg-nestable-list-drop-target-outline);
-			outline-offset: var(--vg-nestable-list-drop-target-outline-offset);
-		}
-
-		&.is-drop-denied {
-			background: var(--vg-nestable-list-drop-denied-bg);
-			outline: var(--vg-nestable-list-drop-denied-outline);
-			outline-offset: var(--vg-nestable-list-drop-denied-outline-offset);
-		}
-
-		.vg-nestable-list {
-			margin-top: var(--vg-nestable-list-nested-margin-top);
-			padding-left: var(--vg-nestable-list-nested-padding-left);
-			border-left: var(--vg-nestable-list-nested-border-left);
-		}
-	}
-
-	&-item {
-		margin: var(--vg-nestable-item-margin);
-		position: relative;
-		transition: var(--vg-nestable-item-transition);
-
-		&.is-dragging {
-			opacity: var(--vg-nestable-item-dragging-opacity);
-		}
-
-		&.is-drag-ghost {
-			opacity: var(--vg-nestable-item-ghost-opacity);
-		}
-	}
-
-	&-inner {
-		display: flex;
-		align-items: center;
-		gap: var(--vg-nestable-inner-gap);
-		min-height: var(--vg-nestable-inner-min-height);
-		padding: var(--vg-nestable-inner-padding);
-		border: var(--vg-nestable-inner-border);
-		background: var(--vg-nestable-inner-bg);
-		border-radius: var(--vg-nestable-inner-border-radius);
-	}
-
-	&-handle {
-		flex: 0 0 auto;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--vg-nestable-handle-size);
-		min-height: var(--vg-nestable-handle-size);
-		padding: 0;
-		border: var(--vg-nestable-handle-border);
-		background: var(--vg-nestable-handle-bg);
-		border-radius: var(--vg-nestable-handle-border-radius);
-		cursor: var(--vg-nestable-handle-cursor);
-		user-select: none;
-
-		&:active {
-			cursor: var(--vg-nestable-handle-active-cursor);
-		}
-	}
-
-	&-collapse-toggle {
-		flex: 0 0 auto;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--vg-nestable-toggle-size);
-		min-height: var(--vg-nestable-toggle-size);
-		padding: 0;
-		border: var(--vg-nestable-toggle-border);
-		background: var(--vg-nestable-toggle-bg);
-		border-radius: var(--vg-nestable-toggle-border-radius);
-		cursor: pointer;
-		color: var(--vg-nestable-toggle-color);
-		font-weight: var(--vg-nestable-toggle-font-weight);
-		line-height: var(--vg-nestable-toggle-line-height);
-
-		&:hover {
-			background: var(--vg-nestable-toggle-hover-bg);
-		}
-
-		svg {
-			width: var(--vg-nestable-toggle-svg-size);
-			height: var(--vg-nestable-toggle-svg-size);
-			transition: var(--vg-nestable-toggle-svg-transition);
-			transform: var(--vg-nestable-toggle-svg-closed-transform);
-
-			path {
-				fill: currentColor;
-			}
-		}
-
-		&[aria-expanded="true"] {
-			svg {
-				transform: var(--vg-nestable-toggle-svg-open-transform);
-			}
-		}
-	}
-
-	&-handle-icon {
-		flex: 0 0 auto;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: var(--vg-nestable-handle-icon-min-width);
-		color: var(--vg-nestable-handle-icon-color);
-		font-weight: var(--vg-nestable-handle-icon-font-weight);
-		line-height: var(--vg-nestable-handle-icon-line-height);
-		letter-spacing: var(--vg-nestable-handle-icon-letter-spacing);
-	}
-
-	&-content {
-		flex: 1 1 auto;
-		min-width: 0;
-	}
-
-	&-placeholder {
-		list-style: none;
-		border: var(--vg-nestable-placeholder-border);
-		background: var(--vg-nestable-placeholder-bg);
-		border-radius: var(--vg-nestable-placeholder-border-radius);
-		margin: var(--vg-nestable-placeholder-margin);
-		min-height: var(--vg-nestable-placeholder-min-height);
-	}
-
-	&-placeholder-hidden {
-		border: 0;
-		background: transparent;
-		margin: 0;
-		min-height: 0;
-		height: 0 !important;
-	}
-
-	&-drag-element {
-		opacity: var(--vg-nestable-drag-element-opacity);
-		transform: var(--vg-nestable-drag-element-transform);
-		box-shadow: var(--vg-nestable-drag-element-shadow);
-	}
-}
+/**
+*--------------------------------------------------------------------------
+* Module: VGNestable
+* Author: Vegas DEV
+* License: see LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-nestable {
+	@include mix-vars('nestable', $nestable-map);
+
+	&-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		transition: var(--vg-nestable-list-transition);
+
+		&.is-drop-target {
+			background: var(--vg-nestable-list-drop-target-bg);
+			outline: var(--vg-nestable-list-drop-target-outline);
+			outline-offset: var(--vg-nestable-list-drop-target-outline-offset);
+		}
+
+		&.is-drop-denied {
+			background: var(--vg-nestable-list-drop-denied-bg);
+			outline: var(--vg-nestable-list-drop-denied-outline);
+			outline-offset: var(--vg-nestable-list-drop-denied-outline-offset);
+		}
+
+		.vg-nestable-list {
+			margin-top: var(--vg-nestable-list-nested-margin-top);
+			padding-left: var(--vg-nestable-list-nested-padding-left);
+			border-left: var(--vg-nestable-list-nested-border-left);
+		}
+	}
+
+	&-item {
+		margin: var(--vg-nestable-item-margin);
+		position: relative;
+		transition: var(--vg-nestable-item-transition);
+
+		&.is-dragging {
+			opacity: var(--vg-nestable-item-dragging-opacity);
+		}
+
+		&.is-drag-ghost {
+			opacity: var(--vg-nestable-item-ghost-opacity);
+		}
+	}
+
+	&-inner {
+		display: flex;
+		align-items: center;
+		gap: var(--vg-nestable-inner-gap);
+		min-height: var(--vg-nestable-inner-min-height);
+		padding: var(--vg-nestable-inner-padding);
+		border: var(--vg-nestable-inner-border);
+		background: var(--vg-nestable-inner-bg);
+		border-radius: var(--vg-nestable-inner-border-radius);
+	}
+
+	&-handle {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--vg-nestable-handle-size);
+		min-height: var(--vg-nestable-handle-size);
+		padding: 0;
+		border: var(--vg-nestable-handle-border);
+		background: var(--vg-nestable-handle-bg);
+		border-radius: var(--vg-nestable-handle-border-radius);
+		cursor: var(--vg-nestable-handle-cursor);
+		user-select: none;
+
+		&:active {
+			cursor: var(--vg-nestable-handle-active-cursor);
+		}
+	}
+
+	&-collapse-toggle {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--vg-nestable-toggle-size);
+		min-height: var(--vg-nestable-toggle-size);
+		padding: 0;
+		border: var(--vg-nestable-toggle-border);
+		background: var(--vg-nestable-toggle-bg);
+		border-radius: var(--vg-nestable-toggle-border-radius);
+		cursor: pointer;
+		color: var(--vg-nestable-toggle-color);
+		font-weight: var(--vg-nestable-toggle-font-weight);
+		line-height: var(--vg-nestable-toggle-line-height);
+
+		&:hover {
+			background: var(--vg-nestable-toggle-hover-bg);
+		}
+
+		svg {
+			width: var(--vg-nestable-toggle-svg-size);
+			height: var(--vg-nestable-toggle-svg-size);
+			transition: var(--vg-nestable-toggle-svg-transition);
+			transform: var(--vg-nestable-toggle-svg-closed-transform);
+
+			path {
+				fill: currentColor;
+			}
+		}
+
+		&[aria-expanded="true"] {
+			svg {
+				transform: var(--vg-nestable-toggle-svg-open-transform);
+			}
+		}
+	}
+
+	&-handle-icon {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--vg-nestable-handle-icon-min-width);
+		color: var(--vg-nestable-handle-icon-color);
+		font-weight: var(--vg-nestable-handle-icon-font-weight);
+		line-height: var(--vg-nestable-handle-icon-line-height);
+		letter-spacing: var(--vg-nestable-handle-icon-letter-spacing);
+	}
+
+	&-content {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	&-placeholder {
+		list-style: none;
+		border: var(--vg-nestable-placeholder-border);
+		background: var(--vg-nestable-placeholder-bg);
+		border-radius: var(--vg-nestable-placeholder-border-radius);
+		margin: var(--vg-nestable-placeholder-margin);
+		min-height: var(--vg-nestable-placeholder-min-height);
+	}
+
+	&-placeholder-hidden {
+		border: 0;
+		background: transparent;
+		margin: 0;
+		min-height: 0;
+		height: 0 !important;
+	}
+
+	&-drag-element {
+		opacity: var(--vg-nestable-drag-element-opacity);
+		transform: var(--vg-nestable-drag-element-transform);
+		box-shadow: var(--vg-nestable-drag-element-shadow);
+	}
+}