Perch UI Pattern Library

Asset badge: Default 

<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 class="asset-badge field-wrap" data-for="perch_image_assetID">
	<div class="asset-badge-inner">
		<div class="asset-badge-thumb {{ strikethrough }}{{#if thumb }}{{ else }} thumbless{{/if}}">
			{{#if thumb }}
			  <img src="/assets/img/{{thumb}}" width="{{width}}" height="{{height}}" alt="Preview">
			{{ else }}
			  {{ icon 'assets/upload' 64 }}
			{{/if}}
			<div class="asset-badge-remove">
				<span class="asset-ban hidden">{{ icon 'assets/ban-alt' 64 }}</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">
					{{icon 'core/cancel' 24 }}
				</a>
			</div>
		</div>
		<div class="asset-badge-meta">
		{{#if is_empty }}
			<h3 class="title">Image</h3>
		{{else}}
			<h3 class="title">{{title}}</h3>
			<ul class="meta">
				<li>{{icon 'assets/o-photo' 12}} Image / JPEG</li>
				<li>{{icon 'assets/o-crop' 12}} 600 &times; 898 px @ 67KB</li>
			</ul>
		{{/if}}
		<div class="asset-add">
			<a href="#">Select or upload an image</a>
		</div>
			
		</div>
	</div>
</div>
 
{
  "title": "Default image",
  "thumb": "01-tshirt-black-thumb@2x.jpg",
  "width": 100,
  "height": 150
}
  • Content: 
    .asset-badge,
body .form-simple .asset-badge {
	width: 95%;
	//padding-left: 0;
	position: relative;
}

.asset-badge-inner {
	display: flex;
}

.asset-badge-meta {
	margin: 0 $half-gutter;
}

.asset-badge .title {
	@include font-scale(sm, helvetica);
	margin: 0 0 $half-gutter 0;
}

.asset-badge .meta {
	@include font-scale(sm, helvetica);
	color: palette(type, light);
	padding: 0;
	list-style: none;
	margin: 0;
}

.asset-badge-remove-fields.js {
	@extend .off-screen;
}

.asset-badge-remove-action {
	transition: all .2s ease-in-out;
	padding: 1px;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	position: absolute;
	top: -4px;
	left: -12px;
	opacity: 0;
}


.asset-badge:hover .asset-badge-remove-action {
	color: palette(alert, base);
	background-color: #fff;
	opacity: 1;
}

.asset-add {
	@include font-scale(sm, helvetica);
}

.asset-strikethrough {
	background-color: palette(ui, light);
}

.asset-strikethrough img,
.asset-strikethrough.thumbless>svg {
	opacity: 0.5;
	filter: blur(3px);
}

.asset-ban {
	position: absolute;
	top: 6px;
	left: 0;
	color: palette(ui, frosted);
	display: flex;
	align-items: center;
	justify-content: center;
}

.asset-ban.hidden {
	display: none;
}

.asset-badge-thumb.thumbless {
	width: 150px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid palette(ui, keyline);
	color: palette(type, lighter);
	background-color: palette(ui, panel);
}

.asset-badge-thumb img {
	display: block;
}

/*
.asset-badge {
	width: 95%;
}

.asset-badge-inner {
	border: 1px solid palette(ui);
	display: flex;
	border-radius: 3px;
}

.asset-badge-thumb {
	flex: 0 0 auto;
	border-right: 1px solid palette(ui);
	width: 150px;
	display: flex;
	align-items: center;
   	justify-content: center;
   	background-color: palette(ui, darker);
}

.asset-badge-thumb svg {
	fill: palette(ui, dark);
}

.asset-badge-inner:hover .asset-badge-thumb svg {
	fill: #fff;
}

.asset-badge-meta {
	width: 100%;
	@include font-scale(s, helvetica);
	color: palette(type, dark);
}

.asset-badge-remove {
	border-bottom: 1px solid palette(ui);
	padding: $half-gutter;
	width: 100%;
	text-align: right;
}

.asset-badge-remove label {
	display: inline;
	color: palette(alert);
}

.asset-badge-inner .asset-badge-thumb > * {
	display: block;
	//margin: 10px;
}

.asset-badge .meta {
	margin: $half-gutter;
	padding: 0;
	list-style: none;
}

.asset-badge .meta .title {
	font-weight: bold;
}

.asset-strikethrough {
	background-color: rgba(150, 50, 50, 0.5);
}

.asset-strikethrough img {
	opacity: 0.5;
}

.asset-add {
	padding: 0.2em 0;
	@include font-scale(m, helvetica);
}

.asset-add a {
	color: palette(type, dark);
}

@include media(">bp-s") {

  .asset-badge-inner {
    width: 70%;
  }

}

@include media(">bp-m") {
  .asset-badge-inner  {
    width: 40%;
  }

}
*/
  • URL: /components/raw/asset-badge/asset-badge.scss
  • Filesystem Path: src/components/10-assets/02-molecules/05-asset-badge/asset-badge.scss
  • Size: 2.8 KB

There are no notes for this item.