600 West

Modal 

<div id="modal" class="Modal is-open" style="">
    <button class="IconButton Modal-x"></button>
    <div class="row " style="">
        <div class="col _span-6  " style="">
            <form id="" action="#" method="POST" class="Form " style="">
                <h2 class="u-text-size-500 " style="">
                    Request a Demo for More Information
                </h2>

                <div class="row " style="">
                    <div class="col _span-6  " style="">
                        <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="First Name"
    type="text"
    class=""
    
    
    placeholder="Bruce" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

                    </div>

                    <div class="col _span-6  " style="">
                        <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Last Name"
    type="text"
    class=""
    
    
    placeholder="Wayne" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

                    </div>

                </div>

                <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Email"
    type="email"
    class=""
    
    
    placeholder="bruce@wayneenterprises.com" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

                <div class="row " style="">
                    <div class="col _span-6  " style="">
                        <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Company Name"
    type="text"
    class=""
    
    
    placeholder="Wayne Enterprises" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

                    </div>

                    <div class="col _span-6  " style="">
                        <label>
        <span>
            Text
                
        </span>
<input
    id="text"
    name="Phone Number"
    type="tel"
    class=""
    
    
    placeholder="800-867-5309" 
    
    autocomplete
    
    
    
    
    
    
    
    
    
/>
    </label>

                    </div>

                </div>

                <label>
        <span>
            TextArea
        </span>
<textarea
    id="textarea"
    name="Notes"
    class=""
    style=" "
    placeholder="I would like to cover..."
    rows="3"
    
    autocomplete
    
    
    
></textarea>
	</label>

                <div class="row " style="text-align: center;">
                    <div class="col _span-12  " style="">
                        <button class="button _large _submit " type="submit">
        Submit Request
    </button>

                        <p id="" class="fineprint " style="">Someone from our sales team will be in touch soon with more information or to schedule a private demonstration.</p>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>
 
<div id="modal" class="Modal {{modifier}}" style="{{style}}">
	<button class="IconButton Modal-x"></button>
	{{> @children }}
</div>
 
{
  "modifier": "is-open",
  "children": [
    {
      "component": "row",
      "context": {
        "children": [
          {
            "component": "column",
            "context": {
              "span": 6,
              "children": [
                {
                  "component": "form"
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    body.is-modal-open {
    overflow: hidden;
}
.Modal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(get-color(neutral, 1000),.65);
    opacity: 0;
    transition: all 250ms;
    transform: translateZ(0);
}
.Modal {
    @include Elevation("Modal", $withZindex: true);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15vh 0;
    margin: 0;
    overflow-y: scroll;
    text-align: center;
    background: theme-color(background);
    opacity: 0;
    transition: all 0s 200ms, transform 200ms ease-in-out, opacity 100ms ease-in-out;
    transform: scale(.5);
    pointer-events: none;
    .no-flexbox & {
        display: none;
    }
    &-x {
        @include Elevation("Button", $withZindex: true, $hasShadow: false);
        position: absolute;
        top: 20px;
        right: 10vw;
        font-size: $font-size-lead;
        font-weight: 400;
        line-height: $font-size-head;
        color: get-color(neutral, 500);
        cursor: pointer;
        &::after {
            display: inline-block;
            margin-left: 10px;
            font-size: $font-size-head;
            vertical-align: middle;
            content: "×";
            transform: translateY(.125rem);
        }
        &:hover {
            color: theme-color(text);
        }
    }
    &._swapper {
        padding: 0;
        .section {
            min-height: 100vh;
            padding: 15vh 0;
        }
    }
    &.is-open {
        opacity: 1;
        transition: all 0s, transform 200ms ease-in-out, opacity 100ms ease-in-out;
        transform: scale(1);
        pointer-events: auto;
        .no-flexbox & {
            display: block;
        }
    }
    &:not(.is-open) {
        z-index: -1;
    }
}
.scaleup-enter,
.scaleup-leave.scaleup-leave-active {
    opacity: 0;
    transition: all .3s;
    transform: scale(.8);
}
.scaleup-leave,
.scaleup-enter.scaleup-enter-active {
    opacity: 1;
    transform: scale(1);
}
  • URL: /components/raw/modal/Modal.scss
  • Filesystem Path: components/organisms/Modal/Modal/Modal.scss
  • Size: 2 KB

There are no notes for this item.