alchemy-chimera 0.5.4 → 1.0.2

package/assets/stylesheets/chimera/chimera.less

@@ -1,1075 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
-@import "topsoil/less/topsoil.less";
-
-@color-one: #F4F4F4;
-@color-two: #191919;
-@color-three: #313131;
-@color-four: #9A9A9A;
-@color-five: #7B7B7B;
-@color-six: #222222;
-
-@color-dark: @color-two;
-@color-light: @color-one;
-
-@color-success: #47C37B;
-@color-info: #70B9EB;
-@color-warning: #F3B760;
-@color-primary: #5C90D2;
-@color-danger: #D26A5C;
-@color-default: @color-one;
-
-@color-background: @color-one;
-@color-background-frame: @color-two;
-@color-background-title: @color-background;
-@color-menu-text: @color-four;
-
-@shadow-cage: inset 0.1rem 0.1rem 0.2rem rgba(0,0,0,0), inset 0.15rem 0.15rem 0.15rem rgba(0,0,0,0.1);
-
-@height-topbar: 3.5rem;
-@width-sidebar: 18rem;
-
-@nav-border-top: 1px solid @color-six;
-@nav-border-bottom: 1px solid #0A0C0E;
-@nav-background-hover: @color-six;
-@nav-background-child: #202020;
-
-html {
-	font-family: 'Open Sans', sans-serif;
-
-	-webkit-font-smoothing: antialiased !important;
-	-webkit-tap-highlight-color: transparent;
-	text-rendering: optimizeLegibility;
-
-	// Set rem basis
-	font-size: 14px;
-}
-
-body {
-	background-color: @color-background;
-}
-
-body,
-.enclosure {
-	height: 100vh;
-}
-
-x-hawkejs {
-	display: block;
-}
-
-.chimera-brand-anchor {
-	text-decoration: none;
-	display: inline-block;
-	color: @color-menu-text;
-	margin-left: 1rem;
-
-	h1 {
-		font-size: 1.5rem;
-		font-weight: normal;
-	}
-}
-
-.enclosure {
-	.flexParent(column, space-between, nowrap);
-
-	.page-topbar {
-		.flexChild(0 0 @height-topbar);
-		.flexParent();
-		background-color: @color-background-frame;
-
-		// Vertically center objects
-		align-items: center;
-
-		// Float them to the left
-		justify-content: flex-start;
-	}
-
-	.chimera-brand {
-		display: inline-block;
-		width: @width-sidebar;
-	}
-
-	.chimera-title {
-
-		// Title can expand, but box should always be visible
-		min-width: 15rem;
-
-		// The height needs to be a bit higher than the topbar,
-		// so the shadow is hidden
-		height: (@height-topbar + 0.5rem);
-
-		// The background color should be the same as the body bg
-		background-color: @color-background-title;
-
-		// The text color is the same as the frame bg
-		color: @color-background-frame;
-
-		// Layer the title over the cage
-		z-index: 3;
-
-		// Use the same inset shadow as the cage
-		box-shadow: @shadow-cage;
-
-		// Turn it into a flex item, so we can vertically center
-		.flexParent();
-
-		// Center the content vertically
-		align-items: center;
-
-		// Regular styling
-		text-shadow: 0.15rem 0.15rem rgba(100,100,100,0.1);
-		padding: 0 1rem;
-		font-size: 2rem;
-	}
-
-	.page-container {
-		.flexChild(1 0 auto);
-		.flexParent(row, space-between, nowrap);
-	}
-
-	.chimera-sidenav {
-		.flexChild(0 0 @width-sidebar);
-		background-color: @color-background-frame;
-	}
-
-	.chimera-cage {
-		.flexChild(1);
-		box-shadow: @shadow-cage;
-		padding: 1rem;
-	}
-}
-
-.side-nav {
-
-	>.side-nav-collection {
-		// Border colors are meant to be reversed here,
-		// the top is actually the bottom of the last entry
-		border-top: @nav-border-bottom;
-		border-bottom: @nav-border-top;
-	}
-
-	.side-nav-collection {
-		padding: 0;
-		margin: 0;
-
-		&.is-child {
-			display: none;
-
-			.side-nav-link {
-				padding-left: 2rem;
-				background-color: @nav-background-child;
-
-				// Sub item icons should be a bit smaller
-				.link-icon {
-					width: 1.1rem;
-					font-size: 1.5rem;
-				}
-
-				&:hover {
-					background-color: @nav-background-hover;
-				}
-			}
-		}
-	}
-
-	.is-parent.is-active {
-
-		// Highlight
-		>.side-nav-link {
-			font-weight: bold;
-			background-color: @nav-background-hover;
-		}
-
-		// Show the possible children items
-		.is-child {
-			display: initial;
-		}
-	}
-
-	// The 'li' item in an ul
-	&-entry {
-		display: block;
-	}
-
-	&-link {
-		padding-left: 1rem;
-		min-height: 3rem;
-		text-decoration: none;
-		color: @color-menu-text;
-
-		.flexParent();
-		align-items: center;
-		justify-content: flex-start;
-
-		border-top: @nav-border-top;
-		border-bottom: @nav-border-bottom;
-
-		&:hover {
-			background-color: @nav-background-hover;
-		}
-	}
-
-	.link-icon {
-		display: inline-flex;
-		justify-content: center;
-		width: 1.5rem;
-		margin-right: 0.6rem;
-		font-size: 2rem;
-		line-height: 0.5;
-	}
-}
-
-
-// Side navigation component
-.side-nav-old {
-	flex: 1 0 auto;
-	.active {
-		background-color: #009900;
-	}
-
-	&-collection {
-
-		.flexParent(column, space-between, nowrap);
-
-
-		&.is-child {
-			// First anchor of a nested ul does not need a border top
-			>.side-nav-link > .side-nav-text {
-				border-top: none;
-			}
-
-			.side-nav-link > .side-nav-text {
-				padding-left: 3.9rem;
-				text-transform: none;
-			}
-		}
-		
-		&.hidden {
-			display: none;
-		}
-	}
-
-	// LI element
-	&-link {
-		flex: none;
-		position: relative;
-
-		// @todo: Why is this not inheriting from html?
-		box-sizing: border-box;
-
-		&:first-child {
-
-			.side-nav-text {
-				border-top: 1px solid #505050;
-			}
-		}
-
-		&.is-parent {
-			>.side-nav-text::after {
-				content: attr(data-after);
-				.fontStyle(small, normal);
-				position: absolute;
-				right: 1.4rem;
-			}
-		}
-	}
-
-	// Mostly a span or anchor
-	&-text {
-		display: block;
-		width: 100%;
-		height: 2.91rem;
-		border-bottom: 1px solid #505050;
-		// Animate transitions
-		transition: all 0.1s ease-in 0.01s;
-
-		.fontStyle(large, normal, normal);
-		text-decoration: none;
-		text-transform: uppercase;
-		color: white;
-		letter-spacing: -0.06rem;
-		line-height: ~"calc(3rem - 1px)"; // Let the browser handle calc, not less
-		padding-left: 1.652rem;
-		line-height: 2.91rem;
-
-		&:hover {
-			background-color: #003000;
-		}
-
-		&.section {
-			font-weight: 400;
-		}
-	}
-}
-
-.side-nav svg,
-.page-topbar svg {
-	fill: @color-menu-text;
-}
-
-.side-nav x-svg {
-	height: 1.7rem;
-}
-
-.page-topbar {
-	.list-info {
-		font-size: 0.9rem;
-		padding: 0 0.5rem;
-		margin: 0;
-
-		.info-icon {
-			transform: scale(0.9);
-		}
-	}
-}
-
-x-panel {
-	background-color: #FFFFFF;
-	color: #646464;
-	fill: #646464;
-
-	&-header, &-actions {
-		background-color: #EFEFEF;
-	}
-
-	&-actions {
-		.flexChild(1 1 auto);
-		.flexParent(row, flex-end);
-		padding: 1rem 1.1rem 1rem 0;
-		align-items: center;
-	}
-
-	&-header {
-		.flexChild(1 0 auto);
-		text-transform: uppercase;
-		padding: 1rem 0 1rem 1.1rem;
-		font-size: 1.5rem;
-	}
-
-	&-action,
-	&-body {
-		.table {
-			margin-bottom: 0;
-		}
-	}
-
-	&[tabs] {
-		x-panel-tabs,
-		x-panel-action {
-			background-color: transparent;
-			border-bottom: 1px solid #e9e9e9;
-			min-height: 3rem;
-		}
-	}
-
-	&-action {
-		.btn {
-			opacity: 0.6;
-			padding: 0 1rem;
-
-			&:hover {
-				opacity: 1;
-			}
-		}
-	}
-
-	&-tabs {
-		padding: 0 !important;
-		.flexParent(row, flex-start);
-
-		a {
-			text-decoration: none;
-			margin-right: 0;
-			padding: 0 0.86rem;
-			min-height: inherit;
-			display: flex;
-			align-items: center;
-			color: #646464;
-			font-weight: 600;
-			border: 0;
-			.flexChild(0 0 auto);
-			-webkit-transition: all .15s ease-out;
-			transition: all .15s ease-out;
-
-			&:hover,
-			&.active {
-				-webkit-box-shadow: 0 2px #5c90d2;
-				box-shadow: 0 2px #5c90d2;
-			}
-		}
-	}
-}
-
-.panel-third {
-	max-width: 33%;
-}
-
-.al-switch-checkbox+.al-switch-span {
-	background-color: @color-danger;
-}
-
-.al-switch-checkbox:checked+.al-switch-span {
-	background-color: @color-success;
-}
-
-.list-info {
-	// Remove list styling
-	.list-unstyled;
-
-	&.list-horizontal {
-		.flexParent(row, space-around);
-
-		li:not(:last-child) {
-			margin-right: 1rem;
-		}
-	}
-
-	&:not(.list-horizontal) > li {
-		margin-bottom: 2rem;
-	}
-
-	&.has-icons {
-		> li {
-			.flexParent(column, space-between);
-			position: relative;
-			padding-left: 3.5rem;
-		}
-
-		.info-icon {
-			.flexChild(1 0 100%);
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			max-width: 3rem;
-
-			x-svg {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-
-	.info-title,
-	.info-value {
-		margin: 0;
-	}
-
-	.info-title {
-		text-transform: uppercase;
-		color: #999;
-	}
-
-	.info-value {
-		color: #646464;
-	}
-}
-
-// Tables
-.table {
-	width: 100%;
-	max-width: 100%;
-	margin-bottom: 1.5rem;
-	background-color: transparent;
-
-	th.text-center {
-		text-align: center;
-	}
-
-	tr > th {
-		padding: 1.1rem 0.7rem 0.9rem;
-		font-size: 1rem;
-		font-weight: 600;
-		text-transform: uppercase;
-		vertical-align: bottom;
-		text-align: left;
-
-		a {
-			text-decoration: none;
-			color: inherit;
-		}
-	}
-
-	> thead > tr,
-	> tbody > tr,
-	> tfoot > tr {
-		> th, > td {
-			padding: 0.9rem 0.7rem;
-			border-top: 1px solid #f0f0f0;
-		}
-	}
-
-	> thead > tr > th {
-		border-top: 0;
-		border-bottom: 1px solid #ddd;
-	}
-
-	&-bordered {
-		border: 1px solid #e9e9e9;
-
-		&>thead>tr>th,
-		&>thead>tr>td {
-			border-bottom-width: 1px;
-			border-bottom-color: #e9e9e9;
-		}
-
-		&>thead>tr>th, &>tbody>tr>th, &>tfoot>tr>th, &>thead>tr>td, &>tbody>tr>td, &>tfoot>tr>td {
-			border: 1px solid #f0f0f0;
-		}
-	}
-
-	&-striped > tbody > tr:nth-of-type(odd) {
-		background-color: #f9f9f9;
-	}
-
-	&-hover > tbody > tr:hover {
-		background-color: #f5f5f5;
-	}
-}
-
-// Create a color style
-.colorStyle(@bg: @color-default, @dark-text: @color-dark, @light-text: @color-light) {
-	background-color: @bg;
-	border-color: darken(@bg, 10%);
-	color: contrast(@bg, @dark-text, @light-text);
-	fill: contrast(@bg, @dark-text, @light-text);
-}
-
-// Create a style for buttons
-.buttonStyle(@bg: @color-default, @dark-text: @color-dark, @light-text: @color-light) {
-	.colorStyle(@bg, @dark-text, @light-text);
-
-	&:hover,
-	&:focus {
-		background-color: darken(@bg, 10%);
-		border-color: darken(@bg, 20%);
-	}
-
-	&.selected,
-	&:active {
-		background-color: darken(@bg, 20%);
-		border-color: darken(@bg, 30%);
-	}
-}
-
-// Butons
-.btn {
-	display: inline-block;
-	padding: 0.5rem 1rem;
-	margin-bottom: 0;
-	font-size: 1rem;
-	line-height: 1.42857143;
-	text-align: center;
-	white-space: nowrap;
-	vertical-align: middle;
-	-ms-touch-action: manipulation;
-	touch-action: manipulation;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	background-image: none;
-	border: 0.1rem solid transparent;
-	border-radius: 0.29rem;
-
-	font-weight: 600;
-	-webkit-transition: all .15s ease-out;
-	transition: all .15s ease-out;
-
-	i {
-		margin-right: 0.2rem;
-		vertical-align: middle;
-		display: inline-flex;
-		height: 1.1rem;
-		width: 1.1rem;
-
-		x-svg {
-			height: 100%;
-		}
-	}
-
-	&:active,
-	&:focus {
-		outline: 0;
-	}
-
-	&-default {
-		.buttonStyle();
-	}
-
-	&-success {
-		.buttonStyle(@color-success);
-	}
-
-	&-warning {
-		.buttonStyle(@color-warning);
-	}
-
-	&-info {
-		.buttonStyle(@color-info);
-	}
-
-	&-danger {
-		.buttonStyle(@color-danger);
-	}
-
-	&-primary {
-		.buttonStyle(@color-primary);
-	}
-
-	x-svg {
-		display: inline-flex;
-		justify-content: center;
-		width: 1rem;
-		height: 1rem;
-		margin-right: .1rem;
-		vertical-align: middle;
-	}
-}
-
-// Form controls
-.al-input-wrapper {
-	position: relative;
-	display: -webkit-flex;
-	display: flex;
-	border-collapse: separate;
-	margin-bottom: 1rem;
-
-	.al-input {
-		display: table-cell;
-		position: relative;
-		z-index: 2;
-		float: left;
-		width: 100%;
-		margin-bottom: 0;
-	}
-}
-
-select[value=""] {
-	font-weight: bold;
-}
-
-.al-input {
-	display: block;
-	height: 2.4rem;
-	padding: 0.4rem 0.85rem;
-	line-height: 1.42857143;
-	color: #646464;
-	background-color: #fff;
-	background-image: none;
-	border: 1px solid #e6e6e6;
-	border-radius: 0.29rem;
-	-webkit-transition: all .15s ease-out;
-	transition: all .15s ease-out;
-}
-
-.al-prepend,
-.al-append {
-	padding: 0.45rem 0.9rem;
-	font-size: 1rem;
-	font-weight: 400;
-	color: #646464;
-	text-align: center;
-	background-color: @color-default;
-	border: 0.08rem solid #e6e6e6;
-	border-radius: 0.21rem;
-
-	white-space: nowrap;
-	vertical-align: middle;
-}
-
-.al-append ~ .al-input {
-	border-bottom-right-radius: 0;
-	border-top-right-radius: 0;
-}
-
-.al-prepend {
-	border-right: 0;
-	border-bottom-right-radius: 0;
-	border-top-right-radius: 0;
-}
-
-.al-prepend + .al-input {
-	border-bottom-left-radius: 0;
-	border-top-left-radius: 0;
-}
-
-.al-append {
-	border-left: 0;
-	border-bottom-left-radius: 0;
-	border-top-left-radius: 0;
-}
-
-[data-template="client/chimera_edit"] {
-	.flexParent();
-	align-items: flex-start;
-
-	[data-template="elements/client_capability_panel"] {
-		.flexChild(0 0 32%);
-	}
-}
-
-// Style non-vertical button groups
-x-button-group:not([vertical]) > .btn {
-	&:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-		border-radius: 0;
-	}
-
-	&:first-child:not(:last-child):not(.dropdown-toggle) {
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	&:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-}
-
-// Style the split button dropdown
-x-button-dropdown[split] {
-	>button:first-child {
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	>button.x-dropdown-toggle {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-}
-
-.x-dropdown-wrapper {
-	button {
-		border: none;
-		background: white;
-		padding: 0.3rem;
-
-		&:hover {
-			background: #f0f0f0;
-		}
-	}
-}
-
-.btn-group >.btn {
-
-	&:hover {
-		z-index: 2;
-	}
-
-	&+.btn {
-		margin-left: -1px;
-	}
-
-	&:not(:first-child) {
-//		border-left: 0;
-	}
-
-	&:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-		border-radius: 0;
-	}
-
-	&:first-child:not(:last-child):not(.dropdown-toggle) {
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	&:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-}
-
-.btn-group,
-.btn-group-vertical {
-	position: relative;
-	display: inline-block;
-	vertical-align: middle;
-
-	>.btn {
-		position: relative;
-		float: left;
-
-		&:first-child {
-			margin-left: 0;
-		}
-	}
-}
-
-// Checkboxes
-.cbx-label {
-	margin: 0;
-	cursor: pointer;
-	position: relative;
-
-	input {
-		position: absolute;
-		opacity: 0;
-	}
-
-	input+span {
-		width: 1.43rem;
-		height: 1.43rem;
-		background-color: #fff;
-		border: 1px solid #ddd;
-		-webkit-transition: background-color .2s;
-		transition: background-color .2s;
-		display: inline-block;
-		position: relative;
-		color: transparent;
-		vertical-align: middle;
-
-
-		&::after {
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			font-size: 0.8rem;
-			line-height: 1.25rem;
-			content: "✔";
-			text-align: center;
-			position: absolute;
-		}
-	}
-
-	// Default style
-	input:checked + span {
-		.colorStyle();
-	}
-
-	&-success input:checked + span {
-		.colorStyle(@color-success);
-	}
-
-	&-warning input:checked + span {
-		.colorStyle(@color-warning);
-	}
-
-	&-info input:checked + span {
-		.colorStyle(@color-info);
-	}
-
-	&-danger input:checked + span {
-		.colorStyle(@color-danger);
-	}
-
-	&-primary input:checked + span {
-		.colorStyle(@color-primary);
-	}
-}
-
-.model-list,
-.model-list-panel {
-	.btn-inline x-svg {
-		width: 1.5rem;
-		height: 1.5rem;
-	}
-}
-
-// Model list table
-.model-list {
-
-	.model-list-checkbox {
-		text-align: center;
-		width: 5rem;
-	}
-
-	.record-actions {
-		text-align: right;
-		max-width: 14rem;
-	}
-
-	.btn-inline:last-child {
-		padding-right: 0;
-	}
-}
-
-.model-list-panel {
-	x-panel-footer {
-		display: flex;
-		justify-content: space-between;
-
-		.al-p-info,
-		nav.al-pagination {
-			flex: 0 0 auto;
-		}
-	}
-}
-
-// Pagination
-.al-pagination {
-
-	a {
-		text-decoration: none;
-		color: inherit;
-	}
-
-	.al-p-link {
-		display: inline-block;
-		margin: 0 0 0.35rem 0.35rem;
-		min-width: 1.71rem;
-		padding: 0.43rem 0.86rem;
-	}
-
-	.al-p-active,
-	.al-p-link:not(.al-p-inactive-arrow):not(.al-p-inactive):hover {
-		background-color: #f9f9f9;
-		box-shadow: 0 2px #5c90d2;
-		color: #5c90d2;
-	}
-}
-
-.al-p-inactive-arrow {
-	cursor: not-allowed;
-}
-
-.model-list-record {
-	.chimeraField-intake {
-		float: none;
-		width: auto;
-	}
-}
-
-.chimeraField {
-
-	&-container {
-		
-	}
-
-	&-label {
-		font-weight: bold;
-	}
-
-	&-prime.selectize-control {
-		width: 100%;
-	}
-
-	&-row {
-		.clearfix();
-		margin-bottom: 1rem;
-	}
-
-	&-left {
-		float: left;
-		width: 9rem;
-		text-align: right;
-		margin-right: 1rem;
-		padding-top: 0.375rem;
-	}
-
-	&-intake {
-		float: left;
-		width: ~"calc(100% - 10rem)";
-	}
-
-	&-entry {
-		display: flex;
-
-		.chimera-schema-field {
-			-webkit-flex: 1 0 auto;
-			flex: 1 0 auto;
-		}
-	}
-
-	&-string {
-		padding: 0.375rem 0.75rem;
-		border: none;
-		height: 2rem;
-		width: 100%;
-		margin-bottom:0.375rem;
-
-		color: #646464;
-		border: 1px solid #e6e6e6;
-		border-radius: 3px;
-		-webkit-box-shadow: none;
-		box-shadow: none;
-		-webkit-transition: all .15s ease-out;
-		transition: all .15s ease-out;
-	}
-
-	&-wysiwyg {
-		.clearfix();
-		padding: 0.375rem 0.75rem;
-		min-height: 10rem;
-		background-color: white;
-		width: 100%;
-		border: 1px solid #e6e6e6;
-		border-radius: 3px;
-
-		p{
-			margin-bottom: 10px;
-		}
-		ul{
-			padding-left: 17px;
-		}
-	}
-}
-
-
-// .chimeraEditor should not be used for fields anymore, those go in .chimeraField
-.chimeraEditor {
-	margin-top: 2.3rem;
-
-	&-header {
-		align-items: flex-end;
-		margin-bottom: 1rem;
-	}
-
-	&-fieldGroup {
-		.clearfix();
-		margin-bottom: 1rem;
-	}
-
-	&-fieldLabel {
-		float: left;
-		width: 9rem;
-		text-align: right;
-		margin-right: 1rem;
-		padding-top: 0.375rem;
-		font-weight: bold;
-	}
-
-	&-fieldWrap {
-		float: left;
-		width: ~"calc(100% - 10rem)";
-	}
-
-	&-input {
-		padding: 0.375rem 0.75rem;
-		border: none;
-		height: 2rem;
-		width: 100%;
-	}
-
-	&-boolean {
-		width: 3rem;
-		text-align: center;
-		color: white;
-		text-transform: uppercase;
-		font-size: 0.9rem;
-	}
-
-	&-footer {
-		align-items: flex-end;
-		margin-top: 1rem;
-	}
-}
-
-.chimeraEditor-subschema {
-	.clearfix();
-}
-
-tr.filters {
-	input {
-		width: 100%;
-	}
-}
-
-.hide-translate-buttons {
-	.chimeraField-prefix-buttons {
-		display: none;
-	}
-}