@opentiny/vue-theme/card-template/index.css

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

.tiny-card-template{--tv-CardTemplate-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-CardTemplate-tool-icon-size:var(--tv-icon-size, 16px);--tv-CardTemplate-tool-icon-color:var(--tv-color-icon-control, #191919);--tv-CardTemplate-tool-hover-icon-color:#c2c2c2;--tv-CardTemplate-tool-active-icon-color:#595959;--tv-CardTemplate-tool-selector-height:40px;--tv-CardTemplate-tool-selector-text-color:var(--tv-color-text, #191919);--tv-CardTemplate-tool-selector-hover-text-color:var(--tv-color-text, #191919);--tv-CardTemplate-tool-selector-hover-bg-color:var(--tv-color-bg-hover, #f5f5f5);--tv-CardTemplate-tool-selector-active-text-color:var(--tv-color-text-secondary, #595959);--tv-CardTemplate-tool-selector-active-bg-color:var(--tv-color-bg-hover, #f5f5f5);--tv-CardTemplate-header-height:46px;--tv-CardTemplate-header-font-size:var(--tv-font-size-lg, 16px);--tv-CardTemplate-header-border-color:#999999;--tv-CardTemplate-header-title-font-weight:var(--tv-font-weight-bold, bold);--tv-CardTemplate-header-title-font-size:var(--tv-font-size-default, 14px);--tv-CardTemplate-header-title-text-color:var(--tv-color-text, #191919);--tv-CardTemplate-more-box-shadow:var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));border-radius:0;background-color:var(--tv-CardTemplate-bg-color);overflow:hidden;position:relative;-webkit-box-shadow:none;box-shadow:none;border:0}.tiny-card-template .tiny-card-template__header{padding:0 24px;height:var(--tv-CardTemplate-header-height);line-height:var(--tv-CardTemplate-header-height)}.tiny-card-template .tiny-card-template__header.is-line{border-bottom:1px solid var(--tv-CardTemplate-header-border-color)}.tiny-card-template .tiny-card-template__title{font-weight:var(--tv-CardTemplate-header-title-font-weight);font-size:var(--tv-CardTemplate-header-title-font-size);color:#333;color:var(--tv-CardTemplate-header-title-text-color);float:left}.tiny-card-template .tiny-card-template__tools:after,.tiny-card-template .tiny-card-template__tools:before{content:'';display:table}.tiny-card-template .tiny-card-template__tools:after{clear:both}.tiny-card-template .tiny-card-template__tools .tiny-icon{font-size:var(--tv-CardTemplate-tool-icon-size);cursor:pointer}.tiny-card-template .tiny-card-template__list{overflow:hidden;float:right}.tiny-card-template .tiny-card-template__list>li{height:var(--tv-CardTemplate-header-height);line-height:var(--tv-CardTemplate-header-height);float:left;font-size:var(--tv-CardTemplate-header-font-size);margin:0 12px 0 0}.tiny-card-template .tiny-card-template__list>li svg{fill:var(--tv-CardTemplate-tool-icon-color);cursor:pointer}.tiny-card-template .tiny-card-template__list>li .tiny-icon{color:var(--tv-CardTemplate-tool-icon-color)}.tiny-card-template .tiny-card-template__list>li .tiny-icon:hover{color:var(--tv-CardTemplate-tool-hover-icon-color)}.tiny-card-template .tiny-card-template__list>li .tiny-icon:active{color:var(--tv-CardTemplate-tool-active-icon-color)}.tiny-card-template .tiny-card-template__list>li:last-child{margin:0}.tiny-card-template .tiny-card-template__more{position:absolute;top:calc(var(--tv-CardTemplate-header-height,45px) - 1 * 1px);right:5px;border:1px solid var(--tv-CardTemplate-header-border-color);border-radius:2px;-webkit-box-shadow:var(--tv-CardTemplate-more-box-shadow);box-shadow:var(--tv-CardTemplate-more-box-shadow);background:var(--tv-CardTemplate-bg-color);color:#333;color:var(--tv-CardTemplate-tool-selector-text-color);margin-top:2px}.tiny-card-template .tiny-card-template__more:before{content:'';position:absolute;display:block;top:-5px;right:21px;width:0;height:0;border-style:solid;border-width:6px;border-color:#fff #fff transparent transparent;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-box-shadow:1px -1px 1px rgba(0,0,0,.2);box-shadow:1px -1px 1px rgba(0,0,0,.2)}.tiny-card-template .tiny-card-template__more>ul>li{height:var(--tv-CardTemplate-tool-selector-height);line-height:var(--tv-CardTemplate-tool-selector-height);padding:0 18px;color:var(--tv-CardTemplate-tool-selector-text-color);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-card-template .tiny-card-template__more>ul>li .tiny-icon{color:var(--tv-CardTemplate-tool-icon-color);margin-right:10px}.tiny-card-template .tiny-card-template__more>ul>li svg{font-size:var(--tv-CardTemplate-tool-icon-size)}.tiny-card-template .tiny-card-template__more>ul>li:hover{cursor:pointer;color:var(--tv-CardTemplate-tool-selector-hover-text-color);background:var(--tv-CardTemplate-tool-selector-hover-bg-color)}.tiny-card-template .tiny-card-template__more>ul>li:hover .tiny-icon{color:var(--tv-CardTemplate-tool-hover-icon-color)}.tiny-card-template .tiny-card-template__more>ul>li:active{color:var(--tv-CardTemplate-tool-selector-active-text-color);background:var(--tv-CardTemplate-tool-selector-active-bg-color)}.tiny-card-template .tiny-card-template__more>ul>li:active .tiny-icon{color:var(--tv-CardTemplate-tool-active-icon-color)}.tiny-card-template .tiny-card-template__body{padding:12px 24px 24px}