LiveAtlas/src/scss/_placeholders.scss

/*!
 * Copyright 2020 James Lyne
 *
 *    Licensed under the Apache License, Version 2.0 (the "License");
 *    you may not use this file except in compliance with the License.
 *    You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *    Unless required by applicable law or agreed to in writing, software
 *    distributed under the License is distributed on an "AS IS" BASIS,
 *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *    See the License for the specific language governing permissions and
 *    limitations under the License.
 */

@import "mixins";

%button {
	appearance: none;
	border: none;
	box-shadow: none;
	background-color: var(--background-base);
	color: var(--text-base);
	border-radius: var(--border-radius);
	cursor: pointer;
	display: block;
	text-align: center;
	position: relative;
	transition: color 0.2s ease-in, background-color 0.2s ease-in;
	font-size: 1.6rem;
	font-family: Raleway, sans-serif;

	&:hover, &.active {
		background-color: var(--background-hover);
		color: var(--text-hover);
	}

	@include focus {
		outline-color: var(--outline-focus);
		outline-width: 0.2rem;
		background-color: var(--background-hover);
		color: var(--text-hover);
		z-index: 1;
	}

	&:active {
		background-color: var(--background-active);
		color: var(--text-active);
	}

	&[disabled], &.disabled {
		background-color: var(--background-disabled);
		color: var(--text-disabled);
		cursor: not-allowed;

		&:hover, &:active {
			background-color: var(--background-disabled);
			color: var(--text-disabled);
		}

		@include focus {
			background-color: var(--background-disabled);
			color: var(--text-disabled);
		}
	}

	.svg-icon {
		display: inline-block;
		width: 3rem;
		height: 3rem;

		&:only-child {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
	}
}

%panel {
	background-color: var(--background-base);
	color: var(--text-base);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	position: relative;

	h2:first-child {
		margin-top: 0;
	}
}