Seperated docs, included SASS
This commit is contained in:
Sam Potts
parent
eb630ab551
commit
05a97500aa
23
bundles.json
23
bundles.json
@ -1,14 +1,25 @@
|
||||
{
|
||||
"plyr": {
|
||||
"less": {
|
||||
"plyr.css": ["src/less/plyr.less"],
|
||||
"docs.css": ["src/less/docs.less"]
|
||||
"plyr.css": ["src/less/plyr.less"]
|
||||
},
|
||||
"sass": {
|
||||
"plyr.css": ["src/less/plyr.sass"]
|
||||
},
|
||||
"js": {
|
||||
"plyr.js": ["src/js/plyr.js"]
|
||||
}
|
||||
},
|
||||
"docs": {
|
||||
"less": {
|
||||
"docs.css": ["docs/src/less/docs.less"]
|
||||
},
|
||||
"js": {
|
||||
"plyr.js": ["src/js/plyr.js"],
|
||||
"docs.js": [
|
||||
"src/js/lib/hogan-3.0.2.mustache.js",
|
||||
"dist/js/templates.js",
|
||||
"src/js/docs.js"
|
||||
"docs/src/js/lib/hogan-3.0.2.mustache.js",
|
||||
"docs/dist/js/templates.js",
|
||||
"docs/src/js/docs.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
1
dist/css/docs.css
vendored
1
dist/css/docs.css
vendored
@ -1 +0,0 @@
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}
|
||||
1
docs/dist/css/docs.css
vendored
Normal file
1
docs/dist/css/docs.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}
|
||||
0
dist/js/docs.js → docs/dist/js/docs.js
vendored
0
dist/js/docs.js → docs/dist/js/docs.js
vendored
79
docs/index.html
Normal file
79
docs/index.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Plyr - A simple HTML5 media player</title>
|
||||
<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
|
||||
<meta name="author" content="Sam Potts">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="../dist/css/plyr.css">
|
||||
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="dist/css/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Plyr</h1>
|
||||
<p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on Github</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="example-video">
|
||||
<div class="player">
|
||||
<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
|
||||
<!-- Video files -->
|
||||
<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
||||
<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<div>
|
||||
<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
</div>
|
||||
</video>
|
||||
</div>
|
||||
<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
|
||||
</section>
|
||||
|
||||
<section class="example-audio">
|
||||
<div class="player">
|
||||
<audio controls>
|
||||
<!-- Audio files -->
|
||||
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
|
||||
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
|
||||
|
||||
<!-- Fallback for browsers that don't support the <audio> element -->
|
||||
<div>
|
||||
<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
|
||||
</div>
|
||||
</audio>
|
||||
</div>
|
||||
<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Used by …</p>
|
||||
<a href="https://selz.com" target="_blank" class="logo">
|
||||
<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<!-- Load SVG defs -->
|
||||
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
|
||||
<script>
|
||||
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/sprite.svg");
|
||||
</script>
|
||||
|
||||
<!-- Plyr core script -->
|
||||
<script src="../dist/js/plyr.js"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="dist/js/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,9 +3,11 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Reset
|
||||
@import "docs/normalize.less";
|
||||
@import "lib/normalize.less";
|
||||
// Mixins
|
||||
@import "docs/mixins.less";
|
||||
@import "lib/mixins.less";
|
||||
// Fonts - docs only!
|
||||
@import "lib/fontface.less";
|
||||
|
||||
// Variables
|
||||
// ---------------------------------------
|
||||
@ -147,7 +149,3 @@ footer {
|
||||
margin-bottom: (@padding-base / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonts
|
||||
// Last to not block rendering
|
||||
@import "docs/fontface.less";
|
||||
16
docs/src/less/lib/fontface.less
Normal file
16
docs/src/less/lib/fontface.less
Normal file
@ -0,0 +1,16 @@
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
|
||||
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff") format("woff"),
|
||||
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
|
||||
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff") format("woff"),
|
||||
url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
174
gulpfile.js
174
gulpfile.js
@ -10,8 +10,9 @@ var fs = require("fs"),
|
||||
concat = require("gulp-concat"),
|
||||
uglify = require("gulp-uglify"),
|
||||
less = require("gulp-less"),
|
||||
minifyCss = require("gulp-minify-css"),
|
||||
runSequence = require("run-sequence"),
|
||||
sass = require("gulp-sass"),
|
||||
minify = require("gulp-minify-css"),
|
||||
run = require("run-sequence"),
|
||||
prefix = require("gulp-autoprefixer"),
|
||||
svgstore = require("gulp-svgstore"),
|
||||
svgmin = require("gulp-svgmin"),
|
||||
@ -19,12 +20,13 @@ var fs = require("fs"),
|
||||
|
||||
var root = __dirname,
|
||||
paths = {
|
||||
// Watch paths
|
||||
watch: {
|
||||
plyr: {
|
||||
// Source paths
|
||||
src: {
|
||||
less: path.join(root, "src/less/**/*"),
|
||||
sass: path.join(root, "src/sass/**/*"),
|
||||
js: path.join(root, "src/js/**/*"),
|
||||
sprite: path.join(root, "src/sprite/*.svg"),
|
||||
templates: path.join(root, "src/templates/*.html"),
|
||||
sprite: path.join(root, "src/sprite/*.svg")
|
||||
},
|
||||
// Output paths
|
||||
output: {
|
||||
@ -32,19 +34,28 @@ var root = __dirname,
|
||||
css: path.join(root, "dist/css/"),
|
||||
sprite: path.join(root, "dist/")
|
||||
}
|
||||
},
|
||||
docs: {
|
||||
// Source paths
|
||||
src: {
|
||||
less: path.join(root, "docs/src/less/**/*"),
|
||||
js: path.join(root, "docs/src/js/**/*"),
|
||||
templates: path.join(root, "docs/src/templates/*.html")
|
||||
},
|
||||
// Output paths
|
||||
output: {
|
||||
js: path.join(root, "docs/dist/js/"),
|
||||
css: path.join(root, "docs/dist/css/")
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Task names
|
||||
taskNames = {
|
||||
jsAll: "js-all",
|
||||
lessBuild: "less-",
|
||||
jsBuild: "js-",
|
||||
sprite: "sprite-build",
|
||||
templates: "templates"
|
||||
},
|
||||
// Task arrays
|
||||
lessBuildTasks = [],
|
||||
jsBuildTasks = [],
|
||||
tasks = {
|
||||
less: [],
|
||||
sass: [],
|
||||
js: []
|
||||
},
|
||||
|
||||
// Fetch bundles from JSON
|
||||
bundles = loadJSON(path.join(root, "bundles.json"));
|
||||
@ -54,81 +65,126 @@ function loadJSON(path) {
|
||||
return JSON.parse(fs.readFileSync(path));
|
||||
}
|
||||
|
||||
// Build templates
|
||||
gulp.task(taskNames.templates, function () {
|
||||
return gulp
|
||||
.src(paths.watch.templates)
|
||||
.pipe(hogan("templates.js", {
|
||||
wrapper: false,
|
||||
templateName: function (file) {
|
||||
return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest(paths.output.js));
|
||||
});
|
||||
|
||||
// Process JS
|
||||
for (var key in bundles.js) {
|
||||
var build = {
|
||||
js: function (files, bundle, output) {
|
||||
for (var key in files) {
|
||||
(function(key) {
|
||||
var taskName = taskNames.jsBuild + key;
|
||||
jsBuildTasks.push(taskName);
|
||||
var name = "js-" + key;
|
||||
tasks.js.push(name);
|
||||
|
||||
gulp.task(taskName, function () {
|
||||
gulp.task(name, function () {
|
||||
return gulp
|
||||
.src(bundles.js[key])
|
||||
.src(bundles[bundle].js[key])
|
||||
.pipe(concat(key))
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest(paths.output.js));
|
||||
.pipe(gulp.dest(output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
|
||||
// Process CSS
|
||||
for (var key in bundles.less) {
|
||||
}
|
||||
},
|
||||
less: function(files, bundle, output) {
|
||||
for (var key in files) {
|
||||
(function (key) {
|
||||
var taskName = taskNames.lessBuild + key;
|
||||
lessBuildTasks.push(taskName);
|
||||
var name = "less-" + key;
|
||||
tasks.less.push(name);
|
||||
|
||||
gulp.task(taskName, function () {
|
||||
gulp.task(name, function () {
|
||||
return gulp
|
||||
.src(bundles.less[key])
|
||||
.src(bundles[bundle].less[key])
|
||||
.pipe(less())
|
||||
.on("error", gutil.log)
|
||||
.pipe(concat(key))
|
||||
.pipe(prefix(["last 2 versions"], { cascade: true }))
|
||||
.pipe(minifyCss())
|
||||
.pipe(gulp.dest(paths.output.css));
|
||||
.pipe(minify())
|
||||
.pipe(gulp.dest(output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
}
|
||||
},
|
||||
sass: function(files, bundle, output) {
|
||||
for (var key in files) {
|
||||
(function (key) {
|
||||
var name = "sass-" + key;
|
||||
tasks.sass.push(name);
|
||||
|
||||
// Process Icons
|
||||
gulp.task(taskNames.sprite, function () {
|
||||
gulp.task(name, function () {
|
||||
return gulp
|
||||
.src(paths.watch.sprite)
|
||||
.src(bundles[bundle].sass[key])
|
||||
.pipe(sass())
|
||||
.on("error", gutil.log)
|
||||
.pipe(concat(key))
|
||||
.pipe(prefix(["last 2 versions"], { cascade: true }))
|
||||
.pipe(minify())
|
||||
.pipe(gulp.dest(output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
},
|
||||
sprite: function(source, output) {
|
||||
// Process Icons
|
||||
gulp.task("sprite", function () {
|
||||
return gulp
|
||||
.src(source)
|
||||
.pipe(svgmin({
|
||||
plugins: [{
|
||||
removeDesc: true
|
||||
}]
|
||||
}))
|
||||
.pipe(svgstore())
|
||||
.pipe(gulp.dest(paths.output.sprite));
|
||||
});
|
||||
.pipe(gulp.dest(output));
|
||||
});
|
||||
},
|
||||
templates: function(source, output) {
|
||||
// Build templates
|
||||
gulp.task("templates", function () {
|
||||
return gulp
|
||||
.src(source)
|
||||
.pipe(hogan("templates.js", {
|
||||
wrapper: false,
|
||||
templateName: function (file) {
|
||||
return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest(output));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Plyr core files
|
||||
build.js(bundles.plyr.js, "plyr", paths.plyr.output.js);
|
||||
build.less(bundles.plyr.less, "plyr", paths.plyr.output.css);
|
||||
build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css);
|
||||
build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite);
|
||||
|
||||
// Docs files
|
||||
build.templates(paths.docs.src.templates, paths.docs.output.js);
|
||||
build.less(bundles.docs.less, "docs", paths.docs.output.css);
|
||||
build.js(bundles.docs.js, "docs", paths.docs.output.js);
|
||||
|
||||
// Default gulp task
|
||||
gulp.task("default", function(){
|
||||
runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch"));
|
||||
run("templates", tasks.js, tasks.less, "sprite");
|
||||
});
|
||||
|
||||
// Build all JS (inc. templates)
|
||||
gulp.task(taskNames.jsAll, function(){
|
||||
runSequence(taskNames.templates, jsBuildTasks);
|
||||
gulp.task("js", function(){
|
||||
run("templates", tasks.js);
|
||||
});
|
||||
|
||||
// Build SASS (for testing, default is LESS)
|
||||
gulp.task("sass", function(){
|
||||
run(tasks.sass);
|
||||
});
|
||||
|
||||
// Watch for file changes
|
||||
gulp.task("watch", function () {
|
||||
//gulp.watch(paths.watch.templates, [taskNames.jsAll]);
|
||||
//gulp.watch(paths.watch.js, [taskNames.jsAll]);
|
||||
gulp.watch(paths.watch.less, lessBuildTasks);
|
||||
gulp.watch(paths.watch.sprite, [taskNames.iconBuild]);
|
||||
// Plyr core
|
||||
gulp.watch(paths.plyr.src.js, tasks.js);
|
||||
gulp.watch(paths.plyr.src.less, tasks.less);
|
||||
gulp.watch(paths.plyr.src.sprite, "sprite");
|
||||
|
||||
// Docs
|
||||
gulp.watch(paths.docs.src.js, tasks.js);
|
||||
gulp.watch(paths.docs.src.less, tasks.less);
|
||||
gulp.watch(paths.docs.src.templates, "js");
|
||||
});
|
||||
74
index.html
74
index.html
@ -1,74 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Plyr - A simple HTML5 media player</title>
|
||||
<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
|
||||
<meta name="author" content="Sam Potts">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="dist/css/plyr.css">
|
||||
<link rel="stylesheet" href="dist/css/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Plyr</h1>
|
||||
<p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on Github</a>
|
||||
</header>
|
||||
|
||||
<section class="example-video">
|
||||
<div class="player">
|
||||
<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
|
||||
<!-- Video files -->
|
||||
<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
||||
<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<div>
|
||||
<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
</div>
|
||||
</video>
|
||||
</div>
|
||||
<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
|
||||
</section>
|
||||
|
||||
<section class="example-audio">
|
||||
<div class="player">
|
||||
<audio controls>
|
||||
<!-- Audio files -->
|
||||
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
|
||||
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
|
||||
|
||||
<!-- Fallback for browsers that don't support the <audio> element -->
|
||||
<div>
|
||||
<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
|
||||
</div>
|
||||
</audio>
|
||||
</div>
|
||||
<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Used by …</p>
|
||||
<a href="https://selz.com" target="_blank" class="logo">
|
||||
<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<!-- Load SVG defs -->
|
||||
<script>
|
||||
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"dist/sprite.svg");
|
||||
</script>
|
||||
|
||||
<!-- Core player -->
|
||||
<script src="dist/js/plyr.js"></script>
|
||||
|
||||
<!-- Docs setup -->
|
||||
<script src="dist/js/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -12,6 +12,7 @@
|
||||
"gulp-hogan-compile": "^0.4.1",
|
||||
"gulp-less": "~1.3.1",
|
||||
"gulp-minify-css": "~0.3.6",
|
||||
"gulp-sass": "^1.3.3",
|
||||
"gulp-svgmin": "^1.0.0",
|
||||
"gulp-svgstore": "^5.0.0",
|
||||
"gulp-uglify": "~0.3.1",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,16 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("../../src/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
|
||||
url("../../src/fonts/AvenirLTStd-Medium.woff") format("woff"),
|
||||
url("../../src/fonts/AvenirLTStd-Medium.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("../../src/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
|
||||
url("../../src/fonts/AvenirLTStd-Heavy.woff") format("woff"),
|
||||
url("../../src/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -1,140 +0,0 @@
|
||||
// ==========================================================================
|
||||
// HTML5 Video Player Demo Page
|
||||
// ==========================================================================
|
||||
|
||||
// Reset
|
||||
@import "docs/normalize";
|
||||
// Mixins
|
||||
@import "docs/mixins";
|
||||
|
||||
// Variables
|
||||
// ---------------------------------------
|
||||
// Colors
|
||||
$blue: #3498DB;
|
||||
$gray-dark: #343f4a;
|
||||
$gray: #565d64;
|
||||
$gray-light: #cbd0d3;
|
||||
|
||||
// Elements
|
||||
$link-color: $blue;
|
||||
$padding-base: 20px;
|
||||
|
||||
// Breakpoints
|
||||
$screen-md: 768px;
|
||||
|
||||
// BORDER-BOX ALL THE THINGS!
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Base
|
||||
html {
|
||||
//font-size: 62.5%;
|
||||
}
|
||||
body {
|
||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: #fff;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: #6D797F;
|
||||
}
|
||||
|
||||
// Type
|
||||
h1,
|
||||
h2 {
|
||||
letter-spacing: -.025em;
|
||||
color: #2E3C44;
|
||||
margin: 0 0 ($padding-base / 2);
|
||||
line-height: 1.2;
|
||||
@include font-smoothing();
|
||||
}
|
||||
h1 {
|
||||
@include font-size(64);
|
||||
color: #3498DB;
|
||||
}
|
||||
p,
|
||||
small {
|
||||
margin: 0 0 $padding-base;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
padding: 0 ($padding-base / 2);
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
// Header
|
||||
header {
|
||||
padding: $padding-base;
|
||||
margin-bottom: $padding-base;
|
||||
|
||||
p {
|
||||
@include font-size(18);
|
||||
}
|
||||
@media (min-width: 560px) {
|
||||
padding-top: ($padding-base * 3);
|
||||
padding-bottom: ($padding-base * 3);
|
||||
}
|
||||
}
|
||||
|
||||
// Sections
|
||||
section {
|
||||
padding-bottom: $padding-base;
|
||||
|
||||
@media (min-width: 560px) {
|
||||
padding-bottom: ($padding-base * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Links & Buttons
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $link-color;
|
||||
border-bottom: 1px solid currentColor;
|
||||
transition: all .3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
}
|
||||
&:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: ($padding-base / 2) ($padding-base * 1.5);
|
||||
background: $link-color;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
@include font-smoothing(on);
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: darken($link-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
// Players
|
||||
.example-audio .player {
|
||||
max-width: 480px;
|
||||
}
|
||||
.example-video .player {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.example-audio .player,
|
||||
.example-video .player {
|
||||
margin: 0 auto $padding-base;
|
||||
|
||||
&-fullscreen,
|
||||
&.fullscreen-active {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Fonts
|
||||
// Last to not block rendering
|
||||
@import "docs/fontface.less";
|
||||
@ -1,16 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("../../src/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
|
||||
url("../../src/fonts/AvenirLTStd-Medium.woff") format("woff"),
|
||||
url("../../src/fonts/AvenirLTStd-Medium.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("../../src/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
|
||||
url("../../src/fonts/AvenirLTStd-Heavy.woff") format("woff"),
|
||||
url("../../src/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Mixins
|
||||
// ==========================================================================
|
||||
|
||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
||||
// ---------------------------------------
|
||||
@mixin clearfix()
|
||||
{
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after { content: ""; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
// Webkit-style focus
|
||||
// ---------------------------------------
|
||||
@mixin tab-focus()
|
||||
{
|
||||
// Default
|
||||
outline: thin dotted $gray-dark;
|
||||
// Webkit
|
||||
//outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
// Use rems for font sizing
|
||||
// Leave <body> at 100%/16px
|
||||
// ---------------------------------------
|
||||
@mixin font-size($font-size: 16)
|
||||
{
|
||||
$rem: round(($font-size / 16), 1);
|
||||
font-size: ($font-size * 1px);
|
||||
font-size: #{"${rem}rem"};
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// ---------------------------------------
|
||||
@mixin font-smoothing($mode: on) when ($mode = on)
|
||||
{
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@mixin font-smoothing($mode: on) when ($mode = off)
|
||||
{
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
406
src/sass/docs/normalize.scss
vendored
406
src/sass/docs/normalize.scss
vendored
@ -1,406 +0,0 @@
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@ -312,7 +312,8 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
||||
|
||||
// Volume control
|
||||
// <input[type='range']> element
|
||||
&-volume {
|
||||
// Specificty is for bootstrap compatibility
|
||||
&-volume[type=range] {
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user