SHARE
TWEET

Untitled

a guest Sep 20th, 2019 84 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import '~styles/imports/index';
  2.  
  3. .title {
  4.   margin-bottom: $title-bottom-padding;
  5.  
  6.   @media (--smartphone) {
  7.     margin-bottom: 20px;
  8.   }
  9. }
  10.  
  11. .headerCentered {
  12.   text-align: center;
  13.  
  14.   .title {
  15.     margin-left: auto;
  16.     margin-right: auto;
  17.     width: grid(13);
  18.  
  19.     @media (--smartphone) {
  20.       width: gridValueMobile(13);
  21.     }
  22.   }
  23. }
  24.  
  25. .wrapper {
  26.   .eyebrow {
  27.     opacity: 0;
  28.     transform: translateX($translateAppear);
  29.     transition: $transiOpacityTransfAppear;
  30.   }
  31.  
  32.   .mediaWrapper {
  33.     opacity: 0;
  34.     transform: translateX($translateAppearBig);
  35.     transition: $transiOpacityTransfAppear;
  36.   }
  37.  
  38.   &.narrow {
  39.     margin-left: auto;
  40.     margin-right: auto;
  41.     max-width: 920px;
  42.   }
  43.  
  44.   &.isHeaderCentered:not(.transitionInverted) {
  45.     @include stagger-specific-children-from(
  46.       .title,
  47.       .contentWrapper,
  48.       .mediaWrapper,
  49.       $delayAppearSlow,
  50.       $translateAppear,
  51.       0,
  52.       $delayAppear
  53.     );
  54.  
  55.     .eyebrow {
  56.       transition-delay: $delayAppear;
  57.     }
  58.   }
  59.  
  60.   &.isHeaderCentered.transitionInverted {
  61.     @include stagger-specific-children-from(
  62.       .title,
  63.       .mediaWrapper,
  64.       .contentWrapper,
  65.       $delayAppearSlow,
  66.       $translateAppear,
  67.       0,
  68.       $delayAppear
  69.     );
  70.  
  71.     .eyebrow {
  72.       transition-delay: $delayAppear;
  73.     }
  74.   }
  75.  
  76.   &:not(.isHeaderCentered).transitionInverted {
  77.     @include stagger-specific-children-from(
  78.       .title,
  79.       .description,
  80.       .buttonWrapper,
  81.       $delayAppearSlow,
  82.       $translateAppear,
  83.       0,
  84.       .5s
  85.     );
  86.  
  87.     .eyebrow {
  88.       transition-delay: .5s;
  89.     }
  90.  
  91.     .mediaWrapper {
  92.       transition-delay: $delayAppear;
  93.     }
  94.   }
  95.  
  96.   &:not(.isHeaderCentered):not(.transitionInverted) {
  97.     @include stagger-specific-children-from(
  98.       .title,
  99.       .description,
  100.       .buttonWrapper,
  101.       $delayAppearSlow,
  102.       $translateAppear,
  103.       0,
  104.       $delayAppear
  105.     );
  106.  
  107.     .eyebrow {
  108.       transition-delay: $delayAppear;
  109.     }
  110.  
  111.     .mediaWrapper {
  112.       transition-delay: .5s;
  113.     }
  114.   }
  115.  
  116.   &:global(.enteredOnce) {
  117.     .title,
  118.     .eyebrow,
  119.     .mediaWrapper {
  120.       opacity: 1;
  121.       transform: none;
  122.     }
  123.   }
  124.  
  125.   &:global(.noAppear) {
  126.     .title,
  127.     .eyebrow,
  128.     .mediaWrapper {
  129.       transition: none;
  130.     }
  131.   }
  132. }
  133.  
  134. .flexWrapper {
  135.   align-items: center;
  136.   display: flex;
  137.  
  138.   @media (--smartphone) {
  139.     flex-direction: column-reverse;
  140.     flex-wrap: wrap;
  141.   }
  142.  
  143.   &.narrow,
  144.   &.narrow.inverted {
  145.     .mediaWrapper {
  146.       width: grid(12, 24);
  147.  
  148.       @media (--smartphone) {
  149.         width: gridValueMobile(10);
  150.       }
  151.     }
  152.  
  153.     .contentWrapper {
  154.       margin: 0;
  155.       padding: 0 grid(1, 16) 0 0;
  156.       width: grid(12, 24);
  157.  
  158.       @media (--smartphone) {
  159.         margin: 24px gridValueMobile(1) 0;
  160.         padding: 0;
  161.         width: gridValueMobile(12);
  162.       }
  163.     }
  164.   }
  165.  
  166.   &.narrow.inverted {
  167.     .contentWrapper {
  168.       margin: 0;
  169.       padding: 0 0 0 grid(1, 16);
  170.       width: grid(12, 24);
  171.  
  172.       @media (--smartphone) {
  173.         margin: 24px gridValueMobile(1) 0;
  174.         padding: 0;
  175.         width: gridValueMobile(12);
  176.       }
  177.     }
  178.   }
  179.  
  180.   &.offset {
  181.     .mediaWrapper {
  182.       width: grid(13, 23);
  183.  
  184.       @media (--smartphone) {
  185.         width: gridValueMobile(13);
  186.       }
  187.     }
  188.  
  189.     .contentWrapper {
  190.       margin: 0 grid(2, 23) 0 0;
  191.  
  192.       @media (--smartphone) {
  193.         margin: 24px gridValueMobile(1) 0;
  194.         width: gridValueMobile(13);
  195.       }
  196.     }
  197.   }
  198.  
  199.   &.inverted.offset {
  200.     .mediaWrapper {
  201.       width: grid(13, 23);
  202.  
  203.       @media (--smartphone) {
  204.         width: gridValueMobile(13);
  205.       }
  206.     }
  207.   }
  208.  
  209.   &.inverted {
  210.     @media (--smartphone) {
  211.       flex-direction: column;
  212.     }
  213.  
  214.     .contentWrapper {
  215.       margin: 0 grid(3, 23) 0 grid(1, 23);
  216.  
  217.       @media (--smartphone) {
  218.         margin: 24px gridValueMobile(1) 0;
  219.       }
  220.     }
  221.  
  222.     .mediaWrapper {
  223.       width: grid(11, 23);
  224.  
  225.       @media (--smartphone) {
  226.         width: gridValueMobile(13);
  227.       }
  228.     }
  229.   }
  230.  
  231.   &.leftAlignedOnMobile {
  232.     .contentWrapper {
  233.       @media (--smartphone) {
  234.         text-align: left;
  235.       }
  236.     }
  237.  
  238.     .buttonWrapper {
  239.       @media (--smartphone) {
  240.         align-items: flex-start;
  241.       }
  242.     }
  243.   }
  244. }
  245.  
  246. .contentHeading {
  247.   margin-bottom: 6px;
  248. }
  249.  
  250. .contentParagraph:not(:last-child) {
  251.   margin-bottom: 24px;
  252. }
  253.  
  254. .buttonWrapper {
  255.   align-items: center;
  256.   display: flex;
  257.   margin-top: 32px;
  258.  
  259.   @media (--smartphone) {
  260.     flex-direction: column;
  261.   }
  262. }
  263.  
  264. .primaryButton {
  265.   flex-shrink: 0;
  266.   margin-right: 32px;
  267.  
  268.   @media (--smartphone) {
  269.     margin-right: 0;
  270.  
  271.     &:not:(:last-child) {
  272.       margin-bottom: 24px;
  273.     }
  274.   }
  275. }
  276.  
  277. .secondaryButton {
  278.   flex-shrink: 0;
  279. }
  280.  
  281. .contentWrapper {
  282.   flex-grow: 0;
  283.   flex-shrink: 0;
  284.   margin: 0 grid(1, 23) 0 grid(3, 23);
  285.   width: grid(8, 23);
  286.  
  287.   .longContent & {
  288.     width: grid(11, 23);
  289.   }
  290.  
  291.   @media (--smartphone) {
  292.     margin: 24px gridValueMobile(1) 0;
  293.     text-align: center;
  294.     width: gridValueMobile(13);
  295.  
  296.     .longContent & {
  297.       width: gridValueMobile(13);
  298.     }
  299.   }
  300. }
  301.  
  302. .mediaWrapper {
  303.   flex-grow: 0;
  304.   flex-shrink: 0;
  305.   position: relative;
  306.   width: grid(11, 23);
  307.  
  308.   @media (--smartphone) {
  309.     margin: 0 gridValueMobile(1);
  310.     width: gridValueMobile(13);
  311.   }
  312.  
  313.   img {
  314.     width: 100%;
  315.   }
  316.  
  317.   .media:nth-child(1) {
  318.     display: block;
  319.     width: 100%;
  320.   }
  321.  
  322.   .media:nth-child(2) {
  323.     left: 0;
  324.     position: absolute;
  325.     top: 0;
  326.     width: 100%;
  327.   }
  328. }
  329.  
  330. .mediaWrapper.hasWideImage .media:nth-child(1) img {
  331.   transform: translate3d(24px, -24px, 0);
  332.  
  333.   @media (--above-smartphone) {
  334.     transform: translate3d(40px, -40px, 0);
  335.   }
  336. }
  337.  
  338. .inverted .mediaWrapper.hasWideImage .media:nth-child(1) img {
  339.   transform: translate3d(-24px, 24px, 0);
  340.  
  341.   @media (--above-smartphone) {
  342.     transform: translate3d(-40px, 40px, 0);
  343.   }
  344. }
  345.  
  346. .accentImage {
  347.   margin-bottom: 16px;
  348.   width: 100%;
  349.  
  350.   @media (--smartphone) {
  351.     display: none;
  352.   }
  353. }
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