//
// 12-column grid system
//
//
// Common
// _____________________________________________
& when (@media-common = true) {
/* Grid units
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.grid12-1,
.grid12-2,
.grid12-3,
.grid12-4,
.grid12-5,
.grid12-6,
.grid12-7,
.grid12-8,
.grid12-9,
.grid12-10,
.grid12-11,
.grid12-12,
.grid-full, /* Alias for full-width unit */
/* Special grid units */
.grid-col2-sidebar,
.grid-col2-main
{
/*position:relative;*/
display:inline;
float:left;
margin-left:1%;
margin-right:1%;
}
/* Basic grid units width */
.grid12-1 { width:6.33%; }
.grid12-2 { width:14.66%; }
.grid12-3 { width:23%; }
.grid12-4 { width:31.33%; }
.grid12-5 { width:39.67%; }
.grid12-6 { width:48%; }
.grid12-7 { width:56.33%; }
.grid12-8 { width:64.67%; }
.grid12-9 { width:73%; }
.grid12-10 { width:81.33%; }
.grid12-11 { width:89.67%; }
.grid12-12,
.grid-full { width:98%; }
/* Grid units without left gutter (margin) */
.no-left-gutter.grid12-1 { margin-left:0; width:7.33%; }
.no-left-gutter.grid12-2 { margin-left:0; width:15.66%; }
.no-left-gutter.grid12-3 { margin-left:0; width:24%; }
.no-left-gutter.grid12-4 { margin-left:0; width:32.33%; }
.no-left-gutter.grid12-5 { margin-left:0; width:40.67%; }
.no-left-gutter.grid12-6 { margin-left:0; width:49%; }
.no-left-gutter.grid12-7 { margin-left:0; width:57.33%; }
.no-left-gutter.grid12-8 { margin-left:0; width:65.67%; }
.no-left-gutter.grid12-9 { margin-left:0; width:74%; }
.no-left-gutter.grid12-10 { margin-left:0; width:82.33%; }
.no-left-gutter.grid12-11 { margin-left:0; width:90.67%; }
.no-left-gutter.grid12-12,
.no-left-gutter.grid-full { margin-left:0; width:99%; }
/* Grid units without right gutter (margin) */
.no-right-gutter.grid12-1 { margin-right:0; width:7.33%; }
.no-right-gutter.grid12-2 { margin-right:0; width:15.66%; }
.no-right-gutter.grid12-3 { margin-right:0; width:24%; }
.no-right-gutter.grid12-4 { margin-right:0; width:32.33%; }
.no-right-gutter.grid12-5 { margin-right:0; width:40.67%; }
.no-right-gutter.grid12-6 { margin-right:0; width:49%; }
.no-right-gutter.grid12-7 { margin-right:0; width:57.33%; }
.no-right-gutter.grid12-8 { margin-right:0; width:65.67%; }
.no-right-gutter.grid12-9 { margin-right:0; width:74%; }
.no-right-gutter.grid12-10 { margin-right:0; width:82.33%; }
.no-right-gutter.grid12-11 { margin-right:0; width:90.67%; }
.no-right-gutter.grid12-12,
.no-right-gutter.grid-full { margin-right:0; width:99%; }
/* Grid units without any gutter (margin) */
.no-gutter.grid12-1 { margin-left:0; margin-right:0; width:8.33%; }
.no-gutter.grid12-2 { margin-left:0; margin-right:0; width:16.66%; }
.no-gutter.grid12-3 { margin-left:0; margin-right:0; width:25%; }
.no-gutter.grid12-4 { margin-left:0; margin-right:0; width:33.33%; }
.no-gutter.grid12-5 { margin-left:0; margin-right:0; width:41.67%; }
.no-gutter.grid12-6 { margin-left:0; margin-right:0; width:50%; }
.no-gutter.grid12-7 { margin-left:0; margin-right:0; width:58.33%; }
.no-gutter.grid12-8 { margin-left:0; margin-right:0; width:66.67%; }
.no-gutter.grid12-9 { margin-left:0; margin-right:0; width:75%; }
.no-gutter.grid12-10 { margin-left:0; margin-right:0; width:83.33%; }
.no-gutter.grid12-11 { margin-left:0; margin-right:0; width:91.67%; }
.no-gutter.grid12-12,
.no-gutter.grid-full { margin-left:0; margin-right:0; width:100%; }
/* Utility classes
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* Units with no gutter (margin): alpha - first unit in a row, omega - last unit in a row */
.alpha { margin-left:0; }
.omega { margin-right:0; }
/* Hide element if screen width is lower than the width specified in the class name */
.hide-below-1680 { display:none !important; }
.hide-below-1440 { display:none !important; }
.hide-below-1360 { display:none !important; }
.hide-below-1280 { display:none !important; }
/* Grid units containers
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* Grid units container:
clears floats (place grid units inside "div" with this class)
-------------------------------------------------------------- */
.grid-container { *zoom: 1; clear: both; }
.grid-container:before,
.grid-container:after { display: table; line-height: 0; content: ""; }
.grid-container:after { clear: both; }
/* Grid unit container:
clears floats and adds vertical margin between units
-------------------------------------------------------------- */
.grid-container-spaced { *zoom: 1; clear: both; }
.grid-container-spaced:before,
.grid-container-spaced:after { display: table; line-height: 0; content: ""; }
.grid-container-spaced:after { clear: both; }
.grid-container-spaced .grid12-1,
.grid-container-spaced .grid12-2,
.grid-container-spaced .grid12-3,
.grid-container-spaced .grid12-4,
.grid-container-spaced .grid12-5,
.grid-container-spaced .grid12-6,
.grid-container-spaced .grid12-7,
.grid-container-spaced .grid12-8,
.grid-container-spaced .grid12-9,
.grid-container-spaced .grid12-10,
.grid-container-spaced .grid12-11,
.grid-container-spaced .grid12-12,
.grid-container-spaced .grid-full
{
margin-bottom: 2%;
}
/* Grid presentation
-------------------------------------------------------------- */
.show-grid [class*="grid12-"] {
background-color: #eee;
text-align: center;
min-height: 40px;
line-height: 40px;
transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}
.show-grid [class*="grid12-"]:hover {
background-color: #F08080;
}
} /* end: media-common */
|