@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
238 lines (221 loc) • 7.47 kB
CSS
.o_box {
--_box-color: var(--o-color-info2);
--_box-color-disabled: var(--o-color-info4);
--icon-color: var(--o-color-info2);
--icon-color-hover: var(--o-color-info2);
--icon-color-disabled: var(--o-color-info4);
--_box-ap-bd: 1px solid var(--_box-ap-bd-color);
--_box-ap-bd-disabled: 1px solid var(--_box-ap-bd-color-disabled);
--_box-bd: 1px solid var(--_box-bd-color);
--_box-bg-color: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
--_box-bg-color-focus: var(--o-color-control-light);
--_box-bg-color-disabled: var(--o-color-control4-light);
--_box-prepend-append-bd: 1px solid var(--o-color-control1);
--_box-prepend-append-bd-color-disabled: var(--o-color-control4-light);
--_box-prepend-append-bg-color: var(--o-color-control-light);
}
.o_box-solid {
--_box-prepend-append-bd: 1px solid var(--o-color-control2-light);
--_box-prepend-append-bg-color: var(--o-color-control1-light);
}
.o_box-text {
--_box-bd-color: transparent;
--_box-bg-color: transparent;
--_box-bd-color-focus: var(--o-color-control-light);
--_box-bd-color-disabled: transparent;
--_box-bg-color-disabled: transparent;
}
.o_box-text.o_box-normal {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-text.o_box-success {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-text.o_box-warning {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-text.o_box-danger {
--_box-bd-color-hover: var(--o-color-control-light);
--_box-bg-color-hover: var(--o-color-control-light);
}
.o_box-outline.o_box-normal {
--_box-bd-color: var(--o-color-control1);
--_box-bd-color-hover: var(--o-color-primary2);
--_box-bd-color-focus: var(--o-color-primary3);
--_box-bd-color-disabled: var(--o-color-control4);
}
.o_box-outline.o_box-success {
--_box-bd-color: var(--o-color-success1-light);
--_box-bd-color-hover: var(--o-color-success2-light);
--_box-bd-color-focus: var(--o-color-success3);
--_box-bd-color-disabled: var(--o-color-success4);
}
.o_box-outline.o_box-warning {
--_box-bd-color: var(--o-color-warning1-light);
--_box-bd-color-hover: var(--o-color-warning2-light);
--_box-bd-color-focus: var(--o-color-warning3);
--_box-bd-color-disabled: var(--o-color-warning4);
}
.o_box-outline.o_box-danger {
--_box-bd-color: var(--o-color-danger1-light);
--_box-bd-color-hover: var(--o-color-danger2-light);
--_box-bd-color-focus: var(--o-color-danger3);
--_box-bd-color-disabled: var(--o-color-danger4);
}
.o_box-outline {
--_box-ap-bd-color: var(--o-color-control1);
--_box-ap-bd-color-disabled: var(--o-color-control4);
}
.o_box-solid.o_box-normal {
--_box-bd-color: var(--o-color-control1-light);
--_box-bd-color-hover: var(--o-color-control2-light);
--_box-bd-color-focus: var(--o-color-primary3-light);
--_box-bd-color-disabled: var(--o-color-control4-light);
--_box-bg-color: var(--o-color-control1-light);
--_box-bg-color-hover: var(--o-color-control2-light);
--_box-bg-color-disabled: var(--o-color-control4-light);
}
.o_box-solid.o_box-success {
--_box-bd-color: var(--o-color-success1-light);
--_box-bd-color-hover: var(--o-color-success2-light);
--_box-bd-color-focus: var(--o-color-success3-light);
--_box-bd-color-disabled: var(--o-color-success4-light);
--_box-bg-color: var(--o-color-success1-light);
--_box-bg-color-hover: var(--o-color-success2-light);
--_box-bg-color-disabled: var(--o-color-success4-light);
}
.o_box-solid.o_box-warning {
--_box-bd-color: var(--o-color-warning1-light);
--_box-bd-color-hover: var(--o-color-warning2-light);
--_box-bd-color-focus: var(--o-color-warning3-light);
--_box-bd-color-disabled: var(--o-color-warning4-light);
--_box-bg-color: var(--o-color-warning1-light);
--_box-bg-color-hover: var(--o-color-warning2-light);
--_box-bg-color-disabled: var(--o-color-warning4-light);
}
.o_box-solid.o_box-danger {
--_box-bd-color: var(--o-color-danger1-light);
--_box-bd-color-hover: var(--o-color-danger2-light);
--_box-bd-color-focus: var(--o-color-danger3-light);
--_box-bd-color-disabled: var(--o-color-danger4-light);
--_box-bg-color: var(--o-color-danger1-light);
--_box-bg-color-hover: var(--o-color-danger2-light);
--_box-bg-color-disabled: var(--o-color-danger4-light);
}
.o_box-small {
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
--_box-radius: var(--o-radius_control-xs);
--icon-size: var(--o-icon_size_control-xs);
}
.o_box-medium {
--_box-text-size: var(--o-font_size-tip1);
--_box-text-height: var(--o-line_height-tip1);
--_box-radius: var(--o-radius_control-s);
--icon-size: var(--o-icon_size_control-xs);
}
.o_box-large {
--_box-text-size: var(--o-font_size-text1);
--_box-text-height: var(--o-line_height-text1);
--_box-radius: var(--o-radius_control-l);
--icon-size: var(--o-icon_size_control-s);
}
.o_box-round-pill {
--_box-radius: var(--o-control_size-l);
}
.o_box {
color: var(--_box-color);
display: flex;
height: var(--_box-height);
font-size: var(--_box-text-size);
line-height: var(--_box-text-height);
}
.o_box-main {
display: flex;
padding: var(--_box-padding);
width: 100%;
overflow: hidden;
position: relative;
border-radius: var(--_box-radius);
border: var(--_box-bd);
background-color: var(--_box-bg-color);
transition: all var(--o-duration-s) var(--o-easing-standard);
}
@media (hover: hover) {
.o_box-main:hover {
border-color: var(--_box-bd-color-hover);
background-color: var(--_box-bg-color-hover);
}
}
.o_box-main.o_box-focused {
border-color: var(--_box-bd-color-focus);
background-color: var(--_box-bg-color-focus);
}
.o_box-main.o_box-disabled, .o_box-main.o_box-readonly {
color: var(--_box-color-disabled);
border-color: var(--_box-bd-color-disabled);
background-color: var(--_box-bg-color-disabled);
}
.o_box-main.o_box-disabled {
cursor: not-allowed;
}
.o_box-main.o_box-readonly {
cursor: default;
}
.o_box-main.has-prepend {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.o_box-main.has-append {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.o_box-append,
.o_box-prepend {
display: flex;
align-items: center;
border: var(--_box-prepend-append-bd);
background-color: var(--_box-prepend-append-bg-color);
overflow: hidden;
}
.o_box-readonly .o_box-append, .o_box-disabled .o_box-append,
.o_box-readonly .o_box-prepend,
.o_box-disabled .o_box-prepend {
border-color: var(--_box-prepend-append-bd-color-disabled);
}
.o_box-append {
flex-shrink: 0;
border-top-right-radius: var(--_box-radius);
border-bottom-right-radius: var(--_box-radius);
}
.o_box-prepend {
flex-shrink: 0;
padding: var(--_box-prepend-padding);
border-top-left-radius: var(--_box-radius);
border-bottom-left-radius: var(--_box-radius);
}
.o_box-solid .o_box-prepend {
border-left-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
.o_box-solid .o_box-append {
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
.o_box-outline .o_box-prepend {
border-right-width: 0;
}
.o_box-outline .o_box-append {
border-left-width: 0;
}
.o_box-text .o_box-main {
border-right-width: 0;
border-top-width: 0;
border-left-width: 0;
}