bin-ui/lib/styles/base.css

基于 vue2.6 / vue-cli3 的 UI 组件库

.bin-click-animating-node,.full-wrap{position:absolute;top:0;right:0;bottom:0;left:0}ol,ul,ul li{list-style:none}[flex]{display:-webkit-box;display:-ms-flexbox;display:flex}[flex]>*{display:block}[flex]>[flex]{display:-webkit-box;display:-ms-flexbox;display:flex}[flex~="dir:left"]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[flex~="dir:right"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end}[flex~="dir:top"]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[flex~="dir:bottom"]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-pack:end}[flex~="main:left"]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[flex~="main:right"]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[flex~="main:justify"]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[flex~="main:center"]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[flex~="cross:top"]{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[flex~="cross:bottom"]{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[flex~="cross:center"]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[flex~="cross:baseline"]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[flex~="cross:stretch"]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[flex~="box:mean"]>*,[flex~="box:first"]>*,[flex~="box:last"]>*,[flex~="box:justify"]>*{width:0;height:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}[flex~="box:first"]>:first-child,[flex~="box:last"]>:last-child,[flex~="box:justify"]>:first-child,[flex~="box:justify"]>:last-child{width:auto;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}[flex~="dir:top"][flex~="box:mean"]>*,[flex~="dir:top"][flex~="box:first"]>*,[flex~="dir:top"][flex~="box:last"]>*,[flex~="dir:top"][flex~="box:justify"]>*,[flex~="dir:bottom"][flex~="box:mean"]>*,[flex~="dir:bottom"][flex~="box:first"]>*,[flex~="dir:bottom"][flex~="box:last"]>*,[flex~="dir:bottom"][flex~="box:justify"]>*{width:auto;height:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}[flex~="dir:top"][flex~="box:first"]>:first-child,[flex~="dir:top"][flex~="box:last"]>:last-child,[flex~="dir:top"][flex~="box:justify"]>:first-child,[flex~="dir:top"][flex~="box:justify"]>:last-child,[flex~="dir:bottom"][flex~="box:first"]>:first-child,[flex~="dir:bottom"][flex~="box:last"]>:last-child,[flex~="dir:bottom"][flex~="box:justify"]>:first-child [flex~="dir:bottom"][flex~="box:justify"]>:last-child{height:auto;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}[flex-box="0"]{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}[flex-box="1"]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}[flex-box="2"]{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;-ms-flex-negative:2;flex-shrink:2}[flex-box="3"]{-webkit-box-flex:3;-ms-flex-positive:3;flex-grow:3;-ms-flex-negative:3;flex-shrink:3}[flex-box="4"]{-webkit-box-flex:4;-ms-flex-positive:4;flex-grow:4;-ms-flex-negative:4;flex-shrink:4}[flex-box="5"]{-webkit-box-flex:5;-ms-flex-positive:5;flex-grow:5;-ms-flex-negative:5;flex-shrink:5}[flex-box="6"]{-webkit-box-flex:6;-ms-flex-positive:6;flex-grow:6;-ms-flex-negative:6;flex-shrink:6}[flex-box="7"]{-webkit-box-flex:7;-ms-flex-positive:7;flex-grow:7;-ms-flex-negative:7;flex-shrink:7}[flex-box="8"]{-webkit-box-flex:8;-ms-flex-positive:8;flex-grow:8;-ms-flex-negative:8;flex-shrink:8}[flex-box="9"]{-webkit-box-flex:9;-ms-flex-positive:9;flex-grow:9;-ms-flex-negative:9;flex-shrink:9}[flex-box="10"]{-webkit-box-flex:10;-ms-flex-positive:10;flex-grow:10;-ms-flex-negative:10;flex-shrink:10}[flex~="wrap:wrap"]{-ms-flex-wrap:wrap;flex-wrap:wrap}.waves-ripple{position:absolute;border-radius:100%;background-color:rgba(255,255,255,.15);background-clip:padding-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);opacity:1}.waves-ripple.z-active{opacity:0;-webkit-transform:scale3d(2,2,2);transform:scale3d(2,2,2);-webkit-transition:opacity .8s ease-out,-webkit-transform .6s ease-out;transition:opacity .8s ease-out,-webkit-transform .6s ease-out;transition:opacity .8s ease-out,transform .6s ease-out;transition:opacity .8s ease-out,transform .6s ease-out,-webkit-transform .6s ease-out}html{--bin-wave-shadow-color:#1089ff}.bin-click-animating-node{display:block;border-radius:inherit;-webkit-box-shadow:0 0 0 0 var(--bin-wave-shadow-color);box-shadow:0 0 0 0 var(--bin-wave-shadow-color);opacity:.4;-webkit-animation:fadeEffect 1.2s cubic-bezier(.08,.82,.17,1),waveEffect .8s cubic-bezier(.08,.82,.17,1);animation:fadeEffect 1.2s cubic-bezier(.08,.82,.17,1),waveEffect .8s cubic-bezier(.08,.82,.17,1);-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;pointer-events:none}.t-ellipsis,[t-ellipsis]{display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@-webkit-keyframes fadeEffect{100%{opacity:0}}@keyframes fadeEffect{100%{opacity:0}}@-webkit-keyframes waveEffect{100%{-webkit-box-shadow:0 0 0 6px var(--bin-wave-shadow-color);box-shadow:0 0 0 6px var(--bin-wave-shadow-color)}}@keyframes waveEffect{100%{-webkit-box-shadow:0 0 0 6px var(--bin-wave-shadow-color);box-shadow:0 0 0 6px var(--bin-wave-shadow-color)}}.m0{margin:0}.m5{margin:5px}.m10{margin:10px}.m15{margin:15px}.m20{margin:20px}.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mb-5{margin-bottom:5px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.ml-5{margin-left:5px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.p0{padding:0}.p5{padding:5px}.p10{padding:10px}.p15{padding:15px}.p20{padding:20px}.pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-15{padding-left:15px}.pl-20{padding-left:20px}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul,ul li{margin:0;padding:0}.t-center{text-align:center}.t-right{text-align:right}.f-s-12{font-size:12px}.f-s-14{font-size:14px}.f-s-16{font-size:16px}.f-s-18{font-size:18px}.f-s-20{font-size:20px}.f-s-22{font-size:22px}.f-color-blue{color:#1089ff}.f-color-red{color:#ff4d4f}.f-color-333{color:#333}.f-color-666{color:#666}.f-color-999{color:#999}.link{cursor:pointer;color:#1089ff}.link-red{cursor:pointer;color:#ff4d4f}.fade-in-enter-active,.fade-in-leave-active{-webkit-transition:all $animation-duration-slow cubic-bezier(.55,0,.1,1);transition:all $animation-duration-slow cubic-bezier(.55,0,.1,1)}.fade-in-enter,.fade-in-leave-to{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:all $animation-duration-slow;transition:all $animation-duration-slow}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-to{opacity:0}.move-left-enter-active,.move-left-leave-active{-webkit-transition:all $animation-duration-slow ease-in-out;transition:all $animation-duration-slow ease-in-out;-webkit-transform-origin:0 0;transform-origin:0 0}.move-left-enter,.move-left-leave-to{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.move-right-enter-active,.move-right-leave-active{-webkit-transition:all $animation-duration-slow ease-in-out;transition:all $animation-duration-slow ease-in-out}.move-right-enter,.move-right-leave-to{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.zoom-in-center-enter-active,.zoom-in-center-leave-active{-webkit-transition:all $animation-duration-slow cubic-bezier(.55,0,.1,1);transition:all $animation-duration-slow cubic-bezier(.55,0,.1,1)}.zoom-in-bottom-enter-active,.zoom-in-bottom-leave-active,.zoom-in-top-enter-active,.zoom-in-top-leave-active{-webkit-transition:opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1)}.zoom-in-center-enter,.zoom-in-center-leave-to{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.zoom-in-bottom-enter-active,.zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);transition:opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:transform $animation-duration-slow cubic-bezier(.23,1,.32,1),opacity $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:transform $animation-duration-slow cubic-bezier(.23,1,.32,1),opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.zoom-in-bottom-enter,.zoom-in-bottom-leave-to{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.zoom-in-top-enter-active,.zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);transition:opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:transform $animation-duration-slow cubic-bezier(.23,1,.32,1),opacity $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:transform $animation-duration-slow cubic-bezier(.23,1,.32,1),opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.zoom-in-top-enter,.zoom-in-top-leave-to{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.zoom-in-enter-active,.zoom-in-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:transform $animation-duration-slow cubic-bezier(.23,1,.32,1),opacity $animation-duration-slow cubic-bezier(.23,1,.32,1);transition:transform $animation-duration-slow cubic-bezier(.23,1,.32,1),opacity $animation-duration-slow cubic-bezier(.23,1,.32,1),-webkit-transform $animation-duration-slow cubic-bezier(.23,1,.32,1);-webkit-transform-origin:left left;transform-origin:left left}.zoom-in-enter,.zoom-in-leave-to{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:$animation-duration-slow height ease-in-out,$animation-duration-slow padding-top ease-in-out,$animation-duration-slow padding-bottom ease-in-out;transition:$animation-duration-slow height ease-in-out,$animation-duration-slow padding-top ease-in-out,$animation-duration-slow padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:$animation-duration-slow width ease-in-out,$animation-duration-slow padding-left ease-in-out,$animation-duration-slow padding-right ease-in-out;transition:$animation-duration-slow width ease-in-out,$animation-duration-slow padding-left ease-in-out,$animation-duration-slow padding-right ease-in-out}.list-enter-active,.list-leave-active{-webkit-transition:all 1s;transition:all 1s}.list-enter,.list-leave-to{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.opacity-transition{-webkit-transition:opacity $animation-duration-slow cubic-bezier(.55,0,.1,1);transition:opacity $animation-duration-slow cubic-bezier(.55,0,.1,1)}.fade-transverse-enter-active,.fade-transverse-leave-active{-webkit-transition:all $animation-duration-slow;transition:all $animation-duration-slow}.fade-transverse-enter{opacity:0;-webkit-transform:translateX(-30px);transform:translateX(-30px)}.fade-transverse-leave-to{opacity:0;-webkit-transform:translateX(30px);transform:translateX(30px)}.fade-scale-enter-active,.fade-scale-leave-active{-webkit-transition:all $animation-duration-slow;transition:all $animation-duration-slow}.fade-scale-enter{opacity:0;-webkit-transform:scale(1.2);transform:scale(1.2)}.fade-scale-leave-to{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}.fade-scale-move-enter-active,.fade-scale-move-leave-active{-webkit-transition:all $animation-duration-slow;transition:all $animation-duration-slow}.fade-scale-move-enter,.fade-scale-move-leave-to{opacity:0;-webkit-transform:scale(.9) translateY(-30px);transform:scale(.9) translateY(-30px)}.fade-down-enter-active,.fade-down-leave-active{-webkit-transition:all $animation-duration-slow;transition:all $animation-duration-slow}.fade-down-enter,.fade-down-leave-to{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}@-webkit-keyframes rotating{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotating{0%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}input,select,textarea{font-family:inherit;font-weight:inherit;font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}*,:after,:before,[border-box]{-webkit-box-sizing:border-box;box-sizing:border-box}[v-cloak]{display:none}.iconfont{display:inline-block;vertical-align:middle;line-height:1}.icon-is-rotating:before,.icon-loading{display:inline-block;-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}body{color:rgba(0,0,0,.85);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}