@hopeio/utils
Version:
javascript utils
2 lines (1 loc) • 5.41 kB
CSS
.point{width:var(--point-width);height:var(--point-height);background:var(--point-background);position:relative;border-radius:var(--point-border-radius)}.point-flicker:after{background:var(--point-background)}.point-flicker:before,.point-flicker:after{content:"";width:100%;height:100%;top:0;left:0;position:absolute;border-radius:var(--point-border-radius);animation:flicker 1.2s ease-out infinite}@keyframes flicker{0%{transform:scale(.5);opacity:1}30%{opacity:1}to{transform:scale(var(--point-scale));opacity:0}}.pure-segmented{--pure-control-padding-horizontal: 12px;--pure-control-padding-horizontal-sm: 8px;--pure-segmented-track-padding: 2px;--pure-segmented-line-width: 1px;--pure-segmented-border-radius-small: 4px;--pure-segmented-border-radius-base: 6px;--pure-segmented-border-radius-large: 8px;box-sizing:border-box;display:inline-block;padding:var(--pure-segmented-track-padding);font-size:var(--el-font-size-base);color:#000000a6;background-color:#0000000a;border-radius:var(--pure-segmented-border-radius-base)}.pure-segmented-block{display:flex}.pure-segmented-block .pure-segmented-item{flex:1;min-width:0}.pure-segmented-block .pure-segmented-item>.pure-segmented-item-label>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pure-segmented.pure-segmented--small{border-radius:var(--pure-segmented-border-radius-small)}.pure-segmented.pure-segmented--small .pure-segmented-item{border-radius:var(--el-border-radius-small)}.pure-segmented.pure-segmented--small .pure-segmented-item>div{min-height:calc(var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2);line-height:calc(var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2);padding:0 calc(var(--pure-control-padding-horizontal-sm) - var(--pure-segmented-line-width))}.pure-segmented.pure-segmented--large{border-radius:var(--pure-segmented-border-radius-large)}.pure-segmented.pure-segmented--large .pure-segmented-item{border-radius:calc(var(--el-border-radius-base) + var(--el-border-radius-small))}.pure-segmented.pure-segmented--large .pure-segmented-item>div{min-height:calc(var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2);line-height:calc(var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2);padding:0 calc(var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width));font-size:var(--el-font-size-medium)}.pure-segmented-item{position:relative;text-align:center;cursor:pointer;border-radius:var(--el-border-radius-base);transition:all .1s cubic-bezier(.645,.045,.355,1)}.pure-segmented .pure-segmented-item>div{min-height:calc(var(--el-component-size) - var(--pure-segmented-track-padding) * 2);line-height:calc(var(--el-component-size) - var(--pure-segmented-track-padding) * 2);padding:0 calc(var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:.1s}.pure-segmented-group{position:relative;display:flex;align-items:stretch;justify-items:flex-start;width:100%}.pure-segmented-item-selected{position:absolute;top:0;left:0;box-sizing:border-box;display:none;width:0;height:100%;padding:4px 0;background-color:#fff;border-radius:4px;box-shadow:0 2px 8px -2px #0000000d,0 1px 4px -1px #00000012,0 0 1px #00000012;transition:transform .5s cubic-bezier(.645,.045,.355,1),width .5s cubic-bezier(.645,.045,.355,1);will-change:transform,width}.pure-segmented-item>input{position:absolute;inset-block-start:0;inset-inline-start:0;width:0;height:0;opacity:0;pointer-events:none}.pure-segmented-item-label{display:flex;align-items:center;justify-content:center}.pure-segmented-item-icon svg{width:16px;height:16px}.pure-segmented-item-disabled{color:#00000040;cursor:not-allowed}.v-ripple__container{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:inherit;contain:strict}.v-ripple__animation{position:absolute;top:0;left:0;overflow:hidden;pointer-events:none;background:currentcolor;border-radius:50%;opacity:0;will-change:transform,opacity}.v-ripple__animation--enter{opacity:0;transition:none}.v-ripple__animation--in{opacity:.25;transition:transform .4s cubic-bezier(0,0,.2,1),opacity .2s cubic-bezier(0,0,.2,1)}.v-ripple__animation--out{opacity:0;transition:opacity .5s cubic-bezier(0,0,.2,1)}.scroll-num{width:var(--width, 20px);height:var(--height, calc(var(--width, 20px) * 1.8));color:var(--color, #333);font-size:var(--height, calc(var(--width, 20px) * 1.1));line-height:var(--height, calc(var(--width, 20px) * 1.8));text-align:center;overflow:hidden;animation:enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards}ul{animation:move .3s linear infinite,bounce-in-down 1s calc(var(--delay) * 1s) forwards}@keyframes move{0%{transform:translateY(-90%);filter:url(#blur)}to{transform:translateY(1%);filter:url(#blur)}}@keyframes bounce-in-down{0%{transform:translateY(calc(var(--i) * -9.09% - 7%));filter:none}25%{transform:translateY(calc(var(--i) * -9.09% + 3%))}50%{transform:translateY(calc(var(--i) * -9.09% - 1%))}70%{transform:translateY(calc(var(--i) * -9.09% + .6%))}85%{transform:translateY(calc(var(--i) * -9.09% - .3%))}to{transform:translateY(calc(var(--i) * -9.09%))}}@keyframes enhance-bounce-in-down{25%{transform:translateY(8%)}50%{transform:translateY(-4%)}70%{transform:translateY(2%)}85%{transform:translateY(-1%)}to{transform:translateY(0)}}