diff --git a/css/views_fluid_grid.advanced.css b/css/views_fluid_grid.advanced.css new file mode 100644 index 0000000..93d97db --- /dev/null +++ b/css/views_fluid_grid.advanced.css @@ -0,0 +1,80 @@ + +/* Items margin options. */ +ul.views-fluid-grid-items-h-margin-0 li.views-fluid-grid-item { margin-left: 0; margin-right: 0; } +ul.views-fluid-grid-items-h-margin-2px li.views-fluid-grid-item { margin-left: 2px; margin-right: 2px; } +ul.views-fluid-grid-items-h-margin-4px li.views-fluid-grid-item { margin-left: 4px; margin-right: 4px; } +ul.views-fluid-grid-items-h-margin-6px li.views-fluid-grid-item { margin-left: 6px; margin-right: 6px; } +ul.views-fluid-grid-items-h-margin-8px li.views-fluid-grid-item { margin-left: 8px; margin-right: 8px; } +ul.views-fluid-grid-items-h-margin-10px li.views-fluid-grid-item { margin-left: 10px; margin-right: 10px; } + +ul.views-fluid-grid-items-h-margin-0-2em li.views-fluid-grid-item { margin-left: 0.2em; margin-right: 0.2em; } +ul.views-fluid-grid-items-h-margin-0-5em li.views-fluid-grid-item { margin-left: 0.5em; margin-right: 0.5em; } +ul.views-fluid-grid-items-h-margin-0-8em li.views-fluid-grid-item { margin-left: 0.8em; margin-right: 0.8em; } +ul.views-fluid-grid-items-h-margin-1em li.views-fluid-grid-item { margin-left: 1em; margin-right: 1em; } +ul.views-fluid-grid-items-h-margin-1-2em li.views-fluid-grid-item { margin-left: 1.2em; margin-right: 1.2em; } +ul.views-fluid-grid-items-h-margin-1-5em li.views-fluid-grid-item { margin-left: 1.5em; margin-right: 1.5em; } +ul.views-fluid-grid-items-h-margin-1-8em li.views-fluid-grid-item { margin-left: 1.8em; margin-right: 1.8em; } +ul.views-fluid-grid-items-h-margin-2em li.views-fluid-grid-item { margin-left: 2em; margin-right: 2em; } + +ul.views-fluid-grid-items-v-margin-0 li.views-fluid-grid-item { margin-top: 0; margin-bottom: 0; } +ul.views-fluid-grid-items-v-margin-2px li.views-fluid-grid-item { margin-top: 2px; margin-bottom: 2px; } +ul.views-fluid-grid-items-v-margin-4px li.views-fluid-grid-item { margin-top: 4px; margin-bottom: 4px; } +ul.views-fluid-grid-items-v-margin-6px li.views-fluid-grid-item { margin-top: 6px; margin-bottom: 6px; } +ul.views-fluid-grid-items-v-margin-8px li.views-fluid-grid-item { margin-top: 8px; margin-bottom: 8px; } +ul.views-fluid-grid-items-v-margin-10px li.views-fluid-grid-item { margin-top: 10px; margin-bottom: 10px; } + +ul.views-fluid-grid-items-v-margin-0-2em li.views-fluid-grid-item { margin-top: 0.2em; margin-bottom: 0.2em; } +ul.views-fluid-grid-items-v-margin-0-5em li.views-fluid-grid-item { margin-top: 0.5em; margin-bottom: 0.5em; } +ul.views-fluid-grid-items-v-margin-0-8em li.views-fluid-grid-item { margin-top: 0.8em; margin-bottom: 0.8em; } +ul.views-fluid-grid-items-v-margin-1em li.views-fluid-grid-item { margin-top: 1em; margin-bottom: 1em; } +ul.views-fluid-grid-items-v-margin-1-2em li.views-fluid-grid-item { margin-top: 1.2em; margin-bottom: 1.2em; } +ul.views-fluid-grid-items-v-margin-1-5em li.views-fluid-grid-item { margin-top: 1.5em; margin-bottom: 1.5em; } +ul.views-fluid-grid-items-v-margin-1-8em li.views-fluid-grid-item { margin-top: 1.8em; margin-bottom: 1.8em; } +ul.views-fluid-grid-items-v-margin-2em li.views-fluid-grid-item { margin-top: 2em; margin-bottom: 2em; } + +/* Advanced CCS3 style properties. */ +ul.views-fluid-grid-items-box-shadow li.views-fluid-grid-item { + -webkit-box-shadow: 2px 2px 2px #ccc; + -khtml-box-shadow: 2px 2px 2px #ccc; + -icab-box-shadow: 2px 2px 2px #ccc; + -moz-box-shadow: 2px 2px 2px #ccc; + -o-box-shadow: 2px 2px 2px #ccc; + box-shadow: 2px 2px 2px #ccc; +} +ul.views-fluid-grid-items-border-radius li.views-fluid-grid-item { + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + -icab-border-radius: 5px; + -moz-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; +} + +/* List alignment options. */ +ul.views-fluid-grid-list-left { text-align: left; } +ul.views-fluid-grid-list-right { text-align: right; } +ul.views-fluid-grid-list-center { text-align: center; } +ul.views-fluid-grid-list-justify { text-align: justify; } + +/* Items alignment options. */ +ul.views-fluid-grid-items-left li.views-fluid-grid-item { text-align: left; } +ul.views-fluid-grid-items-right li.views-fluid-grid-item { text-align: right; } +ul.views-fluid-grid-items-center li.views-fluid-grid-item { text-align: center; } +ul.views-fluid-grid-items-justify li.views-fluid-grid-item { text-align: justify; } + +/* Enforce justification of last row in the grid. */ +li.views-fluid-grid-justify-last { + display: inline-block; + width: 100% !important; + height: 1px !important; + list-style-type: none; + background-image: none; +} +ul.views-fluid-grid-items-border-radius li.views-fluid-grid-justify-last { + -webkit-box-shadow: none !important; + -khtml-box-shadow: none !important; + -icab-box-shadow: none !important; + -moz-box-shadow: none !important; + -o-box-shadow: none !important; + box-shadow: none !important; +} diff --git a/css/views_fluid_grid.base.css b/css/views_fluid_grid.base.css new file mode 100644 index 0000000..63e9078 --- /dev/null +++ b/css/views_fluid_grid.base.css @@ -0,0 +1,62 @@ + +/* Fluid grid container. */ +div.views-fluid-grid { +} + +/* View title, label of grouping field. */ +div.views-fluid-grid h3 { + text-align: center; +} + +/* Fluid grid is based on an HTML list. */ +ul.views-fluid-grid-list { + margin: 0; + padding: 0; +} + +/* Default item style. */ +li.views-fluid-grid-item { + /* width and height properties are defined at views_fluid_grid.size.css. */ + padding: 3px; + overflow: hidden; /* needed to clip content when explicit width/height is specified. */ + list-style-type: none; + background-image: none; + vertical-align: top; + color: #444; + background-color: #f0f0f0; + border: 1px solid #aaa; +} + +/** + * List items use inline block style. + * + * Works in all modern browsers (except IE7 and lower). + */ +li.views-fluid-grid-inline { + /* inline-block does not work when applied to block elements in IE7 and lower. */ + display: inline-block; +} + +/** + * Targeting IE7. + * + * 1) html > body selector hides declaration from IE6 and lower. + * 2) Asterisk Hack exploits a bug in IE7 and lower. + */ +html > body li.views-fluid-grid-inline { + *display: inline; + *zoom: 1; +} + +/** + * Targeting IE4-6 (excluding MacIE5). + * + * 1) Commented Backslash Hack hides declaration from MacIE5. + * 2) * html selector exploits a bug in IE4-6. + * 3) Enforce hasLayout using display inline and zoom applied to block elements. + * \*/ +* html li.views-fluid-grid-inline { + display: inline; + zoom: 1; +} +/* Ends Commented Backslash Hack. */ diff --git a/css/views_fluid_grid.size.css b/css/views_fluid_grid.size.css new file mode 100644 index 0000000..bc3c16f --- /dev/null +++ b/css/views_fluid_grid.size.css @@ -0,0 +1,23 @@ + +/* Items width options. */ +ul.views-fluid-grid-items-width-100 li.views-fluid-grid-item { width: 100px; } +ul.views-fluid-grid-items-width-150 li.views-fluid-grid-item { width: 150px; } +ul.views-fluid-grid-items-width-180 li.views-fluid-grid-item { width: 180px; } +ul.views-fluid-grid-items-width-200 li.views-fluid-grid-item { width: 200px; } +ul.views-fluid-grid-items-width-250 li.views-fluid-grid-item { width: 250px; } +ul.views-fluid-grid-items-width-300 li.views-fluid-grid-item { width: 300px; } +ul.views-fluid-grid-items-width-350 li.views-fluid-grid-item { width: 350px; } +ul.views-fluid-grid-items-width-400 li.views-fluid-grid-item { width: 400px; } +ul.views-fluid-grid-items-width-450 li.views-fluid-grid-item { width: 450px; } +ul.views-fluid-grid-items-width-500 li.views-fluid-grid-item { width: 500px; } + +/* Items height options. */ +ul.views-fluid-grid-items-height-100 li.views-fluid-grid-item { height: 100px; } +ul.views-fluid-grid-items-height-150 li.views-fluid-grid-item { height: 150px; } +ul.views-fluid-grid-items-height-200 li.views-fluid-grid-item { height: 200px; } +ul.views-fluid-grid-items-height-250 li.views-fluid-grid-item { height: 250px; } +ul.views-fluid-grid-items-height-300 li.views-fluid-grid-item { height: 300px; } +ul.views-fluid-grid-items-height-350 li.views-fluid-grid-item { height: 350px; } +ul.views-fluid-grid-items-height-400 li.views-fluid-grid-item { height: 400px; } +ul.views-fluid-grid-items-height-450 li.views-fluid-grid-item { height: 450px; } +ul.views-fluid-grid-items-height-500 li.views-fluid-grid-item { height: 500px; }