web-site-public-php/css/components.scss

$palettes: (
	"lavender": (#eee, #ccf, #99f, #66c, #339, #008, #005),
);
$palette: map-get($palettes, "lavender");
$ui-accent: nth($palette, 4);

$rainbow: #ff4d4f,#ff7a45,#ffa940,#ffc53d,#ffec3d,#bae637,#73d13d,#36cfc9,#40a9ff,#597ef7,#9254de,#f759ab;

$ui-font-size: calc(max(0.83333rem, min(13.3333px, 1rem)));

@mixin clearfix($side: both) {
	&::before, &::after {
		content: " ";
		display: table;
	}
	&::after {
		clear: #{$side};
	}
}
.cf {
	@include clearfix();
}

@mixin window($title-bar: ".title-bar", $content: ".content") {
	border: {
		width: 0px 6px 6px 6px;
		color: #ccc;
		style: solid;
		image: url('/assets/b_winframe.gif') 6;
	}
	box-shadow: 2px 2px 0px -1px black;
	background-color: #ddd;
	margin: 8px 0px;

	clear: both;

	> #{unquote($title-bar)} {
		border: {
			width: 3px 6px;
			color: #ccc;
			style: solid;
			image: url('/assets/b_wintitle.gif') 3 6;
		}
		background: {
			color: #ccc;
			image: url('/assets/winstripe.gif');
			position: center;
			repeat: repeat-x;
		}
		margin: 0px -6px;
		padding: 0px 4px;

		font-weight: 500;
		text-align: center;
		position: relative;

		text-overflow: ellipsis;
		overflow: clip;

		> * {
			background-color: #ccc;
			padding: 0px 8px;

			font-size: 1em;
			font-weight: 500;
			text-align: center;
			border: none;
			color: inherit;
			display: inline;
			margin: 0px 8px;
		}
		&::before {
			content: '';
			display: inline-block;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;

			width: 16px;
			padding-right: 4px;
			background: {
				color: #ccc;
				image: url('/assets/winclose.gif');
				position: left center;
				repeat: no-repeat;
			}
			vertical-align: middle;
		}
	}
	> #{unquote($content)} {
		margin: 8px;
	}
}
.window {
	@include window();
}

@mixin note-box() {
	border: {
		width: 4px 4px 4px 14px;
		color: #ccc;
		style: solid;
		image: url('/assets/b_winnote.gif') 4 4 4 14;
		image-repeat: repeat;
	}
	box-shadow: 2px 2px 0px -1px black;
	padding: 8px;

	position: relative;
	&::after {
		content: '';
		position: absolute;
		left: -12px;
		top: -2px;
		bottom: -2px;
		width: 10px;
		background: {
			image: url("/assets/winclosn.gif"), url("/assets/winshadn.gif");
			position: top, bottom;
			repeat: no-repeat, no-repeat;
		}
	}
}

@mixin button() {
	display: inline-block;
	background-clip: padding-box;
	background-color: #ddd;
	border: {
		width: 4px;
		image: url('/assets/b_btn.gif') 4;
		color: #fff;
		style: outset;
	}
	padding: 1px 6px;
	// border: solid 1px black;
	// border-radius: 5px;
	// box-shadow: 2px 2px 2px 0 #fff inset, -2px -2px 2px 0 #777 inset;
	// padding: 4px 9px;
	font: inherit;
	font-size: $ui-font-size;
	font-weight: 500;
	text-align: center;
	min-width: 5.4em;
	margin: 4px;

	cursor: url('/assets/mariopaint_hand_gold.cur'), auto;
	user-select: none;

	&:active {
		background-color: #666;
		color: #fff;
		border: {
			image: url('/assets/b_btnpush.gif') 4;
			color: #888;
			style: inset;
		}
	}

	.toolbar & {
		padding: 3px 6px;
		min-width: unset;
		margin: 4px 0px 4px -1px;
		border-width: 2px;
		border-image: url('/assets/b_gen.gif') 2;
		&:active {
			border-image: url('/assets/b_genpush.gif') 2;
		}
	}

	&.main { // &:default
		position: relative;
		transform-style: preserve-3d;
		&::before {
			content: '';
			position: absolute;
			left: -7px;
			top: -7px;
			right: -7px;
			bottom: -7px;
			border: {
				width: 5px;
				color: #aaa;
				style: ridge;
				image: url('/assets/b_btnring.gif') 5;
			}
			transform: translateZ(-1px);
		}
	}

	.icon {
		vertical-align: middle;
		margin-top: -0.25em;
	}
}
.icon {
	vertical-align: middle;
	margin-top: -0.25em;
}
button, input[type=button], input[type=submit], input[type=reset] {
	@include button();
}
input::file-selector-button {
	@include button();
}
a.button, a[href].button, a[href].button:visited {
	@include button();
	text-decoration: none;
	color: black;
}

.toolbar {
	display: flex;
	padding-left: 1px;
}

@mixin textbox() {
	background-color: #fff;
	background-clip: padding-box;
	border: {
		width: 2px;
		color: #eee;
		style: inset;
		image: url('/assets/b_text.gif') 2;
	}

	font: inherit;
	font-size: $ui-font-size;

	&:disabled {
		border: {
			color: #ccc;
			style: solid;
			image: url('/assets/b_textdis.gif') 2;
		}
	}
}

@mixin checkbox() {
	appearance: none;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 3px;
	border: none;

	vertical-align: text-top;

	background: {
		color: transparent;
		clip: border-box;
		image: url('/assets/checkbox.gif');
		position: 0px 0px;
	}

	cursor: url('/assets/mariopaint_hand_gold.cur'), auto;

	&:checked {
		background-position-x: -16px;
	}
	&:active {
		background-position-y: -16px;
	}
	&:disabled {
		background-position-y: -32px;
	}
}

input {
	@include textbox();
}
input[type=checkbox] {
	@include checkbox();
}
input[type=radio] {
	@include checkbox();
	background-image: url('/assets/radiobtn.gif');
}
textarea {
	@include textbox();
	display: block;
	resize: none;
	width: 100%;
	box-sizing: border-box;
}
label {
	cursor: url('/assets/mariopaint_hand_gold.cur'), auto;
}