Skip to content

Instantly share code, notes, and snippets.

@mistergraphx
Last active August 29, 2015 14:09
Show Gist options
  • Save mistergraphx/8450e4a2e862bb92a1a5 to your computer and use it in GitHub Desktop.
Save mistergraphx/8450e4a2e862bb92a1a5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>
// ----
// libsass (v3.0.1)
// ----
/* # Vertical-align
Use it to verticaly align an element, in a container
Source
: <http://www.developerdrive.com/2014/11/15-essential-sass-mixins/>
@mixin vertical-align - verticaly align an element, in a container
Styleguide libs.mixins.positionning.vertical-align
*/
$autoprefixer: true !default;
@mixin vertical-align {
position: relative;
top: 50%;
@if $autoprefixer == false {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
transform: translateY(-50%);
}
.container {
box-sizing: border-box;
width: 600px;
height: 600px;
border: 1px solid silver
.item-aligned{
// @include vertical-align();
}
}
/* #
A thumbnail or block list, with rounded borders
*/
ul.rounded-grid {
/* Target the first box in the first row */
/* Target the last box in the first row in the last column */
/* Target the first box in the last row */
/* Target the last box in the last row in the last column */
/* Feel free to change parameters here */
line-height: 10em;
width: auto; }
ul.rounded-grid li {
float: left;
width: 25%; }
ul.rounded-grid li:first-child {
border-top-left-radius: 1em; }
ul.rounded-grid li:nth-child(4) {
border-top-right-radius: 1em; }
ul.rounded-grid li:nth-child(4n+1):nth-last-child(1) {
border-bottom-left-radius: 1em; }
ul.rounded-grid li:nth-child(4n+1):nth-last-child(2) {
border-bottom-left-radius: 1em; }
ul.rounded-grid li:nth-child(4n+1):nth-last-child(3) {
border-bottom-left-radius: 1em; }
ul.rounded-grid li:nth-child(4n+1):nth-last-child(4) {
border-bottom-left-radius: 1em; }
ul.rounded-grid li:nth-child(4n+4):last-child {
border-bottom-right-radius: 1em; }
.rounded-grid li {
box-sizing: border-box;
border: 1px solid white;
list-style: none;
color: white;
background: #268bd2;
text-align: center;
overflow: hidden; }
.rounded-grid li img {
width: 100%;
height: auto;
display: block; }
<div class="container">
<img src="http://lorempixel.com/400/200" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment