Permalink
Browse files

feat(slider): started with basic styles

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Sep 2, 2016
1 parent ea5beeb commit 6cdd5fc47d148f34dbf6400c66b968fd8abe0524
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M148.4,197.4c-28.2,0-51.1-22.9-51.1-51.1c0-28.2,22.9-51.1,51.1-51.1c28.2,0,51.1,22.9,51.1,51.1
C199.6,174.5,176.6,197.4,148.4,197.4z"/>
<g>
<path fill="#FFFFFF" d="M393.1,135.4H208.5c1.3,3.5,2,7.2,2,11s-0.7,7.5-2,11h184.6c10,0,14.6-3.4,14.6-11
C407.7,138.8,403.1,135.4,393.1,135.4z"/>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M236.1,416.7c-28.2,0-51.1-22.9-51.1-51.1c0-28.2,22.9-51.1,51.1-51.1s51.1,22.9,51.1,51.1
S264.3,416.7,236.1,416.7z"/>
<g>
<path fill="#FFFFFF" d="M393.1,354.6h-97c1.3,3.5,2,7.2,2,11s-0.7,7.5-2,11h97c10,0,14.6-3.4,14.6-11
C407.7,358,403.1,354.6,393.1,354.6z"/>
<path fill="#FFFFFF" d="M174,365.6c0-3.8,0.7-7.5,2-11h-60.5c-10,0-14.6,3.4-14.6,11c0,7.5,4.6,11,14.6,11H176
C174.7,373,174,369.4,174,365.6z"/>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M363.6,307c-28.2,0-51.1-22.9-51.1-51.1c0-28.2,22.9-51.1,51.1-51.1s51.1,22.9,51.1,51.1
C414.7,284.1,391.7,307,363.6,307z"/>
<g>
<path fill="#FFFFFF" d="M301.5,255.9c0-3.8,0.7-7.5,2-11H115.6c-10,0-14.6,3.4-14.6,11c0,7.5,4.6,11,14.6,11h187.9
C302.2,263.3,301.5,259.7,301.5,255.9z"/>
</g>
</g>
</g>
</svg>
View
@@ -23,6 +23,7 @@
@import "tag/tag";
@import "radiobutton/radiobutton";
@import "textarea/textarea";
@import "slider/slider";
/** Trumps **/
View
@@ -0,0 +1,8 @@
---
layout: components_icons.hbs
---
## Using Icons with Buttons
To use buttons and icons together, you need the `icon` module as well as the
icon definition file.
@@ -0,0 +1,3 @@
<label for="i0" class="slider__label">Slider</label>
<input class="slider" type="range" min="0" max="100" value="50" tabindex="0" id="i0">
<input type="text" class="inputfield" id="i0"/>
@@ -0,0 +1,3 @@
<label for="i0" class="slider__label">Slider</label>
<input disabled class="slider" type="range" min="0" max="100" value="0" tabindex="0" id="i0">
<input disabled type="text" class="inputfield" id="i0"/>
View
@@ -0,0 +1,167 @@
@import "../common/variables";
.slider {
font-family: $mainfont;
appearance: none;
position: relative;
display: inline-block;
box-sizing: border-box;
height: 32px;
cursor: pointer;
background-color: transparent;
}
.slider::-webkit-slider-thumb {
margin-top: -6px;
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 10px;
background: $turquoise-600;
border: 1px solid #fff;
cursor: pointer;
}
.slider::-moz-range-thumb {
height: 14px;
width: 14px;
border-radius: 10px;
background: $turquoise-600;
border: 1px solid #fff;
cursor: pointer;
}
.slider::-ms-thumb {
margin-top: -1px;
height: 14px;
width: 14px;
border-radius: 10px;
background: $turquoise-600;
border: 1px solid #fff;
cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: $disabledcolor;
border-radius: 1px;
}
.slider::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background: $disabledcolor;
}
.slider::-ms-track {
width: 100%;
height: 1px;
cursor: pointer;
background: $disabledcolor;
}
.slider::-moz-range-progress {
background-color: $turquoise-600;
}
.slider::-ms-fill-lower {
background: $turquoise-600;
}
.slider::-ms-tooltip {
display: none;
}
.slider__label {
position: relative;
font-size: 12px;
font-weight: normal;
display: block;
padding-bottom: 6px;
}
.slider:hover {
text-decoration: none;
}
.slider:focus {
outline: none;
}
.slider:focus::-webkit-slider-thumb {
outline: 0;
border-color: $focuscolor;
box-shadow: 0 0 0 1px $focuscolor;
}
.slider:focus::-moz-range-thumb {
outline: 0;
border-color: $focuscolor;
box-shadow: 0 0 0 1px $focuscolor;
}
.slider:focus::-ms-thumb {
outline: 0;
border-color: $focuscolor;
box-shadow: 0 0 0 1px $focuscolor;
}
.slider:hover::-webkit-slider-thumb {
background: $turquoise-700;
}
.slider:hover::-moz-range-thumb {
background: $turquoise-700;
}
.slider:hover::-ms-thumb {
background: $turquoise-700;
}
.slider:active::-webkit-slider-thumb {
background: $turquoise-800;
}
.slider:active::-moz-range-thumb {
background: $turquoise-800;
}
.slider:active::-ms-thumb {
background: $turquoise-800;
}
.slider[disabled]::-webkit-slider-runnable-track {
pointer-events: none;
background: $disabledcolor;
cursor: default;
box-shadow: none;
}
.slider[disabled]::-moz-range-track {
pointer-events: none;
background: $disabledcolor;
cursor: default;
box-shadow: none;
}
.slider[disabled]::-ms-track {
pointer-events: none;
background: $disabledcolor;
cursor: default;
box-shadow: none;
}
.slider[disabled]::-webkit-slider-thumb {
background: $disabledcolor;
}
.slider[disabled]::-moz-range-thumb {
background: $disabledcolor;
}
.slider[disabled]::-ms-thumb {
background: $disabledcolor;
}

0 comments on commit 6cdd5fc

Please sign in to comment.