UNPKG

ten-design-vue

Version:

ten-vue

85 lines (84 loc) 1.67 kB
/* dependencies icon */ @import "../vars.less"; .ten-switch{ display: inline-flex; align-items: center; border-radius: 24px; outline: none; border: 0; line-height: 24px; height: 24px; min-width: 48px; position: relative; transition: all 0.3s ease-in-out; .ten-icon{ line-height: 24px; font-size: 14px; color: #ffffff; } .ten-switch__text{ min-height: 22px; line-height: 22px; display: inline-flex; height: 100%; align-items: center; color: #ffffff; padding-left: 2px; padding-right: 22px; } &:after{ content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 100%; background: #ffffff; position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.3s ease-in-out; } .ten-switch__checkinput{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 999; opacity: 0; cursor: pointer; } } .ten-switch--ischecked{ background: @primary-color; &:after{ left: calc(100% - 1px); transform: translate(-100%,-50%); box-shadow: 3px 3px 5px 0 rgba(0,67,177,0.15); } .ten-switch__text{ padding-left: 2px; padding-right: 22px; } } .ten-switch--unchecked{ &:after{ left: 1px; box-shadow: -3px 3px 5px 0 rgba(153,153,153,0.14); } background: #F0F0F0; .ten-switch__text{ padding-right: 2px; padding-left: 22px; } } .ten-switch--disabled{ background: #F0F0F0; .ten-switch__checkinput{ cursor: not-allowed; } &:after{ background: rgba(192,192,192,0.60); box-shadow: -3px 3px 5px 0 rgba(153,153,153,0.14); } }