科技装车

hjg

2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08

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