| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /* ============================================================ |
| A | 2 | * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru |
| 3 | * http://www.larentis.eu/ | |
| 4 | * | |
| 5 | * Enhanced for radiobuttons by Stein, Peter @BdMdesigN | |
| 6 | * http://www.bdmdesign.org/ | |
| 7 | * | |
| 8 | * Project site: | |
| 9 | * http://www.larentis.eu/switch/ | |
| 10 | * ============================================================ | |
| 11 | * Licensed under the Apache License, Version 2.0 | |
| 12 | * http://www.apache.org/licenses/LICENSE-2.0 | |
| 13 | * ============================================================ */ | |
| 14 | ||
| 15 | @import "deps/variables"; | |
| 16 | @import "deps/mixins"; | |
| 17 | ||
| 18 | .has-switch { | |
| 19 | display: inline-block; | |
| 20 | cursor: pointer; | |
| 21 | .border-radius(5px); | |
| 22 | border: 1px solid; | |
| 23 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |
| 24 | position: relative; | |
| 25 | text-align: left; | |
| 26 | overflow: hidden; | |
| 27 | line-height: 8px; | |
| 28 | .user-select(none); | |
| 29 | vertical-align: middle; | |
| 30 | ||
| 31 | min-width: 100px; | |
| 32 | ||
| 33 | &.switch-mini { | |
| 34 | min-width: 72px; | |
| 35 | } | |
| 36 | &.switch-mini i.switch-mini-icons { | |
| 37 | height: 1.20em; | |
| 38 | line-height: 9px; | |
| 39 | vertical-align: text-top; | |
| 40 | text-align: center; | |
| 41 | transform: scale(0.6); | |
| 42 | margin-top: -1px; | |
| 43 | margin-bottom: -1px; | |
| 44 | } | |
| 45 | &.switch-small { | |
| 46 | min-width: 80px; | |
| 47 | } | |
| 48 | ||
| 49 | &.switch-large { | |
| 50 | min-width: 120px; | |
| 51 | } | |
| 52 | ||
| 53 | &.deactivate { | |
| 54 | .opacity(50); | |
| 55 | cursor: default !important; | |
| 56 | label, span { | |
| 57 | cursor: default !important; | |
| 58 | } | |
| 59 | } | |
| 60 | > div { | |
| 61 | display: inline-block; | |
| 62 | width: 150%; | |
| 63 | position: relative; | |
| 64 | top: 0; | |
| 65 | ||
| 66 | &.switch-animate { | |
| 67 | .transition(left 0.5s); | |
| 68 | } | |
| 69 | &.switch-off { | |
| 70 | left: -50%; | |
| 71 | } | |
| 72 | &.switch-on { | |
| 73 | left: 0%; | |
| 74 | } | |
| 75 | } | |
| 76 | input[type=radio], | |
| 77 | input[type=checkbox] { | |
| 78 | //debug | |
| 79 | display: none; | |
| 80 | //position: absolute; | |
| 81 | //margin-left: 60%; | |
| 82 | //z-index: 123; | |
| 83 | } | |
| 84 | ||
| 85 | span, label { | |
| 86 | .box-sizing(border-box); | |
| 87 | ||
| 88 | cursor: pointer; | |
| 89 | position: relative; | |
| 90 | display: inline-block; | |
| 91 | height: 100%; | |
| 92 | ||
| 93 | padding-bottom: 4px; | |
| 94 | padding-top: 4px; | |
| 95 | font-size: 14px; | |
| 96 | line-height: 20px; | |
| 97 | ||
| 98 | &.switch-mini { | |
| 99 | padding-bottom: 4px; | |
| 100 | padding-top: 4px; | |
| 101 | font-size: 10px; | |
| 102 | line-height: 9px; | |
| 103 | } | |
| 104 | ||
| 105 | &.switch-small { | |
| 106 | padding-bottom: 3px; | |
| 107 | padding-top: 3px; | |
| 108 | font-size: 12px; | |
| 109 | line-height: 18px; | |
| 110 | } | |
| 111 | ||
| 112 | &.switch-large { | |
| 113 | padding-bottom: 9px; | |
| 114 | padding-top: 9px; | |
| 115 | font-size: 16px; | |
| 116 | line-height: normal; | |
| 117 | } | |
| 118 | } | |
| 119 | ||
| 120 | label { | |
| 121 | text-align: center; | |
| 122 | margin-top: -1px; | |
| 123 | margin-bottom: -1px; | |
| 124 | z-index: 100; | |
| 125 | width: 34%; | |
| 126 | border-left: 1px solid @btnBorder; | |
| 127 | border-right: 1px solid @btnBorder; | |
| 128 | ||
| 129 | .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark); | |
| 130 | ||
| 131 | i { | |
| 132 | color: #000; | |
| 133 | text-shadow: 0 1px 0 #fff; | |
| 134 | line-height: 18px; | |
| 135 | pointer-events: none; | |
| 136 | } | |
| 137 | } | |
| 138 | ||
| 139 | span { | |
| 140 | text-align: center; | |
| 141 | z-index: 1; | |
| 142 | width: 33%; | |
| 143 | ||
| 144 | &.switch-left { | |
| 145 | .border-left-radius(4px); | |
| 146 | } | |
| 147 | ||
| 148 | &.switch-right { | |
| 149 | .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75)); | |
| 150 | } | |
| 151 | ||
| 152 | &.switch-primary, &.switch-left { | |
| 153 | .buttonBackground(@btnPrimaryBackgroundHighlight, @btnPrimaryBackground); | |
| 154 | } | |
| 155 | ||
| 156 | &.switch-info { | |
| 157 | .buttonBackground(@btnInfoBackgroundHighlight, @btnInfoBackground); | |
| 158 | } | |
| 159 | ||
| 160 | &.switch-success { | |
| 161 | .buttonBackground(@btnSuccessBackgroundHighlight, @btnSuccessBackground); | |
| 162 | } | |
| 163 | ||
| 164 | &.switch-warning { | |
| 165 | .buttonBackground(@btnWarningBackgroundHighlight, @btnWarningBackground); | |
| 166 | } | |
| 167 | ||
| 168 | &.switch-danger { | |
| 169 | .buttonBackground(@btnDangerBackgroundHighlight, @btnDangerBackground); | |
| 170 | } | |
| 171 | ||
| 172 | &.switch-default { | |
| 173 | .buttonBackground(@btnBackgroundHighlight, @btnBackground, @grayDark, 0 1px 1px rgba(255,255,255,.75)); | |
| 174 | } | |
| 175 | } | |
| 176 | } | |
