.am-g .am-switch { display: inline-block; margin-top: 5px; margin-left: 20px; } .am-switch { position: relative; display: block; width: 42px; height: 24px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: background-color, border; transition-property: background-color, border; border: 2px solid #ddd; background-color: #ddd; cursor: pointer; font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; position: relative; } .am-switch.am-round { border-radius: 20px; } .am-switch.am-disabled { opacity: .3; } .am-switch .am-switch-handle { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; -webkit-transition-property: -webkit-transform, width, left; transition-property: transform, width, left; background-color: #fff; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4); box-shadow: 0 2px 5px rgba(0, 0, 0, .4); } .am-switch.am-round .am-switch-handle { border-radius: 16px; } .am-switch:before { font-size: 12px; position: absolute; top: 0px; right: 4px; content: '\e809'; text-transform: uppercase; color: #fff; line-height: 20px; } .am-switch.am-dragging { border-color: #f7f7f7; background-color: #f7f7f7; } .am-switch.am-dragging .am-switch-handle { width: 38px; } .am-switch.am-dragging.am-active .am-switch-handle { left: -11px; width: 38px; } .am-switch.am-active .am-switch-handle { -webkit-transform: translate(18px, 0); transform: translate(18px, 0); } .am-switch.am-active::before { content: '\e70f'; right: auto; left: 4px; color: #fff; } .am-switch input[type='checkbox'] { display: none; } .am-switch.am-switch-mini { width: 38px; height: 19px; } .am-switch-mini.am-active .am-switch-handle { -webkit-transform: translate(16px, 0); transform: translate(16px, 0); } .am-switch.am-switch-mini:before{ top: -2px; } .am-switch.am-switch-mini .am-switch-handle { left: 2px; width: 12px; height: 12px; } /*theme*/ .am-switch.am-active, .am-switch-default.am-active { border-color: #2A94FF; background-color: #2A94FF; } .am-switch-primary.am-active { border: 2px solid #2A94FF; background-color: #2A94FF; } .am-switch-secondary.am-active { border: 2px solid #3bb4f2; background-color: #3bb4f2; } .am-switch-success.am-active { border: 2px solid #5eb95e; background-color: #5eb95e; } .am-switch-warning.am-active { border: 2px solid #F37B1D; background-color: #F37B1D; } .am-switch-danger.am-active { border: 2px solid #dd514c; background-color: #dd514c; } .am-switch.loading { opacity: 0.5; pointer-events: none; transition: all 0.3s ease-in-out; cursor: not-allowed; }