patternplate-client/source/assets/style/components/pattern/pattern-dependencies.less

Universal javascript client application for patternplate

.pattern-dependencies {
	&__stage {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	&__block,
	&__root {
		fill: transparent;
		stroke: @border-color;
		stroke-width: 0.3;
	}
	&__root {
		fill: @border-color;
	}
	&__root,
	&__root ~ .block-name {
		// transform: translate(-50%, 0);
	}
	.connection-group {
		pointer-events: none;
	}
	.connection {
		stroke: @border-color;
		stroke-width: 0.4;
		fill: transparent;
		transition: .3s stroke ease-in-out;
	}
	.connector {
		fill: @border-color;
		transition: .3s fill ease-in-out;
	}
	.block-name {
		font-family: Helvetica, sans-serif;
		font-size: 1pt;
		fill: @root-color;
		pointer-events: none;
		text-anchor: middle;
		alignment-baseline: central;
	}
	.label__text {
		font-family: Helvetica, sans-serif;
		font-size: 0.8pt;
		fill: @root-color;
		pointer-events: none;
		text-anchor: middle;
		alignment-baseline: central;
		transition: .3s all ease-in-out;
	}
	.label {
		fill: @border-color;
		opacity: 0;
		transition: .3s all ease-in-out;
		&.label--active {
			opacity: 1;
			fill: @hover-color;
			.label__text {
				fill: @root-background;
			}
		}
	}
	.label__container {
		fill: inherit;
	}
	.label__circle {
		fill: inherit;
	}
	.pattern-dependencies__block {
		cursor: pointer;
		transition: .3s stroke ease-in-out;
		&:hover {
			stroke: @hover-color;
			~ .connection-group {
				.connection {
					stroke: @hover-color;
				}
				.connector {
					fill: @hover-color;
				}
			}
		}
	}
	.column-description {
		font-family: Helvetica, sans-serif;
		font-size: 1.75px;
		fill: @root-background;
		pointer-events: none;
	}
	.column-description-container {
		fill: @root-color;
	}
}
/* .pattern-dependencies {
	display: flex;
	position: relative;
	z-index: 1;

	&-column {
		display: flex;
		flex-grow: 1;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		padding: 0 40px;
		line-height: 2.3em;
		text-align: center;

		&-headline {
			font-weight: bold;
			width: 100%;
			margin: 10px;
		}
		&-content {
			list-style: none;
			width: 100%;
			margin: 20px auto;
			padding: 0;
			a {
				padding: 5px;
				border: 1px solid @border-color;
				background-color: @root-background;
			}
		}
	}
	.center-pattern {
		padding: 10px;
		background-color: @active-color;
		color: @root-background;
	}
} */