library/components/_range.sass at master · mvcss/library · GitHub

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
// *************************************
//
//   Range
//   -> Sliding user input
//   CodePen: http://codepen.io/johndjameson/pen/MYmzGR/
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// %input.range{ type: 'range', min: 0, max: 100 }
//
// *************************************

// -------------------------------------
//   Variables
// -------------------------------------

// ----- Colors ----- //

$range-thumb-background: #ddd !default
$range-track-background: #ccc !default

// ----- Track ----- //

// Borders & Box Shadows

$range-track-border: 0 !default
$range-track-borderRadius: 0 !default
$range-track-boxShadow: inset 0 1px 1px rgba(#000, 0.3) !default

// Sizing

$range-track-height: 10px !default

// ----- Range ----- //

// Borders & Box Shadows

$range-thumb-border: 0 !default
$range-thumb-borderRadius: 0 !default
$range-thumb-boxShadow: 0 1px 1px rgba(#000, 0.3) !default

// Sizing

$range-thumb-height: 30px !default
$range-thumb-width: $range-thumb-height !default

// -------------------------------------
//   Base
// -------------------------------------

.range
  -webkit-appearance: none
  background: transparent
  display: block
  margin: 0
  width: 100%

  &:focus
    outline: 0

// ----- Webkit ----- //

.range::-webkit-slider-runnable-track
  background: $range-track-background
  border-radius: $range-track-borderRadius
  border: $range-track-border
  box-shadow: $range-track-boxShadow
  cursor: pointer
  height: $range-track-height
  width: 100%

.range::-webkit-slider-thumb
  -webkit-appearance: none
  background: $range-thumb-background
  border-radius: $range-thumb-borderRadius
  border: $range-thumb-border
  box-shadow: $range-thumb-boxShadow
  cursor: pointer
  height: $range-thumb-height
  margin-top: ($range-track-height - $range-thumb-height) * 0.5
  width: $range-thumb-width

// ----- Firefox ----- //

.range::-moz-range-track
  background: $range-track-background
  border-radius: $range-track-borderRadius
  border: $range-track-border
  box-shadow: $range-track-boxShadow
  cursor: pointer
  height: $range-track-height
  width: 100%

.range::-moz-range-thumb
  background: $range-thumb-background
  border-radius: $range-thumb-borderRadius
  border: $range-thumb-border
  box-shadow: $range-thumb-boxShadow
  cursor: pointer
  height: $range-thumb-height
  width: $range-thumb-width

.range::-moz-focus-outer
  border: 0

// ----- Internet Explorer ----- //

.range::-ms-track
  background: transparent
  border-color: transparent
  color: transparent
  cursor: pointer
  height: $range-track-height
  width: 100%

.range::-ms-fill-lower,
.range::-ms-fill-upper
  background: $range-track-background
  border-radius: $range-track-borderRadius
  border: $range-track-border
  box-shadow: $range-track-boxShadow

.range::-ms-thumb
  background: $range-thumb-background
  border-radius: $range-thumb-borderRadius
  border: $range-thumb-border
  box-shadow: $range-thumb-boxShadow
  cursor: pointer
  height: $range-thumb-height
  width: $range-thumb-width