SHARE
TWEET

Untitled

a guest Apr 26th, 2019 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import "../utils/mixins";
  2.  
  3. .showcase {
  4.  
  5.   &__box {
  6.    
  7.    
  8.  
  9.  
  10.    
  11.   }
  12.   &__video{
  13.    
  14.    
  15.    
  16.     width: 100%;
  17.     min-height: auto;
  18.     object-fit: cover;
  19.     object-position: center;
  20.  
  21.    
  22.    
  23.    
  24.   }
  25.   &__text {
  26.       z-index:10;
  27.     position: absolute;
  28.     top: 50%;
  29.     left: 50%;
  30.     line-height: 2em;
  31.     transform: translate(-50%, -50%);
  32.     text-align: center;
  33.     color: white;
  34.  
  35.     h2 {
  36.     }
  37.   }
  38.  
  39. }
  40. @include smartphone {
  41.   .showcase {
  42.      
  43.    
  44.     &__video{
  45.      
  46.    
  47.      
  48.      
  49.      
  50.      
  51.      
  52.     }
  53.     &__box {
  54.      
  55.        
  56.      
  57.        
  58.        
  59.       }
  60.   }
  61. }
  62. @include tablet {
  63.   .showcase {
  64.     &__text {
  65.       h1 {
  66.         font: $showcase-font-tablet;
  67.       }
  68.     }
  69.     &__video{
  70.      
  71.       display: inline-block;
  72.       position: relative; /* allows repositioning */
  73.       left: 100%; /* move the whole width of the image to the right */
  74.       margin-left: -200%;
  75.       height: 80vh;
  76.      
  77.      
  78.      
  79.      
  80.      
  81.     }
  82.     &__box {
  83.      
  84.       text-align: center; /* ensures the image is always in the h-middle */
  85. overflow: hidden;
  86.  
  87.        
  88.      
  89.        
  90.       }
  91.   }
  92. }
  93. @include desktop {
  94.   .showcase {
  95.     &__text {
  96.       top: 40%;
  97.       h1 {
  98.         font: $showcase-font-desktop;
  99.       }
  100.  
  101.     }
  102.     &__box {
  103.      
  104.       height: 100vh;
  105.      
  106.     }
  107.   }
  108. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top