/home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/css/edit
Edit: /home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/css/edit/_form.scss (3543B)
@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;
}