From 5e68f8c8ddd11070a2b2ee11339be8c2c37ed8a5 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Thu, 25 Jan 2018 22:41:30 +1100
Subject: Attempt to fix YouTube message error, added ads references, changes
 to bool

---
 demo/src/sass/bundles/demo.scss       |  5 +++++
 demo/src/sass/components/links.scss   |  4 ++++
 demo/src/sass/components/media.scss   | 10 ++++++++++
 demo/src/sass/utilities/color.scss    | 11 -----------
 demo/src/sass/utilities/cosmetic.scss |  7 +++++++
 demo/src/sass/utilities/hidden.scss   | 13 +++++++++++++
 6 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 demo/src/sass/components/media.scss
 delete mode 100644 demo/src/sass/utilities/color.scss
 create mode 100644 demo/src/sass/utilities/cosmetic.scss

(limited to 'demo/src/sass')

diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss
index 96438483..2f89b858 100644
--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@@ -34,8 +34,13 @@
 @import '../components/icons';
 @import '../components/links';
 @import '../components/lists';
+@import '../components/media';
 @import '../components/navigation';
 @import '../components/players';
 
 // Plyr
 @import '../../../../src/sass/plyr';
+
+// Utils
+@import '../utilities/cosmetic';
+@import '../utilities/hidden';
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index 25780b41..b2930862 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -42,4 +42,8 @@ a {
     &.tab-focus {
         @include tab-focus();
     }
+
+    &.no-border::after {
+        display: none;
+    }
 }
diff --git a/demo/src/sass/components/media.scss b/demo/src/sass/components/media.scss
new file mode 100644
index 00000000..c6744bcc
--- /dev/null
+++ b/demo/src/sass/components/media.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// Basic media
+// ==========================================================================
+
+img,
+video,
+audio {
+    max-width: 100%;
+    vertical-align: middle;
+}
diff --git a/demo/src/sass/utilities/color.scss b/demo/src/sass/utilities/color.scss
deleted file mode 100644
index 786e6ccb..00000000
--- a/demo/src/sass/utilities/color.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// ==========================================================================
-// Color
-// ==========================================================================
-
-.color--vimeo {
-    color: $color-vimeo;
-}
-
-.color--youtube {
-    color: $color-youtube;
-}
diff --git a/demo/src/sass/utilities/cosmetic.scss b/demo/src/sass/utilities/cosmetic.scss
new file mode 100644
index 00000000..91374d9d
--- /dev/null
+++ b/demo/src/sass/utilities/cosmetic.scss
@@ -0,0 +1,7 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+.no-border {
+    border: 0;
+}
diff --git a/demo/src/sass/utilities/hidden.scss b/demo/src/sass/utilities/hidden.scss
index a48b107a..665bfd76 100644
--- a/demo/src/sass/utilities/hidden.scss
+++ b/demo/src/sass/utilities/hidden.scss
@@ -5,3 +5,16 @@
 [hidden] {
     display: none;
 }
+
+// Hide only visually, but have it available for screen readers: h5bp.com/v
+.sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    opacity: 0.001;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
-- 
cgit v1.2.3