Merge pull request vb#21 from XhmikosR/xmr-sass

Improve Sass files.
jmartsch · Jan 2, 2019 · a35b623 · a35b623
2 parents 4bd2974 + 2a1d61f
commit a35b623
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 79 deletions.
diff --git a/src/scss/base.scss → src/scss/_base.scss b/src/scss/base.scss → src/scss/_base.scss
@@ -1,40 +1,47 @@
-.lazyframe{
+.lazyframe {
   position: relative;
-  
+
   background-color: currentColor;
   background-repeat: no-repeat;
   background-size: cover;
-  
-  &__title{
+
+  &__title {
     position: absolute;
-    top: 0; left: 0; right: 0;
+    top: 0;
+    right: 0;
+    left: 0;
     padding: 15px 17px;
     z-index: 3;
-    
-    &:after{
+
+    &::after {
       z-index: -1;
-    }    
-  
+    }
+
   }
 
-  &:hover{
+  &:hover {
     cursor: pointer;
-  }  
+  }
 
-  &:before{
+  &::before {
     display: block;
     content: "";
     width: 100%;
     padding-top: 100%;
   }
 
-  &[data-ratio="16:9"]:before { padding-top: 56.25%; }
-  &[data-ratio="4:3"]:before { padding-top: 75%; }
-  &[data-ratio="1:1"]:before { padding-top: 100%; }
+  &[data-ratio="16:9"]::before { padding-top: 56.25%; }
+
+  &[data-ratio="4:3"]::before { padding-top: 75%; }
+
+  &[data-ratio="1:1"]::before { padding-top: 100%; }
 
-  iframe{
+  iframe {
     position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 5;
     width: 100%;
     height: 100%;

diff --git a/src/scss/themes/_vimeo.scss b/src/scss/themes/_vimeo.scss
@@ -1,45 +1,40 @@
 .lazyframe[data-vendor="vimeo"] {
   background-color: #00adef;
-  
-  .lazyframe__title{
-    font-family: "Helvetica Neue", Helvetica, Arial;
+
+  .lazyframe__title {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #00adef;
     font-size: 20px;
-    font-weight: bold;
+    font-weight: 700;
     text-rendering: optimizeLegibility;
     user-select: none;
     -webkit-font-smoothing: auto;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, .5);
   }
 
-  &:before{
+  &::before {
     padding-top: 48.25%;
   }
 
-  &[data-ratio="16:9"]:before { padding-top: 56.25%; }
-  &[data-ratio="4:3"]:before { padding-top: 75%; }
-  &[data-ratio="1:1"]:before { padding-top: 100%; }
-
-  &:after{
-    content: '';
+  &::after {
+    content: "";
     height: 40px;
     width: 65px;
     display: block;
-    position: absolute;
     bottom: 10px;
     left: 10px;
     z-index: 3;
-    background-color: rgba(0, 0, 0, 0.5);
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYmFzZVByb2ZpbGU9InRpbnkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuNzY1IDE2Ljg5bDguNDctNC44OS04LjQ3LTQuODkiLz48L3N2Zz4=");
+    background-color: rgba(0, 0, 0, .5);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' baseProfile='tiny' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFF' d='M7.765 16.89l8.47-4.89-8.47-4.89'/%3E%3C/svg%3E");
     background-position: center center;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     border-radius: 5px;
     position: relative;
   }
 
-  &:hover:after{
+  &:hover::after {
     background-color: #00adef;
   }
 

diff --git a/src/scss/themes/_vine.scss b/src/scss/themes/_vine.scss
@@ -1,57 +1,52 @@
-.lazyframe[data-vendor="vine"]{
+.lazyframe[data-vendor="vine"] {
   background-color: #00bf8f;
 
-  .lazyframe__title{
+  .lazyframe__title {
     color: #fff;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     line-height: 16px;
     white-space: nowrap;
     z-index: 3;
-    positon: relative;
-    
-    &:after{
-      content: '';
+    position: relative;
+
+    &::after {
+      content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: -1;
       height: 115px;
       padding: 24px 70px 24px 24px;
-      background: linear-gradient(to top,rgba(23,23,23,0) 0,rgba(23,23,23,.7) 100%);
-      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#b3171717", endColorstr="#00171717", GradientType=0 );
+      background-image: linear-gradient(to top, rgba(23, 23, 23, 0) 0, rgba(23, 23, 23, .7) 100%);
     }
 
   }
 
-  &:before{
-    padding-top:100%;
+  &::before {
+    padding-top: 100%;
   }
 
-  &[data-ratio="16:9"]:before { padding-top: 56.25%; }
-  &[data-ratio="4:3"]:before { padding-top: 75%; }
-  &[data-ratio="1:1"]:before { padding-top: 100%; }
-
-  &:after{
-    content: '';
+  &::after {
+    content: "";
     width: 60px;
     height: 60px;
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: 4;
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiB2aWV3Qm94PSIwIDAgMTM2IDEzNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTU2IDQ0Yy0uNyAwLTEuNC4yLTIgLjUtMS4yLjgtMiAyLTIgMy41djQwYzAgMS40LjggMi44IDIgMy41LjYuMyAxLjMuNSAyIC41czEuNC0uMiAyLS41bDM0LjYtMjBjMS4zLS43IDItMiAyLTMuNSAwLTEuNC0uNy0yLjgtMi0zLjVMNTggNDQuNWMtLjYtLjMtMS4zLS41LTItLjV6Ii8+PC9zdmc+');
-    background-color: rgba(0,0,0,.5);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='136' viewBox='0 0 136 136'%3E%3Cpath fill='%23FFF' d='M56 44c-.7 0-1.4.2-2 .5-1.2.8-2 2-2 3.5v40c0 1.4.8 2.8 2 3.5.6.3 1.3.5 2 .5s1.4-.2 2-.5l34.6-20c1.3-.7 2-2 2-3.5 0-1.4-.7-2.8-2-3.5L58 44.5c-.6-.3-1.3-.5-2-.5z'/%3E%3C/svg%3E");
+    background-color: rgba(0, 0, 0, .5);
     background-size: cover;
     background-repeat: no-repeat;
     margin-top: -30px;
     margin-left: -30px;
-    border-radius: 50%;  
+    border-radius: 50%;
   }
 
-  &:hover:after{
-    background-color: rgba(0,0,0,.75);
+  &:hover::after {
+    background-color: rgba(0, 0, 0, .75);
   }
 
 }
diff --git a/src/scss/themes/_youtube.scss b/src/scss/themes/_youtube.scss
@@ -1,24 +1,25 @@
-.lazyframe[data-vendor="youtube"], .lazyframe[data-vendor="youtube_nocookie"]{
+.lazyframe[data-vendor="youtube"],
+.lazyframe[data-vendor="youtube_nocookie"] {
   background-color: #e52d27;
   font-family: Roboto, Arial, Helvetica, sans-serif;
-  
-  .lazyframe__title{
+
+  .lazyframe__title {
     color: rgb(238, 238, 238);
     font-family: Roboto, Arial, Helvetica, sans-serif;
     font-size: 18px;
-    text-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 2px;
+    text-shadow: rgba(0, 0, 0, .498039) 0 0 2px;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    transition: color .1s cubic-bezier(0.4,0.0,1,1);
-  
-    &:hover{
+    transition: color .1s cubic-bezier(.4, 0, 1, 1);
+
+    &:hover {
       color: #fff;
     }
-    
-    &:before{
-      content: '';
+
+    &::before {
+      content: "";
       display: block;
-      background: linear-gradient(rgba(0,0,0,0.2), transparent);
+      background: linear-gradient(rgba(0, 0, 0, .2), transparent);
       height: 98px;
       width: 100%;
       pointer-events: none;
@@ -31,37 +32,33 @@
     }
 
   }
-  
-  &:before{
+
+  &::before {
     padding-top: 56.25%;
   }
 
-  &[data-ratio="16:9"]:before { padding-top: 56.25%; }
-  &[data-ratio="4:3"]:before { padding-top: 75%; }
-  &[data-ratio="1:1"]:before { padding-top: 100%; }
-
-  &:after{
-    content: '';
+  &::after {
+    content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     width: 68px;
     height: 48px;
     margin-left: -34px;
     margin-top: -24px;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjIzFmMWYxZiIvPjxwYXRoIGQ9Ik0yMDMuMiAzNDRWMTg1LjVMMzQ4IDI2NC44IDIwMy4yIDM0NHoiIGZpbGw9IiNGRUZERkQiLz48L3N2Zz4=");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231F1F1F' d='M255.7 446.3c-53.3.3-106.6-.4-159.8-3.3-17.4-1-34.7-2.5-50.4-11C35 426.3 27 418.4 22 407.2 13.2 388.6 10.5 369 9 349c-3.4-41.3-3.6-82.6-1.8-123.8 1-22 1.6-44 6.8-65.5 2-8.4 5-16.6 8.8-24.4C32 117 48 108 67.3 104c16.2-3 32.8-3 49.3-3.7 56-2.3 112-3.5 168-3 43 .6 86.2 1.7 129.3 4 13.2.6 26.6.8 39.3 5.5 17.2 6.4 30 17.2 37 34.7 6.6 16.8 9.2 34.2 10.6 52 3.8 48.7 4 97.3.7 146-1 16.3-2.2 32.7-6.5 48.8-9.7 37-32.8 51.5-66.7 53.8-36.2 2.5-72.5 3.8-108.8 4.3-21.3.2-42.7 0-64 0zM203.2 344L348 264.7l-144.8-79.3V344z'/%3E%3Cpath fill='%23FEFDFD' d='M203.2 344V185.5L348 264.8 203.2 344z'/%3E%3C/svg%3E");
     background-position: center center;
     background-size: 100%;
     background-repeat: no-repeat;
     opacity: .81;
-    
+
     border: none;
     z-index: 4;
   }
-  
-  &:hover:after{
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yIDM0NFYxODUuNUwzNDggMjY0LjggMjAzLjIgMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvc3ZnPg==");
+
+  &:hover::after {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23DD2C28' d='M255.7 446.3c-53.3.3-106.6-.4-159.8-3.3-17.4-1-34.7-2.5-50.4-11C35 426.3 27 418.4 22 407.2 13.2 388.6 10.5 369 9 349c-3.4-41.3-3.6-82.6-1.8-123.8 1-22 1.6-44 6.8-65.5 2-8.4 5-16.6 8.8-24.4C32 117 48 108 67.3 104c16.2-3 32.8-3 49.3-3.7 56-2.3 112-3.5 168-3 43 .6 86.2 1.7 129.3 4 13.2.6 26.6.8 39.3 5.5 17.2 6.4 30 17.2 37 34.7 6.6 16.8 9.2 34.2 10.6 52 3.8 48.7 4 97.3.7 146-1 16.3-2.2 32.7-6.5 48.8-9.7 37-32.8 51.5-66.7 53.8-36.2 2.5-72.5 3.8-108.8 4.3-21.3.2-42.7 0-64 0zM203.2 344L348 264.7l-144.8-79.3V344z'/%3E%3Cpath fill='%23FEFDFD' d='M203.2 344V185.5L348 264.8 203.2 344z'/%3E%3C/svg%3E");
     opacity: 1;
   }
-  
+
 }