forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
137 lines
3.7 KiB
SCSS
137 lines
3.7 KiB
SCSS
|
||
.glb-button {
|
||
color: var(--gin-color-primary) !important;
|
||
// color: var(--gin-color-primary-active);
|
||
background-color: transparent !important;
|
||
box-shadow: none !important;
|
||
|
||
font-family: Inter, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
|
||
|
||
&:hover {
|
||
background-color: var(--gin-color-primary-hover) !important;
|
||
}
|
||
|
||
&:hover, &:active, &:focus {
|
||
color: var(--gin-color-button-text);
|
||
}
|
||
display: inline-block !important;
|
||
margin: 1em 0.75em 1em 0 !important;
|
||
padding: calc(1em - 1px) calc(1.5em - 1px) !important;
|
||
cursor: pointer !important;
|
||
text-align: center !important;
|
||
text-decoration: none !important;
|
||
border: 1px solid transparent !important;
|
||
border-radius: 2px !important;
|
||
font-size: 1em !important;
|
||
font-weight: 700 !important;
|
||
line-height: 1em !important;
|
||
appearance: none !important;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.glb-button,
|
||
.glb-button:not(:focus),
|
||
.form-actions .glb-button,
|
||
.glb-action-link--icon-trash.glb-action-link {
|
||
.gin--dark-mode & {
|
||
box-shadow: 0 2px 18px var(--gin-shadow-button) !important;
|
||
}
|
||
|
||
padding: calc(1em - 2px) calc(1.5em - 2px) !important;
|
||
// background: var(--gin-color-primary-light-hover);
|
||
border: 2px solid var(--gin-color-primary) !important;
|
||
// border: 2px solid transparent !important;
|
||
border-radius: $borderDefault !important;
|
||
box-shadow: 0 1px 2px var(--gin-color-primary-light) !important;
|
||
// box-shadow: 0 1px 2px var(--gin-color-primary-lightShadow);
|
||
font-size: 16px !important;
|
||
|
||
&:hover {
|
||
background-color: var(--gin-color-primary-hover) !important;
|
||
border-color: var(--gin-color-primary-hover) !important;
|
||
}
|
||
|
||
&:active, &:focus {
|
||
background-color: var(--gin-color-primary-active) !important;
|
||
border-color: var(--gin-color-primary-active) !important;
|
||
}
|
||
|
||
&:hover, &:active, &:focus, &:hover:focus {
|
||
color: var(--gin-color-button-text) !important;
|
||
}
|
||
}
|
||
|
||
.glb-button.button--small {
|
||
padding: .5em 1em !important;
|
||
}
|
||
|
||
.glb-button.button--extrasmall {
|
||
padding: .25em .75em !important;
|
||
}
|
||
|
||
.glb-button--primary,
|
||
.glb-button--primary:not(:focus) {
|
||
background: var(--gin-color-primary) !important;
|
||
box-shadow: 0 .125em .25em var(--gin-color-primary-light-active),
|
||
.1em .25em .5em var(--gin-color-primary-light),
|
||
-.25em -.5em 1em var(--gin-bg-app) !important;
|
||
filter: drop-shadow(0 6px 10px var(--gin-color-primary-light)) !important;
|
||
|
||
&:hover {
|
||
background-color: var(--gin-color-primary-hover) !important;
|
||
}
|
||
|
||
&:active, &:focus {
|
||
background-color: var(--gin-color-primary-active) !important;
|
||
}
|
||
|
||
&, &:hover, &:active, &:focus {
|
||
color: var(--gin-color-button-text) !important;
|
||
}
|
||
}
|
||
|
||
a.glb-button:hover,
|
||
a.glb-button:active {
|
||
color: var(--gin-color-button-text) !important;
|
||
}
|
||
|
||
a.glb-button--primary:hover,
|
||
a.glb-button--primary:active,
|
||
a.glb-button--primary:focus,
|
||
a.glb-button--primary:focus:hover {
|
||
.gin--dark-mode & {
|
||
color: var(--gin-bg-app) !important;
|
||
}
|
||
}
|
||
|
||
.glb-button.glb-button:disabled, .glb-button.glb-button.is-disabled {
|
||
&, &:hover, &:active, &:focus {
|
||
border: 2px solid var(--gin-color-disabled) !important;
|
||
}
|
||
|
||
.gin--dark-mode & {
|
||
color: var(--gin-color-disabled) !important;
|
||
background-color: var(--gin-bg-layer2) !important;
|
||
}
|
||
}
|
||
|
||
.glb-action-link.glb-action-link--icon-trash {
|
||
min-height: 48px !important;
|
||
padding: calc(.75em - 1px) calc(1.5em - 2px) !important;
|
||
box-sizing: border-box !important;
|
||
|
||
&, &:hover, &:active, &:focus, &:focus:hover {
|
||
border: 2px solid var(--gin-color-danger) !important;
|
||
// border: 2px solid transparent !important;
|
||
}
|
||
}
|
||
|
||
.inline-block-create-button {
|
||
@extend .glb-button;
|
||
background: none !important;
|
||
}
|
||
|
||
.glb-button.js-hide {
|
||
display: none !important;
|
||
}
|