cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Slider optimized for Firefox

Browse Source
This commit is contained in:
María Checa 2016-01-29 17:38:14 +01:00
parent 7a826d42f1
commit 2231eb5822
2 changed files with 72 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/scss/cdb-components/forms/sliders.scss
View File

@ -13,6 +13,8 @@
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Range { .CDB-Range {
-webkit-appearance: none;
-moz-appearance: none;
position: relative; position: relative;
width: 100%; width: 100%;
margin: -4px 0 0; margin: -4px 0 0;
@ -21,13 +23,11 @@
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
vertical-align: middle; vertical-align: middle;
} border: 0;
.CDB-Range::-webkit-slider-thumb { &:focus {
position: relative; outline: 0;
width: $baseSize / 2; }
height: 100%;
border-radius: $baseSize / 2;
} }
.CDB-Range::-webkit-slider-runnable-track { .CDB-Range::-webkit-slider-runnable-track {
@ -37,19 +37,63 @@
background: $cMainLine; background: $cMainLine;
} }
.CDB-Range::-webkit-slider-thumb::before { .CDB-Range::-webkit-slider-thumb {
position: absolute; position: relative;
top: 0; width: $baseSize / 2;
right: 0; height: 100%;
bottom: 0;
left: -3000px;
height: $baseSize / 4;
border-radius: $baseSize / 2; border-radius: $baseSize / 2;
background: $cBlue;
content: ''; &::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -3000px;
height: $baseSize / 4;
border-radius: $baseSize / 2;
background: $cBlue;
content: '';
}
&::after {
position: absolute;
top: -6px;
right: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cBlue;
border-radius: 50%;
background: $cWhite;
content: '';
z-index: 1;
}
&:focus,
&:hover {
&::after {
cursor: pointer;
}
}
&:disabled {
&::before,
&::after {
opacity: 0.2;
}
}
} }
.CDB-Range::-webkit-slider-thumb::after { .CDB-Range::-moz-range-track {
height: $baseSize / 4;
margin: $baseSize 0;
border-radius: $baseSize / 2;
background: $cMainLine;
border: 0;
outline: none;
}
.CDB-Range::-moz-range-thumb {
position: absolute; position: absolute;
top: -6px; top: -6px;
right: -6px; right: -6px;
@ -60,22 +104,17 @@
border-radius: 50%; border-radius: 50%;
background: $cWhite; background: $cWhite;
content: ''; content: '';
z-index: 10; z-index: 1;
} }
.CDB-Range:focus { .CDB-Range::-moz-range-progress {
outline: none; position: absolute;
} top: 0;
right: 0;
.CDB-Range:hover::-webkit-slider-thumb::after, bottom: 0;
.CDB-Range:focus::-webkit-slider-thumb::after { left: -3000px;
cursor: pointer; height: $baseSize / 4;
} border-radius: $baseSize / 2;
background: $cBlue;
.CDB-Range:disabled::-webkit-slider-thumb::before { content: '';
opacity: 0.2;
}
.CDB-Range:disabled::-webkit-slider-thumb::after {
opacity: 0.2;
} }

33
src/scss/cdb-components/forms/toggle.scss
View File

@ -57,36 +57,3 @@
} }
} }
} }
// .CDB-Toggle {
// @include transition(background, 300ms);
// position: relative;
// width: $baseSize * 4;
// height: $baseSize * 2;
// margin: 0 2px;
// border-radius: 50px;
// background: $cTypo4;
// }
// .CDB-Toggle:before {
// position: absolute;
// top: 2px;
// left: 2px;
// width: $baseSize + 4;
// height: $baseSize + 4;
// border-radius: 50%;
// background: $cWhite;
// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
// content: '';
// }
// .CDB-Toggle:checked {
// background: $cMainDark;
// }
// .CDB-Toggle:checked:before {
// right: 2px;
// left: auto;
// }