| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | .enable_plugin_jquery_ui_slider() when(@enable-plugin-jquery-ui-slider = true) { |
| A | 2 | |
| 3 | //jQuery UI Slider | |
| 4 | .ui-slider { | |
| 5 | background-color: #D5D5D5; | |
| 6 | } | |
| 7 | .ui-slider-horizontal { | |
| 8 | height: 9px; | |
| 9 | } | |
| 10 | .ui-slider-vertical { | |
| 11 | width: 9px; | |
| 12 | } | |
| 13 | ||
| 14 | .ui-slider .ui-slider-handle { | |
| 15 | border-radius: 0; | |
| 16 | width: 1.45em; | |
| 17 | height: 1.45em; | |
| 18 | ||
| 19 | background-color: #F8F8F8; | |
| 20 | border: 1px solid; | |
| 21 | ||
| 22 | &:before , &:after { | |
| 23 | display: block; | |
| 24 | content: ""; | |
| 25 | position: absolute; | |
| 26 | ||
| 27 | top: 4px; | |
| 28 | left: 5px; | |
| 29 | ||
| 30 | width: 4px; | |
| 31 | height: 8px; | |
| 32 | border: 1px solid; | |
| 33 | border-width: 0 1px; | |
| 34 | border-color: inherit; | |
| 35 | } | |
| 36 | &:after { | |
| 37 | left: 8px; | |
| 38 | border-width: 0 1px 0 0; | |
| 39 | } | |
| 40 | ||
| 41 | &:hover { | |
| 42 | background-color: #FFF; | |
| 43 | } | |
| 44 | &:hover , &:focus , &:active { | |
| 45 | outline: none; | |
| 46 | .box-shadow(~"1px 1px 1px 0px rgba(0,0,0,.3)"); | |
| 47 | } | |
| 48 | } | |
| 49 | .ui-slider-horizontal .ui-slider-handle { | |
| 50 | margin-left: -0.725em; | |
| 51 | top: -0.4em; | |
| 52 | } | |
| 53 | .ui-slider-vertical .ui-slider-handle { | |
| 54 | left: -0.35em; | |
| 55 | margin-bottom: -0.65em; | |
| 56 | } | |
| 57 | ||
| 58 | .ui-slider-small { | |
| 59 | &.ui-slider-horizontal { | |
| 60 | height: 5px; | |
| 61 | } | |
| 62 | &.ui-slider-vertical { | |
| 63 | width: 5px; | |
| 64 | } | |
| 65 | .ui-slider-handle { | |
| 66 | border-radius: 100%; | |
| 67 | width: 17px; | |
| 68 | height: 17px; | |
| 69 | margin-bottom: -0.45em; | |
| 70 | left: -0.35em; | |
| 71 | ||
| 72 | &:before , &:after { | |
| 73 | height: 7px; | |
| 74 | left: 5px; | |
| 75 | width: 3px; | |
| 76 | } | |
| 77 | &:after { | |
| 78 | left: 7px; | |
| 79 | } | |
| 80 | } | |
| 81 | } | |
| 82 | ||
| 83 | .ui-slider-simple { | |
| 84 | .ui-slider-handle { | |
| 85 | &:after , &:before { | |
| 86 | display: none; | |
| 87 | } | |
| 88 | } | |
| 89 | } | |
| 90 | ||
| 91 | /* colors */ | |
| 92 | .ui-slider-range { | |
| 93 | background-color: @slider-color; | |
| 94 | } | |
| 95 | .ui-slider-handle { | |
| 96 | outline:none !important; | |
| 97 | & /*, &:hover , &:focus, &:active*/ { | |
| 98 | border-color: @slider-color !important; | |
| 99 | } | |
| 100 | } | |
| 101 | ||
| 102 | .ui-state-disabled { | |
| 103 | &.ui-slider { | |
| 104 | background-color: #E5E5E5; | |
| 105 | } | |
| 106 | .ui-slider-range { | |
| 107 | background-color: lighten(desaturate(@slider-color , 30%) , 10%); | |
| 108 | } | |
| 109 | .ui-slider-handle { | |
| 110 | .box-shadow(none) !important; | |
| 111 | border-color: lighten(desaturate(@slider-color , 30%) , 10%) !important; | |
| 112 | } | |
| 113 | } | |
| 114 | ||
| 115 | .enable_plugin_jquery_ui_slider_colors() when(@enable-plugin-jquery-ui-slider-colors = true) { | |
| 116 | //slider color | |
| 117 | .slider-color(@color) { | |
| 118 | @slider-class: ~`"slider-@{color}"`; | |
| 119 | @slider-bg: @@slider-class; | |
| 120 | @slider-class2: ~`"ui-@{slider-class}"`; | |
| 121 | ||
| 122 | .@{slider-class2} { | |
| 123 | .ui-slider-range { | |
| 124 | background-color: @slider-bg; | |
| 125 | } | |
| 126 | .ui-slider-handle { | |
| 127 | & /**, &:hover , &:focus, &:active*/ { | |
| 128 | border-color: @slider-bg !important; | |
| 129 | } | |
| 130 | } | |
| 131 | ||
| 132 | &.ui-state-disabled { | |
| 133 | .ui-slider-range { | |
| 134 | background-color: lighten(desaturate(@slider-bg , 33%) , 10%); | |
| 135 | } | |
| 136 | .ui-slider-handle { | |
| 137 | border-color: lighten(desaturate(@slider-bg , 33%) , 10%) !important; | |
| 138 | } | |
| 139 | } | |
| 140 | } | |
| 141 | ||
| 142 | } | |
| 143 | .slider-color(~"green"); | |
| 144 | .slider-color(~"red"); | |
| 145 | .slider-color(~"purple"); | |
| 146 | .slider-color(~"orange"); | |
| 147 | .slider-color(~"dark"); | |
| 148 | .slider-color(~"pink"); | |
| 149 | } | |
| 150 | .enable_plugin_jquery_ui_slider_colors(); | |
| 151 | ||
| 152 | ||
| 153 | } | |
| 154 | .enable_plugin_jquery_ui_slider(); | |
| 155 | ||
| 156 | ||
