@opentiny/vue-theme/milestone/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-milestone{--tv-Milestone-font-size:var(--tv-font-size-default, 14px);--tv-Milestone-doing-text-color:var(--tv-color-text-inverse-tint, #fff);--tv-Milestone-bg-color:var(--tv-color-bg-secondary, #fff);--tv-Milestone-node-size:calc(var(--tv-size-base, 4px) * 8);--tv-Milestone-icon-border-width:var(--tv-border-width, 1px);--tv-Milestone-icon-size:calc(var(--tv-icon-size, 16px) * 1.5);--tv-Milestone-icon-color:var(--tv-color-icon-active, #191919);--tv-Milestone-icon-border-width-completed:var(--tv-border-width, 1px);--tv-Milestone-line-bg-color:var(--tv-color-bg-disabled-control-checked, #dbdbdb);--tv-Milestone-line-bg-color-completed:var(--tv-color-bg-primary, #191919);--tv-Milestone-line-height:var(--tv-border-width, 1px);--tv-Milestone-status-text-color:var(--tv-color-text-weaken, #808080);--tv-Milestone-status-font-size:var(--tv-font-size-sm, 12px);--tv-Milestone-status-completed-border-color:var(--tv-color-border-active, #191919);--tv-Milestone-status-completed-bg-color:var(--tv-color-bg-active-secondary, #ffffff);--tv-Milestone-flag-width:calc(var(--tv-size-base, 4px) * 22);--tv-Milestone-flag-height:calc(var(--tv-size-base, 4px) * 11.5);--tv-Milestone-flag-padding:var(--tv-space-base, 4px);--tv-Milestone-flag-line-height:var(--tv-line-height-number, 1.5);--tv-Milestone-flag-font-size:var(--tv-font-size-default, 14px);--tv-Milestone-flag-border-radius:0 var(--tv-border-radius-lg, 8px) var(--tv-border-radius-lg, 8px) 0;--tv-Milestone-text-color:var(--tv-color-text-inverse-black, #191919);--tv-Milestone-flag-bg-color:var(--tv-color-bg, #f5f5f5);--tv-Milestone-flag-name-font-weight:var(--tv-font-weight-bold, 600);--tv-Milestone-flag-desc-text-color:var(--tv-color-text-inverse-black, #191919);--tv-Milestone-flag-desc-font-size:var(--tv-font-size-sm, 12px);--tv-Milestone-flag-line-bg-color:var(--tv-color-bg, #f5f5f5);overflow:hidden;padding-top:38px}.tiny-milestone .tiny-milestone__node{float:left;display:block}.tiny-milestone .tiny-milestone__node::before{position:relative;display:block;left:calc(50% - 14px);top:28px;z-index:15;content:'';width:28px;height:28px}.tiny-milestone .tiny-milestone__node.is-solid::before{background:var(--tv-Milestone-bg-color)}.tiny-milestone .tiny-milestone__node.is-solid .tiny-svg{fill:#fff}.tiny-milestone .tiny-milestone__node .iconfix{font-size:20px}.tiny-milestone .tiny-milestone__icon{position:relative;left:calc(50% - 16px);top:0;width:var(--tv-Milestone-node-size);height:var(--tv-Milestone-node-size);line-height:var(--tv-Milestone-node-size);font-size:var(--tv-Milestone-font-size);text-align:center;border-radius:50%;cursor:pointer;z-index:15;border:var(--tv-Milestone-icon-border-width) solid;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.tiny-milestone .tiny-milestone__icon .tiny-svg{font-size:var(--tv-Milestone-icon-size);fill:currentColor;vertical-align:baseline}.tiny-milestone .tiny-milestone__icon .custom-milestone{fill:var(--tv-Milestone-status-completed-border-color)}.tiny-milestone .tiny-milestone__icon.status-doing{background-color:var(--tv-Milestone-icon-color);color:var(--tv-Milestone-doing-text-color)}.tiny-milestone .tiny-milestone__icon.is-completed,.tiny-milestone .tiny-milestone__icon.status-back,.tiny-milestone .tiny-milestone__icon.status-cancel,.tiny-milestone .tiny-milestone__icon.status-end{border:var(--tv-Milestone-icon-border-width-completed) solid var(--tv-Milestone-status-completed-border-color);background-color:var(--tv-Milestone-status-completed-bg-color);color:var(--tv-Milestone-icon-color)}.tiny-milestone .tiny-milestone__node.node-status-completed .tiny-milestone__line{background-color:var(--tv-Milestone-line-bg-color-completed)}.tiny-milestone .tiny-milestone__line{position:relative;left:calc(50% + 24px);top:-16px;height:var(--tv-Milestone-line-height);width:calc(100% - 48px);background-color:var(--tv-Milestone-line-bg-color)}.tiny-milestone .tiny-milestone__line-end{width:0}.tiny-milestone .tiny-milestone__description{position:relative;line-height:14px;margin-top:8px;overflow:hidden;text-align:center}.tiny-milestone .tiny-milestone__description-name{float:left;width:100%;font-size:var(--tv-Milestone-font-size)}.tiny-milestone .tiny-milestone__description-status{float:left;margin-top:4px;width:100%;color:var(--tv-Milestone-status-text-color);font-size:var(--tv-Milestone-status-font-size)}.tiny-milestone .tiny-milestone__flag{position:absolute;left:calc(50% - 29px);bottom:5px;width:58px;z-index:1}.tiny-milestone .tiny-milestone__flag:hover{z-index:2}.tiny-milestone .tiny-milestone__flag-content{display:table-cell;vertical-align:middle;width:var(--tv-Milestone-flag-width);height:var(--tv-Milestone-flag-height);padding:var(--tv-Milestone-flag-padding);line-height:var(--tv-Milestone-flag-line-height);font-size:var(--tv-Milestone-flag-font-size);border-radius:var(--tv-Milestone-flag-border-radius);color:var(--tv-Milestone-text-color);background-color:var(--tv-Milestone-flag-bg-color);cursor:pointer}.tiny-milestone .tiny-milestone__flag-content p{color:var(--tv-Milestone-text-color);width:var(--tv-Milestone-flag-width);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-milestone .tiny-milestone__flag-content .tiny-milestone__flag-name{font-weight:var(--tv-Milestone-flag-name-font-weight)}.tiny-milestone .tiny-milestone__flag-content .tiny-milestone__flag-desc{color:var(--tv-Milestone-flag-desc-text-color);font-size:var(--tv-Milestone-flag-desc-font-size)}.tiny-milestone .tiny-milestone__flag-line{height:30px;width:1px;margin-left:0;background:var(--tv-Milestone-flag-line-bg-color)}.tiny-milestone .tiny-milestone__dot{position:relative;bottom:-29px;right:2px;display:none;width:5px;height:5px;border:solid 1px;border-radius:50%}