Skip to content

Commit f0e1116

Browse files
grimalschiIonDen
authored andcommitted
New modern square design (#537)
* Create ion.rangeSlider.skinSquare.css * Removed border-radius at labels * Update ion.rangeSlider.skinSquare.css * Update ion.rangeSlider.skinSquare.css * Update ion.rangeSlider.skinSquare.css
1 parent 2934727 commit f0e1116

File tree

1 file changed

+87
-0
lines changed

1 file changed

+87
-0
lines changed

css/ion.rangeSlider.skinSquare.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* Ion.RangeSlider, Square Skin
2+
// css version 2.2.0
3+
// © Denis Ineshin, 2014 https://github.com/IonDen
4+
// © Veaceslav Grimalschi, 2018 https://github.com/grimalschi
5+
// ===================================================================================================================*/
6+
7+
/* =====================================================================================================================
8+
// Skin details */
9+
10+
.irs {
11+
height: 45px;
12+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
13+
}
14+
15+
.irs-with-grid {
16+
height: 62px;
17+
}
18+
19+
.irs-line {
20+
top: 31px;
21+
height: 4px;
22+
background: #DEDEDE;
23+
}
24+
25+
.irs-bar, .irs-bar-edge {
26+
top: 31px;
27+
height: 4px;
28+
background: black;
29+
}
30+
.irs-bar-edge {
31+
width: 8px;
32+
}
33+
34+
.irs-shadow {
35+
height: 2px;
36+
top: 37px;
37+
background: #DEDEDE;
38+
}
39+
40+
.irs-slider {
41+
top: 30px;
42+
width: 10px;
43+
height: 10px;
44+
margin-top: -5px;
45+
border: 3px solid black;
46+
background: white;
47+
cursor: pointer;
48+
box-sizing: content-box;
49+
-webkit-transform: rotate(45deg);
50+
-ms-transform: rotate(45deg);
51+
transform: rotate(45deg);
52+
}
53+
54+
.irs-slider.state_hover, .irs-slider:hover {
55+
background: #f0f0f0;
56+
}
57+
58+
.irs-min, .irs-max {
59+
color: #333;
60+
font-size: 13px;
61+
top: 0;
62+
padding: 3px 4px;
63+
background: rgba(0,0,0,0.1);
64+
line-height: 1;
65+
}
66+
67+
.irs-from, .irs-to, .irs-single {
68+
color: #fff;
69+
font-size: 13px;
70+
text-shadow: none;
71+
padding: 3px 4px;
72+
background: black;
73+
line-height: 1;
74+
}
75+
76+
.irs-grid {
77+
height: 27px;
78+
}
79+
.irs-grid-pol {
80+
background: #DEDEDE;
81+
}
82+
83+
.irs-grid-text {
84+
bottom: 4px;
85+
color: silver;
86+
font-size: 11px;
87+
}

0 commit comments

Comments
 (0)