Portlet Design - 1.0

Portlet Design - 1.0

by Nirvanachain

HTML

<div class="MMM--hdg MMM--hdg_4 mix-MMM--hdg_spaced MMM--contentWrapper">Portlet: 3M - Content 1.0</div>

<ul class="MMM--componentInfoContainer MMM--contentWrapper">

    	<li><a class="MMM--componentInfoBtn" href="http://go.3M.com/rG-01-Stackable" target="_blank" data-component-id="rG-01-Stackable" data-component-path="3M Design Pattern/3M Components/General/rG-01-Stackable">rG-01-Stackable</a></li>

    	<li><a class="MMM--componentInfoBtn" data-component-id="rG-02-Columns" data-component-path="Design Pattern/3M Components/General/rG-02-Columns" href="http://go.3M.com/rG-02-Columns" target="_blank">rG-02-Columns</a></li>

    	<li><a class="MMM--componentInfoBtn" data-component-id="rG-03-Carousel" data-component-path="Design Pattern/3M Components/General/rG-03-Carousel" href="" target="_blank">rG-03-Carousel</a></li>

    	<li><a class="MMM--componentInfoBtn" data-component-id="rG-04-MultiColumnLinks" data-component-path="Design Pattern/3M Components/General/rG-04-MulticolumnLinks" href="http://go.3M.com/rG-04-MultiColumnLinks" target="_blank">rG-04-MulticolumnLinks</a></li>

		<li><a class="MMM--componentInfoBtn" data-component-id="rG-05-ExpandHeading" data-component-path="Design Pattern/3M Components/General/rG-05-ExpandHeading" href="http://go.3M.com/rG-05-ExpandHeading" target="_blank">rG-05-ExpandHeading</a></li>

		<li><a class="MMM--componentInfoBtn" data-component-id="rG-06-Slider" data-component-path="Design Pattern/3M Components/General/rG-06-Slider" href="http://go.3M.com/rG-06-Slider" target="_blank">rG-06-Slider</a></li>

</ul>

CSS

.MMM--componentInfoContainer {
    		position: relative;
		    text-align: center;
		 /* width: 80%; */
		    margin: 0 auto 8em;
		}

		.MMM--componentInfoContainer > * {
			display: inline-block;
			vertical-align:top;
			width: 20%;
		}

		.MMM--componentInfoBtn {
			display:block;
    		padding: 12px 6px;
    		margin:3px;

    		font-size:16px;
    		color:#FFFFFF;

		    background-color:#78CCD2;
			border-radius:4px;

			/*Animate the transistions */
			-webkit-transition: background-color 0.4s linear;
			transition: background-color 0.4s linear;
		}	

		/* Pseudo-elements can even access attributes in their parent elements */
		.MMM--componentInfoBtn::before {
		    position:absolute;
		    top: 100%;
		    left: 30%;
		    z-index: 1;

		    /** Authors may include newlines in generated content by writing '\A' in a string. This inserted line break is still subject to the 'white-space' property **/ 
		    content: attr(data-component-id) '\A Path to the component: ' attr(data-component-path); 
		    /**/ white-space: pre; 
			
			padding:12px;

			font-size: 12px;
		    color: #666666;
		    text-align: left;

		    background-color: #FFFFFF;
			border: 1px solid #000000;
		    opacity: 0;
		    /*Animate the transistions */
		    -webkit-transition: opacity 0.4s;
		    transition: opacity 0.4s;
		}

		.MMM--componentInfoBtn:hover, .MMM--componentInfoBtn:focus {
			text-decoration: none;
			color: #FFFFFF;
			background-color: #FC4817;
		}

		.MMM--componentInfoBtn:hover::before {
			opacity: 1;	
		}