All Downloads are FREE. Search and download functionalities are using the official Maven repository.

META-INF.resources.css._buttons.scss Maven / Gradle / Ivy

/* ---------- Buttons ---------- */

.btn-command-log, .btn-error, .btn-jump-to-details, .btn-screenshot, .btn-sidebar {
	font-family: 'FontAwesome' !important;
}

.sidebar-btn-container, .sidebar-toolbar, .syntax-log {
	.btn {
		background-color: transparentize($off-white, 0.84);
		border: 1px solid $button-border-color;
		border-radius: 4px;
		color: $neutral;
		cursor: pointer;
		font-size: 10px;
		height: 32px;
		left: 0;
		line-height: 1em;
		margin-right: 5px;
		opacity: 0.6;
		outline: none;
		padding: 0;
		text-align: center;
		transition: opacity 0.2s ease;
		width: 32px;

		&:active:focus, &:focus, &:hover {
			box-shadow: none;
			outline: 0;
		}

		.btn-content {
			transition: transform 0.2s ease;
		}

		&:hover {
			opacity: 1;
		}

		&.toggle {
			background-color: $button-toggle-bg-color;
		}

		&.btn-sidebar {
			&:before {
				transform: rotate(180deg);
				transition: transform 0.5s ease-in-out;
			}

			&.toggle:before {
				transform: rotate(0);
			}
		}
	}

	.btn-label {
		display: inline-block;
		font-family: $general-font;
		font-size: 15px;
		font-weight: 100;
		line-height: 0.6em;
		text-align: center;
		text-transform: lowercase;
	}
}

.syntax-log {
	.btn-error, .btn-screenshot {
		bottom: 0;
		display: inline-block;
		font-family: $monospaced-font;
		font-size: 17px;
	}

	.fail {
		.btn-error, .btn-screenshot {
			background-color: transparentize($failed-color, 0.84);
			border-color: $failed-color;
			color: $failed-color;

			&.toggle {
				background: $button-error-toggle-bg-color;
			}
		}
	}

	.warning {
		.btn-error, .btn-screenshot {
			background-color: transparentize($warning-color, 0.84);
			border-color: $warning-color;
			color: $warning-color;

			&.toggle {
				background: $button-warning-toggle-bg-color;
			}
		}
	}
}

/* ---------- Sidebar buttons ---------- */

.sidebar-btn-container {
	left: -60px;
	margin-top: 10px;
	position: absolute;
	width: 28px;

	.btn {
		font-size: 20px;
		line-height: 1em;
		margin: 5px 15px;
	}

	.btn-command-log {
		&:before {
			content: '\f126';
		}
	}

	.btn-sidebar:before {
		content: '\f104';
		display: block;
	}

	.btn-jump-to-details {
		display: none;

		&:before {
			content: '\f071';
		}
	}
}

.running .btn-command-log {
	display: none;
}

.command-logger .btn.btn-jump-to-details {
	display: block;
}

.sidebar-toolbar {
	.btn {
		font-size: 11px;
		height: 45px;
		line-height: 1em;
		margin: 17px 15px;
		width: 150px;
	}

	.btn-pause {
		position: relative;

		.btn-label {
			position: absolute;
			top: 16px;

			&.pause {
				animation: fadeIn 0.15s ease-in both;
				left: 23px;
				opacity: 1;

				&:after {
					content: '\f04c';
					margin-left: 14px;
				}
			}

			&.continue {
				animation: fadeOut 0.15s ease-out both;
				left: 14px;
				opacity: 0;
			}

			&:after {
				font-family: 'FontAwesome';
			}
		}

		&.toggle {
			background-color: transparentize($off-white, 0.84);

			.btn-label {
				&.pause {
					animation: fadeOut 0.15s ease-out both;
					opacity: 0;
					transition: height 0s 0.15s;
				}

				&.continue {
					animation: fadeIn 0.15s ease-in both;
					opacity: 1;

					&:after {
						content: '\f04b';
						margin-left: 14px;
					}
				}
			}
		}
	}
}

/* ---------- Button icons ---------- */

.btn-collapse {
	&:before {
		content: '+';
	}

	&.toggle:before {
		content: '-';
	}
}

.btn-var:before {
	content: 'var';
	font-family: $monospaced-font;
}

.btn-error .btn-content:before {
	content: '!';
}

.btn-screenshot .btn-content:before {
	content: '\f108';
}

.btn-screenshot {
	display: none !important;
}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy