Skip to content

I
i20rzslider
Commit 7e6821a7 authored by Roope Hovi's avatar Roope Hovi
Browse files
Options

Add 'rz-' prefix to class names 

Before the class names were too generic and therefore potentially
causing class name collisions.
parent 77b80ba8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 37 deletions
dist/rzslider.css
View file @ 7e6821a7
......@@ -22,26 +22,26 @@ rzslider span {
white-space: nowrap;
}
rzslider span.base {
rzslider span.rz-base {
width: 100%;
height: 100%;
padding: 0;
}
rzslider span.bar {
rzslider span.rz-bar {
z-index: 0;
width: 100%;
height: 100%;
background: #fff;
}
rzslider span.bar.selection {
rzslider span.rz-bar.rz-selection {
z-index: 1;
width: 0;
background: #67b700;
}
rzslider span.pointer {
rzslider span.rz-pointer {
top: -15px;
z-index: 2;
width: 32px;
......@@ -53,7 +53,7 @@ rzslider span.pointer {
border-radius: 16px;
}
rzslider span.pointer:after {
rzslider span.rz-pointer:after {
position: absolute;
top: 12px;
left: 12px;
......@@ -66,25 +66,25 @@ rzslider span.pointer:after {
content: '';
}
rzslider span.pointer:hover:after {
rzslider span.rz-pointer:hover:after {
background-color: #67b700;
}
rzslider span.pointer.active:after {
rzslider span.rz-pointer.rz-active:after {
background-color: #67b700;
}
rzslider span.bubble {
rzslider span.rz-bubble {
top: -32px;
padding: 1px 3px 1px 3px;
color: #67b700;
cursor: default;
}
rzslider span.bubble.selection {
rzslider span.rz-bubble.rz-selection {
top: 15px;
}
rzslider span.bubble.limit {
rzslider span.rz-bubble.rz-limit {
color: #67b700;
}
\ No newline at end of file
dist/rzslider.min.css
View file @ 7e6821a7
/*! jusas-angularjs-slider - v0.1.6 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2014-09-12 */
rzslider{position:relative;display:inline-block;width:100%;height:2px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.base{width:100%;height:100%;padding:0}rzslider span.bar{z-index:0;width:100%;height:100%;background:#fff}rzslider span.bar.selection{z-index:1;width:0;background:#67b700}rzslider span.pointer{top:-15px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#fff;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#71818e;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.pointer:hover:after{background-color:#67b700}rzslider span.pointer.active:after{background-color:#67b700}rzslider span.bubble{top:-32px;padding:1px 3px 1px 3px;color:#67b700;cursor:default}rzslider span.bubble.selection{top:15px}rzslider span.bubble.limit{color:#67b700}
\ No newline at end of file
rzslider{position:relative;display:inline-block;width:100%;height:2px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar{z-index:0;width:100%;height:100%;background:#fff}rzslider span.rz-bar.rz-selection{z-index:1;width:0;background:#67b700}rzslider span.rz-pointer{top:-15px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#fff;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#71818e;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#67b700}rzslider span.rz-pointer.rz-active:after{background-color:#67b700}rzslider span.rz-bubble{top:-32px;padding:1px 3px 1px 3px;color:#67b700;cursor:default}rzslider span.rz-bubble.rz-selection{top:15px}rzslider span.rz-bubble.rz-limit{color:#67b700}
\ No newline at end of file
dist/rzslider.min.js
View file @ 7e6821a7
This diff is collapsed.
rzslider.js
View file @ 7e6821a7
......@@ -780,7 +780,7 @@ function throttle(func, wait, options) {
this.calcViewDimensions();
this.tracking = ref;
pointer.addClass('active');
pointer.addClass('rz-active');
if(event.touches || (typeof(event.originalEvent) != 'undefined' && event.originalEvent.touches))
{
......@@ -842,16 +842,16 @@ function throttle(func, wait, options) {
this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsl);
this.tracking = 'rzSliderHigh';
this.minH.removeClass('active');
this.maxH.addClass('active');
this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active');
}
else if(this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel)
{
this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsl);
this.tracking = 'rzSliderModel';
this.maxH.removeClass('active');
this.minH.addClass('active');
this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active');
}
}
......@@ -871,8 +871,8 @@ function throttle(func, wait, options) {
*/
onEnd: function(event)
{
this.minH.removeClass('active');
this.maxH.removeClass('active');
this.minH.removeClass('rz-active');
this.maxH.removeClass('rz-active');
if(event.touches || (typeof(event.originalEvent) != 'undefined' && event.originalEvent.touches))
{
......@@ -907,15 +907,15 @@ function throttle(func, wait, options) {
rzSliderHigh: '=?',
rzSliderTranslate: '&'
},
template: '<span class="bar"></span>' + // 0 The slider bar
'<span class="bar selection"></span>' + // 1 Highlight between two handles
'<span class="pointer"></span>' + // 2 Left slider handle
'<span class="pointer"></span>' + // 3 Right slider handle
'<span class="bubble limit"></span>' + // 4 Floor label
'<span class="bubble limit"></span>' + // 5 Ceiling label
'<span class="bubble"></span>' + // 6 Label above left slider handle
'<span class="bubble"></span>' + // 7 Label above right slider handle
'<span class="bubble"></span>', // 8 Range label when the slider handles are close ex. 15 - 17
template: '<span class="rz-bar"></span>' + // 0 The slider bar
'<span class="rz-bar rz-selection"></span>' + // 1 Highlight between two handles
'<span class="rz-pointer"></span>' + // 2 Left slider handle
'<span class="rz-pointer"></span>' + // 3 Right slider handle
'<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
'<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
'<span class="rz-bubble"></span>' + // 6 Label above left slider handle
'<span class="rz-bubble"></span>' + // 7 Label above right slider handle
'<span class="rz-bubble"></span>', // 8 Range label when the slider handles are close ex. 15 - 17
link: function(scope, elem, attr)
{
......
rzslider.less
View file @ 7e6821a7
......@@ -33,26 +33,26 @@ rzslider {
position: absolute;
display: inline-block;
&.base {
&.rz-base {
width: 100%;
height: 100%;
padding: 0;
}
&.bar {
&.rz-bar {
width: 100%;
height: 100%;
z-index: 0;
background: #fff;
&.selection {
&.rz-selection {
width: 0%;
z-index: 1;
background: #67b700;
}
}
&.pointer {
&.rz-pointer {
cursor: pointer;
width: 32px;
height: 32px;
......@@ -76,22 +76,22 @@ rzslider {
background-color: @handleHoverColor;
}
&.active:after {
&.rz-active:after {
background-color: @handleActiveColor;
}
}
&.bubble {
&.rz-bubble {
cursor: default;
top: -32px;
padding: 1px 3px 1px 3px;
color: @labelTextColor;
&.selection {
&.rz-selection {
top: 15px;
}
&.limit {
&.rz-limit {
color: @limitLabelTextColor;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment