<!-- Default -->
<div class="grid-asset asset-image asset-display-square" data-id="114">
    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Selected -->
<div class="grid-asset asset-image asset-display-square asset-selected" data-id="114">
    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Landscape -->
<div class="grid-asset asset-image asset-display-square" data-id="114">
    <img src="/assets/img/02-library@2x.jpg" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Square -->
<div class="grid-asset asset-image asset-display-square" data-id="114">
    <img src="/assets/img/03-dukespecial@2x.jpg" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Logo -->
<div class="grid-asset asset-image asset-display-letterbox" data-id="114">
    <img src="/assets/img/04-canon-logo@2x.png" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Toosmall -->
<div class="grid-asset asset-image asset-display-square" data-id="114">
    <img src="/assets/img/05-loadingbay.jpg" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Thumbless -->
<div class="grid-asset asset-image asset-display-thumbless" data-id="114">
    <svg width="64" height="64" class="icon icon-o-video"><use xlink:href="/assets/svg/assets.svg#o-video" /></svg>
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<!-- Being Removed -->
<div class="grid-asset asset-image asset-display-square" data-id="114">
    <img src="/assets/img/01-tshirt-black-thumb@2x.jpg" alt="Preview">
    <div class="asset-meta with-thumb"><span class="title">Image title</span></div>
    <span class="asset-ratio asset-landscape"></span>
</div>

<div class="grid-asset asset-image {{ mode }}" data-id="114">
	{{#if thumb }}
	  <img src="/assets/img/{{thumb}}" alt="Preview">
	{{ else }}
	  {{ icon 'assets/o-video' 64 }}
	{{/if}}
	<div class="asset-meta with-thumb"><span class="title">Image title</span></div>
	<span class="asset-ratio asset-landscape"></span>
</div>
/* Default */
{
  "thumb": "01-tshirt-black-thumb@2x.jpg",
  "width": 100,
  "height": 150,
  "mode": "asset-display-square"
}

/* Selected */
{
  "thumb": "01-tshirt-black-thumb@2x.jpg",
  "width": 100,
  "height": 150,
  "mode": "asset-display-square asset-selected"
}

/* Landscape */
{
  "thumb": "02-library@2x.jpg",
  "width": 150,
  "height": 100,
  "mode": "asset-display-square"
}

/* Square */
{
  "thumb": "03-dukespecial@2x.jpg",
  "width": 150,
  "height": 150,
  "mode": "asset-display-square"
}

/* Logo */
{
  "thumb": "04-canon-logo@2x.png",
  "width": 150,
  "height": 150,
  "mode": "asset-display-letterbox"
}

/* Toosmall */
{
  "thumb": "05-loadingbay.jpg",
  "width": 70,
  "height": 70,
  "mode": "asset-display-square"
}

/* Thumbless */
{
  "thumb": null,
  "mode": "asset-display-thumbless"
}

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

  • Content:
    .asset-selected {
    	box-shadow: inset 0px 0px 10px 0px rgba(0,100,0,.7);
    }
    
    .asset-image, 
    .grid-asset {
    	position: relative;
    	height: auto;
    	//min-width: 150px;
    	transition: all .2s ease-in-out;
    }
    
    .grid-asset img {
    	object-fit: fill;
    	display: block;
    	height: 150px;
    }
    
    .asset-grid .asset-display-letterbox img {
    	object-fit: scale-down;
    }
    
    .asset-grid .asset-display-thumbless {
    	width: 150px;
    	min-height: 150px;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	background-color: palette(ui);
    }
    
    .asset-grid .asset-display-thumbless svg {
    	margin-top: -25px;
    	fill: rgba(255, 255, 255, 0.5);
    }
    
    .asset-meta {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	background-color: rgba(0,0,0,.7);
    	color: #fff;
    	padding: 0.4rem;
    	@include font-scale(s, helvetica);
    }
    
    .asset-selected .asset-meta {
    	background-color: rgba(0,100,0,.7);
    }
    
    .asset-icon-cell svg {
    	vertical-align: text-top;
    }
    
    .asset-icon-cell {
    	width: 20px;
    }
    
    svg.asset-icon {
    	margin-right: 10px;
    }
    
    .grid-asset {
    	min-width: 50px;
    	min-height: 50px;
    	cursor: pointer;
    }
    
    @include media(">bp-m") {
      .input-detailed-help {
        float: right;
        width: 50%;
      }
    }
    
  • URL: /components/raw/grid-asset/grid-asset.scss
  • Filesystem Path: src/components/10-assets/01-atoms/01-grid-asset/grid-asset.scss
  • Size: 1.2 KB

There are no notes for this item.