<!-- 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>

<!-- Landscape -->
<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/02-library@2x.jpg" width="150" height="100" 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">Landscape 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>

<!-- Square -->
<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/03-dukespecial@2x.jpg" width="150" 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">Square 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>

<!-- Thumbless -->
<div class="asset-badge field-wrap" data-for="perch_image_assetID">
    <div class="asset-badge-inner">
        <div class="asset-badge-thumb  thumbless">
            <svg width="64" height="64" class="icon icon-upload"><use xlink:href="/assets/svg/assets.svg#upload" /></svg>
            <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">Thumbless</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>

<!-- Being Removed -->
<div class="asset-badge field-wrap" data-for="perch_image_assetID">
    <div class="asset-badge-inner">
        <div class="asset-badge-thumb asset-strikethrough">
            <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">Removed</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>

<!-- Upload -->
<div class="asset-badge field-wrap" data-for="perch_image_assetID">
    <div class="asset-badge-inner">
        <div class="asset-badge-thumb  thumbless">
            <svg width="64" height="64" class="icon icon-upload"><use xlink:href="/assets/svg/assets.svg#upload" /></svg>
            <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">Image</h3>
            <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>
/* Default */
{
  "title": "Default image",
  "thumb": "01-tshirt-black-thumb@2x.jpg",
  "width": 100,
  "height": 150
}

/* Landscape */
{
  "title": "Landscape image",
  "thumb": "02-library@2x.jpg",
  "width": 150,
  "height": 100
}

/* Square */
{
  "title": "Square image",
  "thumb": "03-dukespecial@2x.jpg",
  "width": 150,
  "height": 150
}

/* Thumbless */
{
  "title": "Thumbless",
  "thumb": null
}

/* Being Removed */
{
  "title": "Removed",
  "thumb": "01-tshirt-black-thumb@2x.jpg",
  "width": 100,
  "height": 150,
  "strikethrough": "asset-strikethrough"
}

/* Upload */
{
  "title": "Image",
  "thumb": null,
  "is_empty": true
}

  • 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.