<div class="setup-box">
    <div class="logo">
        <img class="customer-logo" src="https://grabaperch.com/assets/img/logo.png" alt="Site Name" width="180">
    </div>

    <div class="bd">
        <ul class="setup-steps">
            <li class="setup-step setup-step-complete">
                <svg width="14" height="14" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> Server checks
            </li>
            <li class="setup-step setup-step-active">
                <svg width="8" height="8" class="icon icon-o-navigate-right"><use xlink:href="/assets/svg/core.svg#o-navigate-right" /></svg> Database
            </li>
            <li class="setup-step">
                User account
            </li>
            <li class="setup-step">
                User account
            </li>
            <li class="setup-step">
                User account
            </li>
        </ul>
        <ul class="progress-list">
            <li class="progress-item progress-success">
                <svg width="16" height="16" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
                <a class="button button-small action-success" href="/foo">Submit</a>

            </li>
            <li class="progress-item progress-success">
                <svg width="16" height="16" class="icon icon-circle-check"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg> Importing item "ABC 123". <a href="#" class="progress-link">Find out more about it.</a>
                <a class="button button-small action-success" href="/foo">Submit</a>

            </li>
        </ul>
        <form class="form-simple form-setup">

            <div class="field-wrap annotated with-detailed-help">
                <label for="myfield">Things here</label>

                <div class="input-detailed-help">
                    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
                </div>
                <div class="form-entry">
                    <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
                </div>

                <p class="inline-help">This is the help text for this field.</p>

            </div>
            <div class="field-wrap annotated with-detailed-help">
                <label for="myfield">Things here</label>

                <div class="input-detailed-help">
                    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
                </div>
                <div class="form-entry">
                    <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
                </div>

                <p class="inline-help">This is the help text for this field.</p>

            </div>
            <div class="field-wrap annotated with-detailed-help">
                <label for="myfield">Things here</label>

                <div class="input-detailed-help">
                    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
                </div>
                <div class="form-entry">
                    <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
                </div>

                <p class="inline-help">This is the help text for this field.</p>

            </div>
            <div class="field-wrap annotated with-detailed-help">
                <label for="myfield">Things here</label>

                <div class="input-detailed-help">
                    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
                </div>
                <div class="form-entry">
                    <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
                </div>

                <p class="inline-help">This is the help text for this field.</p>

            </div>
            <h2 class="divider">
                <div>
                    <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is an item divider added by Perch
                </div>
            </h2>

            <div class="field-wrap annotated with-detailed-help">
                <label for="myfield">Things here</label>

                <div class="input-detailed-help">
                    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
                </div>
                <div class="form-entry">
                    <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
                </div>

                <p class="inline-help">This is the help text for this field.</p>

            </div>
            <div class="field-wrap annotated with-detailed-help">
                <label for="myfield">Things here</label>

                <div class="input-detailed-help">
                    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
                </div>
                <div class="form-entry">
                    <input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m">
                </div>

                <p class="inline-help">This is the help text for this field.</p>

            </div>
            <div class="submit-bar-setup">
                <div class="submit-bar-actions">
                    <button class="button button-simple action-success">
Submit
</button> or <a href="/perch/core/users">Cancel</a>
                </div>
            </div>
        </form>
    </div>

    <div class="ft">

    </div>
</div>
<div class="setup-box">
    <div class="logo">
        <img class="customer-logo" src="https://grabaperch.com/assets/img/logo.png" alt="Site Name" width="180">
    </div>
    {{!-- <div class="hd">
        <h1>Installing Perch</h1>
    </div> --}}

    <div class="bd">
    	{{ render "@setup-steps" }}
        {{ render "@progress-list--success" }}
        {{> @setup-form }}
    </div>

    <div class="ft">
        
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .page-setup {
      display: flex;
      //align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: palette(ui, panel);
      padding-top: $main-gutter;
    }
    
    .page-setup .logo {
    	text-align: center;
    }
    
    .setup-box {
      min-width: 80%;
      max-width: 80%;
    }
    
    .setup-box .notification-block {
      margin-left: 0;
      margin-right: 0;
    }
    
    .setup-box .progress-item {
    	border-top: 1px solid palette(ui, keyline);
      	border-bottom: 1px solid palette(ui, keyline);
    }
    
    .setup-box .progress-item + .progress-item {
    	border-top: 1px solid white;
    }
    
    .page-setup .help {
    	margin: 0 $main-gutter;
    	@include font-scale(m, helvetica);
    }
    
    .page-setup .help h2 {
    	@include font-scale(base, helvetica);
    	font-weight: 500;
    	margin: $main-gutter 0 $half-gutter 0;
    }
    
    .page-setup .help textarea {
    	border: 1px solid palette(ui, keyline);
    	padding: $half-gutter;
    	font-family: Inconsolata, Courier, fixed;
    	width: 100%;
    }
  • URL: /components/raw/setup-page/setup-page.scss
  • Filesystem Path: src/components/99-pages/08-setup-page/setup-page.scss
  • Size: 909 Bytes

There are no notes for this item.