@viewdo/dxp-story-player-assets/less/templates/vanillabean/index.less

## Installation

//===============================
// Vanilla Bean settings and mixins
//===============================

.init-vanillabean(@primary: #1a658f, @secondary: #7566a0, @highlight: #FDD757, @theme: default, @experienceWidth: 48rem) {
  .vanillabean-dependencies();
  .vanillabean-setup();

  .vanillabean-setup() {
    //text colors
    @lightText: @white;
    @darkText: #212121;

    @contrast: contrast(@primary, @darkText, @lightText); //White or Black
    @contrastInverted: contrast(@contrast, @darkText, @lightText);

    /*=====================
      1 Color Palette
      ======================*/

    .genMonocramaticClasses(@primary, primary, standard, background);
    .genMonocramaticClasses(@primary, primary, standard, color);
    .genMonocramaticClasses(@secondary, secondary, standard, background);
    .genMonocramaticClasses(@secondary, secondary, standard, color);

    /*=====================
      2 Buttons
      ======================*/

    .setThemeStyles(@theme);

    @defaultButtonStyles: {
      border-radius: 100px;
      text-transform: uppercase;
      font-size: 0.75rem;
      font-weight: bold;
      padding: 1rem 1.5rem;
      cursor: pointer;
      text-decoration: none;
      background: @buttonBgColor;
      box-shadow: @buttonShadow;
      color: @buttonTextColor;
    };

    @footerCTAButtonStyles: {
      background: @highlight;
      color: contrast(@highlight, @darkText, @lightText);
      font-size: 1.125rem;
      border-radius: 8px;
      padding: 0.5em 1.5em;
      margin: 0.5em;
      text-decoration: none;
      display: inline-flex;
      flex-direction: row;
      text-align: left;
      align-items: center;
      justify-content: center;
      line-height: 1.4;

      .responsive(mobile, {font-size: 1rem;});
    };

    //default buttons
    .ivx-input-container-buttons {
      .genButtons(default, @defaultButtonStyles);

      .ivx-input-buttons {
        display: block;
        width: 100%;
        max-width: 20rem;
        margin: 0.5rem auto;

        &[id*="undefined"] {
          box-shadow: none;
          text-transform: none;
          text-decoration: underline;
          font-weight: normal;
          font-size: 0.875rem;
          background: none;
        }
      }
    }

    //skip button
    .ivx-input-buttons-skip {
      display: inline-block;
      background: @contrast;
      color: @secondary;
      padding: 0.25rem 1rem;
      margin: 1rem 0;
      font-size: 0.75rem;
      text-transform: uppercase;
      font-weight: bold;
      cursor: pointer;
    }

    //footer cta buttons
    #footer {
      .ivx-link-container {
        .genButtons(default, @footerCTAButtonStyles);
      }
    }

    /*=====================
      3 Components
      ======================*/

    .progress-bar {
      height: 0.5rem;
      background: @white;

      .progress-indicator {
        height: 100%;
        background: @primary;
        border: 2px solid @white;
        box-sizing: border-box;
      }
    }

    .progress-read-out {
      display: none;
    }

    /*=====================
      4 Video Players
      ======================*/

    //fix video centering issue
    section.ivx-state-video-section {
      max-width: 100%;

      header,
      footer {
        max-width: 85%;
        margin: 0 auto;
      }
    }

    //custom controls
    .genPlayerStyles();
    .vanillabean-video-controls(@theme);

    .vanillabean-video-controls(@theme) when (@theme = default) {
      @buttonColor: contrast(@primary);
      @scrubBar: contrast(@contrast, @darkText, @secondary);
      .vanillabean-global-video-styles(@buttonColor, @buttonColor, @scrubBar);
    }
    .vanillabean-video-controls(@theme) when (@theme = dark) {
      .vanillabean-global-video-styles(#fff, #fff, @primary);
    }
    .vanillabean-video-controls(@theme) when (@theme = light) {
      .vanillabean-global-video-styles(#000, #000, @primary);
    }

    .vanillabean-global-video-styles(@buttonColor, @scrubBG, @scrubBar) {
      .createVideoControls();

      .ivx-video-controls .ivx-video-controls-container {
        margin: 0 auto;
        -webkit-transition: max-width 0.5s ease;
        transition: max-width 0.5s ease;

        &.ivx-video-paused {
          max-width: 700px;
        }

        &.ivx-video-playing {
          max-width: 80vw;
        }
      }
      .ivx-video-controls
        .ivx-video-controls-container
        .ivx-video-controls-play-pause,
      .ivx-video-controls
        .ivx-video-controls-container
        .ivx-video-controls-mute {
        background: none;
        color: @buttonColor;
        border: none;
      }

      .ivx-video-controls
        .video-control-container 
        .scrub-bar {
        background-color: @scrubBG;
      }

      .ivx-video-controls
        .video-control-container 
        .scrub-bar 
        .time-lapsed {
        background-color: @scrubBar;
      }
    }

    //make sure video poster images fill player area for Vimeo
    video {
      object-fit: cover;
    }

    /*=====================
      5 Forms
      ======================*/

    @baseSubmitButton: {
      @defaultButtonStyles();
      margin: 1rem 0;
    };

    @optionsContainers: {
      margin-top: 1em;

      .ivx-input-label {
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 0.75em;
        padding-bottom: 0.5em;
        text-align: left;
      }
    };

    @baseTextInput: background @white, border none;

    .genErrorMessages();
    .genErrorMessageContainers();
    .genTextInputs(custom, @baseTextInput);
    .genTextInputContainers();
    .genTextareaInputs(custom, @baseTextInput);
    .genTextareaInputContainers();
    .genRadioInputs();
    .genRadioInputContainers();
    .genCheckboxInputs();
    .genCheckboxInputContainers();
    .genOptionsInputs();
    .genOptionsInputContainers(custom, @optionsContainers);
    .genSubmitButtonInputs(default, @baseSubmitButton);

    //remove white background from errors
    .ivx-input-error-message {
      background: none;
      color: @errorColor;
      clear: both;
    }

    //override - need to make a custom mixin in base to do this
    .ivx-input-container-text,
    .ivx-input-container-email,
    .ivx-input-container-url,
    .ivx-input-container-number,
    .ivx-input-container-options,
    .ivx-input-container-textarea {
      .ivx-input-label {
        color: @inputLabelColor;
      }
    }

    .responsive(
      mobile,
      {.ivx-input-container-text,
      .ivx-input-container-email,
      .ivx-input-container-url,
      .ivx-input-container-number,
      .ivx-input-container-options,
      .ivx-input-container-textarea,
      .ivx-input-container-radio,
      .ivx-input-container-checkbox {margin-top: .25em;}}
    );

    //custom checkboxes
    .ivx-input-container-checkbox {
      label{
        font-size: .75rem;
        text-align: left;
        padding-left: 2rem;
      }
    }
    #collect-form #consented input {
      background: none;
      border: none;
      display: block;
      height: 0px;
    }
    .checklist-item {
      float: left;
      transform: translateX(8vw);
      input {
        background: none;
        border: none;
        display: block;
        height: 0px;
      }
    }

    .ivx-input-container-checkbox .ivx-input-label {
      position: relative;

      .ivx-input-checkbox {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        padding-left: 1rem;

        &:before {
          content: "";
          display: block;
          width: 1.25rem;
          height: 1.25rem;
          background: white;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &:checked:after {
          content: "";
          display: block;
          position: absolute;
          left: 0.25em;
          top: 50%;
          transform: translateY(-100%);
          background: black;
          width: 0.875em;
          height: 0.6125em;
          -webkit-mask-image: url(https://static.dxp.media/viewdo/vanilla-bean/images/icons/check.svg);
          -webkit-mask-size: contain;
          mask-image: url(https://static.dxp.media/viewdo/vanilla-bean/images/icons/check.svg);
          mask-size: contain;
          margin: 0.31875em 0.18755em;
        }
      }
    }

    //custom radio buttons
    .ivx-input-container-radio {
      span:not(.error-message) {
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 0.75em;
        color: @inputLabelColor;
        padding-bottom: 0.5em;
        text-align: left;
      }

      label {
        position: relative;

        .ivx-input-radio {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          -ms-appearance: none;
          padding-left: 1rem;

          &:before {
            content: "";
            display: block;
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 1.25rem;
            background: white;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
          }

          &:checked:after {
            content: "";
            display: block;
            position: absolute;
            left: 0.1875rem;
            top: 50%;
            transform: translateY(-50%);
            background: @primary;
            width: 0.875rem;
            border-radius: 0.875rem;
            height: 0.875rem;
          }
        }
      }
    }

    //custom select lists
    .ivx-input-container-options {
      label {
        position: relative;

        &:after {
          content: "\25BC";
          display: block;
          width: 10px;
          height: 10px;
          right: 0px;
          position: absolute;
          top: 37px;
          right: 13px;
          font-size: 0.75em;
          color: @primary;
        }
      }

      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        border: none;
        border-radius: 0px;
        padding: 0.5em 0.75em;
      }
    }

    // submit button styles
    .ivx-input-submit-button {
      margin: 2rem 0;
      &:hover {
        background: white;
        color: black;
      }
    }

    // a subtle focus style for keyboard-input elements
    input[type="text"]:focus,
    input[type="text"]:focus,
    textarea:focus {
      outline: 1px solid @outlineColor;
    }
    textarea {
      height: 225px;
      width: inherit;
      background: rgba(255, 255, 255, 0.75);
      border-radius: 5px;
      padding: 2rem;
    }
    .survey2 #survey2-form label {
      display: none;
    }

    /* no outline for non-keyboard-inputs elements */
    button:focus,
    select:focus {
      outline: none;
    }

    /*=====================
      6 Scenes
      ======================*/

    /*=========================
      Vanilla Bean Mixins
      ===========================
      1.  Layout
      2.  Backgrounds
      3.  Typography
      =========================*/

    /*=====================
      1 Layout
      ======================*/
    ._defaultVanillaBeanSettings() {
      html,
      body {
        height: 100%;
        min-height: 100%;
        overflow: hidden;
      }

      img {
        max-width: 100%;
      }

      #header {
        line-height: 0;

        #logo {
          padding: @logoPadding 0 0;

          img {
            display: block;
            margin: 0 auto;
            height: auto;
            width: auto;
            max-height: @logoHeight;
            max-width: 15rem;

            .responsive(mobile, {max-height: @logoHeight * .667;});
          }
        }
      }

      //dimensions for vertical responsiveness
      @progressHeight: 0.5rem;
      @logoTotalHeight: @logoHeight + @logoPadding;
      @textHeight: 3.25rem;
      @textPad: 1rem;
      @skipButton: 3.625rem;
      @footerHeight: 6.0625rem; //this will cover the tagline for header or footer
      @contentPad: 3rem;
      @videoSpaceV: @progressHeight + @logoTotalHeight + @logoPadding +
        @textHeight + @textPad + @footerHeight + @contentPad + @skipButton;
      @videoSpaceH: 1.777777777777778 * @videoSpaceV;

      ._landscapeSettings {
      }

      ._desktopSettings {
        video {
          -webkit-transition: max-width 0.5s ease;
          transition: max-width 0.5s ease;
          height: auto;
        }

        &.ivx-video-paused {
          max-width: 700px;
        }

        &.ivx-video-playing {
          max-width: 80vw;
        }
      }

      .ivx-video-player-html5 {
        .responsive(desktop, {._desktopSettings;});

        .responsive(landscape, {._landscapeSettings;});
      }
    }

    .vanillabean-layout(@layoutType: default, @logoPadding: 1.5rem, @logoHeight: 3rem, @contentMargin: 1.5rem, @taglineHeight: 2.5rem)
      when
      (@layoutType = default) {
      //grid options - @columnCount, @gutterWidth (in pixels), @maxContainerWidth (any units), @gridtype (flexbox or default);
      @gutterWidth: 16px;
      @maxContainerWidth: 80rem;
      .make-grids(12, @gutterWidth, @maxContainerWidth);

      ._defaultVanillaBeanSettings();

      body {
        display: flex;
        flex-direction: column;
        background-color: @primary;
        color: @themeTextColor;

        #header,
        #footer {
          flex: 0 0 auto;
          text-align: center;
        }

        #footer {
          background-color: @footerBgColor;
        }

        #state-player {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          overflow: auto;
          text-align: center;
          box-sizing: border-box;
          padding: @contentMargin 0;
          width: 100vw;
          max-width: 100vw;
          //fade out content when scrolling to separate header and footer
          -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 5%,
            rgba(0, 0, 0, 1) 95%,
            rgba(0, 0, 0, 0) 100%
          );
          mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 5%,
            rgba(0, 0, 0, 1) 95%,
            rgba(0, 0, 0, 0) 100%
          );

          > *:first-child,
          > * {
            margin: auto; //center the content vertically
            max-width: @maxContainerWidth;
            min-width: 20rem;
          }

          section {
            &:not(.ivx-state-video-section) {
              .ivx-grid-1-1;
            }

            &.ivx-state-input-section {
              max-width: @experienceWidth;
            }

            &.ivx-state-video-section {
              header,
              footer {
                padding: 0 @gutterWidth;
              }
            }
          }
        }

        .header-tagline,
        .footer-tagline {
          background: @taglineBg;
          color: contrast(@taglineBg);
          line-height: @taglineHeight;

          .tagline-link {
            color: contrast(@taglineBg);
            font-size: ~"calc(@{taglineHeight} * .375)";
            font-weight: bold;
            text-decoration: none;
          }

          .responsive(
            mobile,
            {@mobileTaglineHeight: @taglineHeight * .667; line-height: @mobileTaglineHeight;
              .tagline-link{font-size: ~"calc(@{mobileTaglineHeight} * .375)" ;
              max-width: 75%; line-height: 1.25; padding: 0.75rem 0;}}
          );
        }

        .header-tagline{
          margin-top: @logoPadding;
        }

        .footer-tagline {
          background: @footerTaglineBg;
        }
      }

      /////////////////////
      //Responsive Styles
      /////////////////////

      //Mobile landscape
      .responsive(landscape, {body{overflow: auto; display: block;}});

      
    }

    //======================
    // 1 Backgrounds
    //======================

    .vanillabean-backgrounds(@primaryBgImage: ""; @secondaryBackgroundImages: none ""; @blurAmount: 3px; @primaryBgColor: @themePrimaryBgColor; @primaryBgOpacity: 15%; @secondaryBgColor: @themeSecondaryBgColor; @secondaryBgOpacity:@primaryBgOpacity ) {
      .primary-background {
        opacity: 1;
        transition: opacity 0.5s ease;
      }

      .genBackgroundImageClasses(
        global-bg,
        @primaryBgImage,
        @blurAmount,
        @primaryBgColor,
        @primaryBgOpacity,
        true,
        center,
        center
      );

      .addBackgrounds(length(@secondaryBackgroundImages));
      .addBackgrounds(@i) when (@i > 2) {
        .addBackgrounds(@i - 2);
        @key: extract(@secondaryBackgroundImages, @i - 1);
        @value: extract(@secondaryBackgroundImages, @i);
        .genBackgroundImageClasses(
          @key,
          @value,
          @blurAmount,
          @secondaryBgColor,
          @secondaryBgOpacity,
          true,
          center,
          center
        );
        .secondary-background {
          &.ivx-background-image-@{key} {
            + .primary-background {
              opacity: 0;
            }
          }
        }
      }
      .addBackgrounds(@i) when (@i = 2) {
        @key: extract(@secondaryBackgroundImages, @i - 1);
        @value: extract(@secondaryBackgroundImages, @i);
        .genBackgroundImageClasses(
          @key,
          @value,
          @blurAmount,
          @secondaryBgColor,
          @secondaryBgOpacity,
          true,
          center,
          center
        );
        .secondary-background {
          &.ivx-background-image-@{key} {
            + .primary-background {
              opacity: 0;
            }
          }
        }
      }
    }

    //======================
    // 2 Typography
    //======================

    .vanillabean-typography(@primaryFont: "Open Sans", sans-serif; @secondaryFont: @primaryFont; @baseFontSize: 16px; @mobileFontSize: 16px; @h1Size: 1.5rem;) {
      @bodyFont: @primaryFont;
      @headingFont: @secondaryFont;
      @fontSystem: primary;

      .setFontSystem(@fontSystem, @bodyFont, @headingFont, 1.3, 400);
      .setGlobalFont({.ivx-font-primary});

      body {
        h1 {
          font-size: @h1Size;

          //use this for larger text like personalizations
          span {
            display: block;
            font-size: 3em;
          }

          small {
            margin: 0.5rem 0 1.5rem;
          }
        }

        h2 {
          font-size: @h1Size * 5 / 6;
        }

        h1 + h2 {
          margin-top: -0.875rem;
        }

        ul {
          display: block;
          text-align: left;
          li {
            a {
              color: white;
            }
          }
        }

        //Mobile landscape
        .responsive(
          mobile,
          {h1{font-size: @h1Size * .8;} h2{font-size: @h1Size * 2 / 3;}}
        );
      }
    }

    //======================
    // 3 Themes
    //======================

    .setThemeStyles(@theme: default) when (@theme = default) {
      //theme colors
      @themeTextColor: @contrast;
      @themePrimaryBgColor: @primary;
      @themeSecondaryBgColor: @secondary;

      //forms
      @inputLabelColor: @contrast;
      @errorColor: contrast(@primary, #9c2b2e, #fff568);
      @outlineColor: fadeout(@contrastInverted, 85%);

      //footer and tagline
      @footerBgColor: fadeout(@contrastInverted, 85%);
      @taglineBg: fade(@contrastInverted, 25%);
      @footerTaglineBg: @taglineBg;

      //global buttons
      @buttonBgColor: none;
      @buttonShadow: inset 0px 0px 0px 2px @themeTextColor;
      @buttonTextColor: @themeTextColor;

      //ctas
      @ctaButtonBg: @buttonBgColor;
      @ctaButtonTextColor: @themeTextColor;
      @ctaButtonShadow: @buttonShadow;
      @ctaButtonPersistentBg: @highlight;
      @ctaButtonPersistentTextColor: contrast(@ctaButtonPersistentBg, @darkText, @lightText);

      //previous next navigation
      @navigationButtonTextColor: @themeTextColor;
    }

    .setThemeStyles(@theme: default) when (@theme = light) {
      //theme colors
      @themeTextColor: #4d4d4d;
      @themePrimaryBgColor: @white;
      @themeSecondaryBgColor: @white;

      //forms
      @inputLabelColor: @themeTextColor;
      @errorColor: #9c2b2e;
      @outlineColor: fadeout(@contrastInverted, 85%);

      //footer and tagline
      @footerBgColor: @primary;
      @taglineBg: @secondary;
      @footerTaglineBg: darken(@footerBgColor, 10%);

      //global buttons
      @buttonBgColor: @secondary;
      @buttonShadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
      @buttonTextColor: contrast(@secondary);

      //ctas
      @ctaButtonBg: @secondary;
      @ctaButtonTextColor: contrast(@ctaButtonBg);
      @ctaButtonShadow: none;
      @ctaButtonPersistentBg: @highlight;
      @ctaButtonPersistentTextColor: contrast(@ctaButtonPersistentBg, @darkText, @lightText);

      //previous next navigation
      @navigationButtonTextColor: @themeTextColor;
    }

    .setThemeStyles(@theme: default) when (@theme = dark) {
      //theme colors
      @themeTextColor: @white;
      @themePrimaryBgColor: #1c1c1c;
      @themeSecondaryBgColor: @themePrimaryBgColor;

      //forms
      @inputLabelColor: @themeTextColor;
      @errorColor: #fff568;
      @outlineColor: fadeout(@contrastInverted, 85%);

      //footer and tagline
      @footerBgColor: @primary;
      @taglineBg: rgba(0, 0, 0, 0.25);
      @footerTaglineBg: darken(@footerBgColor, 10%);

      //global buttons
      @buttonBgColor: @secondary;
      @buttonShadow: none;
      @buttonTextColor: contrast(@secondary);

      //ctas
      @ctaButtonBg: @secondary;
      @ctaButtonTextColor: contrast(@ctaButtonBg);
      @ctaButtonShadow: none;
      @ctaButtonPersistentBg: @highlight;
      @ctaButtonPersistentTextColor: contrast(@ctaButtonPersistentBg, @darkText, @lightText);

      //previous next navigation
      @navigationButtonTextColor: @themeTextColor;
    }
  }

  //=========================
  // Base iVX Styles & Mixins
  //=========================

  .vanillabean-dependencies() {
    //dxp base styles
    @import "../../base/index.less";

    //dxp base mixins
    @import (reference) "../../base/framework.less";
    @import (reference) "../../base/colors.less";
    @import (reference) "../../base/typography.less";
    @import (reference) "../../base/backgrounds.less";
    @import (reference) "../../base/video-controls.less";
    @import (reference) "../../base/buttons.less";
    @import (reference) "../../base/icons.less";
    @import (reference) "../../base/grid.less";
    @import (reference) "../../base/responsive.less";
    @import (reference) "../../base/animations.less";
    @import (reference) "../../base/inputs.less";

    //vanillabean scene styles
    @import (reference) "scenes/index.less";

    //this is only for forge - MUST ADD IN JSON METADATA
    #player-services {
      display: none;
    }

    //init dxp base mixins
    .init();
    .framework-mixins();
    .color-palette-mixins();
    .typography-mixins();
    .background-mixins();
    .video-control-mixins();
    .button-mixins();
    .form-input-mixins();
    .grid-mixins();
    .responsive-mixins();
    .ivx-animations();
  }
}