@opentiny/vue-theme
Version:
An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
1 lines • 7.66 kB
CSS
.tiny-bulletin-board{--tv-BulletinBoard-font-size:var(--tv-font-size-default, 14px);--tv-BulletinBoard-title-font-size:var(--tv-font-size-heading-sm, 18px);--tv-BulletinBoard-title-font-weight:var(--tv-font-weight-bold, 600);--tv-BulletinBoard-title-text-color:var(--tv-color-text, #191919);--tv-BulletinBoard-item-title-text-color:var(--tv-color-text, #191919);--tv-BulletinBoard-tabs-item-hover-text-font-weight:var(--tv-font-weight-bold, 600);--tv-BulletinBoard-item-title-font-weight:var(--tv-font-weight-bold, 600);--tv-BulletinBoard-item-date-text-color:var(--tv-color-text-weaken, #808080);--tv-BulletinBoard-item-date-font-size:var(--tv-font-size-default, 14px);--tv-BulletinBoard-new-bg-color:var(--tv-color-error-bg-light, #fce3e1);--tv-BulletinBoard-new-text-color:var(--tv-color-error-text, #f23030);--tv-BulletinBoard-new-border-radius:var(--tv-border-radius-xs, 2px);--tv-BulletinBoard-new-font-size:var(--tv-font-size-sm, 12px);--tv-BulletinBoard-more-text-color:var(--tv-color-text, #191919);--tv-BulletinBoard-more-icon-color:var(--tv-color-icon, #808080);--tv-BulletinBoard-more-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-BulletinBoard-more-font-size:var(--tv-font-size-default, 14px);--tv-BulletinBoard-more-icon-font-size:var(--tv-font-size-default, 14px);--tv-BulletinBoard-tabs-item-text-color:var(--tv-color-text, #191919);--tv-BulletinBoard-tabs-item-bg-color:var(--tv-color-bg-primary, #191919);--tv-BulletinBoard-tabs-item-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-BulletinBoard-tabs-header-border-color:var(--tv-color-border, #c2c2c2)}.tiny-bulletin-board__item{margin-bottom:24px}.tiny-bulletin-board__item .tiny-bulletin-board__textTitle{display:block;color:var(--tv-BulletinBoard-item-title-text-color);margin-bottom:8px;font-size:var(--tv-BulletinBoard-font-size);white-space:normal;line-height:initial;font-weight:var(--tv-BulletinBoard-item-title-font-weight);cursor:pointer}.tiny-bulletin-board__item .tiny-bulletin-board__textTitle,.tiny-bulletin-board__item .tiny-bulletin-board__textTitle:hover{text-decoration:none}.tiny-bulletin-board__item .tiny-bulletin-board__textDate{color:var(--tv-BulletinBoard-item-date-text-color);font-size:var(--tv-BulletinBoard-item-date-font-size)}.tiny-bulletin-board__title{font-size:var(--tv-BulletinBoard-title-font-size);padding:12px 0 8px 24px;color:var(--tv-BulletinBoard-title-text-color);font-weight:var(--tv-BulletinBoard-title-font-weight)}.tiny-bulletin-board__more{text-align:right}.tiny-bulletin-board__more .tiny-bulletin-board__more-link{color:var(--tv-BulletinBoard-more-text-color);font-size:var(--tv-BulletinBoard-more-font-size);line-height:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-bulletin-board__more .tiny-bulletin-board__more-link .tiny-svg{fill:var(--tv-BulletinBoard-more-icon-color);font-size:var(--tv-BulletinBoard-more-icon-font-size);margin-left:4px}.tiny-bulletin-board__more .tiny-bulletin-board__more-link:hover{text-decoration:none}.tiny-bulletin-board__more .tiny-bulletin-board__more-link:hover .tiny-svg{fill:var(--tv-BulletinBoard-more-icon-color-hover)}.tiny-bulletin-board__new{background-color:var(--tv-BulletinBoard-new-bg-color);color:var(--tv-BulletinBoard-new-text-color);border-radius:var(--tv-BulletinBoard-new-border-radius);padding:0 4px;margin-left:6px;min-width:30px;min-height:16px;line-height:16px;font-size:var(--tv-BulletinBoard-new-font-size);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:500;text-align:center}.tiny-bulletin-board .tiny-tabs .tiny-tabs--left,.tiny-bulletin-board .tiny-tabs .tiny-tabs--right,.tiny-bulletin-board .tiny-tabs .tiny-tabs__content,.tiny-bulletin-board .tiny-tabs .tiny-tabs__nav-scroll,.tiny-bulletin-board .tiny-tabs .tiny-tabs__nav-wrap{overflow:hidden}.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap{margin-bottom:-1px;position:relative}.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:var(--tv-Tabs-border-color);z-index:1}.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap.is-scrollable{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav{top:1px}.tiny-bulletin-board .tiny-tabs .tiny-tabs__nav{white-space:nowrap;position:relative;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;float:left;z-index:2}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item{line-height:36px;height:36px;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;list-style:none;font-size:var(--tv-BulletinBoard-item-date-font-size);font-weight:500;color:var(--tv-BulletinBoard-tabs-item-text-color);position:relative}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:active,.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:focus{outline:0}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:hover{cursor:pointer;font-weight:var(--tv-BulletinBoard-tabs-item-hover-text-font-weight)}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-active{font-weight:var(--tv-BulletinBoard-tabs-item-hover-text-font-weight)}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-disabled{color:var(--tv-BulletinBoard-tabs-item-disabled-text-color);cursor:default}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-closable>div{display:inline-block}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-closable .icon-close{display:initial}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item .icon-close{border-radius:50%;text-align:center;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item .icon-close:before{-webkit-transform:scale(.9);transform:scale(.9);display:inline-block}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item .icon-close:hover{background-color:#b4bccc;color:#fff}.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:before{bottom:0;top:auto;left:auto}.tiny-bulletin-board .tiny-tabs .tiny-tabs__content{padding:12px 0 0}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card .tiny-tabs__header .tiny-tabs__nav{border:none}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card .tiny-tabs__header .tiny-tabs__item{border-left:none}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card>.tiny-tabs__header{border-bottom:1px solid var(--tv-BulletinBoard-tabs-header-border-color)}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card>.tiny-tabs__header .tiny-tabs__item{border-bottom:1px solid transparent;-webkit-transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);transition:color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1)}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card>.tiny-tabs__header .tiny-tabs__item:first-child{border-left:none}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card>.tiny-tabs__header .tiny-tabs__item.is-active{border-bottom-color:#fff}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card>.tiny-tabs__header .tiny-tabs__item.is-active.is-closable{padding-left:24px;padding-right:24px}.tiny-bulletin-board .tiny-tabs.tiny-tabs--card>.tiny-tabs__header .tiny-tabs__item.is-active:before{position:absolute;content:'';width:100%;height:3px;background:var(--tv-BulletinBoard-tabs-item-bg-color);margin-left:-24px}