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": {
|
"less": {
|
||||||
"plyr.css": ["src/less/plyr.less"],
|
"plyr.css": ["src/less/plyr.less"]
|
||||||
"docs.css": ["src/less/docs.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": {
|
"js": {
|
||||||
"plyr.js": ["src/js/plyr.js"],
|
|
||||||
"docs.js": [
|
"docs.js": [
|
||||||
"src/js/lib/hogan-3.0.2.mustache.js",
|
"docs/src/js/lib/hogan-3.0.2.mustache.js",
|
||||||
"dist/js/templates.js",
|
"docs/dist/js/templates.js",
|
||||||
"src/js/docs.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
|
// Reset
|
||||||
@import "docs/normalize.less";
|
@import "lib/normalize.less";
|
||||||
// Mixins
|
// Mixins
|
||||||
@import "docs/mixins.less";
|
@import "lib/mixins.less";
|
||||||
|
// Fonts - docs only!
|
||||||
|
@import "lib/fontface.less";
|
||||||
|
|
||||||
// Variables
|
// Variables
|
||||||
// ---------------------------------------
|
// ---------------------------------------
|
||||||
@ -147,7 +149,3 @@ footer {
|
|||||||
margin-bottom: (@padding-base / 2);
|
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;
|
||||||
|
}
|
||||||
168
gulpfile.js
168
gulpfile.js
@ -10,8 +10,9 @@ var fs = require("fs"),
|
|||||||
concat = require("gulp-concat"),
|
concat = require("gulp-concat"),
|
||||||
uglify = require("gulp-uglify"),
|
uglify = require("gulp-uglify"),
|
||||||
less = require("gulp-less"),
|
less = require("gulp-less"),
|
||||||
minifyCss = require("gulp-minify-css"),
|
sass = require("gulp-sass"),
|
||||||
runSequence = require("run-sequence"),
|
minify = require("gulp-minify-css"),
|
||||||
|
run = require("run-sequence"),
|
||||||
prefix = require("gulp-autoprefixer"),
|
prefix = require("gulp-autoprefixer"),
|
||||||
svgstore = require("gulp-svgstore"),
|
svgstore = require("gulp-svgstore"),
|
||||||
svgmin = require("gulp-svgmin"),
|
svgmin = require("gulp-svgmin"),
|
||||||
@ -19,12 +20,13 @@ var fs = require("fs"),
|
|||||||
|
|
||||||
var root = __dirname,
|
var root = __dirname,
|
||||||
paths = {
|
paths = {
|
||||||
// Watch paths
|
plyr: {
|
||||||
watch: {
|
// Source paths
|
||||||
|
src: {
|
||||||
less: path.join(root, "src/less/**/*"),
|
less: path.join(root, "src/less/**/*"),
|
||||||
|
sass: path.join(root, "src/sass/**/*"),
|
||||||
js: path.join(root, "src/js/**/*"),
|
js: path.join(root, "src/js/**/*"),
|
||||||
sprite: path.join(root, "src/sprite/*.svg"),
|
sprite: path.join(root, "src/sprite/*.svg")
|
||||||
templates: path.join(root, "src/templates/*.html"),
|
|
||||||
},
|
},
|
||||||
// Output paths
|
// Output paths
|
||||||
output: {
|
output: {
|
||||||
@ -33,18 +35,27 @@ var root = __dirname,
|
|||||||
sprite: path.join(root, "dist/")
|
sprite: path.join(root, "dist/")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
docs: {
|
||||||
// Task names
|
// Source paths
|
||||||
taskNames = {
|
src: {
|
||||||
jsAll: "js-all",
|
less: path.join(root, "docs/src/less/**/*"),
|
||||||
lessBuild: "less-",
|
js: path.join(root, "docs/src/js/**/*"),
|
||||||
jsBuild: "js-",
|
templates: path.join(root, "docs/src/templates/*.html")
|
||||||
sprite: "sprite-build",
|
|
||||||
templates: "templates"
|
|
||||||
},
|
},
|
||||||
|
// Output paths
|
||||||
|
output: {
|
||||||
|
js: path.join(root, "docs/dist/js/"),
|
||||||
|
css: path.join(root, "docs/dist/css/")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// Task arrays
|
// Task arrays
|
||||||
lessBuildTasks = [],
|
tasks = {
|
||||||
jsBuildTasks = [],
|
less: [],
|
||||||
|
sass: [],
|
||||||
|
js: []
|
||||||
|
},
|
||||||
|
|
||||||
// Fetch bundles from JSON
|
// Fetch bundles from JSON
|
||||||
bundles = loadJSON(path.join(root, "bundles.json"));
|
bundles = loadJSON(path.join(root, "bundles.json"));
|
||||||
@ -54,81 +65,126 @@ function loadJSON(path) {
|
|||||||
return JSON.parse(fs.readFileSync(path));
|
return JSON.parse(fs.readFileSync(path));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Build templates
|
var build = {
|
||||||
gulp.task(taskNames.templates, function () {
|
js: function (files, bundle, output) {
|
||||||
return gulp
|
for (var key in files) {
|
||||||
.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) {
|
|
||||||
(function(key) {
|
(function(key) {
|
||||||
var taskName = taskNames.jsBuild + key;
|
var name = "js-" + key;
|
||||||
jsBuildTasks.push(taskName);
|
tasks.js.push(name);
|
||||||
|
|
||||||
gulp.task(taskName, function () {
|
gulp.task(name, function () {
|
||||||
return gulp
|
return gulp
|
||||||
.src(bundles.js[key])
|
.src(bundles[bundle].js[key])
|
||||||
.pipe(concat(key))
|
.pipe(concat(key))
|
||||||
.pipe(uglify())
|
.pipe(uglify())
|
||||||
.pipe(gulp.dest(paths.output.js));
|
.pipe(gulp.dest(output));
|
||||||
});
|
});
|
||||||
})(key);
|
})(key);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
// Process CSS
|
less: function(files, bundle, output) {
|
||||||
for (var key in bundles.less) {
|
for (var key in files) {
|
||||||
(function (key) {
|
(function (key) {
|
||||||
var taskName = taskNames.lessBuild + key;
|
var name = "less-" + key;
|
||||||
lessBuildTasks.push(taskName);
|
tasks.less.push(name);
|
||||||
|
|
||||||
gulp.task(taskName, function () {
|
gulp.task(name, function () {
|
||||||
return gulp
|
return gulp
|
||||||
.src(bundles.less[key])
|
.src(bundles[bundle].less[key])
|
||||||
.pipe(less())
|
.pipe(less())
|
||||||
.on("error", gutil.log)
|
.on("error", gutil.log)
|
||||||
.pipe(concat(key))
|
.pipe(concat(key))
|
||||||
.pipe(prefix(["last 2 versions"], { cascade: true }))
|
.pipe(prefix(["last 2 versions"], { cascade: true }))
|
||||||
.pipe(minifyCss())
|
.pipe(minify())
|
||||||
.pipe(gulp.dest(paths.output.css));
|
.pipe(gulp.dest(output));
|
||||||
});
|
});
|
||||||
})(key);
|
})(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(name, function () {
|
||||||
gulp.task(taskNames.sprite, function () {
|
|
||||||
return gulp
|
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({
|
.pipe(svgmin({
|
||||||
plugins: [{
|
plugins: [{
|
||||||
removeDesc: true
|
removeDesc: true
|
||||||
}]
|
}]
|
||||||
}))
|
}))
|
||||||
.pipe(svgstore())
|
.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
|
// Default gulp task
|
||||||
gulp.task("default", function(){
|
gulp.task("default", function(){
|
||||||
runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch"));
|
run("templates", tasks.js, tasks.less, "sprite");
|
||||||
});
|
});
|
||||||
|
|
||||||
// Build all JS (inc. templates)
|
// Build all JS (inc. templates)
|
||||||
gulp.task(taskNames.jsAll, function(){
|
gulp.task("js", function(){
|
||||||
runSequence(taskNames.templates, jsBuildTasks);
|
run("templates", tasks.js);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Build SASS (for testing, default is LESS)
|
||||||
|
gulp.task("sass", function(){
|
||||||
|
run(tasks.sass);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Watch for file changes
|
// Watch for file changes
|
||||||
gulp.task("watch", function () {
|
gulp.task("watch", function () {
|
||||||
//gulp.watch(paths.watch.templates, [taskNames.jsAll]);
|
// Plyr core
|
||||||
//gulp.watch(paths.watch.js, [taskNames.jsAll]);
|
gulp.watch(paths.plyr.src.js, tasks.js);
|
||||||
gulp.watch(paths.watch.less, lessBuildTasks);
|
gulp.watch(paths.plyr.src.less, tasks.less);
|
||||||
gulp.watch(paths.watch.sprite, [taskNames.iconBuild]);
|
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-hogan-compile": "^0.4.1",
|
||||||
"gulp-less": "~1.3.1",
|
"gulp-less": "~1.3.1",
|
||||||
"gulp-minify-css": "~0.3.6",
|
"gulp-minify-css": "~0.3.6",
|
||||||
|
"gulp-sass": "^1.3.3",
|
||||||
"gulp-svgmin": "^1.0.0",
|
"gulp-svgmin": "^1.0.0",
|
||||||
"gulp-svgstore": "^5.0.0",
|
"gulp-svgstore": "^5.0.0",
|
||||||
"gulp-uglify": "~0.3.1",
|
"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
|
// Volume control
|
||||||
// <input[type='range']> element
|
// <input[type='range']> element
|
||||||
&-volume {
|
// Specificty is for bootstrap compatibility
|
||||||
|
&-volume[type=range] {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user