mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-29 17:14:37 +03:00
640 lines
17 KiB
SCSS
640 lines
17 KiB
SCSS
.antiButton {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
min-width: 1.375rem;
|
|
white-space: nowrap;
|
|
font-size: .8125rem;
|
|
color: var(--theme-content-color);
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
transition-property: border, background-color, color, box-shadow;
|
|
transition-duration: .15s;
|
|
&.testing {
|
|
transition-duration: 0;
|
|
}
|
|
|
|
&.inline {
|
|
height: 1.375rem;
|
|
font-size: .75rem;
|
|
line-height: .75rem;
|
|
&.only-icon { width: 1.375rem; }
|
|
}
|
|
&.x-small {
|
|
height: 1.5rem;
|
|
font-size: .75rem;
|
|
&.only-icon { width: 1.5rem; }
|
|
}
|
|
&.small {
|
|
height: 1.75rem;
|
|
&.only-icon { width: 1.75rem; }
|
|
}
|
|
&.medium:not(.stepper) {
|
|
height: 2rem;
|
|
&.only-icon { width: 2rem; }
|
|
}
|
|
&.large {
|
|
height: 2.25rem;
|
|
&.only-icon { width: 2.25rem; }
|
|
}
|
|
&.x-large {
|
|
height: 2.75rem;
|
|
&.only-icon { width: 2.75rem; }
|
|
}
|
|
|
|
&.iconL:not(.iconR, .only-icon) { padding: 0 1rem 0 .75rem; }
|
|
&.iconR:not(.iconL, .only-icon) { padding: 0 .75rem 0 1rem; }
|
|
.btn-icon {
|
|
color: var(--theme-content-color);
|
|
transition: color .15s;
|
|
pointer-events: none;
|
|
}
|
|
.btn-right-icon {
|
|
margin-left: .5rem;
|
|
color: var(--theme-halfcontent-color);
|
|
transition: color .15s;
|
|
pointer-events: none;
|
|
}
|
|
&.gap-large:not(.only-icon, .gap-medium) .btn-icon:not(.spinner) { margin-right: .5rem; }
|
|
&.gap-large:not(.only-icon, .gap-medium) .btn-right-icon { margin-left: .5rem; }
|
|
&.gap-medium:not(.only-icon, .gap-large) .btn-icon:not(.spinner) { margin-right: .375rem; }
|
|
&.gap-medium:not(.only-icon, .gap-large) .btn-right-icon { margin-left: .375rem; }
|
|
|
|
&.short { max-width: 8.5rem; }
|
|
&.accent { font-weight: 500; }
|
|
&.sh-no-shape { border-radius: .375rem; }
|
|
&.sh-round-small { border-radius: .25rem; }
|
|
&.sh-round { border-radius: .5rem; }
|
|
&.sh-round2 { border-radius: .75rem; }
|
|
&.sh-circle { border-radius: 1rem; }
|
|
&.sh-rectangle-right {
|
|
border-top-left-radius: .25rem;
|
|
border-bottom-left-radius: .25rem;
|
|
}
|
|
&.sh-rectangle-left {
|
|
border-top-right-radius: .25rem;
|
|
border-bottom-right-radius: .25rem;
|
|
}
|
|
&.sh-filter { border-radius: 0 0 .5rem .5rem; }
|
|
|
|
&.highlight {
|
|
box-shadow: inset 0 0 1px 1px var(--primary-button-outline);
|
|
&:hover { box-shadow: inset 0 0 1px 2px var(--primary-button-outline); }
|
|
}
|
|
|
|
&:hover .btn-icon { color: var(--theme-caption-color); }
|
|
&:not(.no-focus):focus {
|
|
&:not(.sh-filter, .regular) { box-shadow: 0 0 0 2px var(--primary-button-outline); }
|
|
&.sh-filter { border-color: var(--primary-button-outline); }
|
|
}
|
|
|
|
&.bs-solid { border-style: solid; }
|
|
&.bs-dashed { border-style: dashed; }
|
|
&.bs-none { border: none; }
|
|
&.jf-left { justify-content: flex-start; }
|
|
&.jf-center { justify-content: center; }
|
|
&.only-icon {
|
|
flex-shrink: 0 !important;
|
|
|
|
&:not(.stepper) { padding: 0; }
|
|
}
|
|
|
|
&.regular {
|
|
background-color: var(--theme-button-default);
|
|
border-color: var(--theme-button-border);
|
|
|
|
&:hover { background-color: var(--theme-button-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--theme-button-pressed); }
|
|
&:focus {
|
|
background-color: var(--theme-button-focused);
|
|
outline: 2px solid var(--global-focus-BorderColor);
|
|
outline-offset: 2px;
|
|
}
|
|
&:disabled { background-color: var(--theme-button-disabled); }
|
|
&.selected {
|
|
color: var(--theme-button-contrast-color);
|
|
background-color: var(--theme-accent-color);
|
|
.btn-icon { color: var(--theme-button-contrast-color); }
|
|
&:hover { color: var(--theme-button-contrast-color); }
|
|
}
|
|
}
|
|
&.no-border {
|
|
color: var(--theme-content-color);
|
|
background-color: var(--theme-button-default);
|
|
box-shadow: var(--button-shadow);
|
|
|
|
&:hover {
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-button-hovered);
|
|
|
|
.btn-icon { color: var(--theme-caption-color); }
|
|
}
|
|
&:disabled {
|
|
color: var(--theme-trans-color);
|
|
background-color: var(--theme-list-button-color);
|
|
cursor: default;
|
|
|
|
.btn-icon { color: var(--theme-trans-color); }
|
|
&:hover {
|
|
color: var(--theme-trans-color);
|
|
.btn-icon { color: var(--theme-trans-color); }
|
|
}
|
|
}
|
|
}
|
|
&.ghost, &.stepper {
|
|
&:hover { background-color: var(--theme-button-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--theme-button-pressed); }
|
|
&.selected { background-color: var(--highlight-select); }
|
|
&.selected:hover { background-color: var(--highlight-select-hover); }
|
|
}
|
|
&.link {
|
|
padding: 0 0.875rem;
|
|
&:hover {
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-bg-color);
|
|
border-color: var(--theme-divider-color);
|
|
|
|
.btn-icon { color: var(--theme-content-color); }
|
|
}
|
|
&:disabled {
|
|
color: var(--theme-dark-color);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
cursor: auto;
|
|
|
|
.btn-icon { color: var(--theme-content-color); }
|
|
}
|
|
&.small { padding: 0 .25rem; }
|
|
}
|
|
&.link-bordered {
|
|
padding: 0 .5rem;
|
|
color: var(--theme-content-color);
|
|
background-color: var(--theme-link-button-color);
|
|
border-color: var(--theme-button-border);
|
|
|
|
&:hover {
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-link-button-hover);
|
|
border-color: var(--theme-list-divider-color);
|
|
|
|
.btn-icon { color: var(--theme-caption-color); }
|
|
}
|
|
// &.small { padding: 0 .25rem; }
|
|
}
|
|
&.list {
|
|
padding: 0 .625em;
|
|
color: var(--theme-content-color);
|
|
background-color: var(--theme-button-default);
|
|
border-color: var(--theme-button-border);
|
|
border-radius: 1.5rem;
|
|
|
|
&:not(.inline, .x-small) { min-height: 1.75rem; }
|
|
.btn-icon { color: var(--theme-dark-color); }
|
|
&:hover {
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-button-hovered);
|
|
border-color: var(--theme-button-border);
|
|
}
|
|
&:not(.no-focus):focus { box-shadow: none; }
|
|
}
|
|
&.primary, &.secondary, &.positive, &.negative {
|
|
&:hover, &:active, &:focus {
|
|
color: var(--primary-button-color);
|
|
|
|
.btn-icon,
|
|
.btn-right-icon { color: var(--primary-button-color); }
|
|
}
|
|
}
|
|
&.regular, &.ghost {
|
|
&:hover, &:active, &.pressed, &.pressed:hover, &:focus { color: var(--theme-caption-color); }
|
|
}
|
|
&.primary,
|
|
&.secondary,
|
|
&.positive,
|
|
&.negative {
|
|
padding: 0 1.5rem;
|
|
color: var(--primary-button-content-color);
|
|
border-color: var(--primary-button-border);
|
|
|
|
.btn-icon,
|
|
.btn-right-icon { color: var(--primary-button-content-color); }
|
|
}
|
|
&.primary {
|
|
color: var(--primary-button-color);
|
|
background-color: var(--primary-button-default);
|
|
|
|
&:hover { background-color: var(--primary-button-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--primary-button-pressed); }
|
|
&:focus { background-color: var(--primary-button-focused); }
|
|
&:disabled {
|
|
color: var(--primary-button-disabled-color);
|
|
background-color: var(--primary-button-disabled);
|
|
|
|
.btn-icon,
|
|
.btn-right-icon { color: var(--primary-button-disabled-color); }
|
|
}
|
|
}
|
|
&.secondary {
|
|
background-color: var(--secondary-button-default);
|
|
&:hover { background-color: var(--secondary-button-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--secondary-button-pressed); }
|
|
&:focus { background-color: var(--secondary-button-focused); }
|
|
&:disabled {
|
|
color: var(--secondary-button-disabled-color);
|
|
background-color: var(--secondary-button-disabled);
|
|
}
|
|
}
|
|
&.positive {
|
|
background-color: var(--positive-button-default);
|
|
&:hover { background-color: var(--positive-button-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--positive-button-pressed); }
|
|
&:focus { background-color: var(--positive-button-focused); }
|
|
&:disabled {
|
|
color: var(--positive-button-disabled-color);
|
|
background-color: var(--positive-button-disabled);
|
|
}
|
|
}
|
|
&.negative {
|
|
background-color: var(--negative-button-default);
|
|
&:hover { background-color: var(--negative-button-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--negative-button-pressed); }
|
|
&:focus { background-color: var(--negative-button-focused); }
|
|
&:disabled {
|
|
color: var(--negative-button-disabled-color);
|
|
background-color: var(--negative-button-disabled);
|
|
}
|
|
}
|
|
&.contrast {
|
|
padding: .75rem 1rem;
|
|
font-weight: 500;
|
|
color: var(--theme-button-contrast-color);
|
|
background-color: var(--theme-button-contrast-enabled);
|
|
border-color: var(--theme-button-contrast-border);
|
|
|
|
.btn-icon,
|
|
.btn-right-icon { color: var(--theme-button-contrast-color); }
|
|
|
|
&:hover { background-color: var(--theme-button-contrast-hovered); }
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover { background-color: var(--theme-button-contrast-pressed); }
|
|
&:focus { background-color: var(--theme-button-contrast-hovered); }
|
|
&:disabled {
|
|
color: var(--theme-button-contrast-disabled-color);
|
|
background-color: var(--theme-button-contrast-disabled);
|
|
}
|
|
}
|
|
&.stepper {
|
|
padding: 0;
|
|
width: 1rem;
|
|
height: .8125rem;
|
|
min-width: 1rem;
|
|
|
|
&:focus { box-shadow: 0 0 0 1px var(--primary-button-outline); }
|
|
}
|
|
|
|
&.notSelected {
|
|
color: var(--theme-dark-color);
|
|
|
|
.btn-icon { color: var(--theme-darker-color); }
|
|
&:hover,
|
|
&:hover .btn-icon { color: var(--theme-content-color); }
|
|
}
|
|
|
|
&.dangerous {
|
|
color: var(--white-color);
|
|
background-color: var(--dangerous-bg-color);
|
|
border-color: var(--dangerous-bg-color);
|
|
|
|
&:hover { background-color: var(--dangerous-bg-hover); }
|
|
&:not(.no-focus):focus { box-shadow: var(--dangerous-shadow); }
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--theme-darker-color);
|
|
border-color: transparent;
|
|
cursor: not-allowed;
|
|
|
|
.btn-icon,
|
|
.btn-right-icon { opacity: .5; }
|
|
}
|
|
|
|
.resetIconSize,
|
|
&.resetIconSize { font-size: 16px !important; }
|
|
|
|
&.statusButton {
|
|
padding: 0 8px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
|
|
&.square {
|
|
flex-shrink: 0;
|
|
padding: 2px;
|
|
width: 20px;
|
|
}
|
|
}
|
|
&:focus { z-index: 1; }
|
|
&.icon {
|
|
background-color: var(--theme-button-icon-default);
|
|
|
|
.btn-icon { color: var(--theme-dark-color); }
|
|
|
|
&:hover, &:focus, &.selected { background-color: var(--theme-button-icon-hovered); }
|
|
&:active { background-color: var(--theme-button-icon-pressed); }
|
|
&:hover, &:focus, &.selected, &:active {
|
|
.btn-icon { color: var(--theme-caption-color); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Huly SplitButton
|
|
.hulySplitButton-container {
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border: 1px solid transparent;
|
|
|
|
button {
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
border: none;
|
|
|
|
.btn-icon {
|
|
width: var(--spacing-2_5);
|
|
height: var(--spacing-2_5);
|
|
}
|
|
}
|
|
&.no-focus button {
|
|
outline: none;
|
|
}
|
|
&:not(.no-focus) button:focus {
|
|
box-shadow: 0 0 0 2px var(--theme-button-contrast-color);
|
|
outline: 2px solid var(--global-focus-BorderColor);
|
|
outline-offset: 2px;
|
|
}
|
|
button:focus,
|
|
button.pressed {
|
|
z-index: 1;
|
|
}
|
|
.hulySplitButton-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
min-width: 0;
|
|
}
|
|
.hulySplitButton-second {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
.btn-icon {
|
|
width: var(--global-min-Size);
|
|
height: var(--global-min-Size);
|
|
}
|
|
}
|
|
|
|
&.large {
|
|
height: var(--global-large-Size);
|
|
|
|
.hulySplitButton-main {
|
|
padding: 0 var(--spacing-1) 0 var(--spacing-2);
|
|
}
|
|
.hulySplitButton-second {
|
|
width: var(--global-small-Size);
|
|
}
|
|
&.separate .hulySplitButton-main {
|
|
padding: 0 var(--spacing-1_25) 0 var(--spacing-2);
|
|
}
|
|
}
|
|
&.medium {
|
|
height: var(--global-medium-Size);
|
|
|
|
.hulySplitButton-main {
|
|
padding: 0 var(--spacing-0_75) 0 var(--spacing-1_5);
|
|
}
|
|
.hulySplitButton-second {
|
|
width: var(--global-small-Size);
|
|
}
|
|
&.separate .hulySplitButton-main {
|
|
padding: 0 var(--spacing-1_25) 0 var(--spacing-1_5);
|
|
}
|
|
}
|
|
&.large,
|
|
&.medium {
|
|
border-radius: var(--medium-BorderRadius);
|
|
|
|
button:first-child {
|
|
border-top-left-radius: var(--medium-BorderRadius);
|
|
border-bottom-left-radius: var(--medium-BorderRadius);
|
|
}
|
|
button:last-child {
|
|
border-top-right-radius: var(--medium-BorderRadius);
|
|
border-bottom-right-radius: var(--medium-BorderRadius);
|
|
}
|
|
}
|
|
&.small {
|
|
height: var(--global-small-Size);
|
|
border-radius: var(--small-BorderRadius);
|
|
|
|
button:first-child {
|
|
border-top-left-radius: var(--small-BorderRadius);
|
|
border-bottom-left-radius: var(--small-BorderRadius);
|
|
}
|
|
button:last-child {
|
|
border-top-right-radius: var(--small-BorderRadius);
|
|
border-bottom-right-radius: var(--small-BorderRadius);
|
|
}
|
|
.hulySplitButton-main {
|
|
padding: 0 var(--spacing-0_5) 0 var(--spacing-1);
|
|
}
|
|
.hulySplitButton-second {
|
|
width: var(--global-extra-small-Size);
|
|
}
|
|
&.separate .hulySplitButton-main {
|
|
padding: 0 var(--spacing-0_75) 0 var(--spacing-1);
|
|
}
|
|
}
|
|
&.extra-small {
|
|
height: var(--global-extra-small-Size);
|
|
border-radius: var(--extra-small-BorderRadius);
|
|
|
|
button:first-child {
|
|
border-top-left-radius: var(--extra-small-BorderRadius);
|
|
border-bottom-left-radius: var(--extra-small-BorderRadius);
|
|
}
|
|
button:last-child {
|
|
border-top-right-radius: var(--extra-small-BorderRadius);
|
|
border-bottom-right-radius: var(--extra-small-BorderRadius);
|
|
}
|
|
button .btn-icon {
|
|
width: var(--spacing-1_5);
|
|
height: var(--spacing-1_5);
|
|
}
|
|
.hulySplitButton-main {
|
|
padding: 0 var(--spacing-0_75);
|
|
}
|
|
.hulySplitButton-second {
|
|
width: var(--global-min-Size);
|
|
}
|
|
}
|
|
&.min {
|
|
height: var(--global-min-Size);
|
|
border-radius: var(--min-BorderRadius);
|
|
|
|
button:first-child {
|
|
border-top-left-radius: var(--min-BorderRadius);
|
|
border-bottom-left-radius: var(--min-BorderRadius);
|
|
}
|
|
button:last-child {
|
|
border-top-right-radius: var(--min-BorderRadius);
|
|
border-bottom-right-radius: var(--min-BorderRadius);
|
|
}
|
|
button {
|
|
font-size: .75rem;
|
|
|
|
.btn-icon {
|
|
width: var(--spacing-1_25);
|
|
height: var(--spacing-1_25);
|
|
}
|
|
}
|
|
.hulySplitButton-main {
|
|
padding: 0 var(--spacing-0_5);
|
|
}
|
|
.hulySplitButton-second {
|
|
width: var(--global-min-Size);
|
|
}
|
|
}
|
|
&.small .hulySplitButton-main,
|
|
&.extra-small .hulySplitButton-main,
|
|
&.min .hulySplitButton-main {
|
|
gap: var(--spacing-0_5);
|
|
}
|
|
|
|
&.secondary {
|
|
background-color: var(--button-secondary-BackgroundColor);
|
|
border-color: var(--button-secondary-BorderColor);
|
|
|
|
button {
|
|
color: var(--button-subtle-LabelColor);
|
|
|
|
&:enabled {
|
|
&:hover {
|
|
background-color: var(--button-secondary-hover-BackgroundColor);
|
|
}
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover {
|
|
background-color: var(--button-secondary-active-BackgroundColor);
|
|
}
|
|
&:focus {
|
|
color: var(--theme-caption-color);
|
|
background-color: var(--theme-button-focused);
|
|
}
|
|
}
|
|
}
|
|
&:not(.disabled):focus-within {
|
|
border-color: var(--theme-button-focused-border);
|
|
}
|
|
&.disabled {
|
|
background-color: var(--button-disabled-BackgroundColor);
|
|
|
|
button {
|
|
color: var(--button-disabled-LabelColor);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.primary {
|
|
color: var(--primary-button-content-color);
|
|
background-color: var(--primary-button-default);
|
|
border-color: var(--primary-button-border);
|
|
|
|
button {
|
|
color: var(--primary-button-color);
|
|
|
|
&:enabled {
|
|
&:hover {
|
|
background-color: var(--primary-button-hovered);
|
|
}
|
|
&:active,
|
|
&.pressed,
|
|
&.pressed:hover {
|
|
background-color: var(--primary-button-pressed);
|
|
}
|
|
&:focus {
|
|
background-color: var(--primary-button-focused);
|
|
}
|
|
}
|
|
}
|
|
&:not(.disabled):focus-within {
|
|
border-color: var(--theme-button-focused-border);
|
|
}
|
|
&.disabled {
|
|
background-color: var(--primary-button-disabled);
|
|
|
|
button {
|
|
color: var(--primary-button-disabled-color);
|
|
background-color: transparent;
|
|
|
|
.btn-icon {
|
|
color: var(--primary-button-disabled-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
border-color: transparent;
|
|
|
|
button {
|
|
color: var(--theme-darker-color);
|
|
cursor: not-allowed;
|
|
|
|
.btn-icon {
|
|
color: var(--button-disabled-IconColor);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.separate {
|
|
.hulySplitButton-second {
|
|
position: relative;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: 20%;
|
|
left: -0.5px;
|
|
width: 1px;
|
|
height: 60%;
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
&.secondary .hulySplitButton-second::after {
|
|
background-color: var(--theme-caption-color);
|
|
}
|
|
&.primary .hulySplitButton-second::after {
|
|
background-color: var(--primary-button-color);
|
|
}
|
|
&:focus-within .hulySplitButton-second::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|