ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 1.66 kB
CSS
:root{--ivue-notice-bar-height:40px;--ivue-notice-bar-font-size:14px;--ivue-notice-bar-line-height:24px;--ivue-notice-bar-icon-margin:0 5px;--ivue-notice-bar-wrapable-padding:8px 16px}.ivue-notice-bar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--ivue-notice-bar-height);font-size:var(--ivue-notice-bar-font-size);line-height:var(--ivue-notice-bar-line-height);background:var(--ivue-primary-color);color:var(--ivue-white-color)}.ivue-notice-bar-left,.ivue-notice-bar-right{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ivue-notice-bar-right .ivue-notice-bar-icon{cursor:pointer}.ivue-notice-bar .ivue-notice-bar-icon{color:currentColor;height:auto;min-width:auto;width:auto;font-size:18px;margin:var(--ivue-notice-bar-icon-margin)}.ivue-notice-bar-text{position:absolute;white-space:nowrap;-webkit-transition-timing-function:linear;transition-timing-function:linear}.ivue-notice-bar-text--wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;overflow:hidden}.ivue-notice-bar-text--ellipsis{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ivue-notice-bar-wrapable{height:auto;padding:var(--ivue-notice-bar-wrapable-padding)}.ivue-notice-bar-wrapable .ivue-notice-bar-text{position:relative;white-space:normal;word-wrap:break-word}.ivue-notice-bar-wrapable .ivue-notice-bar-text--wrapper{height:auto}