Split LESS into more granular files, Vimeo fixes

demo/src/less/components/buttons.less

@@ -10,12 +10,10 @@
     vertical-align: middle;
     align-items: center;
     padding: (@spacing-base * 0.75);
-
     border-radius: @border-radius-base;
     box-shadow: 0 1px 1px fade(#000, 10%);
     background: #fff;
     border: 0;
-
     color: @gray;
     user-select: none;
     font-weight: @font-weight-bold;
@@ -56,7 +54,6 @@
         right: 100%;
         top: 50%;
         transform: translateY(-50%);
-
         border: @arrow-size solid transparent;
         border-right-color: #fff;
         border-left-width: 0;

demo/src/less/components/header.less

@@ -7,8 +7,8 @@ header {
     text-align: center;
 
     p {
-        .font-size(@font-size-large);
         margin-bottom: (@spacing-base * 1.5);
+        .font-size(@font-size-large);
     }
 
     @media @mq-md {

demo/src/less/components/players.less

@@ -14,6 +14,7 @@ video {
     border-radius: @border-radius-base;
     box-shadow: 0 2px 5px fade(#000, 20%);
 }
+
 .plyr__video-wrapper::after {
     content: '';
     pointer-events: none;

demo/src/less/lib/animation.less

@@ -7,6 +7,7 @@
     0% {
         opacity: 0;
     }
+
     100% {
         opacity: 1;
     }

demo/src/less/lib/fontface.less

@@ -3,27 +3,27 @@
 // ==========================================================================
 
 @font-face {
-    font-family: "Avenir";
-    src: url("https://cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"),
-        url("https://cdn.plyr.io/static/fonts/avenir-medium.woff") format("woff");
+    font-family: 'Avenir';
+    src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
     font-style: normal;
     font-weight: @font-weight-base;
     font-display: swap;
 }
 
 @font-face {
-    font-family: "Avenir";
-    src: url("https://cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"),
-        url("https://cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff");
+    font-family: 'Avenir';
+    src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
     font-style: normal;
     font-weight: @font-weight-bold;
     font-display: swap;
 }
 
 @font-face {
-    font-family: "Avenir";
-    src: url("https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3") format("woff2"),
-        url("https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3") format("woff");
+    font-family: 'Avenir';
+    src: url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff');
     font-style: normal;
     font-weight: @font-weight-heavy;
     font-display: swap;

demo/src/less/lib/normalize.less

@@ -189,7 +189,7 @@ pre {
  */
 
 q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
+    quotes: '\201C' '\201D' '\2018' '\2019';
 }
 
 /**
@@ -322,9 +322,9 @@ select {
  */
 
 button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
     -webkit-appearance: button; /* 2 */
     cursor: pointer; /* 3 */
 }
@@ -343,8 +343,8 @@ html input[disabled] {
  * 2. Remove excess padding in IE 8/9/10.
  */
 
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
 }
@@ -355,7 +355,7 @@ input[type="radio"] {
  *    (include `-moz` to future-proof).
  */
 
-input[type="search"] {
+input[type='search'] {
     -webkit-appearance: textfield; /* 1 */
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box; /* 2 */
@@ -367,8 +367,8 @@ input[type="search"] {
  * on OS X.
  */
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
@@ -403,4 +403,4 @@ textarea {
 table {
     border-collapse: collapse;
     border-spacing: 0;
-}
+}

demo/src/less/settings/breakpoints.less

@@ -5,5 +5,5 @@
 @screen-sm: 480px;
 @screen-md: 768px;
 
-@mq-sm: ~"only screen and (min-width: @{screen-sm}) ";
-@mq-md: ~"only screen and (min-width: @{screen-md}) ";
+@mq-sm: ~'only screen and (min-width: @{screen-sm}) ';
+@mq-md: ~'only screen and (min-width: @{screen-md}) ';

demo/src/less/type/base.less

@@ -12,8 +12,8 @@ body {
     line-height: @line-height-base;
     color: @color-text;
     font-weight: @font-weight-base;
-    .font-smoothing();
     text-shadow: 0 1px 1px fade(#000, 15%);
+    .font-smoothing();
 }
 
 button,
@@ -27,6 +27,7 @@ p,
 small {
     margin: 0 0 @spacing-base;
 }
+
 small {
     display: block;
     .font-size(@font-size-small);

demo/src/less/utilities/color.less

@@ -5,6 +5,7 @@
 .color--vimeo {
     color: @color-vimeo;
 }
+
 .color--youtube {
     color: @color-youtube;
 }