bryce/jquery.uls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS grid made ULS-specific

Browse Source 
CSS rules used in the grid are prefixed with ULS specific elements so that
they do not affect unintended elements.
This commit is contained in:
pginer
2012-11-26 13:45:31 +01:00
parent 913a33d2ba
commit 2eb2608cd9
1 changed files with 69 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
css/jquery.uls.grid.css
View File

@@ -7,232 +7,232 @@
} }
/* Misc ---------------------- */ /* Misc ---------------------- */
.left { .uls-menu .left {
float: left; float: left;
} }
.right { .uls-menu .right {
float: right; float: right;
} }
.text-left { .uls-menu .text-left {
text-align: left; text-align: left;
} }
.text-right { .uls-menu .text-right {
text-align: right; text-align: right;
} }
.text-center { .uls-menu .text-center {
text-align: center; text-align: center;
} }
.hide { .uls-menu .hide {
display: none; display: none;
} }
.highlight { .uls-menu .highlight {
background: #ffff99; background: #ffff99;
} }
/* The Grid ---------------------- */ /* The Grid ---------------------- */
.row { .uls-menu .row {
width: 100%; width: 100%;
max-width: none; max-width: none;
min-width: 600px; min-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
.row .row { .uls-menu .row .row {
width: auto; width: auto;
max-width: none; max-width: none;
min-width: 0; min-width: 0;
margin: 0 -5px; margin: 0 -5px;
} }
.row.collapse .column, .row.collapse .columns { .uls-menu .row.collapse .column, .uls-menu .row.collapse .columns {
padding: 0; padding: 0;
} }
.row .row { .uls-menu .row .row {
width: auto; width: auto;
max-width: none; max-width: none;
min-width: 0; min-width: 0;
margin: 0 -5px; margin: 0 -5px;
} }
.row .row.collapse { .uls-menu .row .row.collapse {
margin: 0; margin: 0;
} }
.column, .columns { .uls-menu .column,.uls-menu .columns {
float: left; float: left;
min-height: 1px; min-height: 1px;
padding: 0 5px; padding: 0 5px;
position: relative; position: relative;
} }
.column.centered, .columns.centered { .uls-menu .column.centered, .uls-menu .columns.centered {
float: none; float: none;
margin: 0 auto; margin: 0 auto;
} }
.row .one { .uls-menu .row .one {
width: 8.333%; width: 8.333%;
} }
.row .two { .uls-menu .row .two {
width: 16.667%; width: 16.667%;
} }
.row .three { .uls-menu .row .three {
width: 25%; width: 25%;
} }
.row .four { .uls-menu .row .four {
width: 33.333%; width: 33.333%;
} }
.row .five { .uls-menu .row .five {
width: 41.667%; width: 41.667%;
} }
.row .six { .uls-menu .row .six {
width: 50%; width: 50%;
} }
.row .seven { .uls-menu .row .seven {
width: 58.333%; width: 58.333%;
} }
.row .eight { .uls-menu .row .eight {
width: 66.667%; width: 66.667%;
} }
.row .nine { .uls-menu .row .nine {
width: 75%; width: 75%;
} }
.row .ten { .uls-menu .row .ten {
width: 83.333%; width: 83.333%;
} }
.row .eleven { .uls-menu .row .eleven {
width: 91.667%; width: 91.667%;
} }
.row .twelve { .uls-menu .row .twelve {
width: 100%; width: 100%;
} }
.row .offset-by-one { .uls-menu .row .offset-by-one {
margin-left: 8.333%; margin-left: 8.333%;
} }
.row .offset-by-two { .uls-menu .row .offset-by-two {
margin-left: 16.667%; margin-left: 16.667%;
} }
.row .offset-by-three { .uls-menu .row .offset-by-three {
margin-left: 25%; margin-left: 25%;
} }
.row .offset-by-four { .uls-menu .row .offset-by-four {
margin-left: 33.333%; margin-left: 33.333%;
} }
.row .offset-by-five { .uls-menu .row .offset-by-five {
margin-left: 41.667%; margin-left: 41.667%;
} }
.row .offset-by-six { .uls-menu .row .offset-by-six {
margin-left: 50%; margin-left: 50%;
} }
.row .offset-by-seven { .uls-menu .row .offset-by-seven {
margin-left: 58.333%; margin-left: 58.333%;
} }
.row .offset-by-eight { .uls-menu .row .offset-by-eight {
margin-left: 66.667%; margin-left: 66.667%;
} }
.row .offset-by-nine { .uls-menu .row .offset-by-nine {
margin-left: 75%; margin-left: 75%;
} }
.row .offset-by-ten { .uls-menu .row .offset-by-ten {
margin-left: 83.333%; margin-left: 83.333%;
} }
.push-two { .uls-menu .push-two {
left: 16.667%; left: 16.667%;
} }
.pull-two { .uls-menu .pull-two {
right: 16.667%; right: 16.667%;
} }
.push-three { .uls-menu .push-three {
left: 25%; left: 25%;
} }
.pull-three { .uls-menu .pull-three {
right: 25%; right: 25%;
} }
.push-four { .uls-menu .push-four {
left: 33.333%; left: 33.333%;
} }
.pull-four { .uls-menu .pull-four {
right: 33.333%; right: 33.333%;
} }
.push-five { .uls-menu .push-five {
left: 41.667%; left: 41.667%;
} }
.pull-five { .uls-menu .pull-five {
right: 41.667%; right: 41.667%;
} }
.push-six { .uls-menu .push-six {
left: 50%; left: 50%;
} }
.pull-six { .uls-menu .pull-six {
right: 50%; right: 50%;
} }
.push-seven { .uls-menu .push-seven {
left: 58.333%; left: 58.333%;
} }
.pull-seven { .uls-menu .pull-seven {
right: 58.333%; right: 58.333%;
} }
.push-eight { .uls-menu .push-eight {
left: 66.667%; left: 66.667%;
} }
.pull-eight { .uls-menu .pull-eight {
right: 66.667%; right: 66.667%;
} }
.push-nine { .uls-menu .push-nine {
left: 75%; left: 75%;
} }
.pull-nine { .uls-menu .pull-nine {
right: 75%; right: 75%;
} }
.push-ten { .uls-menu .push-ten {
left: 83.333%; left: 83.333%;
} }
.pull-ten { .uls-menu .pull-ten {
right: 83.333%; right: 83.333%;
} }
img, object, embed { /*img, object, embed {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
@@ -244,16 +244,17 @@ img {
#map_canvas img, .map_canvas img { #map_canvas img, .map_canvas img {
max-width: none !important; max-width: none !important;
} }
*/
/* Nicolas Gallagher's micro clearfix */ /* Nicolas Gallagher's micro clearfix */
.row { .uls-menu .row {
*zoom: 1; *zoom: 1;
} }
.row:before, .row:after { .uls-menu .row:before, .uls-menu .row:after {
content: ""; content: "";
display: table; display: table;
} }
.row:after { .uls-menu .row:after {
clear: both; clear: both;
} }
@@ -268,53 +269,52 @@ img {
lines below to support arbitrary height, but know lines below to support arbitrary height, but know
that IE7/8 do not support :nth-child. that IE7/8 do not support :nth-child.
-------------------------------------------------- */ -------------------------------------------------- */
.block-grid { .uls-menu .block-grid {
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
} }
.block-grid > li { .uls-menu .block-grid > li {
display: block; display: block;
height: auto; height: auto;
float: left; float: left;
} }
.block-grid.two-up { .uls-menu .block-grid.two-up {
margin: 0 -15px; margin: 0 -15px;
} }
.block-grid.two-up > li { .uls-menu .block-grid.two-up > li {
width: 50%; width: 50%;
padding: 0 15px 15px; padding: 0 15px 15px;
} }
/* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ /* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */
.block-grid.three-up { .uls-menu .block-grid.three-up {
margin: 0 -12px; margin: 0 -12px;
} }
.block-grid.three-up > li { .uls-menu .block-grid.three-up > li {
width: 33.33%; width: 33.33%;
padding: 0 12px 12px; padding: 0 12px 12px;
} }
/* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ /* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */
.block-grid.four-up { .uls-menu .block-grid.four-up {
margin: 0 -10px; margin: 0 -10px;
} }
.block-grid.four-up > li { .uls-menu .block-grid.four-up > li {
width: 25%; width: 25%;
padding: 0 10px 10px; padding: 0 10px 10px;
} }
/* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ /* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */
.block-grid.five-up { .uls-menu .block-grid.five-up {
margin: 0 -8px; margin: 0 -8px;
} }
.block-grid.five-up > li { .uls-menu .block-grid.five-up > li {
width: 20%; width: 20%;
padding: 0 8px 8px; padding: 0 8px 8px;
} }