@opensig/opendesign/lib/_components/inner-frame/style/index.css

<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>

.o-i-frame {
  --if-color: var(--o-color-info2);
  --if-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);
  --if-ap-bd: 1px solid var(--if-ap-bd-color);
  --if-ap-bd-disabled: 1px solid var(--if-ap-bd-color-disabled);
  --if-bd: 1px solid var(--if-bd-color);
  --if-bd-hover: 1px solid var(--if-bd-color-hover);
  --if-bd-focus: 1px solid var(--if-bd-color-focus);
  --if-bd-disabled: 1px solid var(--if-bd-color-disabled);
}

.o-if-text,
.o-if-outline {
  --if-bg-color: transparent;
  --if-bg-color-hover: var(--o-color-control-light);
  --if-bg-color-focus: var(--o-color-control-light);
}
.o-if-text.o-if-normal,
.o-if-outline.o-if-normal {
  --if-bd-color: var(--o-color-control1);
  --if-bd-color-hover: var(--o-color-primary2);
  --if-bd-color-focus: var(--o-color-primary3);
  --if-bd-color-disabled: var(--o-color-control4);
}
.o-if-text.o-if-success,
.o-if-outline.o-if-success {
  --if-bd-color: var(--o-color-success1);
  --if-bd-color-hover: var(--o-color-success2);
  --if-bd-color-focus: var(--o-color-success3);
  --if-bd-color-disabled: var(--o-color-success4);
}
.o-if-text.o-if-warning,
.o-if-outline.o-if-warning {
  --if-bd-color: var(--o-color-warning1);
  --if-bd-color-hover: var(--o-color-warning2);
  --if-bd-color-focus: var(--o-color-warning3);
  --if-bd-color-disabled: var(--o-color-warning4);
}
.o-if-text.o-if-danger,
.o-if-outline.o-if-danger {
  --if-bd-color: var(--o-color-danger1);
  --if-bd-color-hover: var(--o-color-danger2);
  --if-bd-color-focus: var(--o-color-danger3);
  --if-bd-color-disabled: var(--o-color-danger4);
}

.o-if-outline {
  --if-ap-bd-color: var(--o-color-control1);
  --if-ap-bd-color-disabled: var(--o-color-control4);
}

.o-if-solid {
  --if-ap-bg-color: var(--o-color-control1-light);
  --if-ap-bd-color: var(--o-color-control2-light);
  --if-ap-bd-color-disabled: var(--o-color-control2-light);
}
.o-if-solid.o-if-normal {
  --if-bd-color: var(--o-color-control1-light);
  --if-bd-color-hover: var(--o-color-primary2-light);
  --if-bd-color-focus: var(--o-color-primary3-light);
  --if-bd-color-disabled: var(--o-color-control4-light);
  --if-bg-color: var(--o-color-control1-light);
  --if-bg-color-hover: var(--o-color-control-light);
  --if-bg-color-disabled: var(--o-color-control4-light);
}
.o-if-solid.o-if-success {
  --if-bd-color: var(--o-color-success1-light);
  --if-bd-color-hover: var(--o-color-success2-light);
  --if-bd-color-focus: var(--o-color-success3-light);
  --if-bd-color-disabled: var(--o-color-success4-light);
  --if-bg-color: var(--o-color-success1-light);
  --if-bg-color-hover: var(--o-color-control-light);
  --if-bg-color-disabled: var(--o-color-success4-light);
}
.o-if-solid.o-if-warning {
  --if-bd-color: var(--o-color-warning1-light);
  --if-bd-color-hover: var(--o-color-warning2-light);
  --if-bd-color-focus: var(--o-color-warning3-light);
  --if-bd-color-disabled: var(--o-color-warning4-light);
  --if-bg-color: var(--o-color-warning1-light);
  --if-bg-color-hover: var(--o-color-control-light);
  --if-bg-color-disabled: var(--o-color-warning4-light);
}
.o-if-solid.o-if-danger {
  --if-bd-color: var(--o-color-danger1-light);
  --if-bd-color-hover: var(--o-color-danger2-light);
  --if-bd-color-focus: var(--o-color-danger3-light);
  --if-bd-color-disabled: var(--o-color-danger4-light);
  --if-bg-color: var(--o-color-danger1-light);
  --if-bg-color-hover: var(--o-color-control-light);
  --if-bg-color-disabled: var(--o-color-danger4-light);
}

.o-if-small {
  --if-height: var(--o-control_size-s);
  --if-text-size: var(--o-font_size-tip1);
  --if-text-height: var(--o-line_height-tip1);
  --icon-size: var(--o-icon_size_control-xs);
  --if-padding: 0 7px;
  --if-prepend-padding: 0 3px 0 4px;
  --if-append-padding: 0 4px 0 3px;
  --if-radius: var(--o-radius_control-xs);
}
--icon-c .o-if-small.o-if-round-pill {
  --if-padding: 0 9px;
  --if-prepend-padding: 0 4px 0 8px;
  --if-append-padding: 0 8px 0 4px;
}

.o-if-medium {
  --if-height: var(--o-control_size-m);
  --if-text-size: var(--o-font_size-text1);
  --if-text-height: var(--o-line_height-text1);
  --icon-size: var(--o-icon_size_control-m);
  --if-padding: 0 11px;
  --if-radius: var(--o-radius_control-s);
  --if-prepend-padding: 0 7px 0 8px;
  --if-append-padding: 0 8px 0 7px;
}
.o-if-medium.o-if-round-pill {
  --if-prepend-padding: 0 8px 0 11px;
  --if-append-padding: 0 11px 0 8px;
}

.o-if-large {
  --if-height: var(--o-control_size-l);
  --if-text-size: var(--o-font_size-text2);
  --if-text-height: var(--o-line_height-text2);
  --icon-size: var(--o-icon_size_control-m);
  --if-padding: 0 15px;
  --if-prepend-padding: 0 11px 0 12px;
  --if-append-padding: 0 12px 0 11px;
  --if-radius: var(--o-radius_control-l);
}
.o-if-large.o-if-round-pill {
  --if-prepend-padding: 0 12px 0 15px;
  --if-append-padding: 0 15px 0 12px;
}

.o-if-round-pill {
  --if-radius: var(--o-control_size-l);
}

.o-if-text {
  --if-bd-color: var(--o-color-control1);
  --if-bd-color-disabled: var(--o-color-control4);
  --if-radius: 0;
}
.o-if-text, .o-if-text.o-if-round-pill {
  --if-prepend-padding: 0 8px 0 0;
  --if-append-padding: 0 0 0 8px;
}

.o-i-frame {
  color: var(--if-color);
  display: inline-flex;
  height: var(--if-height);
  font-size: var(--if-text-size);
  line-height: var(--if-text-height);
}

.o-if-main {
  display: flex;
  padding: var(--if-padding);
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: var(--if-radius);
  border: var(--if-bd);
  background-color: var(--if-bg-color);
  transition: all var(--o-duration-s) var(--o-easing-standard);
  cursor: pointer;
}
@media (hover: hover) {
  .o-if-main:hover {
    border-color: var(--if-bd-color-hover);
    background-color: var(--if-bg-color-hover);
  }
}
.o-if-focused .o-if-main {
  border-color: var(--if-bd-color-focus);
  background-color: var(--if-bg-color-focus);
}
.o-if-disabled .o-if-main, .o-if-readonly .o-if-main {
  color: var(--if-color-disabled);
  border-color: var(--if-bd-color-disabled);
  background-color: var(--if-bg-color-disabled);
}
.o-if-disabled .o-if-main {
  cursor: not-allowed;
}
.o-if-readonly .o-if-main {
  cursor: default;
}
.o-if-main.has-prepend {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.o-if-main.has-append {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.o-if-append,
.o-if-prepend {
  display: flex;
  align-items: center;
  border: var(--if-ap-bd);
  background-color: var(--if-ap-bg-color);
}
.o-if-readonly .o-if-append, .o-if-disabled .o-if-append,
.o-if-readonly .o-if-prepend,
.o-if-disabled .o-if-prepend {
  border: var(--if-ap-bd-disabled);
}

.o-if-append {
  flex-shrink: 0;
  padding: var(--if-append-padding);
  border-top-right-radius: var(--if-radius);
  border-bottom-right-radius: var(--if-radius);
}

.o-if-prepend {
  flex-shrink: 0;
  padding: var(--if-prepend-padding);
  border-top-left-radius: var(--if-radius);
  border-bottom-left-radius: var(--if-radius);
}

.o-if-solid .o-if-prepend {
  border-left-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
.o-if-solid .o-if-append {
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

.o-if-outline .o-if-prepend {
  border-right-width: 0;
}
.o-if-outline .o-if-append {
  border-left-width: 0;
}

.o-if-text .o-if-main {
  border-right-width: 0;
  border-top-width: 0;
  border-left-width: 0;
}

.o-if-prefix,
.o-if-suffix {
  display: flex;
  align-items: center;
}