From 6864149989c6a5b1bb6e9199e1f8af062c64dcc4 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Wed, 20 Dec 2017 15:14:05 +0000
Subject: Converted to SASS/SCSS

---
 demo/src/sass/components/buttons.scss    | 83 ++++++++++++++++++++++++++++++++
 demo/src/sass/components/header.scss     | 19 ++++++++
 demo/src/sass/components/icons.scss      | 23 +++++++++
 demo/src/sass/components/links.scss      | 45 +++++++++++++++++
 demo/src/sass/components/lists.scss      | 11 +++++
 demo/src/sass/components/navigation.scss |  9 ++++
 demo/src/sass/components/players.scss    | 49 +++++++++++++++++++
 7 files changed, 239 insertions(+)
 create mode 100644 demo/src/sass/components/buttons.scss
 create mode 100644 demo/src/sass/components/header.scss
 create mode 100644 demo/src/sass/components/icons.scss
 create mode 100644 demo/src/sass/components/links.scss
 create mode 100644 demo/src/sass/components/lists.scss
 create mode 100644 demo/src/sass/components/navigation.scss
 create mode 100644 demo/src/sass/components/players.scss

(limited to 'demo/src/sass/components')

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
new file mode 100644
index 00000000..db821ad3
--- /dev/null
+++ b/demo/src/sass/components/buttons.scss
@@ -0,0 +1,83 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+// Shared
+.button,
+.button__count {
+    align-items: center;
+    background: #fff;
+    border: 0;
+    border-radius: $border-radius-base;
+    box-shadow: 0 1px 1px rgba(#000, 0.1);
+    color: $gray;
+    display: inline-flex;
+    padding: ($spacing-base * 0.75);
+    position: relative;
+    text-shadow: none;
+    user-select: none;
+    vertical-align: middle;
+}
+
+// Buttons
+.button {
+    font-weight: $font-weight-bold;
+    padding-left: $spacing-base;
+    padding-right: $spacing-base;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus {
+        color: $gray-dark;
+
+        // Remove the underline/border
+        &::after {
+            display: none;
+        }
+    }
+
+    &:hover {
+        box-shadow: 0 2px 2px rgba(#000, 0.1);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    &.tab-focus {
+        @include tab-focus();
+    }
+
+    &:active {
+        transform: translateY(1px);
+    }
+}
+
+// Button group
+.button--with-count {
+    display: inline-flex;
+
+    .button .icon {
+        flex-shrink: 0;
+    }
+}
+
+// Count bubble
+.button__count {
+    animation: fadein 0.2s ease;
+    margin-left: ($spacing-base / 2);
+
+    &::before {
+        border: $arrow-size solid transparent;
+        border-left-width: 0;
+        border-right-color: #fff;
+        content: '';
+        height: 0;
+        position: absolute;
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+    }
+}
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
new file mode 100644
index 00000000..eab2214e
--- /dev/null
+++ b/demo/src/sass/components/header.scss
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Header
+// ==========================================================================
+
+header {
+    padding-bottom: $spacing-base;
+    text-align: center;
+
+    .call-to-action {
+        margin-top: ($spacing-base * 1.5);
+    }
+
+    @media only screen and (min-width: $screen-md) {
+        margin-right: ($spacing-base * 3);
+        max-width: 360px;
+        padding-bottom: ($spacing-base * 2);
+        text-align: left;
+    }
+}
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
new file mode 100644
index 00000000..b2b353a6
--- /dev/null
+++ b/demo/src/sass/components/icons.scss
@@ -0,0 +1,23 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Base size icon styles
+.icon {
+    fill: currentColor;
+    height: $icon-size;
+    vertical-align: -3px;
+    width: $icon-size;
+}
+
+// Within elements
+a svg,
+button svg,
+label svg {
+    pointer-events: none;
+}
+
+a .icon,
+.btn .icon {
+    margin-right: floor($spacing-base / 3);
+}
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
new file mode 100644
index 00000000..25780b41
--- /dev/null
+++ b/demo/src/sass/components/links.scss
@@ -0,0 +1,45 @@
+// ==========================================================================
+// Links
+// ==========================================================================
+
+// Make a <button> look like an <a>
+button.faux-link {
+    @extend a; // stylelint-disable-line
+    @include cancel-button-styles();
+}
+
+// Links
+a {
+    border-bottom: 1px dotted currentColor;
+    color: $color-link;
+    font-weight: $font-weight-bold;
+    position: relative;
+    text-decoration: none;
+    transition: all 0.2s ease;
+
+    &::after {
+        background: currentColor;
+        content: '';
+        height: 1px;
+        left: 50%;
+        position: absolute;
+        top: 100%;
+        transform: translateX(-50%);
+        transition: width 0.2s ease;
+        width: 0;
+    }
+
+    &:hover,
+    &:focus {
+        border-bottom-color: transparent;
+        outline: 0;
+
+        &::after {
+            width: 100%;
+        }
+    }
+
+    &.tab-focus {
+        @include tab-focus();
+    }
+}
diff --git a/demo/src/sass/components/lists.scss b/demo/src/sass/components/lists.scss
new file mode 100644
index 00000000..bae3d11d
--- /dev/null
+++ b/demo/src/sass/components/lists.scss
@@ -0,0 +1,11 @@
+// ==========================================================================
+// Lists
+// ==========================================================================
+
+// Lists
+ul,
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
diff --git a/demo/src/sass/components/navigation.scss b/demo/src/sass/components/navigation.scss
new file mode 100644
index 00000000..fe14c000
--- /dev/null
+++ b/demo/src/sass/components/navigation.scss
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+nav {
+    display: flex;
+    justify-content: center;
+    margin-bottom: $spacing-base;
+}
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
new file mode 100644
index 00000000..90e2bc94
--- /dev/null
+++ b/demo/src/sass/components/players.scss
@@ -0,0 +1,49 @@
+// ==========================================================================
+// Examples
+// ==========================================================================
+
+// For non supported browsers
+video {
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+// Example players
+.plyr {
+    border-radius: $border-radius-base;
+    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    margin: $spacing-base auto;
+
+    &.plyr--audio {
+        max-width: 480px;
+    }
+}
+
+.plyr__video-wrapper::after {
+    border: 1px solid rgba(#000, 0.15);
+    border-radius: inherit;
+    bottom: 0;
+    content: '';
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+// Style full supported player
+.plyr__cite {
+    display: none;
+    margin-top: $spacing-base;
+
+    .icon {
+        margin-right: ceil($spacing-base / 6);
+    }
+}
+
+.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
+.plyr--audio ~ ul .plyr__cite--audio,
+.plyr--youtube ~ ul .plyr__cite--youtube,
+.plyr--vimeo ~ ul .plyr__cite--vimeo {
+    display: block;
+}
-- 
cgit v1.2.3


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/components/links.scss |  4 ++++
 demo/src/sass/components/media.scss | 10 ++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 demo/src/sass/components/media.scss

(limited to 'demo/src/sass/components')

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;
+}
-- 
cgit v1.2.3


From 73a39769d4cc3d5d04e272ca571c849a0d8adfd6 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 11 Feb 2018 15:09:34 +1100
Subject: Fullscreen API changes, color settings tweaks

---
 demo/src/sass/components/buttons.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'demo/src/sass/components')

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index db821ad3..1b2d652e 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,11 @@
 .button,
 .button__count {
     align-items: center;
-    background: #fff;
+    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $gray;
+    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -71,7 +71,7 @@
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: #fff;
+        border-right-color: $color-button-background;
         content: '';
         height: 0;
         position: absolute;
-- 
cgit v1.2.3