tdesign-react
Version:
TDesign Component for React
64 lines (63 loc) • 1.63 kB
CSS
.t-popconfirm {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
min-width: 160px;
border-radius: var(--td-radius-medium);
}
.t-popconfirm .t-popup__content {
padding: 0;
}
.t-popconfirm.t-popup[data-popper-placement^="top"] .t-popup__arrow {
bottom: calc(-8px / 2);
}
.t-popconfirm__content {
position: relative;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
border-radius: var(--td-radius-medium);
}
.t-popconfirm__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
text-align: left;
}
.t-popconfirm__body > .t-icon {
display: inline-block;
margin-right: var(--td-comp-margin-s);
padding: calc(calc(var(--td-line-height-body-medium) - calc(var(--td-font-size-body-medium) + 6px)) / 2) 0;
font-size: calc(var(--td-font-size-body-medium) + 6px);
}
.t-popconfirm__confirm {
margin-left: var(--td-comp-margin-s);
}
.t-popconfirm__inner {
display: inline-block;
vertical-align: top;
max-width: 320px;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
}
.t-popconfirm__icon--warning {
color: var(--td-warning-color);
}
.t-popconfirm__icon--danger {
color: var(--td-error-color);
}
.t-popconfirm__icon--default {
color: var(--td-brand-color);
}
.t-popconfirm__buttons {
text-align: right;
margin-top: var(--td-comp-margin-l);
}
.t-popconfirm__buttons > span:last-child {
margin-right: 0;
}