SHARE
TWEET

Untitled

a guest Aug 20th, 2019 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $blue-button-gradient: linear-gradient(100deg, #82c5ff, #40a6ff);
  2. $blue-btn-shadow: 0 4px 6px 0 rgba(57, 152, 235, 0.38);
  3. $shadow_grey: 0 15px 18px 0 rgba(0, 0, 0, 0.05);
  4. $shadow_select: 1px 1px 10px 0 rgba(0, 0, 0, 0.07);
  5.  
  6. $error-height: 30px;
  7.  
  8. $galleryTransitionFunction: all 700ms cubic-bezier(0.33, -0.05, 0.21, 1.04);
  9.  
  10. @mixin galleryActiveTransition($opacity) {
  11.   opacity: $opacity;
  12.   transition: $galleryTransitionFunction;
  13. }
  14.  
  15. $bold: 800;
  16. $medium: 600;
  17. $regular: 400;
  18.  
  19. $headerHeight: 80px;
  20. $headerHeightMobile: 58px;
  21. $headerWithSearchBarHeightMobile: 123px;
  22. $galleryHeight: 65vh;
  23. $galleryMargin: 15px;
  24. $togglersHeight: 48px;
  25.  
  26. $tablet: 600px;
  27. $headerBP: 800px;
  28. $desktop: 1100px;
  29. $graphsBP: 1200px;
  30. $large: 1800px;
  31.  
  32. @mixin min-height {
  33.   min-height: calc(100vh - 105px); // 100vh - minimal footer height
  34. }
  35.  
  36. @mixin galleryImageHeight {
  37.   height: 250px;
  38.   @media screen and (min-width: $tablet) {
  39.     height: 370px;
  40.   }
  41.   @media screen and (min-width: $desktop) {
  42.     height: 500px;
  43.   }
  44.   @media screen and (min-width: $large) {
  45.     height: 600px;
  46.   }
  47.   @media screen and (min-width: 2500px) {
  48.     height: 700px;
  49.   }
  50.   @media screen and (min-width: 3000px) {
  51.     height: 800px;
  52.   }
  53.   @media screen and (min-width: 4000px) {
  54.     height: 900px;
  55.   }
  56. }
  57.  
  58. @mixin main-padding {
  59.   padding-left: 5vw;
  60.   padding-right: 5vw;
  61.  
  62.   @media screen and (min-width: 2000px) {
  63.     padding-left: 7vw;
  64.     padding-right: 7vw;
  65.   }
  66.  
  67.   @media screen and (min-width: 2200px) {
  68.     padding-left: 10vw;
  69.     padding-right: 10vw;
  70.   }
  71. }
  72.  
  73. @mixin font_supertiny() {
  74.   font-size: 9px;
  75.   @media screen and (min-width: 400px) {
  76.     font-size: 10px;
  77.   }
  78.   @media screen and (min-width: $tablet) {
  79.     font-size: 14px;
  80.   }
  81.   @media screen and (min-width: $large) {
  82.     font-size: 18px;
  83.   }
  84. }
  85.  
  86. @mixin font_tiny() {
  87.   font-size: 12px;
  88.   @media screen and (min-width: $tablet) {
  89.     font-size: 14px;
  90.   }
  91. }
  92.  
  93. @mixin font_menu() {
  94.   font-size: 14px;
  95.   @media screen and (min-width: 1250px) {
  96.     font-size: 16px;
  97.   }
  98. }
  99.  
  100. @mixin font_main() {
  101.   font-size: 14px;
  102.   @media screen and (min-width: $tablet) {
  103.     font-size: 16px;
  104.   }
  105.   @media screen and (min-width: $large) {
  106.     font-size: 18px;
  107.   }
  108. }
  109.  
  110. @mixin font_input() {
  111.   font-size: 16px;
  112. }
  113.  
  114. @mixin font_large_input() {
  115.   font-size: 16px;
  116.   @media screen and (min-width: $desktop) {
  117.     font-size: 18px;
  118.   }
  119.   @media screen and (min-width: $large) {
  120.     font-size: 22px;
  121.   }
  122. }
  123.  
  124. @mixin font_subheading() {
  125.   font-size: 16px;
  126.   @media screen and (min-width: $tablet) {
  127.     font-size: 18px;
  128.   }
  129.   @media screen and (min-width: $large) {
  130.     font-size: 22px;
  131.   }
  132. }
  133.  
  134. @mixin font_heading() {
  135.   font-size: 18px;
  136.   @media screen and (min-width: $tablet) {
  137.     font-size: 32px;
  138.   }
  139.   @media screen and (min-width: $desktop) {
  140.     font-size: 36px;
  141.   }
  142. }
  143.  
  144. @mixin font_huge() {
  145.   font-size: 22px;
  146.   @media screen and (min-width: $tablet) {
  147.     font-size: 36px;
  148.   }
  149.   @media screen and (min-width: $desktop) {
  150.     font-size: 44px;
  151.   }
  152.   @media screen and (min-width: $large) {
  153.     font-size: 52px;
  154.   }
  155. }
  156.  
  157. @mixin multiLineEllipsis($lineHeight: 30px, $lineCount: 3, $bgColor: #fff) {
  158.   overflow: hidden;
  159.   position: relative;
  160.   line-height: $lineHeight;
  161.   max-height: $lineHeight * $lineCount;
  162.  
  163.   &:before {
  164.     content: '...';
  165.     position: absolute;
  166.     right: 0;
  167.     bottom: 0;
  168.     background: $bgColor;
  169.     padding: 0 5px;
  170.     width: 50px;
  171.     text-align: right;
  172.     background: linear-gradient(
  173.       to right,
  174.       rgba(255, 255, 255, 0) 0%,
  175.       rgba(255, 255, 255, 1) 50%,
  176.       rgba(255, 255, 255, 1) 100%
  177.     );
  178.   }
  179.   &:after {
  180.     content: '';
  181.     position: absolute;
  182.     right: 0;
  183.     width: 23px;
  184.     height: $lineHeight;
  185.     margin-top: 0.2em;
  186.     background: $bgColor;
  187.   }
  188. }
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top