alchemy-chimera 0.5.4 → 1.0.2

package/assets/stylesheets/chimera/chimera.scss

@@ -0,0 +1,451 @@
+@import "reset.scss";
+@import "fonts/roboto.scss";
+
+body {
+	font-family: 'Roboto', sans-serif;
+}
+
+.chimera-wrapper {
+	--sidebar-bg-color: #4a4e58;
+	--text-color: #475466;
+	--main-bg-color: #ebedf0;
+	--main-border-color: #dadee0;
+	
+	--button-bg-color: #F4F5F9;
+	--button-bg-hover-color: #e7e9f2;
+	--button-text-color: #3699FF;
+
+	--notification-bg-color: #4a4e58;
+	--notification-text-color: #f4f5f9;
+	--notification-border-color: #dadee0;
+
+	--color-title: #475466;
+	--color-box-border: #DADEE0;
+	--color-active: #3699FF;
+	--color-text: #475466;
+	--color-input-border: #CCD7E6;
+
+	display: flex;
+	min-height: 100vh;
+	width: 100%;
+	color: var(--text-color);
+}
+
+.btn {
+	//--button-bg-color: var(--context-background-color, --button-bg-color);
+	--local-text-color: var(--context-color, var(--button-text-color));
+	--local-border-color: var(--context-border-color, var(--button-border-color));
+
+	background-color: var(--button-bg-color);
+	color: var(--local-text-color);
+	border: 1px solid;
+	border-color: var(--local-border-color);
+
+	text-decoration: none;
+	line-height: 2rem;
+	min-width: 10rem;
+	text-align: center;
+	border-radius: 2px;
+	font-weight: 500;
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--button-bg-hover-color);
+		//filter: brightness(1.05);
+	}
+}
+
+.primary {
+	--context-color: #084298;
+	--context-background-color: #cfe2ff;
+	--context-border-color: #b6d4fe;
+}
+
+.secondary {
+	--context-color: #41464b;
+	--context-background-color: #e2e3e5;
+	--context-border-color: #d3d6d8;
+}
+
+.success {
+	--context-color: #0f5132;
+	--context-background-color: #d1e7dd;
+	--context-border-color: #badbcc;
+}
+
+.danger,
+.error {
+	--context-color: #842029;
+	--context-background-color: #f8d7da;
+	--context-border-color: #f5c2c7;
+}
+
+.warning {
+	--context-color: #664d03;
+	--context-background-color: #fff3cd;
+	--context-border-color: #ffecb5;
+}
+
+.info {
+	--context-color: #055160;
+	--context-background-color: #cff4fc;
+	--context-border-color: #b6effb;
+}
+
+.light {
+	--context-color: #636464;
+	--context-background-color: #fefefe;
+	--context-border-color: #fdfdfe;
+}
+
+.dark {
+	--context-color: #141619;
+	--context-background-color: #d3d3d4;
+	--context-border-color: #bcbebf;
+}
+
+.alert-box {
+	color: var(--context-color);
+	background-color: var(--context-background-color);
+	border: 1px solid;
+	border-color: var(--context-border-color);
+	padding: 1rem;
+	margin: 1rem 0 1rem;
+}
+
+.chimera-sidebar {
+	background-color: var(--sidebar-bg-color);
+	flex: 0 0 14rem;
+	display: flex;
+	flex-flow: column;
+
+	.sidebar-widgets {
+		position: sticky;
+		top: 1rem;
+	}
+}
+
+.chimera-content {
+	background-color: var(--main-bg-color);
+	flex: 1 0;
+	display: flex;
+	flex-flow: column;
+
+	.chimera-page-header {
+		border-color: var(--main-border-color);
+		border-style: solid;
+		border-width: 0 0 1px;
+		background-color: white;
+	}
+}
+
+.chimera-page-header {
+	height: 4rem;
+	display: flex;
+	padding: 0.8rem;
+	justify-content: space-between;
+
+	> * {
+		display: flex;
+		align-self: center;
+	}
+
+	.page-title {
+		font-size: 1.1rem;
+		font-weight: bold;
+	}
+
+	.page-actions {
+
+	}
+}
+
+.chimera-main {
+	flex: 1;
+	padding: 0.5rem;
+
+	&[data-he-template="chimera/widgets"] {
+		h1 {
+			padding-top: 0;
+		}
+	}
+}
+
+.main-widgets {
+	height: 100%;
+}
+
+.chimera-editor-widgets {
+	padding: 1rem;
+
+	alchemy-widget[type="alchemy_field"] {
+		margin-bottom: 1rem;
+	}
+
+	.form-field-info label,
+	.form-field-info alchemy-label {
+		display: block;
+		font-size: 1.2rem;
+	}
+}
+
+alchemy-widgets-navigation {
+	--border-color: #333333;
+
+	ul {
+		padding-left: 0;
+
+		li {
+			list-style: none;
+			border-bottom: 1px solid var(--border-color);
+		}
+
+		li:first-of-type {
+			border-top: 1px solid var(--border-color);
+		}
+	}
+
+	alchemy-widget[type="link"] {
+		width: 100%;
+		height: 3rem;
+		display: flex;
+
+		a {
+			width: 100%;
+			align-self: stretch;
+			display: flex;
+			align-items: center;
+			padding-left: 1rem;
+			text-decoration: none;
+			color: white;
+
+			&:hover,
+			&.active-link {
+				background-color: rgba(190, 190, 190, 0.5);
+			}
+		}
+	}
+}
+
+.chimera-main[data-he-template="chimera/widgets"] {
+	padding: 1rem;
+}
+
+.chimera-input-field {
+	padding: 0px 12px;
+	border: 1px solid var(--color-input-border);
+	color: var(--text-color);
+	-webkit-appearance: none;
+	height: 2rem;
+}
+
+.page-notification {
+	.notification {
+		border: 1px solid var(--notification-border-color);
+		background: var(--notification-bg-color);
+		color: var(--notification-text-color);
+		border-radius: 5px;
+		padding: 0.5rem 0.8rem;
+	}
+}
+
+.removing {
+	transition: opacity 2s;
+	opacity: 0;
+}
+
+alchemy-table .aft-column-filters input {
+	@extend .chimera-input-field;
+	width: 100%;
+}
+
+alchemy-form {
+	.error-area:not(:empty) {
+		@extend .error, .alert-box;
+		margin-top: 0;
+	}
+}
+
+alchemy-field {
+	border: 1px solid var(--color-box-border);
+	background-color: white;
+	border-radius: 4px;
+
+	// In case something goes wrong:
+	min-height: 1rem;
+
+	alchemy-label {
+		padding-left: 1rem;
+		line-height: 3rem;
+		font-size: 16px;
+		font-weight: 500;
+		color: var(--color-title);
+		border-bottom: 1px solid var(--color-box-border);
+	}
+
+	alchemy-field-translatable {
+		.prefix-buttons {
+			width: 100%;
+			border-bottom: 1px solid var(--color-box-border);
+			display: flex;
+
+			button {
+				flex: 1;
+				font-size: 16px;
+				font-weight: 500;
+				color: var(--button-text-color);
+				letter-spacing: 0px;
+				background: transparent;
+				border: none;
+				cursor: pointer;
+
+				height: 3rem;
+				display: flex;
+				flex-flow: column;
+				justify-content: center;
+				align-items: center;
+
+				&.active {
+					box-shadow: inset 0 -2px var(--color-active);
+				}
+
+				&:hover {
+					background-color: var(--button-bg-hover-color);
+				}
+			}
+		}
+	}
+
+	.field {
+		display: flex;
+		padding: 1rem;
+		flex: 1;
+
+		> * {
+			flex: 1;
+		}
+
+		> alchemy-widget {
+			border: 1px solid var(--color-input-border);
+			padding: 0 12px;
+		}
+	}
+
+	.field {
+		input[type="text"],
+		input[type="number"],
+		input[type="color"],
+		input[type="datetime-local"],
+		input[type="password"] {
+			@extend .chimera-input-field;
+			height: 3rem;
+		}
+
+		textarea {
+			@extend .chimera-input-field;
+			min-height: 5rem;
+			padding: 1rem;
+		}
+
+		input[type="color"] {
+			background-color: transparent;
+			border: none;
+			padding: 0;
+		}
+	}
+}
+
+alchemy-field-array {
+	.add-entry {
+		@extend .btn;
+		margin: 1rem 0 0 1rem;
+	}
+
+	button.remove {
+		@extend .btn;
+		@extend .danger;
+		min-width: 6rem;
+		margin: 0 1rem 1rem 0;
+	}
+
+	.entries {
+		margin-top: 0.5rem;
+	}
+
+	alchemy-field-array-entry:not(:last-of-type) {
+		//border-bottom: 1px solid gray;
+		position: relative;
+
+		&::after {
+			display: block;
+			content: " ";
+			background-color: lightgray;
+			position: absolute;
+			bottom: 0;
+			height: 1px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 80%;
+		}
+	}
+
+	alchemy-field-array-entry:not(:first-of-type) {
+		margin-top: 1rem;
+	}
+}
+
+.chimera-editor-widgets {
+
+	alchemy-widgets-column.toc-col {
+		flex: 1 1;
+	}
+
+	table-of-contents[elements-selector="alchemy-field"] {
+		align-self: start;
+		top: 2rem;
+		position: sticky;
+
+		ol {
+			list-style: none;
+			margin: 0 0 0 2rem;
+			padding: 0;
+
+			li {
+				a {
+					display: block;
+					line-height: 2rem;
+					border-bottom: 1px solid #aaa;
+					text-decoration: none;
+					opacity: 0.5;
+					color: #0070e4;
+				}
+			}
+	
+			li a.visible {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+alchemy-field-schema {
+	alchemy-field {
+		border: none;
+		margin-bottom: 1rem;
+	}
+}
+
+.aft-actions {
+	a {
+		color: var(--button-text-color);
+		background-color: var(--button-bg-color);
+		padding: 0.5rem;
+		border-radius: 6px;
+		margin: 0.2rem;
+		display: inline-block;
+
+		&:hover {
+			background-color: var(--button-bg-hover-color);
+		}
+	}
+}