Your IP : 216.73.216.215

Current Path : /home/flapst5/ekmtoronto.com/wp-content/plugins/code-snippets/css/edit/
Upload File :
Current File : /home/flapst5/ekmtoronto.com/wp-content/plugins/code-snippets/css/edit/_form.scss

@use '../common/theme';

$sidebar-width: 321px;
$sidebar-gap: 30px;

.snippet-form #titlediv #title {
	border-color: theme.$control-border;
	block-size: 45px
}

// The type selector is a react-select control that sizes to its content; pin
// its bordered control box to the same 45px as the adjacent title field and
// keep the selected value vertically centred within it.
.snippet-type-container .code-snippets-select {
	block-size: 100%;

	// Target the control box only (:first-of-type). The open menu is a later
	// sibling div; matching it here would clamp and flex-row the option list.
	> div:first-of-type {
		border-color: theme.$control-border;
		min-block-size: 45px;
		block-size: 45px;
		max-block-size: 45px;
	}

	> div:first-of-type > div:first-child {
		display: flex;
		align-items: center;
		block-size: 45px;
		padding-block: 0;
	}
}

.snippet-type-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: row;
	gap: 2em;

	.snippet-type-option-main {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.small-badge {
		margin-inline-start: 0.5em;
	}
}


.conditions-editor-open {
	.conditions-editor-header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		margin-block-end: 8px;
	}

	.button.button-large {
		display: flex;
		align-items: center;
		gap: 8px;
		inline-size: 100%;
		border-color: theme.$control-border;
		background: transparent;
		padding: 6px 12px;

		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background: #f6f7f7;
		}
	}

	&.no-condition .cond-badge {
		background: transparent;
		color: inherit;
		border: 1px solid currentcolor;
	}

	&.no-condition:hover :not([disabled]) .cond-badge {
		color: #fff;
		background: theme.$accent;
		border-color: theme.$accent;
	}
}

.snippet-form {
	margin-block-start: 10px;
	display: grid;
	gap: $sidebar-gap;
	grid-template-columns: 1fr $sidebar-width;
	grid-template-areas: 'upper sidebar' 'lower sidebar';
	transition: all 700ms;

	@media (prefers-reduced-motion: reduce) {
		transition-duration: 0.01s;
	}

	&.snippet-form-expanded {
		grid-template-areas: 'upper upper' 'lower sidebar';
	}

	.snippet-form-upper {
		grid-area: upper;
	}

	.snippet-form-lower {
		grid-area: lower;
	}

	.snippet-form-upper,
	.snippet-form-lower {
		display: flex;
		flex-flow: column;
		gap: 24px;
	}

	.snippet-editor-sidebar {
		grid-area: span 3 / sidebar;
		max-inline-size: $sidebar-width;
		position: sticky;
		overflow: clip;

		// Keep the sidebar clear of the fixed WordPress admin bar and leave a
		// usable visual gap beneath it while the editor scrolls.
		inset-block-start: 48px;
		align-self: start;

		@media (width <= 782px) {
			position: static;
		}
	}

	@media (width <= 1024px) {
		grid-template-columns: 1fr;
	}

	h2, h3 {
		margin-block: 25px 15px;
		margin-inline: 0;
		font-size: 1.16em;

		label {
			cursor: auto;
		}

		.button {
			font-weight: normal;
		}
	}
}

.above-editor-container {
	display: flex;
	flex-flow: row wrap;
	gap: 1em;

	> * {
		flex: 1;
		display: flex;
		flex-flow: column;
		min-inline-size: 180px;
	}
}

// Match the location selector's control height to the adjacent conditions
// button so the two sidebar controls line up. This targets a different
// container than the type selector rules above, so their relative order does
// not affect the cascade.
// stylelint-disable-next-line no-descending-specificity
.snippet-editor-sidebar .code-snippets-select.code-snippets-select-location > div:first-of-type {
	min-block-size: 48px;
}