<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - UOIT "card grid" component</title>
<script src="https://cdn.rawgit.com/PrismJS/prism/gh-pages/prism.js" data-manual></script>
<link rel='stylesheet' href='https://shared.uoit.ca/global-2.1/dist/css/uoit.css'>
<style>
.container {
margin: 40px;
}
.card-grid .columns {
margin-bottom: 15px;
}
.card-grid .block {
position: relative;
min-height: 100px;
overflow: hidden;
padding: 20px;
}
.card-grid .image,
.card-grid .bgcolor {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.card-grid .image {
z-index: 1;
background-size: cover;
background-position: center;
}
.card-grid .bgcolor {
z-index: 2;
}
.card-grid .contents {
position: relative;
z-index: 3;
}
.card-grid .icon {
position: relative;
z-index: 3;
font-size: 2.5em;
}
.card-grid .header:last-child,
.card-grid .description:last-child {
margin-bottom: 0;
}
.card-grid-bgcolor .icon,
.card-grid-bgcolor .header,
.card-grid-bgcolor p {
color: #fff;
}
.card-grid-bgcolor .button {
background: transparent;
border: solid 1px white;
}
.card-grid-bgcolor .button:hover {
background: rgba(255, 255, 255, 0.15);
}
.card-grid-bgcolor .bgcolor {
opacity: 0.75;
transition: 0.35s;
}
.card-grid:not(.card-grid-bgcolor) .bgcolor {
background: #edeeef;
}
.card-grid-icon .icon {
margin-bottom: 0.375em;
display: block;
font-size: 3em;
text-align: center;
opacity: 0.7;
}
.card-grid-icon:not(.card-grid-large-text) {
text-align: center;
}
.card-grid:not(.card-grid-icon) .icon {
margin-right: 20px;
float: left;
}
.card-grid-image .image {
transition: 0.35s;
}
.card-grid-image .block:hover .bgcolor {
opacity: 0.95;
}
.card-grid-image .block:hover .image {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.card-grid-image-half .contents {
margin-top: 100px;
}
.card-grid-image-half .image {
height: 100px;
}
.card-grid-image-half .bgcolor {
top: 100px;
}
.card-grid-image-half .icon {
margin-top: 100px;
}
.card-grid-image-half.card-grid-large-text .icon {
margin-top: 50px;
}
.card-grid-image-half.card-grid-icon:not(.card-grid-large-text) .contents {
margin-top: 0;
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .icon {
display: none;
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .contents {
-webkit-transform: translateX(0) translateY(calc(100% + 20px + 0.5rem));
transform: translateX(0) translateY(calc(100% + 20px + 0.5rem));
padding-left: 0;
margin-top: 0;
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .header {
transition: 0.25s 0.1s;
-webkit-transform: translateY(calc(-100% - 20px));
transform: translateY(calc(-100% - 20px));
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .bgcolor {
top: 0;
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .image {
height: 100%;
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .block:hover .bgcolor {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.card-grid-image-half.card-grid-large-text:not(.card-grid-icon) .block:hover .header {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.card-grid-large-text .block {
display: flex;
align-items: center;
}
.card-grid-large-text .block:hover .contents,
.card-grid-large-text .block:hover .icon {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.card-grid-large-text .block:hover .icon {
opacity: 0.7;
}
.card-grid-large-text .contents {
padding-left: 5em;
-webkit-transform: translateX(-5em);
transform: translateX(-5em);
transition: 0.35s;
}
.card-grid-large-text .header {
font-size: 2.25em;
}
.card-grid-large-text .icon {
position: absolute;
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
transition: 0.35s;
font-size: 3em;
}
.card-grid-large-text.card-grid-icon .icon {
font-size: 4em;
}
kbd {
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
color: #333;
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
margin: 0 .1em;
padding: .1em .6em;
text-shadow: 0 1px 0 #fff;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<section id="main-content" class="container" ng-app ng-init="elements = { icon: { show: true, type: 'cursor' }, title: true, desc: true, btn: true, img: true }; styles = { bg: ['card-grid-bgcolor', 'card-grid-image'], content: ['card-grid-icon'] }">
<div class="page-row row">
<div class="row card-grid {{ styles.bg.join(' ') }} {{ styles.content.join(' ') }}">
<section class="columns">
<div class="block">
<span class="icon icon_{{ elements.icon.type }}" ng-if="elements.icon.show"></span>
<div class="contents">
<h2 class="header" ng-if="elements.title">Fancy box</h2>
<p class="description" ng-if="elements.desc">Fancy lil' description that should truncate when it gets too long, because long descriptions are a buzzkill.</p>
<a class="button" ng-if="elements.btn">This button</a>
</div>
<div class="bgcolor pink"></div>
<div class="image" style="background-image:url('https://virtualtour.uoit.ca/assets/images/north_bg.jpg');" ng-if="elements.img"></div>
</div>
</section>
<section class="columns">
<div class="block">
<span class="icon icon_{{ elements.icon.type }}" ng-if="elements.icon.show"></span>
<div class="contents">
<h2 class="header" ng-if="elements.title">Fancy box</h2>
<p class="description" ng-if="elements.desc">Fancy lil' description that truncates when it gets too long, because long descriptions are a total buzzkill.</p>
<a class="button" ng-if="elements.btn">This button</a>
</div>
<div class="bgcolor green"></div>
<div class="image" style="background-image:url('https://virtualtour.uoit.ca/assets/images/north_bg.jpg');" ng-if="elements.img"></div>
</div>
</section>
<section class="columns">
<div class="block">
<span class="icon icon_{{ elements.icon.type }}" ng-if="elements.icon.show"></span>
<div class="contents">
<h2 class="header" ng-if="elements.title">Fancy box</h2>
<p class="description" ng-if="elements.desc">Fancy lil' description that truncates when it gets too long, because long descriptions are a total buzzkill.</p>
<a class="button" ng-if="elements.btn">This button</a>
</div>
<div class="bgcolor orange"></div>
<div class="image" style="background-image:url('https://virtualtour.uoit.ca/assets/images/north_bg.jpg');" ng-if="elements.img"></div>
</div>
</section>
</div>
<div class="row home-modules">
<section class="columns">
<form class="row home-module" ng-submit="$event.preventDefault()">
<fieldset class="fieldset columns">
<legend>Elements</legend>
<label>
<input type="checkbox" ng-model="elements.icon.show" />Icon
<select ng-model="elements.icon.type">
<option>apple</option>
<option>arrow</option>
<option>arrow_down</option>
<option>arrow_left</option>
<option>arrow_right</option>
<option>arrow_up</option>
<option>atom</option>
<option>audience</option>
<option>award</option>
<option>bargraph</option>
<option>batterylevel</option>
<option>blackboard</option>
<option>blocks</option>
<option>books</option>
<option>bookuoit</option>
<option>brain</option>
<option>brainoutline</option>
<option>bricks</option>
<option>bunsenburner</option>
<option>bus</option>
<option>calculator</option>
<option>calendar</option>
<option>cancel</option>
<option>canceloutline</option>
<option>car</option>
<option>carside</option>
<option>chat</option>
<option>chattyping</option>
<option>check</option>
<option>checkbox</option>
<option>checkoutline</option>
<option>clipboard</option>
<option>clock</option>
<option>clock2</option>
<option>codingbrackets</option>
<option>coins</option>
<option>compass</option>
<option>compass2</option>
<option>computerchip</option>
<option>construction</option>
<option>constructionworkers</option>
<option>curling</option>
<option>cursor</option>
<option>dancer</option>
<option>dashboard</option>
<option>diploma</option>
<option>directionalarrows</option>
<option>directory</option>
<option>dna</option>
<option>dropper</option>
<option>emergency</option>
<option>energy</option>
<option>engine</option>
<option>envelope</option>
<option>flowchart</option>
<option>folder</option>
<option>folderwithprofilegear</option>
<option>friends</option>
<option>gamecontroller</option>
<option>gasmask</option>
<option>gavel</option>
<option>gear</option>
<option>gears</option>
<option>glasses</option>
<option>globe</option>
<option>golf</option>
<option>gradcap</option>
<option>graduate</option>
<option>greenlightbulb</option>
<option>handcuffs</option>
<option>handshake</option>
<option>hazard</option>
<option>health</option>
<option>heart</option>
<option>hockey</option>
<option>home</option>
<option>idandlaptop</option>
<option>idlock</option>
<option>key</option>
<option>laptop</option>
<option>laptopcheckboxes</option>
<option>laptopgear</option>
<option>laptopsound</option>
<option>laptoptablet</option>
<option>laptoptools</option>
<option>leaf</option>
<option>letters</option>
<option>lightbulb</option>
<option>linechart</option>
<option>linegraph</option>
<option>lockeddrive</option>
<option>locker</option>
<option>magnifyingglass</option>
<option>mail</option>
<option>mailoutline</option>
<option>map</option>
<option>mapmarker</option>
<option>mathsymbols</option>
<option>measuringtape</option>
<option>mechanicalarm</option>
<option>megaphone</option>
<option>menu</option>
<option>microscope</option>
<option>molecules</option>
<option>mouse</option>
<option>needle</option>
<option>oars</option>
<option>paper</option>
<option>paper2</option>
<option>paperclip</option>
<option>pause</option>
<option>pen</option>
<option>pencil</option>
<option>pencilholder</option>
<option>penwriting</option>
<option>person</option>
<option>phone</option>
<option>piggybank</option>
<option>pill</option>
<option>play</option>
<option>plug</option>
<option>points</option>
<option>printer</option>
<option>professor</option>
<option>profilesettings</option>
<option>qa</option>
<option>question</option>
<option>quicklinks</option>
<option>readers</option>
<option>relativity</option>
<option>ruler</option>
<option>ruler2</option>
<option>runner</option>
<option>runners</option>
<option>scales</option>
<option>search</option>
<option>sharelink</option>
<option>skeletalhand</option>
<option>sling</option>
<option>smartphone</option>
<option>soccer</option>
<option>social_facebook</option>
<option>social_instagram</option>
<option>social_linkedin</option>
<option>social_twitter</option>
<option>social_youtube</option>
<option>solarpanels</option>
<option>stein</option>
<option>stopwatch</option>
<option>sunflowers</option>
<option>tablet</option>
<option>teacher</option>
<option>tennisball</option>
<option>testtube</option>
<option>testtubes</option>
<option>ticket</option>
<option>tie</option>
<option>tools</option>
<option>train</option>
<option>trophy</option>
<option>usbkey</option>
<option>walking</option>
<option>watch</option>
<option>wifi</option>
<option>windmill</option>
</select>
</label>
<label><input type="checkbox" ng-model="elements.title" />Title</label>
<label><input type="checkbox" ng-model="elements.desc" />Description</label>
<label><input type="checkbox" ng-model="elements.btn" />Button</label>
<label><input type="checkbox" ng-model="elements.img" />Image</label>
</fieldset>
<fieldset class="fieldset columns">
<legend>Styles</legend>
<p><small><strong>*MULTISELECT:</strong> use <kbd>⌘</kbd> or <kbd>ctrl</kbd><strong> + click</strong> to select more than one option (or deselect).</small></p>
<label>Background options
<select multiple ng-model="styles.bg">
<option value="card-grid-bgcolor">Color</option>
<option value="card-grid-image">Image</option>
<option value="card-grid-image-half">Half cover</option>
</select>
</label>
<label>Content features
<select multiple ng-model="styles.content">
<option value="card-grid-icon">Emphasized icon</option>
<option value="card-grid-large-text">Sliding text</option>
</select>
</label>
</fieldset>
</form>
</section>
<section class="columns">
<div class="row home-module">
<section class="columns">
<h3>Code preview</h3>
<div><pre><code class="lang-html"><!-- CARD GRID -->
<div class="row card-grid <span ng-bind="[styles.bg.join(' '), styles.content.join(' ')].join(' ')"></span> ">
<!-- CARD BLOCK -->
<section class="columns">
<div class="block"><span ng-if="elements.icon.show">
<span class="icon icon_{{ elements.icon.type }}"></span></span>
<div class="contents">
<span ng-if="elements.title"><h2 class="header">Fancy box</h2>
</span><span ng-if="elements.desc"><p class="description">Fancy lil' description that should truncate when it gets too long, because long descriptions are a buzzkill.</p>
</span><span ng-if="elements.btn"><a class="button">This button</a>
</span></div>
<div class="bgcolor pink"></div>
<span ng-if="elements.img"><div class="image" style="background-image: url(<wbr />'https://virtualtour.uoit.ca<wbr />/assets/images/<wbr />north_bg.jpg');"></div>
</span></div>
</section>
</div></code></pre></div>
</section>
</div>
</section>
</div>
</div>
</section>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script id="rendered-js">
Prism.hooks.add('before-highlight', env => {
let firstWhiteSpaces = false;
let pos = 0;
const data = [];
const f = (elt, baseNode) => {
const o = {};
if (!baseNode) {
// Clone the original tag to keep all attributes
o.clone = elt.cloneNode(false);
o.posOpen = pos;
data.push(o);
}
for (let i = 0, l = elt.childNodes.length; i < l; i++) {if (window.CP.shouldStopExecution(0)) break;if (window.CP.shouldStopExecution(0)) break;
const child = elt.childNodes[i];
if (child.nodeType === 1) {// element
f(child);
} else if (child.nodeType === 3) {// text
if (!firstWhiteSpaces) {
// We need to ignore the first white spaces in the code block
child.data = child.data.replace(/^(?:\r?\n|\r)/, '');
firstWhiteSpaces = true;
}
pos += child.data.length;
}
}window.CP.exitedLoop(0);window.CP.exitedLoop(0);
if (!baseNode) {
o.posClose = pos;
}
};
f(env.element, true);
if (data && data.length) {
// data is an array of all existing tags
env.keepMarkup = data;
}
});
Prism.hooks.add('after-highlight', env => {
if (env.keepMarkup && env.keepMarkup.length) {
const walk = (elt, nodeState) => {
for (let i = 0, l = elt.childNodes.length; i < l; i++) {if (window.CP.shouldStopExecution(1)) break;if (window.CP.shouldStopExecution(1)) break;
const child = elt.childNodes[i];
if (child.nodeType === 1) {// element
if (!walk(child, nodeState)) {
return false;
}
} else if (child.nodeType === 3) {// text
if (!nodeState.nodeStart && nodeState.pos + child.data.length > nodeState.node.posOpen) {
// We found the start position
nodeState.nodeStart = child;
nodeState.nodeStartPos = nodeState.node.posOpen - nodeState.pos;
}
if (nodeState.nodeStart && nodeState.pos + child.data.length >= nodeState.node.posClose) {
// We found the end position
nodeState.nodeEnd = child;
nodeState.nodeEndPos = nodeState.node.posClose - nodeState.pos;
}
nodeState.pos += child.data.length;
}
if (nodeState.nodeStart && nodeState.nodeEnd) {
// Select the range and wrap it with the clone
const range = document.createRange();
range.setStart(nodeState.nodeStart, nodeState.nodeStartPos);
range.setEnd(nodeState.nodeEnd, nodeState.nodeEndPos);
nodeState.node.clone.appendChild(range.extractContents());
range.insertNode(nodeState.node.clone);
range.detach();
// Process is over
return false;
}
}window.CP.exitedLoop(1);window.CP.exitedLoop(1);
return true;
};
// For each tag, we walk the DOM to reinsert it
env.keepMarkup.forEach(node => {
walk(env.element, {
node,
pos: 0 });
});
}
});
Prism.highlightAll();
//# sourceURL=pen.js
</script>
</body>
</html>
