From ae0eec312cf9928351f5bddea6d7b577086f053b Mon Sep 17 00:00:00 2001
From: heff <git@heff.me>
Date: Tue, 28 Apr 2015 13:25:04 -0700
Subject: [PATCH] Switched to box-sizing:border-box for all player elements

This doesn't immediately break anything (I know of) because the controls
were originally designed to work in both border-box and content-box
environments. Extra elements were added to create internally padding.

This does open the door for some simplification of the HTML, though the extra
elements could still be useful for extra skin design options.

closes #2082
closes #1444
---
 CHANGELOG.md                    |  1 +
 src/css/components/_layout.scss | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66967a102..93969853b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ CHANGELOG
 * @gkatsev removed event.isDefaultPrevented in favor of event.defaultPrevented ([view](https://github.com/videojs/video.js/pull/2081))
 * @heff added and `extends` function for external subclassing ([view](https://github.com/videojs/video.js/pull/2078))
 * @forbesjo added the `scrubbing` property ([view](https://github.com/videojs/video.js/pull/2080))
+* @heff switched to border-box sizing for all player elements ([view](https://github.com/videojs/video.js/pull/2082))
 
 --------------------
 
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index b646d67dc..371bead21 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -1,5 +1,7 @@
 .video-js {
-  display: border-box;
+  display: block;
+  box-sizing: border-box;
+
   color: $primary-text;
   background-color: $primary-bg;
   position: relative;
@@ -28,6 +30,13 @@
   }
 }
 
+/* All elements inherit border-box sizing */
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit;
+}
+
 /* Playback technology elements expand to the width/height of the containing div
 <video> or <object> */
 .video-js .vjs-tech {