<div class="submit-bar pinned">

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

    <div class="submit-bar-actions">
        <input type="submit" class="button button-simple" value="Submit"> or <a href="/perch/core/users">Cancel</a>
    </div>
</div>
<div class="submit-bar {{class}}">
	{{ render '@single-checkbox' }}
	<div class="submit-bar-actions">
		{{ render '@button-simple--default' }}
	 	or <a href="/perch/core/users">Cancel</a>
	</div>
</div>
{
  "class": "pinned"
}
  • Content:
    .submit-bar {
    	padding: 10px ($main-gutter+$half-gutter);
    	border-top: 1px solid palette(ui);
    	display: flex;
    	align-items: center;
    	@include font-scale(m, helvetica);
    	backdrop-filter: blur(6px);
    	transition: all .2s ease-in-out;
    }
    
    .submit-bar .field-wrap {
    	margin: 0 0 0 0;
    	padding-bottom: 0;
    }
    
    .submit-bar .checkbox-single {
    	margin-right: $main-gutter;
    }
    
    .submit-bar {
    	// position: absolute;
    	// bottom: 0;
    	// left: 0;
    	// right: 0;
    	// left: 0;
    }
    
    .submit-bar.pinned {
    	border-top: 1px solid palette(ui, keyline);
    	background-color: palette(ui, frosted);
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	z-index: 2;
    }
    
    .submit-bar .button {
    	background-color: #fff;
    	margin-right: ($half-gutter/2);
    }
    
    .form-simple.with-pinned {
    	padding-bottom: 68px;
    }
    
    .submit-bar a:link,
    .submit-bar a:visited {
    	color: palette(type, dark);
    	margin-left: ($half-gutter/2);
    }
    
    @include media(">bp-s") {
    
    	.submit-bar.pinned {
    		left: $sidebar-width;
    	}
    }
    
  • URL: /components/raw/submit-bar/submit-bar.scss
  • Filesystem Path: src/components/12-forms/01-atoms/07-submit-bar/submit-bar.scss
  • Size: 956 Bytes

There are no notes for this item.