forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
134 lines
3.1 KiB
SCSS
134 lines
3.1 KiB
SCSS
.button,
|
|
.dropbutton__item:first-of-type > *,
|
|
.dropbutton__toggle {
|
|
font-size: var(--gin-font-size-s);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
color: var(--gin-color-primary);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
transition: var(--gin-transition);
|
|
|
|
@include mq(wide) {
|
|
font-size: var(--gin-font-size);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--gin-color-primary-hover);
|
|
}
|
|
|
|
&:active, &:focus {
|
|
background-color: var(--gin-color-primary-active);
|
|
}
|
|
|
|
&:hover, &:active, &:focus {
|
|
color: var(--gin-color-button-text);
|
|
}
|
|
}
|
|
|
|
.button,
|
|
.button:not(:focus),
|
|
.form-actions .button,
|
|
.action-link--icon-trash.action-link {
|
|
padding: calc(var(--gin-spacing-m) - 2px) calc(var(--gin-spacing-l) - 2px);
|
|
border: 2px solid var(--gin-color-primary) !important;
|
|
border-radius: var(--gin-border-m);
|
|
box-shadow: 0 1px 2px var(--gin-color-primary-light);
|
|
transition: var(--gin-transition);
|
|
|
|
&:hover {
|
|
background-color: var(--gin-color-primary-hover);
|
|
border-color: var(--gin-color-primary-hover) !important;
|
|
}
|
|
|
|
&:active, &:focus {
|
|
border-color: var(--gin-color-primary-active) !important;
|
|
}
|
|
|
|
&:hover, &:active, &:focus, &:hover:focus {
|
|
color: var(--gin-color-button-text);
|
|
}
|
|
}
|
|
|
|
.form-actions .button {
|
|
margin-right: var(--gin-spacing-xs);
|
|
}
|
|
|
|
.button.button--small {
|
|
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
|
|
border-radius: var(--gin-border-s);
|
|
}
|
|
|
|
.button.button--extrasmall {
|
|
padding: var(--gin-spacing-xxs) var(--gin-spacing-s);
|
|
border-radius: var(--gin-border-s);
|
|
}
|
|
|
|
.button--primary,
|
|
.button--primary:not(:focus),
|
|
.ief-entity-submit {
|
|
background: var(--gin-color-primary);
|
|
box-shadow: .1em .25em .5em var(--gin-color-primary-light);
|
|
|
|
&:hover {
|
|
background-color: var(--gin-color-primary-hover);
|
|
}
|
|
|
|
&:active, &:focus {
|
|
background-color: var(--gin-color-primary-active);
|
|
}
|
|
|
|
&, &:hover, &:active, &:focus {
|
|
color: var(--gin-color-button-text);
|
|
}
|
|
}
|
|
|
|
a.button:hover,
|
|
a.button:active {
|
|
color: var(--gin-color-button-text);
|
|
}
|
|
|
|
a.button--primary:hover,
|
|
a.button--primary:active,
|
|
a.button--primary:focus,
|
|
a.button--primary:focus:hover {
|
|
.gin--dark-mode & {
|
|
color: var(--gin-bg-app);
|
|
}
|
|
}
|
|
|
|
.button.button:disabled, .button.button.is-disabled {
|
|
&, &:hover, &:active, &:focus {
|
|
color: var(--gin-color-disabled);
|
|
background: transparent;
|
|
border: 2px solid var(--gin-color-disabled-border) !important;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.button.button--primary:disabled, .button.button--primary.is-disabled {
|
|
&, &:hover, &:active, &:focus {
|
|
color: var(--gin-color-disabled);
|
|
background-color: var(--gin-color-disabled-bg);
|
|
}
|
|
}
|
|
|
|
.action-link.action-link--icon-trash {
|
|
min-height: 48px;
|
|
padding: calc(var(--gin-spacing-s) - 1px) calc(var(--gin-spacing-l) - 2px);
|
|
box-sizing: border-box;
|
|
|
|
&, &:hover, &:active, &:focus, &:focus:hover {
|
|
border: 2px solid var(--gin-color-danger) !important;
|
|
// border: 2px solid transparent !important;
|
|
}
|
|
}
|
|
|
|
// Autocomplete field remove button
|
|
.multiple-fields-remove-button.button {
|
|
border: 0 none !important;
|
|
mask-image: icon('remove');
|
|
mask-size: 16px 16px;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center center;
|
|
}
|