Perch UI Pattern Library

Grid asset: 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>
 
<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>
 
{
  "thumb": "03-dukespecial@2x.jpg",
  "width": 150,
  "height": 150,
  "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.