vue-pane 0.0.0

package/src/styles/view/placeholder/_folder.scss

@@ -0,0 +1,102 @@
+@use '../../common/defs';
+
+%vp-folder_title {
+	background-color: defs.cssVar('container-bg');
+	color: defs.cssVar('container-fg');
+	cursor: pointer;
+	display: block;
+	height: calc(#{defs.cssVar('container-unit-size')} + 4px);
+	line-height: calc(#{defs.cssVar('container-unit-size')} + 4px);
+	overflow: hidden;
+	padding-left: defs.cssVar('container-h-padding');
+	padding-right: calc(
+		2px * 2 + #{defs.cssVar('container-unit-size')} + #{defs.cssVar('container-h-padding')}
+	);
+	position: relative;
+	text-align: left;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	// Delay border-radius transition to avoid unwanted clipping
+	transition: border-radius defs.$fold-transition-duration ease-in-out
+		defs.$fold-transition-duration;
+
+	&:hover {
+		background-color: defs.cssVar('container-bg-hover');
+	}
+	&:focus {
+		background-color: defs.cssVar('container-bg-focus');
+	}
+	&:active {
+		background-color: defs.cssVar('container-bg-active');
+	}
+	&:disabled {
+		opacity: 0.5;
+	}
+}
+
+%vp-folder_mark {
+	$size: 6px;
+
+	background: linear-gradient(
+		to left,
+		defs.cssVar('container-fg'),
+		defs.cssVar('container-fg') 2px,
+		transparent 2px,
+		transparent 4px,
+		defs.cssVar('container-fg') 4px
+	);
+	border-radius: 2px;
+	bottom: 0;
+	content: '';
+	display: block;
+	height: $size;
+	right: calc(
+		#{defs.cssVar('container-h-padding')} + (
+			#{defs.cssVar('container-unit-size')} + 4px - #{$size}
+		) / 2 - 2px
+	);
+	margin: auto;
+	opacity: 0.5;
+	position: absolute;
+	top: 0;
+	transform: rotate(90deg);
+	transition: transform defs.$fold-transition-duration ease-in-out;
+	width: $size;
+}
+
+%vp-folder_mark-expanded {
+	transform: none;
+}
+
+%vp-folder_container {
+	box-sizing: border-box;
+	height: 0;
+	opacity: 0;
+	overflow: hidden;
+	padding-bottom: 0;
+	padding-top: 0;
+	position: relative;
+	transition: height defs.$fold-transition-duration ease-in-out,
+		opacity defs.$fold-transition-duration linear,
+		padding defs.$fold-transition-duration ease-in-out;
+}
+
+%vp-folder_container-shrinkedCompletely {
+	display: none;
+}
+
+%vp-folder_container-expanded {
+	opacity: 1;
+	padding-bottom: defs.cssVar('container-v-padding');
+	padding-top: defs.cssVar('container-v-padding');
+
+	// Allow popup elements (e.g. color picker) to overflow
+	overflow: visible;
+
+	// Delay opacity to avoid showing overflow content during expand
+	transition: height defs.$fold-transition-duration ease-in-out,
+		opacity defs.$fold-transition-duration linear defs.$fold-transition-duration,
+		padding defs.$fold-transition-duration ease-in-out;
+}

package/src/styles/view/placeholder/_input.scss

@@ -0,0 +1,26 @@
+@use '../../common/defs';
+
+%vp-input {
+	background-color: defs.cssVar('input-bg');
+	border-radius: defs.cssVar('blade-border-radius');
+	box-sizing: border-box;
+	color: defs.cssVar('input-fg');
+	font-family: inherit;
+	height: defs.cssVar('container-unit-size');
+	line-height: defs.cssVar('container-unit-size');
+	min-width: 0;
+	width: 100%;
+
+	&:hover {
+		background-color: defs.cssVar('input-bg-hover');
+	}
+	&:focus {
+		background-color: defs.cssVar('input-bg-focus');
+	}
+	&:active {
+		background-color: defs.cssVar('input-bg-active');
+	}
+	&:disabled {
+		opacity: 0.5;
+	}
+}

package/src/styles/view/placeholder/_list.scss

@@ -0,0 +1,35 @@
+@use './button';
+
+%vp-list {
+	position: relative;
+}
+
+%vp-list_select {
+	@extend %vp-button;
+
+	padding: 0 (16px + 2px * 2) 0 4px;
+	width: 100%;
+}
+
+%vp-list_arrow {
+	bottom: 0;
+	margin: auto;
+	pointer-events: none;
+	position: absolute;
+	right: 2px;
+	top: 0;
+
+	svg {
+		bottom: 0;
+		height: 16px;
+		margin: auto;
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 16px;
+
+		path {
+			fill: currentColor;
+		}
+	}
+}

package/src/styles/view/placeholder/_monitor.scss

@@ -0,0 +1,26 @@
+@use '../../common/defs';
+
+%vp-monitor {
+	background-color: defs.cssVar('monitor-bg');
+	border-radius: defs.cssVar('blade-border-radius');
+	box-sizing: border-box;
+	color: defs.cssVar('monitor-fg');
+	height: defs.cssVar('container-unit-size');
+	scrollbar-color: currentColor transparent;
+	scrollbar-width: thin;
+	width: 100%;
+
+	&::-webkit-scrollbar {
+		height: 8px;
+		width: 8px;
+	}
+	&::-webkit-scrollbar-corner {
+		background-color: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		background-clip: padding-box;
+		background-color: currentColor;
+		border: transparent solid 2px;
+		border-radius: 4px;
+	}
+}

package/src/styles/view/placeholder/_texts.scss

@@ -0,0 +1,11 @@
+%vp-texts {
+	display: flex;
+}
+
+%vp-texts_item {
+	width: 100%;
+
+	& + & {
+		margin-left: 2px;
+	}
+}

package/src/styles/view/placeholder/_theme.scss

@@ -0,0 +1,111 @@
+@use 'sass:color';
+@use 'sass:map';
+@use '../../common/defs';
+
+@mixin themeVariable($key, $ex-name, $value) {
+	$in-name: map.get(defs.$css-vars, $key);
+	@if $in-name == null {
+		@error 'Short CSS variable for \'#{$key}\' not found.';
+	}
+	--#{$in-name}: var(--#{defs.$prefix}-#{$ex-name}, #{$value});
+}
+
+%vp-theming {
+	$base-hue: 230;
+	$color-exdark: hsl($base-hue, 7%, 0%);
+	$color-dark: hsl($base-hue, 7%, 17%);
+	$color-light: hsl($base-hue, 7%, 70%);
+	$color-exlight: hsl($base-hue, 7%, 75%);
+	$bg-color: $color-dark;
+	$fg-color: $color-exlight;
+
+	// Base
+	@include themeVariable('base-bg', 'base-background-color', $bg-color);
+	@include themeVariable('base-border-radius', 'base-border-radius', 6px);
+	@include themeVariable(
+		'base-font',
+		'base-font-family',
+		('Roboto Mono', 'Source Code Pro', Menlo, Courier, monospace)
+	);
+	@include themeVariable('base-shadow', 'base-shadow-color', rgba(black, 0.2));
+
+	// Blade
+	@include themeVariable('blade-border-radius', 'blade-border-radius', 2px);
+	@include themeVariable('blade-h-padding', 'blade-horizontal-padding', 4px);
+	@include themeVariable('blade-value-width', 'blade-value-width', 160px);
+
+	// Button
+	@include themeVariable('button-bg', 'button-background-color', $color-light);
+	@include themeVariable(
+		'button-bg-active',
+		'button-background-color-active',
+		color.adjust($color-light, $lightness: 15%)
+	);
+	@include themeVariable(
+		'button-bg-focus',
+		'button-background-color-focus',
+		color.adjust($color-light, $lightness: 10%)
+	);
+	@include themeVariable(
+		'button-bg-hover',
+		'button-background-color-hover',
+		color.adjust($color-light, $lightness: 5%)
+	);
+	@include themeVariable('button-fg', 'button-foreground-color', $bg-color);
+
+	// Container
+	@include themeVariable(
+		'container-bg',
+		'container-background-color',
+		rgba($fg-color, 0.1)
+	);
+	@include themeVariable(
+		'container-bg-active',
+		'container-background-color-active',
+		rgba($fg-color, 0.25)
+	);
+	@include themeVariable(
+		'container-bg-focus',
+		'container-background-color-focus',
+		rgba($fg-color, 0.2)
+	);
+	@include themeVariable(
+		'container-bg-hover',
+		'container-background-color-hover',
+		rgba($fg-color, 0.15)
+	);
+	@include themeVariable('container-fg', 'container-foreground-color', $fg-color);
+	@include themeVariable('container-h-padding', 'container-horizontal-padding', 4px);
+	@include themeVariable('container-v-padding', 'container-vertical-padding', 4px);
+	@include themeVariable('container-unit-spacing', 'container-unit-spacing', 4px);
+	@include themeVariable('container-unit-size', 'container-unit-size', 20px);
+
+	// Input
+	@include themeVariable('input-bg', 'input-background-color', rgba($fg-color, 0.1));
+	@include themeVariable(
+		'input-bg-active',
+		'input-background-color-active',
+		rgba($fg-color, 0.25)
+	);
+	@include themeVariable(
+		'input-bg-focus',
+		'input-background-color-focus',
+		rgba($fg-color, 0.2)
+	);
+	@include themeVariable(
+		'input-bg-hover',
+		'input-background-color-hover',
+		rgba($fg-color, 0.15)
+	);
+	@include themeVariable('input-fg', 'input-foreground-color', $fg-color);
+
+	// Label
+	@include themeVariable('label-fg', 'label-foreground-color', rgba($fg-color, 0.7));
+
+	// Monitor
+	@include themeVariable('monitor-bg', 'monitor-background-color', rgba($color-exdark, 0.2));
+	@include themeVariable('monitor-fg', 'monitor-foreground-color', rgba($fg-color, 0.7));
+
+	// Groove
+	@include themeVariable('groove-fg', 'groove-foreground-color', rgba($fg-color, 0.1));
+}