<h3 class="repeater-heading divider">My repeater</h3>
<div class="repeater" data-prefix="perch_23_quotes" data-item-count="0" data-init="true">
    <div class="repeated ui-sortable">
        <div class="repeated-item">
            <div class="index">
                <span class="number">1</span>
                <span class="icon"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg></span>
            </div>
            <div class="repeated-fields">

                <div class="field-wrap annotated"><label for="myfield">Things here</label>
                    <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>

                <fieldset class="fieldset-clean">
                    <div class="fieldset-inner">

                        <div class="legend-wrap">
                            <legend>May be created by</legend>
                        </div>

                        <div class="checkbox-group">

                            <div class="checkbox-single">
                                <label for="subpage_roles_0" class="">Everyone</label>
                                <div class="form-entry">
                                    <input type="checkbox" id="subpage_roles_0" name="subpage_roles[]" value="*">
                                </div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_1" class="">Admin</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_1" name="subpage_roles[]" value="2" checked disabled></div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_2" class="">Editor</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_2" name="subpage_roles[]" value="1"></div>
                            </div>
                        </div>

                    </div>

                </fieldset>

                <div class="divider">
                    <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 content in a divider added with divider-before
                </div>

                <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="checkbox" id="">
                    </div>
                </div>

                <div class="asset-badge field-wrap" data-for="perch_image_assetID">
                    <div class="asset-badge-inner">
                        <div class="asset-badge-thumb ">
                            <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" width="100" height="150" alt="Preview">
                            <div class="asset-badge-remove">
                                <span class="asset-ban hidden"><svg width="64" height="64" class="icon icon-ban-alt"><use xlink:href="/assets/svg/assets.svg#ban-alt" /></svg></span>
                                <span class="asset-badge-remove-fields js">
					<label for="perch_image_remove" class="inline">Remove</label>
					<input type="checkbox" class="check" id="perch_image_remove" name="perch_image_remove" value="1">
				</span>
                                <a href="#" class="asset-badge-remove-action">
					<svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
				</a>
                            </div>
                        </div>
                        <div class="asset-badge-meta">
                            <h3 class="title">Default image</h3>
                            <ul class="meta">
                                <li><svg width="12" height="12" class="icon icon-o-photo"><use xlink:href="/assets/svg/assets.svg#o-photo" /></svg> Image / JPEG</li>
                                <li><svg width="12" height="12" class="icon icon-o-crop"><use xlink:href="/assets/svg/assets.svg#o-crop" /></svg> 600 &times; 898 px @ 67KB</li>
                            </ul>
                            <div class="asset-add">
                                <a href="#">Select or upload an image</a>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="repeated-item">
            <div class="index">
                <span class="number">1</span>
                <span class="icon"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg></span>
            </div>
            <div class="repeated-fields">

                <div class="field-wrap annotated"><label for="myfield">Things here</label>
                    <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>

                <fieldset class="fieldset-clean">
                    <div class="fieldset-inner">

                        <div class="legend-wrap">
                            <legend>May be created by</legend>
                        </div>

                        <div class="checkbox-group">

                            <div class="checkbox-single">
                                <label for="subpage_roles_0" class="">Everyone</label>
                                <div class="form-entry">
                                    <input type="checkbox" id="subpage_roles_0" name="subpage_roles[]" value="*">
                                </div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_1" class="">Admin</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_1" name="subpage_roles[]" value="2" checked disabled></div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_2" class="">Editor</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_2" name="subpage_roles[]" value="1"></div>
                            </div>
                        </div>

                    </div>

                </fieldset>

                <div class="divider">
                    <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 content in a divider added with divider-before
                </div>

                <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="checkbox" id="">
                    </div>
                </div>

                <div class="asset-badge field-wrap" data-for="perch_image_assetID">
                    <div class="asset-badge-inner">
                        <div class="asset-badge-thumb ">
                            <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" width="100" height="150" alt="Preview">
                            <div class="asset-badge-remove">
                                <span class="asset-ban hidden"><svg width="64" height="64" class="icon icon-ban-alt"><use xlink:href="/assets/svg/assets.svg#ban-alt" /></svg></span>
                                <span class="asset-badge-remove-fields js">
					<label for="perch_image_remove" class="inline">Remove</label>
					<input type="checkbox" class="check" id="perch_image_remove" name="perch_image_remove" value="1">
				</span>
                                <a href="#" class="asset-badge-remove-action">
					<svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
				</a>
                            </div>
                        </div>
                        <div class="asset-badge-meta">
                            <h3 class="title">Default image</h3>
                            <ul class="meta">
                                <li><svg width="12" height="12" class="icon icon-o-photo"><use xlink:href="/assets/svg/assets.svg#o-photo" /></svg> Image / JPEG</li>
                                <li><svg width="12" height="12" class="icon icon-o-crop"><use xlink:href="/assets/svg/assets.svg#o-crop" /></svg> 600 &times; 898 px @ 67KB</li>
                            </ul>
                            <div class="asset-add">
                                <a href="#">Select or upload an image</a>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="repeated-item">
            <div class="index">
                <span class="number">1</span>
                <span class="icon"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg></span>
            </div>
            <div class="repeated-fields">

                <div class="field-wrap annotated"><label for="myfield">Things here</label>
                    <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>

                <fieldset class="fieldset-clean">
                    <div class="fieldset-inner">

                        <div class="legend-wrap">
                            <legend>May be created by</legend>
                        </div>

                        <div class="checkbox-group">

                            <div class="checkbox-single">
                                <label for="subpage_roles_0" class="">Everyone</label>
                                <div class="form-entry">
                                    <input type="checkbox" id="subpage_roles_0" name="subpage_roles[]" value="*">
                                </div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_1" class="">Admin</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_1" name="subpage_roles[]" value="2" checked disabled></div>
                            </div>

                            <div class="checkbox-single">
                                <label for="subpage_roles_2" class="">Editor</label>
                                <div class="form-entry"><input type="checkbox" id="subpage_roles_2" name="subpage_roles[]" value="1"></div>
                            </div>
                        </div>

                    </div>

                </fieldset>

                <div class="divider">
                    <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 content in a divider added with divider-before
                </div>

                <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
                    <div class="form-entry"><input type="checkbox" id="">
                    </div>
                </div>

                <div class="asset-badge field-wrap" data-for="perch_image_assetID">
                    <div class="asset-badge-inner">
                        <div class="asset-badge-thumb ">
                            <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" width="100" height="150" alt="Preview">
                            <div class="asset-badge-remove">
                                <span class="asset-ban hidden"><svg width="64" height="64" class="icon icon-ban-alt"><use xlink:href="/assets/svg/assets.svg#ban-alt" /></svg></span>
                                <span class="asset-badge-remove-fields js">
					<label for="perch_image_remove" class="inline">Remove</label>
					<input type="checkbox" class="check" id="perch_image_remove" name="perch_image_remove" value="1">
				</span>
                                <a href="#" class="asset-badge-remove-action">
					<svg width="24" height="24" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg>
				</a>
                            </div>
                        </div>
                        <div class="asset-badge-meta">
                            <h3 class="title">Default image</h3>
                            <ul class="meta">
                                <li><svg width="12" height="12" class="icon icon-o-photo"><use xlink:href="/assets/svg/assets.svg#o-photo" /></svg> Image / JPEG</li>
                                <li><svg width="12" height="12" class="icon icon-o-crop"><use xlink:href="/assets/svg/assets.svg#o-crop" /></svg> 600 &times; 898 px @ 67KB</li>
                            </ul>
                            <div class="asset-add">
                                <a href="#">Select or upload an image</a>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="repeater-footer">
        <input type="hidden" name="perch_23_quotes_count" value="0" class="count">
        <span class="repeater-add-prompt"><svg width="20" height="20" class="icon icon-add"><use xlink:href="/assets/svg/core.svg#add" /></svg></span>
        <a href="#" class="plusone">Add another</a>
    </div>
</div>
<h3 class="repeater-heading divider">My repeater</h3>
<div class="repeater" data-prefix="perch_23_quotes" data-item-count="0" data-init="true">
	<div class="repeated ui-sortable">
		{{> @repeater-row }}
		{{> @repeater-row }}
		{{> @repeater-row }}
	</div>
	{{> @repeater-footer }}
</div>
/* No context defined for this component. */
  • Content:
    .repeater {
      margin: 0 $main-gutter $main-gutter ($main-gutter + $half-gutter);
      border-top: 1px solid palette(ui, keyline);
      position: relative;  
    }
    
    .repeater .repeated:after {
      content: "";
      display: block;
      border-top: 1px solid palette(ui, keyline);
      border-bottom: 1px solid palette(ui, keyline);
      height: 10px;
      width: 30px;
      background: #fff;
      position: absolute;
      left: 50%;
      top: -5px;
      transform: rotate(-45deg);
      box-shadow: 5px 5px 0 #fff, -5px -5px 0 #fff;
      transition: all .2s ease-in-out;
    }
    
    .repeater.repeater-empty .repeated:after {
      top: 0px;
      width: 32px;
      z-index: 2;
    }
    
    .repeated-item {
      display: flex;
      margin: 0 0 1px 0;
    }
    
    .repeated-item .index {
      background-color: palette(ui, light);
      padding: $half-gutter/2;
      display: flex;
      flex-direction: column;
      align-items: center;
      @include font-scale(s, helvetica);
    }
    
    .repeated-item .index .icon {
      visibility: hidden;
    }
    
    .repeated-item .index:hover .icon {
      visibility: inherit;
    }
    
    .repeated-item .index:hover .number {
      @extend .hidden;
    }
    
    .repeated-item:hover .index {
      background-color: palette(ui, light);
      cursor: ns-resize;
    }
    
    .repeated-item .field-wrap {
      padding-left: $half-gutter;
    }
    
    .repeated-fields {
      flex: 1 1 auto;
      padding-bottom: $half-gutter;
    }
    
    .repeated-item .toolbar svg {
      fill: #fff;
    }
    
    .repeated-item .rm span {
      @extend .hidden;
    }
    
    .repeated-item .rm a:link,
    .repeated-item .rm a:visited {
      color: palette(alert);
      text-decoration: none;
      @include font-scale(s, helvetica);
      display: flex;
      align-items: center;
      padding: 0 0 0.4em 0;
    }
    
    
    .repeater-heading {
      margin-left: ($half-gutter + $main-gutter);
      margin-top: $half-gutter;
      margin-bottom: $half-gutter;
      @include font-scale(base, helvetica);
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .form-simple .repeater .field-wrap {
        padding-bottom: 0;
    }
  • URL: /components/raw/full-repeater/full-repeater.scss
  • Filesystem Path: src/components/12-forms/03-organisms/05-repeaters/03-full-repeater/full-repeater.scss
  • Size: 1.9 KB

There are no notes for this item.