forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
531 lines
11 KiB
SCSS
531 lines
11 KiB
SCSS
$maxWidth: 520px;
|
|
|
|
.form-element {
|
|
color: var(--gin-color-text);
|
|
background-color: var(--gin-bg-input);
|
|
border: 1px solid var(--gin-border-color-form-element);
|
|
border-radius: var(--gin-border-m);
|
|
box-sizing: border-box;
|
|
transition: var(--gin-transition);
|
|
|
|
&:hover {
|
|
border-color: var(--gin-color-text);
|
|
box-shadow: inset 0 0 0 1px var(--gin-color-text);
|
|
}
|
|
|
|
&--small,
|
|
&--extrasmall {
|
|
font-size: var(--gin-font-size-s);
|
|
line-height: 1.5;
|
|
border-radius: var(--gin-border-s);
|
|
}
|
|
|
|
&[disabled],
|
|
&[disabled]:hover {
|
|
cursor: not-allowed;
|
|
color: var(--gin-color-disabled);
|
|
background-color: var(--gin-color-disabled-bg) !important;
|
|
border-color: var(--gin-color-disabled-border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.gin--dark-mode & {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
.form-textarea-wrapper {
|
|
// box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
|
|
border-radius: var(--gin-border-m);
|
|
|
|
textarea {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.form-item--editor-format,
|
|
.form-element--editor-format {
|
|
width: auto;
|
|
|
|
.form-item__label {
|
|
top: 3px;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Password
|
|
.password-field {
|
|
width: 100%;
|
|
}
|
|
|
|
.password-confirm {
|
|
width: 100%;
|
|
max-width: $maxWidth;
|
|
}
|
|
|
|
.password-strength {
|
|
&__title {
|
|
color: var(--gin-color-text-light);
|
|
}
|
|
|
|
&__text {
|
|
color: var(--gin-color-title);
|
|
}
|
|
}
|
|
|
|
.password-suggestions {
|
|
color: var(--gin-color-text-light);
|
|
border: 1px solid var(--gin-border-color-layer2);
|
|
background-color: transparent;
|
|
}
|
|
|
|
// Select
|
|
.form-element--type-select {
|
|
padding-right: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
|
|
|
|
.gin--dark-mode & {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
|
|
}
|
|
}
|
|
|
|
.form-element--type-select--small {
|
|
font-size: var(--gin-font-size-xs);
|
|
min-height: 2.25rem;
|
|
line-height: 1.4;
|
|
padding-top: .474rem; // 0.79rem * 1.2 / 2
|
|
padding-bottom: .474rem; // 0.79rem * 1.2 / 2
|
|
background-position: 100% 52%;
|
|
}
|
|
|
|
.form-boolean {
|
|
width: 21px;
|
|
height: 21px;
|
|
border-color: var(--gin-border-color-form-element);
|
|
border-radius: var(--gin-border-xs);
|
|
}
|
|
|
|
// Darkmode Checkbox
|
|
.form-boolean--type-checkbox {
|
|
&:not(:checked) {
|
|
.gin--dark-mode & {
|
|
background: var(--gin-bg-input);
|
|
}
|
|
}
|
|
|
|
&:checked {
|
|
background-color: var(--gin-color-primary);
|
|
|
|
&:not(:disabled) {
|
|
.gin--dark-mode & {
|
|
background-image: icon('checked');
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--gin-color-primary-hover);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--gin-color-primary-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Single Checkbox: show as toggle
|
|
:not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {
|
|
position: relative;
|
|
margin-left: 0;
|
|
|
|
.checkbox-toggle {
|
|
z-index: 0;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 2.5rem;
|
|
height: 1.5rem;
|
|
border-radius: var(--gin-border-l);
|
|
box-sizing: border-box;
|
|
|
|
&__inner {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
clip-path: circle(var(--gin-spacing-l) at 50% 50%); // Fix Safari bug
|
|
background-color: var(--gin-color-disabled);
|
|
border: 3px solid transparent;
|
|
border-radius: var(--gin-border-l);
|
|
box-sizing: border-box;
|
|
|
|
.gin--dark-mode & {
|
|
background-color: var(--gin-bg-input);
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
border-radius: 21px;
|
|
transform: translateX(-16px);
|
|
transition: transform .3s;
|
|
|
|
.gin--dark-mode & {
|
|
background-color: var(--gin-border-color-form-element);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
@include visually-hidden;
|
|
width: 40px;
|
|
height: 24px;
|
|
clip: auto;
|
|
margin-left: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&:hover:focus,
|
|
&:active:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
&:hover ~ .checkbox-toggle {
|
|
opacity: .9;
|
|
box-shadow: 0 0 2px rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
&:checked ~ .checkbox-toggle {
|
|
border-color: var(--gin-color-primary-light-active);
|
|
|
|
.gin--high-contrast-mode & {
|
|
border-color: var(--gin-border-color);
|
|
}
|
|
|
|
.checkbox-toggle__inner {
|
|
background-color: var(--gin-switch);
|
|
|
|
.gin--dark-mode & {
|
|
background-color: var(--gin-color-primary-light-active);
|
|
}
|
|
|
|
&:before {
|
|
transform: translateX(16px);
|
|
background-color: #fff;
|
|
|
|
.gin--dark-mode & {
|
|
background-color: var(--gin-color-primary-hover);
|
|
}
|
|
|
|
.gin--high-contrast-mode & {
|
|
background-color: var(--gin-border-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active ~ .checkbox-toggle .checkbox-toggle__inner,
|
|
&:focus ~ .checkbox-toggle .checkbox-toggle__inner {
|
|
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
|
|
// Disabled state: set cursor to not-allowed
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// Disabled styles
|
|
&:disabled ~ .checkbox-toggle,
|
|
&:disabled ~ .checkbox-toggle:hover,
|
|
&:disabled:checked ~ .checkbox-toggle .checkbox-toggle__inner,
|
|
&:disabled:checked ~ .checkbox-toggle:hover .checkbox-toggle__inner {
|
|
background-color: var(--gin-color-disabled);
|
|
|
|
&::before {
|
|
background-color: #fff;
|
|
opacity: .4;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
z-index: 1;
|
|
position: relative;
|
|
padding-left: var(--gin-spacing-xxs);
|
|
padding-bottom: 0;
|
|
color: var(--gin-color-text);
|
|
}
|
|
}
|
|
|
|
.form-boolean {
|
|
&:hover, &:active {
|
|
.gin--dark-mode & {
|
|
box-shadow: none;
|
|
border-color: var(--gin-color-text);
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-boolean--type-radio {
|
|
&, &:hover, &:active, &:focus, &:hover:focus {
|
|
background-image: none;
|
|
background-color: var(--gin-bg-input);
|
|
border-color: var(--gin-border-color-form-element);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);
|
|
|
|
&, .gin--dark-mode & {
|
|
border-color: var(--gin-color-text);
|
|
}
|
|
}
|
|
|
|
&:active, &:focus {
|
|
box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2),
|
|
0 0 0 1px var(--gin-color-focus-border),
|
|
0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
|
|
&:checked:not(:disabled) {
|
|
&, &:hover {
|
|
background-image: none;
|
|
background-color: var(--gin-bg-layer);
|
|
box-shadow: inset 0 0 0 5px var(--gin-color-primary);
|
|
}
|
|
|
|
&:active, &:focus, &:hover:focus {
|
|
box-shadow: inset 0 0 0 5px var(--gin-color-primary),
|
|
0 0 0 1px var(--gin-color-focus-border),
|
|
0 0 0 4px var(--gin-color-focus);
|
|
border-color: var(--gin-color-focus-border);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
&, &:hover {
|
|
cursor: not-allowed;
|
|
background: var(--gin-color-disabled-bg);
|
|
border-color: var(--gin-color-disabled-border);
|
|
}
|
|
}
|
|
|
|
&:checked:disabled {
|
|
&, &:hover {
|
|
background: var(--gin-color-disabled);
|
|
box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-boolean--type-checkbox[disabled] {
|
|
&, &:hover {
|
|
cursor: not-allowed;
|
|
background-color: var(--gin-color-disabled-bg);
|
|
border-color: var(--gin-color-disabled-border);
|
|
|
|
&:checked {
|
|
border-color: var(--gin-color-disabled-border);
|
|
background-color: var(--gin-color-disabled-bg);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-radios,
|
|
.form-checkboxes {
|
|
.form-type--boolean {
|
|
margin-top: var(--gin-spacing-xs);
|
|
margin-bottom: var(--gin-spacing-xs);
|
|
}
|
|
}
|
|
|
|
.form-actions {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-edit .form-actions {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
border: 0 none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
// Fieldgroup
|
|
fieldset:not(.fieldgroup) {
|
|
color: var(--gin-color-text-light);
|
|
padding-top: var(--gin-spacing-xs);
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
background: transparent;
|
|
border-color: var(--gin-border-color);
|
|
border-radius: var(--gin-border-m);
|
|
box-shadow: none;
|
|
|
|
> legend {
|
|
top: 20px;
|
|
}
|
|
|
|
> .fieldset-wrapper {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
&.error {
|
|
border: 2px solid var(--gin-color-danger);
|
|
}
|
|
}
|
|
|
|
.fieldset__label,
|
|
.fieldset__label--group,
|
|
.form-item__label {
|
|
font-size: var(--gin-font-size-s);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
color: var(--gin-color-title);
|
|
margin-top: 0;
|
|
margin-bottom: var(--gin-spacing-xs);
|
|
}
|
|
|
|
.form-item__label.has-error,
|
|
.form-item__error-message {
|
|
color: var(--gin-color-danger);
|
|
}
|
|
|
|
.form-item__description,
|
|
.fieldset__description {
|
|
max-width: $maxWidth;
|
|
color: var(--gin-color-text-light);
|
|
}
|
|
|
|
.form-item__label.form-required::after,
|
|
.fieldset__label.form-required::after,
|
|
.form-required > .fieldset__label::after,
|
|
.horizontal-tab-button .form-required::after,
|
|
.vertical-tabs__menu-link .form-required::after {
|
|
content: "*";
|
|
color: var(--gin-color-danger);
|
|
line-height: 1;
|
|
margin-right: .15em;
|
|
margin-left: .15em;
|
|
vertical-align: text-top;
|
|
background: none;
|
|
}
|
|
|
|
.claro-details.error {
|
|
border: 2px solid var(--gin-color-danger);
|
|
}
|
|
|
|
.claro-details__summary:not(.form-required) {
|
|
.required-mark {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.form-item__warning {
|
|
display: inline-block;
|
|
margin-top: var(--gin-spacing-xs);
|
|
}
|
|
|
|
html.js .form-autocomplete {
|
|
padding-right: 36px;
|
|
}
|
|
|
|
.entity-form-display-form {
|
|
> .form-actions {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.required-mark {
|
|
&::after {
|
|
background: var(--gin-color-danger);
|
|
mask-image: icon('asterisk');
|
|
mask-position: center center;
|
|
mask-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.form-wrapper,
|
|
.form-composite {
|
|
.form-item__label {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.field--type-text-with-summary,
|
|
.field--widget-text-textarea {
|
|
.form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.filter-wrapper {
|
|
border: 0 none;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
// Autocomplete field
|
|
html.js input.form-linkit-autocomplete {
|
|
padding-right: var(--gin-spacing-xl);
|
|
background-position: right 8px center;
|
|
}
|
|
|
|
.claro-autocomplete {
|
|
width: calc(100% - var(--gin-spacing-m));
|
|
|
|
.form-autocomplete {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.no-touchevents .form-element--type-select.form-element--extrasmall {
|
|
font-size: var(--gin-font-size-s);
|
|
line-height: 1.5;
|
|
min-height: 1.75rem;
|
|
}
|
|
|
|
// Special case, form starts with a form item, remove margin-top.
|
|
#block-gin-content > form > .form-item:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.image-style-new {
|
|
.form-item {
|
|
margin-right: var(--gin-spacing-xxs);
|
|
}
|
|
}
|
|
|
|
tr .form-item {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.container-inline .form-item {
|
|
margin-top: var(--gin-spacing-density-s);
|
|
margin-bottom: var(--gin-spacing-density-s);
|
|
}
|
|
|
|
.field-plugin-settings-edit-form {
|
|
margin-top: var(--gin-spacing-s);
|
|
|
|
.form-item {
|
|
margin-top: var(--gin-spacing-m);
|
|
margin-bottom: var(--gin-spacing-m);
|
|
}
|
|
|
|
.form-boolean-group .form-item {
|
|
margin-top: var(--gin-spacing-xs);
|
|
margin-bottom: var(--gin-spacing-xs);
|
|
}
|
|
}
|