Mercurial > nebulaweb3

comparison default/assets/scss/components/_range-slider.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Range Slider
5 *********************************
6 *********************************/
7 .irs {
8 display: block;
9 clear: both;
10 margin: 3em 0;
11
12 .irs-single,
13 .irs-from,
14 .irs-to {
15 display: block;
16 height: 2em;
17 line-height: 2em;
18 text-align: center;
19 display: block;
20 background: $primary;
21 color: #fff;
22 font-size: em(10);
23 top: -3em;
24 padding: 0 .5em;
25
26 &:after {
27 border-color: $primary transparent transparent transparent;
28 }
29 }
30
31 .irs-single,
32 .irs-max,
33 .irs-min,
34 .irs-from,
35 .irs-to {
36 &:after {
37 content: '';
38 @include size(0);
39 border-style: solid;
40 border-width: 5px 3px 0 3px;
41 @include position(absolute, null 50% em(-5,10) null);
42 transform: translateX(50%);
43 }
44 }
45
46 .irs-slider {
47 display: block;
48 @include size(2em);
49 background: yellow;
50 top: 0;
51 border-radius: 100px;
52 background: #fff;
53 border: 1px solid #ddd;
54 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
55 cursor: pointer;
56 z-index: 3;
57 }
58
59 .irs-shadow.shadow-from,
60 .irs-shadow.shadow-to,
61 .irs-line,
62 .irs-bar {
63 height: 1em;
64 top: 0.5em;
65 border-radius: 100px;
66 background: #eee;
67 box-shadow:inset 1px 1px 5px 0 #ddd;
68 border: 1px solid #d9d9d9;
69 cursor: pointer;
70 }
71
72 .irs-bar {
73 background: $primary;
74 box-shadow:inset 1px 1px 5px 0 $primary;
75 border: 1px solid darken( $primary , 10%);
76 border-left: 0;
77 z-index: 2;
78 }
79
80 .irs-shadow.shadow-from,
81 .irs-shadow.shadow-to {
82 background: #bbb;
83 box-shadow:inset 1px 1px 5px 0 #bbb;
84 border: 1px solid #aaa;
85 z-index: 1;
86 }
87
88 .irs-grid {
89 top: 2em;
90 opacity: 0.2;
91 }
92
93 .irs-max,
94 .irs-min {
95 text-align: center;
96 height: 2em;
97 padding: 0 .5em;
98 line-height: 2em;
99 @include position(absolute, -3em null null 0);
100 background: #eee;
101 border: 1px solid #ddd;
102 font-size: em(10);
103 &:after {
104 border-color: #ddd transparent transparent transparent;
105 }
106 }
107
108 .irs-min{
109 left: 0
110 }
111 .irs-max{
112 left: auto;
113 right: 0;
114 }
115
116 .irs-bar-edge {
117 height: 1em;
118 top: 0.5em;
119 width: em(20);
120 border: 1px solid darken( $primary , 10%);
121 border-right: 0;
122 background: $primary;
123 box-shadow:inset 1px 1px 5px 0 $primary;
124 border-radius: 16px 0 0 16px;
125 }
126 }