Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #18351 from rnowm/input-types
Browse files Browse the repository at this point in the history 
Bug 973907 - [BB] include input type range in seekbars BB r=pivanov
  • Loading branch information
@rnowm
rnowm committed Apr 16, 2014
2 parents 37d029e + 32d7dd3 commit a74c66b
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 23 deletions.
56 changes: 41 additions & 15 deletions shared/style/seekbars.css
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,52 @@
/* ----------------------------------
* Seekbars
* ---------------------------------- */
div[role="slider"] {
[role="slider"],
input[type="range"] {
position: relative;
height: 3.5rem;
}

div[role="slider"] > div {
input[type="range"] {
height: 3.5rem;
width: 100%;
margin: 0;
}

[role="slider"] > div {
display: block;
overflow: hidden;
padding: 0;
position: relative;
height: 100%;
}

div[role="slider"] progress {
[role="slider"] progress,
input[type="range"]::-moz-range-track {
width: 100%;
background: #000;
border: none;
height: 0.1rem;
}

[role="slider"] progress {
display: block;
border-radius: 0;
margin-top: 1.9rem;
}

div[role="slider"] progress::-moz-progress-bar {
[role="slider"] progress::-moz-progress-bar,
input[type=range]::-moz-range-progress {
background: #01c5ed;
height: 0.6rem;
}

[role="slider"] progress::-moz-progress-bar {
margin-top: -0.3rem;
border-radius: 0;
}

div[role="slider"] > label {
[role="slider"] > label {
font-size: 1.5rem;
line-height: 3.8rem;
font-family: sans-serif;
Expand All @@ -42,38 +57,49 @@ div[role="slider"] > label {
width: auto;
}

div[role="slider"] label:first-of-type {
[role="slider"] label:first-of-type {
float: left;
padding: 0 1rem 0 0;
}

div[role="slider"] > label.icon {
[role="slider"] > label.icon {
width: 3rem;
height: 3rem;
margin-top: 0.5rem;
font-size: 0;
background: no-repeat right top / 3rem auto;
}

div[role="slider"] > label.icon:first-of-type {
[role="slider"] > label.icon:first-of-type {
background-position: top left;
}

div[role="slider"] button {
[role="slider"] button,
input[type="range"]::-moz-range-thumb {
width: 2.2rem;
height: 2.2rem;
background: url(seekbars/images/ui/handler.png) no-repeat center center / 2.8rem auto;
border-radius: 3.2rem;
border: solid 0.1rem transparent;
transition: border 0.15s ease;
}

[role="slider"] button {
width: 3.2rem;
height: 3.2rem;
background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto;
font: 0/0 a;
font-size: 0;
position: absolute;
top: 50%;
left: 0;
margin: -1.5rem 0 0 -1.6rem;
border-radius: 3.2rem;
border: solid 0.1rem transparent;
transition: border 0.15s ease;
padding: 0;
}

div[role="slider"] button:active {
[role="slider"] button:active,
input[type=range]:active::-moz-range-thumb {
border: solid 0.5rem #01c5ed;
}

input[type=range]::-moz-focus-outer {
border: none;
}
39 changes: 31 additions & 8 deletions shared/style/seekbars/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,20 @@
border: solid 1px #e8e8e8;
}

body[role="application"] section[role="region"]{
body[role="application"] section {
background: #fff;
padding: 2rem;
}

body[role="application"] section[role="region"] button {
body[role="application"] section button {
left: 80%;
}

body[role="application"] section[role="region"] label.icon {
body[role="application"] section label.icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAYAAABxVAqfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozMzNEQkM1MTc5QkQxMUUyQTUzNzk3RkFBNjU0RDgwQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMzNEQkM1Mjc5QkQxMUUyQTUzNzk3RkFBNjU0RDgwQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjMzM0RCQzRGNzlCRDExRTJBNTM3OTdGQUE2NTREODBBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjMzM0RCQzUwNzlCRDExRTJBNTM3OTdGQUE2NTREODBBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+KDVsXAAACoxJREFUeNrEmHlU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);
}

body[role="application"] section[role="region"] label.icon:last-of-type {
body[role="application"] section label.icon:last-of-type {
background-position: right -3rem;
}
</style>
Expand All @@ -54,8 +54,8 @@

<body role="application">

<h2 class="bb-docs">Default seeker</h2>
<section role="region">
<h2 class="bb-docs">Seekbars (using progress tag)</h2>
<section>
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
<div>
<progress value="80" max="100"></progress>
Expand All @@ -65,7 +65,7 @@ <h2 class="bb-docs">Default seeker</h2>
</section>

<h2 class="bb-docs">Value seeker</h2>
<section role="region">
<section>
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
<label>0</label>
<label>100</label>
Expand All @@ -77,7 +77,7 @@ <h2 class="bb-docs">Value seeker</h2>
</section>

<h2 class="bb-docs">Icon seeker</h2>
<section role="region">
<section>
<div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
<label class="icon">0</label>
<label class="icon">100</label>
Expand All @@ -88,5 +88,28 @@ <h2 class="bb-docs">Icon seeker</h2>
</div>
</section>

<h2 class="bb-docs">Seekbars (using Input type range)</h2>
<section>
<input type="range">
</section>

<h2 class="bb-docs">Value seeker</h2>
<section role="slider">
<label>0</label>
<label>100</label>
<div>
<input type="range">
</div>
</section>

<h2 class="bb-docs">Value seeker</h2>
<section role="slider">
<label class="icon">0</label>
<label class="icon">100</label>
<div>
<input type="range">
</div>
</section>

</body>
</html>

0 comments on commit a74c66b

Please sign in to comment.