@opensig/opendesign
Version:
376 lines (348 loc) • 10.5 kB
CSS
.o-btn {
outline: none;
background-color: transparent;
border: 1px solid transparent;
transition: all var(--o-duration-s) var(--o-easing-standard);
white-space: nowrap;
text-decoration: none;
border-radius: var(--btn-radius);
display: inline-flex;
align-items: center;
justify-content: center;
max-width: var(--btn-max-width);
min-width: var(--btn-min-width);
padding: var(--btn-padding);
height: var(--btn-height);
cursor: pointer;
}
.o-btn-outline {
color: var(--btn-color);
border: 1px solid var(--btn-bd-color);
}
@media (hover: hover) {
.o-btn-outline:hover {
color: var(--btn-color-hover);
border: 1px solid var(--btn-bd-color-hover);
}
}
.o-btn-outline:active {
color: var(--btn-color-active);
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-outline:focus-visible {
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-solid {
color: var(--btn-color);
border: 1px solid var(--btn-bd-color);
background-color: var(--btn-bg-color);
background-image: var(--btn-bg-image);
}
@media (hover: hover) {
.o-btn-solid:hover {
color: var(--btn-color-hover);
border: 1px solid var(--btn-bd-color-hover);
background-color: var(--btn-bg-color-hover);
background-image: var(--btn-bg-image-hover);
}
}
.o-btn-solid:active {
color: var(--btn-color-active);
border: 1px solid var(--btn-bd-color-active);
background-color: var(--btn-bg-color-active);
background-image: var(--btn-bg-image-active);
}
.o-btn-solid:focus-visible {
border: 1px solid var(--btn-bd-color-active);
}
.o-btn-text {
color: var(--btn-color);
background-color: transparent;
padding: 0;
}
@media (hover: hover) {
.o-btn-text:hover {
color: var(--btn-color-hover);
background-color: transparent;
}
}
.o-btn-text:active {
color: var(--btn-color-active);
background-color: transparent;
}
.o-btn-icon-only {
width: var(--btn-height);
background-color: var(--btn-bg-color);
}
@media (hover: hover) {
.o-btn-icon-only:hover {
color: var(--btn-color-hover);
background-color: var(--btn-bg-color-hover);
}
}
.o-btn-icon-only:active {
color: var(--btn-color-active);
background-color: var(--btn-bg-color-active);
}
.o-btn-brand {
border: none;
}
@media (hover: hover) {
.o-btn-brand:hover {
border: none;
}
}
.o-btn-disabled, .o-btn-disabled:active, .o-btn-disabled:hover, .o-btn-disabled:focus-visible {
cursor: not-allowed;
color: var(--btn-color-disabled);
border: 1px solid var(--btn-bd-color-disabled);
background-color: var(--btn-bg-color-disabled);
background-image: var(--btn-bg-image-disabled);
}
.o-btn-small {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.o-btn-medium {
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
}
.o-btn-large {
font-size: var(--o-font_size-text1);
line-height: var(--o-line_height-text1);
}
.o-btn-prefix {
display: inline-flex;
align-items: center;
margin-right: var(--btn-gap-prefix);
font-size: var(--btn-icon-size);
}
.o-btn-icon-only .o-btn-prefix {
margin-right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.o-btn-suffix {
display: inline-flex;
align-items: center;
margin-left: var(--btn-gap-suffix);
font-size: var(--btn-icon-size);
}
.o-btn {
--btn-color: var(--o-color-info2);
--btn-color-hover: var(--o-color-control2);
--btn-color-active: var(--o-color-control3);
--btn-bd-color: var(--o-color-control1);
--btn-bd-color-hover: var(--o-color-control2);
--btn-bd-color-active: var(--o-color-control3);
--btn-bd-color-disabled: var(--o-color-control1);
}
.o-btn.o-btn-solid {
--btn-color: var(--o-color-white);
--btn-color-hover: var(--o-color-white);
--btn-color-active: var(--o-color-white);
--btn-color-disabled: var(--o-color-white);
--btn-bg-color: var(--o-color-control1-light);
--btn-bg-color-hover: var(--o-color-control2-light);
--btn-bg-color-active: var(--o-color-control3-light);
--btn-bd-color-disabled: var(--o-color-control4-light);
--btn-bd-color: var(--o-color-control1-light);
--btn-bd-color-hover: var(--o-color-control2-light);
--btn-bd-color-active: var(--o-color-control3-light);
--btn-bg-color-disabled: var(--o-color-control4-light);
}
.o-btn.o-btn-text {
--btn-color-hover: var(--o-color-primary2);
--btn-color-active: var(--o-color-primary3);
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-normal {
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-normal.o-btn-icon-only {
--btn-color-hover: var(--o-color-primary2);
--btn-bd-color-hover: var(--o-color-primary2);
}
.o-btn-normal.o-btn-solid {
--btn-color: var(--o-color-info2);
--btn-color-hover: var(--o-color-info2);
--btn-color-active: var(--o-color-info2);
--btn-color-disabled: var(--o-color-info4);
}
.o-btn-primary {
--btn-color: var(--o-color-primary1);
--btn-color-hover: var(--o-color-primary2);
--btn-color-active: var(--o-color-primary3);
--btn-color-disabled: var(--o-color-primary4);
--btn-bd-color: var(--o-color-primary1);
--btn-bd-color-hover: var(--o-color-primary2);
--btn-bd-color-active: var(--o-color-primary3);
--btn-bd-color-disabled: var(--o-color-primary4);
}
.o-btn-primary.o-btn-solid {
--btn-bg-color: var(--o-color-primary1);
--btn-bg-color-hover: var(--o-color-primary2);
--btn-bg-color-active: var(--o-color-primary3);
--btn-bg-color-disabled: var(--o-color-primary4);
--btn-bd-color: var(--o-color-primary1);
--btn-bd-color-hover: var(--o-color-primary2);
--btn-bd-color-active: var(--o-color-primary3);
--btn-bd-color-disabled: var(--o-color-primary4);
}
.o-btn-primary.o-btn-text {
--btn-color: var(--o-color-info1);
}
.o-btn-success {
--btn-color: var(--o-color-success1);
--btn-color-hover: var(--o-color-success2);
--btn-color-active: var(--o-color-success3);
--btn-color-disabled: var(--o-color-success4);
--btn-bd-color: var(--o-color-success1);
--btn-bd-color-hover: var(--o-color-success2);
--btn-bd-color-active: var(--o-color-success3);
--btn-bd-color-disabled: var(--o-color-success4);
}
.o-btn-success.o-btn-solid {
--btn-bg-color: var(--o-color-success1);
--btn-bg-color-hover: var(--o-color-success2);
--btn-bg-color-active: var(--o-color-success3);
--btn-bg-color-disabled: var(--o-color-success4);
--btn-bd-color: var(--o-color-success1);
--btn-bd-color-hover: var(--o-color-success2);
--btn-bd-color-active: var(--o-color-success3);
}
.o-btn-warning {
--btn-color: var(--o-color-warning1);
--btn-color-hover: var(--o-color-warning2);
--btn-color-active: var(--o-color-warning3);
--btn-color-disabled: var(--o-color-warning4);
--btn-bd-color: var(--o-color-warning1);
--btn-bd-color-hover: var(--o-color-warning2);
--btn-bd-color-active: var(--o-color-warning3);
--btn-bd-color-disabled: var(--o-color-warning4);
}
.o-btn-warning.o-btn-solid {
--btn-bg-color: var(--o-color-warning1);
--btn-bg-color-hover: var(--o-color-warning2);
--btn-bg-color-active: var(--o-color-warning3);
--btn-bg-color-disabled: var(--o-color-warning4);
--btn-bd-color: var(--o-color-warning1);
--btn-bd-color-hover: var(--o-color-warning2);
--btn-bd-color-active: var(--o-color-warning3);
}
.o-btn-warning.o-btn-disabled {
--btn-color: var(--o-color-warning4);
--btn-bg-color: var(--o-color-warning4);
--btn-bd-color: var(--o-color-warning4);
}
.o-btn-danger {
--btn-color: var(--o-color-danger1);
--btn-color-hover: var(--o-color-danger2);
--btn-color-active: var(--o-color-danger3);
--btn-color-disabled: var(--o-color-danger4);
--btn-bd-color: var(--o-color-danger1);
--btn-bd-color-hover: var(--o-color-danger2);
--btn-bd-color-active: var(--o-color-danger3);
--btn-bd-color-disabled: var(--o-color-danger4);
}
.o-btn-danger.o-btn-solid {
--btn-bg-color: var(--o-color-danger1);
--btn-bg-color-hover: var(--o-color-danger2);
--btn-bg-color-active: var(--o-color-danger3);
--btn-bg-color-disabled: var(--o-color-danger4);
--btn-bd-color: var(--o-color-danger1);
--btn-bd-color-hover: var(--o-color-danger2);
--btn-bd-color-active: var(--o-color-danger3);
}
.o-btn-brand.o-btn-solid {
--btn-bg-image: linear-gradient(var(--o-color-primary1));
--btn-bg-image-hover: linear-gradient(var(--o-color-primary2));
--btn-bg-image-active: linear-gradient(var(--o-color-primary3));
--btn-bg-image-disabled: linear-gradient(var(--o-color-primary4));
}
.o-btn-small {
--btn-radius: var(--o-radius_control-xs);
--btn-gap: 4px;
--btn-gap-prefix: var(--btn-gap);
--btn-gap-suffix: var(--btn-gap);
--btn-padding: 0 15px;
--btn-icon-size: var(--o-icon_size-xs);
--btn-height: 28px;
}
.o-btn-medium {
--btn-min-width: 80px;
--btn-radius: var(--o-radius_control-s);
--btn-gap: 8px;
--btn-gap-prefix: var(--btn-gap);
--btn-gap-suffix: var(--btn-gap);
--btn-padding: 0 15px;
--btn-icon-size: var(--o-icon_size-xs);
--btn-height: var(--o-control_size-m);
}
.o-btn-large {
--btn-min-width: 96px;
--btn-radius: var(--o-radius_control-s);
--btn-gap: 8px;
--btn-gap-prefix: var(--btn-gap);
--btn-gap-suffix: var(--btn-gap);
--btn-padding: 0 23px;
--btn-icon-size: var(--o-icon_size-m);
--btn-height: var(--o-control_size-l);
}
.o-btn-round-pill {
--btn-radius: var(--o-control_size-l);
}
.o-btn-text {
--btn-bd-color-disabled: transparent;
}
.o-btn-text.o-btn-large {
--btn-gap-prefix: 8px;
--btn-gap-suffix: 4px;
}
.o-btn-text.o-btn-medium {
--btn-gap-prefix: 8px;
--btn-gap-suffix: 4px;
}
.o-btn-text.o-btn-small {
--btn-gap-prefix: 8px;
--btn-gap-suffix: 4px;
}
.o-btn-icon-only {
--btn-padding: 0;
--btn-max-width: none;
--btn-min-width: none;
}
.o-btn-icon-only.o-btn-text {
--btn-color-hover: var(--o-color-primary2);
--btn-color-active: var(--o-color-primary3);
--btn-bg-color-hover: var(--o-color-control2-light);
--btn-bg-color-active: var(--o-color-control3-light);
}
@media (max-width: 1680px) {
.o-btn-large {
--btn-height: 36px;
--btn-padding: 0 15px;
font-size: var(--o-font_size-tip1);
line-height: var(--o-line_height-tip1);
--btn-icon-size: var(--o-icon_size-s);
}
.o-btn-medium {
--btn-height: 28px;
--btn-gap: 4px;
}
}
@media (max-width: 840px) {
.o-btn-large {
--btn-height: 32px;
--btn-icon-size: var(--o-icon_size-xs);
}
.o-btn-small {
--btn-padding: 0 11px;
--btn-height: var(--o-control_size-s);
}
.o-btn-text.o-btn-small {
--btn-gap-prefix: 4px;
--btn-gap-suffix: 4px;
}
}