Skip to content

I
i20rzslider
Commit 88a82f9f authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Simplify the css rules by removing tag names when a css class is already used. 

Closes #154.
parent 3aa77c5d
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 79 deletions
dist/rzslider.css
View file @ 88a82f9f
...@@ -28,7 +28,7 @@ rzslider[disabled] { ...@@ -28,7 +28,7 @@ rzslider[disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
rzslider[disabled] span.rz-pointer { rzslider[disabled] .rz-pointer {
cursor: not-allowed; cursor: not-allowed;
background-color: #d8e0f3; background-color: #d8e0f3;
} }
...@@ -39,13 +39,13 @@ rzslider span { ...@@ -39,13 +39,13 @@ rzslider span {
white-space: nowrap; white-space: nowrap;
} }
rzslider span.rz-base { rzslider .rz-base {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
rzslider span.rz-bar-wrapper { rzslider .rz-bar-wrapper {
left: 0; left: 0;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
...@@ -55,7 +55,7 @@ rzslider span.rz-bar-wrapper { ...@@ -55,7 +55,7 @@ rzslider span.rz-bar-wrapper {
box-sizing: border-box; box-sizing: border-box;
} }
rzslider span.rz-bar { rzslider .rz-bar {
left: 0; left: 0;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
...@@ -66,7 +66,7 @@ rzslider span.rz-bar { ...@@ -66,7 +66,7 @@ rzslider span.rz-bar {
border-radius: 2px; border-radius: 2px;
} }
rzslider span.rz-bar.rz-selection { rzslider .rz-bar.rz-selection {
z-index: 2; z-index: 2;
background: #0db9f0; background: #0db9f0;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
...@@ -74,7 +74,7 @@ rzslider span.rz-bar.rz-selection { ...@@ -74,7 +74,7 @@ rzslider span.rz-bar.rz-selection {
border-radius: 2px; border-radius: 2px;
} }
rzslider span.rz-pointer { rzslider .rz-pointer {
top: -14px; top: -14px;
z-index: 3; z-index: 3;
width: 32px; width: 32px;
...@@ -86,7 +86,7 @@ rzslider span.rz-pointer { ...@@ -86,7 +86,7 @@ rzslider span.rz-pointer {
border-radius: 16px; border-radius: 16px;
} }
rzslider span.rz-pointer:after { rzslider .rz-pointer:after {
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 12px; left: 12px;
...@@ -99,26 +99,26 @@ rzslider span.rz-pointer:after { ...@@ -99,26 +99,26 @@ rzslider span.rz-pointer:after {
content: ''; content: '';
} }
rzslider span.rz-pointer:hover:after { rzslider .rz-pointer:hover:after {
background-color: #ffffff; background-color: #ffffff;
} }
rzslider span.rz-pointer.rz-active:after { rzslider .rz-pointer.rz-active:after {
background-color: #451aff; background-color: #451aff;
} }
rzslider span.rz-bubble { rzslider .rz-bubble {
bottom: 16px; bottom: 16px;
padding: 1px 3px; padding: 1px 3px;
color: #55637d; color: #55637d;
cursor: default; cursor: default;
} }
rzslider span.rz-bubble.rz-selection { rzslider .rz-bubble.rz-selection {
top: 16px; top: 16px;
} }
rzslider span.rz-bubble.rz-limit { rzslider .rz-bubble.rz-limit {
color: #55637d; color: #55637d;
} }
......
dist/rzslider.min.css
View file @ 88a82f9f
/*! angularjs-slider - v1.0.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-16 */ /*! angularjs-slider - v1.0.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-16 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] span.rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-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:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)} rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file \ No newline at end of file
src/rzslider.less
View file @ 88a82f9f
...@@ -23,7 +23,7 @@ rzslider { ...@@ -23,7 +23,7 @@ rzslider {
&[disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
span.rz-pointer { .rz-pointer {
cursor: not-allowed; cursor: not-allowed;
background-color: @handleDisabledColor; background-color: @handleDisabledColor;
} }
...@@ -33,80 +33,80 @@ rzslider { ...@@ -33,80 +33,80 @@ rzslider {
white-space: nowrap; white-space: nowrap;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
}
&.rz-base { .rz-base {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
&.rz-bar-wrapper { .rz-bar-wrapper {
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
margin-top: -@handleSize / 2; margin-top: -@handleSize / 2;
padding-top: @handleSize / 2; padding-top: @handleSize / 2;
width: 100%; width: 100%;
height: @handleSize; height: @handleSize;
z-index: 1; z-index: 1;
} }
&.rz-bar { .rz-bar {
left: 0; left: 0;
width: 100%; width: 100%;
height: @barHeight; height: @barHeight;
z-index: 1; z-index: 1;
background: @barNormalColor; background: @barNormalColor;
.rounded(@barHeight/2); .rounded(@barHeight/2);
&.rz-selection { &.rz-selection {
z-index: 2; z-index: 2;
background: @barFillColor; background: @barFillColor;
.rounded(@barHeight/2); .rounded(@barHeight/2);
}
} }
}
&.rz-pointer { .rz-pointer {
cursor: pointer; cursor: pointer;
width: @handleSize; width: @handleSize;
height: @handleSize; height: @handleSize;
top: -@handleSize/2 + @barHeight/2; top: -@handleSize/2 + @barHeight/2;
background-color: @handleBgColor; background-color: @handleBgColor;
z-index: 3; z-index: 3;
.rounded(@handleSize/2); .rounded(@handleSize/2);
// -webkit-transition:all linear 0.15s; // -webkit-transition:all linear 0.15s;
// -moz-transition:all linear 0.15s; // -moz-transition:all linear 0.15s;
// -o-transition:all linear 0.15s; // -o-transition:all linear 0.15s;
// transition:all linear 0.15s; // transition:all linear 0.15s;
&:after { &:after {
content: ''; content: '';
width: @handlePointerSize; width: @handlePointerSize;
height: @handlePointerSize; height: @handlePointerSize;
position: absolute; position: absolute;
top: @handleSize/2 - @handlePointerSize/2; top: @handleSize/2 - @handlePointerSize/2;
left: @handleSize/2 - @handlePointerSize/2; left: @handleSize/2 - @handlePointerSize/2;
.rounded(@handlePointerSize/2); .rounded(@handlePointerSize/2);
background: @handleInnerColor; background: @handleInnerColor;
} }
&:hover:after { &:hover:after {
background-color: @handleHoverColor; background-color: @handleHoverColor;
}
&.rz-active:after {
background-color: @handleActiveColor;
}
} }
&.rz-active:after {
background-color: @handleActiveColor;
}
}
&.rz-bubble { .rz-bubble {
cursor: default; cursor: default;
bottom: @handleSize/2; bottom: @handleSize/2;
padding: @bubblePadding; padding: @bubblePadding;
color: @labelTextColor; color: @labelTextColor;
&.rz-selection { &.rz-selection {
top: @handleSize/2; top: @handleSize/2;
} }
&.rz-limit { &.rz-limit {
color: @limitLabelTextColor; 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