ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Demo tweaks

Browse Source
This commit is contained in:
Sam Potts 2019-06-03 00:26:08 +10:00
parent 1890a9378d
commit d9d2c4a219
12 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

6
demo/dist/demo.js vendored
View File

@ -22776,7 +22776,11 @@ typeof navigator === "object" && (function () {
} }
this.getThumbnails().then(function () { this.getThumbnails().then(function () {
// Render DOM elements if (!_this.enabled) {
return;
} // Render DOM elements
_this.render(); // Check to see if thumb container size was specified manually in CSS _this.render(); // Check to see if thumb container size was specified manually in CSS

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/error.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/index.html
View File

@ -66,7 +66,7 @@
<body> <body>
<div class="grid"> <div class="grid">
<header> <header>
<h1>Plyr</h1> <h1>Pl<span>a</span>y<span>e</span>r</h1>
<p> <p>
A simple, accessible and customisable media player for A simple, accessible and customisable media player for
<button type="button" class="faux-link" data-source="video"> <button type="button" class="faux-link" data-source="video">

8
demo/src/sass/components/buttons.scss
View File

@ -22,13 +22,13 @@
// Buttons // Buttons
.button { .button {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
padding-left: $spacing-base; padding-left: ($spacing-base * 1.25);
padding-right: $spacing-base; padding-right: ($spacing-base * 1.25);
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover, &:hover,
&:focus { &:focus {
color: $gray-dark; color: $color-button-text-hover;
// Remove the underline/border // Remove the underline/border
&::after { &::after {
@ -65,7 +65,7 @@
// Count bubble // Count bubble
.button__count { .button__count {
animation: fadein 0.2s ease; animation: fadein 0.2s ease;
margin-left: ($spacing-base / 2); margin-left: ($spacing-base * 0.75);
&::before { &::before {
border: $arrow-size solid transparent; border: $arrow-size solid transparent;

15
demo/src/sass/components/header.scss
View File

@ -6,12 +6,15 @@ header {
padding-bottom: $spacing-base; padding-bottom: $spacing-base;
text-align: center; text-align: center;
.call-to-action { h1 span {
margin-top: ($spacing-base * 1.5); animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
display: inline-block;
font-weight: $font-weight-light;
opacity: 0.5;
} }
p:first-of-type { .call-to-action {
@include font-size(16); margin-top: ($spacing-base * 1.5);
} }
@media only screen and (min-width: $screen-md) { @media only screen and (min-width: $screen-md) {
@ -19,5 +22,9 @@ header {
max-width: 360px; max-width: 360px;
padding-bottom: ($spacing-base * 2); padding-bottom: ($spacing-base * 2);
text-align: left; text-align: left;
p:first-of-type {
@include font-size($font-size-large);
}
} }
} }

14
demo/src/sass/lib/animation.scss
View File

@ -11,3 +11,17 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes shrinkHide {
0% {
opacity: 0.5;
width: 38px;
}
20% {
width: 45px;
}
100% {
opacity: 0;
width: 0;
}
}

8
demo/src/sass/settings/colors.scss
View File

@ -5,20 +5,15 @@
// Greyscale // Greyscale
$gray-dark: #343f4a; $gray-dark: #343f4a;
$gray: #55646b; $gray: #55646b;
$gray-light: #cbd0d3;
$gray-lighter: #dbe3e8;
$off-white: #f2f5f7;
// Text // Text
$color-text: #fff; $color-text: #fff;
// Plyr // Plyr
$color-brand-primary: #1aafff; $color-brand-primary: #1aafff; // #7bc47f
// Brands // Brands
$color-twitter: #4baaf4; $color-twitter: #4baaf4;
$color-youtube: #cc181e;
$color-vimeo: #19b7ed;
// Elements // Elements
$color-link: #fff; $color-link: #fff;
@ -27,6 +22,7 @@ $color-background: $color-brand-primary;
// Buttons // Buttons
$color-button-background: #fff; $color-button-background: #fff;
$color-button-text: $gray; $color-button-text: $gray;
$color-button-text-hover: $gray-dark;
// Focus // Focus
$tab-focus-default-color: #fff; $tab-focus-default-color: #fff;

2
demo/src/sass/type/base.scss
View File

@ -26,7 +26,7 @@ textarea {
p, p,
small { small {
margin: 0 0 $spacing-base; margin: 0 0 ($spacing-base * 1.5);
} }
small { small {

4
demo/src/sass/type/headings.scss
View File

@ -4,8 +4,8 @@
h1 { h1 {
@include font-size($font-size-h1); @include font-size($font-size-h1);
font-weight: $font-weight-bold; font-weight: $font-weight-medium;
letter-spacing: $letter-spacing-headings; letter-spacing: $letter-spacing-headings;
line-height: 1.2; line-height: 1.2;
margin: 0 0 $spacing-base; margin: 0 0 ($spacing-base * 1.5);
} }