topcoat-range
Version:
Topcoat default range skin
140 lines (133 loc) • 4.73 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Topcoat</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">
<link rel="stylesheet" type="text/css" href="../css/topcoat-range-mobile-light.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/brackets.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="light">
<div id="wrapper">
<div class="max-width">
<div id="sideNav">
<nav class="site">
<ul>
<li><a href="http://topcoat.io">Home</a></li>
</ul>
</nav>
<div class="combo">
<select class="docNav">
<option value="index.html">Topcoat Range Desktop Dark</option>
<option value="topcoat-range-desktop-light.html">Topcoat Range Desktop Light</option>
<option value="topcoat-range-mobile-dark.html">Topcoat Range Mobile Dark</option>
<option value="topcoat-range-mobile-light.html" selected="selected">Topcoat Range Mobile Light</option>
</select>
</div>
<div id="pageNav">
<ul>
<li><a href="#range">Range</a></li>
</ul>
</div>
</div>
</div>
<div id="site">
<header id="main-header">
<div class="max-width">
<hgroup>
<h1><a href="http://topcoat.io">Topcoat</a></h1>
<p>CSS for clean and fast web apps</p>
</hgroup>
<nav>
<ul>
</ul>
</nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>
</div>
</header>
<div id="content" class="max-width">
<article id="range" class="component">
<header>
<h2>Range</h2>
</header>
<section class="component"><input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled></section>
<section class="examples">
<h4>Examples</h4>
<ul>
<li><a href="http://codepen.io/Topcoat/pen/BskEn">mobile range</a></li>
</ul>
</section>
<footer>
<div class="showcode"><a href="#">Show code snippets</a></div>
<section class="code">
<div>
<h3>HTML</h3>
<pre class="html"><code data-language="html"><input type="range" class="topcoat-range">
<input type="range" class="topcoat-range" disabled></code></pre>
</div>
<div>
<h3>CSS</h3>
<pre class="css"><code data-language="css">
.topcoat-range {
border-radius: 6px;
border: 1px solid #9daca9;
background-color: #d6dcdb;
height: 1rem;
border-radius: 30px;
}
.topcoat-range::-moz-range-track {
border-radius: 6px;
border: 1px solid #9daca9;
background-color: #d6dcdb;
height: 1rem;
border-radius: 30px;
}
.topcoat-range::-webkit-slider-thumb {
height: 3rem;
width: 2rem;
background-color: #e5e9e8;
border: 1px solid #9daca9;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px #fff;
box-shadow: inset 0 1px #fff;
}
.topcoat-range::-moz-range-thumb {
height: 3rem;
width: 2rem;
background-color: #e5e9e8;
border: 1px solid #9daca9;
border-radius: 6px;
box-shadow: inset 0 1px #fff;
}
.topcoat-range:focus::-webkit-slider-thumb {
border: 1px solid #0036ff;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}
.topcoat-range:focus::-moz-range-thumb {
border: 1px solid #0036ff;
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
}
.topcoat-range:active::-webkit-slider-thumb {
border: 1px solid #9daca9;
-webkit-box-shadow: inset 0 1px #fff;
box-shadow: inset 0 1px #fff;
}
.topcoat-range:active::-moz-range-thumb {
border: 1px solid #9daca9;
box-shadow: inset 0 1px #fff;
}</code></pre>
</div>
</section>
</footer>
</article>
</div>
<footer></footer>
</div>
</div>
<script src="js/rainbow-custom.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>