yaffs.net Git - yaffs-website/blob - web/modules/contrib/blazy/css/components/blazy.grid.css

   1 /**
   2  * @file
   3  * Block grid based on Foundation 5.
   4  *
   5  * This is a modified version to be re-usable for divities, not only UL/OL list,
   6  * as long as the list item has class "grid".
   7  */
   8
   9 [class*="block-grid-"],
  10 [class*="block-grid-"] * {
  11   -webkit-box-sizing: border-box;
  12   box-sizing: border-box;
  13 }
  14
  15 [class*="block-grid-"],
  16 .block [class*="block-grid-"],
  17 .item-list > [class*="block-grid-"] {
  18   display: block;
  19   list-style: none;
  20   padding: 0;
  21   margin: 0 -0.625rem;
  22 }
  23
  24 [class*="block-grid-"]::before,
  25 [class*="block-grid-"]::after {
  26   content: " ";
  27   display: table;
  28 }
  29
  30 [class*="block-grid-"]::after {
  31   clear: both;
  32 }
  33
  34 [class*="block-grid-"] > .grid {
  35   display: block;
  36   float: left;
  37   height: auto;
  38   list-style: none;
  39   margin: 0;
  40   padding: 0 0.625rem 1.25rem;
  41 }
  42
  43 .block-grid--centered[class*="block-grid"],
  44 .item-list > .block-grid--centered[class*="block-grid"] {
  45   text-align: center;
  46 }
  47
  48 .block-grid--centered[class*="block-grid"] > .grid,
  49 .item-list > .block-grid--centered[class*="block-grid"] > .grid {
  50   text-align: left;
  51   display: inline-block;
  52   float: none;
  53   vertical-align: top;
  54 }
  55
  56 @media only screen {
  57   .small-block-grid-1 > .grid {
  58     width: 100%;
  59   }
  60
  61   .small-block-grid-2 > .grid {
  62     width: 50%;
  63   }
  64
  65   .small-block-grid-3 > .grid {
  66     width: 33.33333%;
  67   }
  68
  69   .small-block-grid-4 > .grid {
  70     width: 25%;
  71   }
  72
  73   .small-block-grid-5 > .grid {
  74     width: 20%;
  75   }
  76
  77   .small-block-grid-6 > .grid {
  78     width: 16.66667%;
  79   }
  80
  81   .small-block-grid-7 > .grid {
  82     width: 14.28571%;
  83   }
  84
  85   .small-block-grid-8 > .grid {
  86     width: 12.5%;
  87   }
  88
  89   .small-block-grid-9 > .grid {
  90     width: 11.11111%;
  91   }
  92
  93   .small-block-grid-10 > .grid {
  94     width: 10%;
  95   }
  96
  97   .small-block-grid-11 > .grid {
  98     width: 9.09091%;
  99   }
 100
 101   .small-block-grid-12 > .grid {
 102     width: 8.33333%;
 103   }
 104
 105   .small-block-grid-1 > .grid:nth-of-type(1n),
 106   .small-block-grid-2 > .grid:nth-of-type(1n),
 107   .small-block-grid-3 > .grid:nth-of-type(1n),
 108   .small-block-grid-4 > .grid:nth-of-type(1n),
 109   .small-block-grid-5 > .grid:nth-of-type(1n),
 110   .small-block-grid-6 > .grid:nth-of-type(1n),
 111   .small-block-grid-8 > .grid:nth-of-type(1n),
 112   .small-block-grid-7 > .grid:nth-of-type(1n),
 113   .small-block-grid-9 > .grid:nth-of-type(1n),
 114   .small-block-grid-10 > .grid:nth-of-type(1n),
 115   .small-block-grid-11 > .grid:nth-of-type(1n),
 116   .small-block-grid-12 > .grid:nth-of-type(1n) {
 117     clear: none;
 118   }
 119
 120   .small-block-grid-1 > .grid:nth-of-type(1n+1),
 121   .small-block-grid-2 > .grid:nth-of-type(2n+1),
 122   .small-block-grid-3 > .grid:nth-of-type(3n+1),
 123   .small-block-grid-4 > .grid:nth-of-type(4n+1),
 124   .small-block-grid-5 > .grid:nth-of-type(5n+1),
 125   .small-block-grid-6 > .grid:nth-of-type(6n+1),
 126   .small-block-grid-7 > .grid:nth-of-type(7n+1),
 127   .small-block-grid-8 > .grid:nth-of-type(8n+1),
 128   .small-block-grid-9 > .grid:nth-of-type(9n+1),
 129   .small-block-grid-10 > .grid:nth-of-type(10n+1),
 130   .small-block-grid-11 > .grid:nth-of-type(11n+1),
 131   .small-block-grid-12 > .grid:nth-of-type(12n+1) {
 132     clear: both;
 133   }
 134 }
 135
 136 /** 641px with 16px base font. */
 137 @media only screen and (min-width: 40.063em) {
 138   .medium-block-grid-1 > .grid {
 139     width: 100%;
 140   }
 141
 142   .medium-block-grid-2 > .grid {
 143     width: 50%;
 144   }
 145
 146   .medium-block-grid-3 > .grid {
 147     width: 33.33333%;
 148   }
 149
 150   .medium-block-grid-4 > .grid {
 151     width: 25%;
 152   }
 153
 154   .medium-block-grid-5 > .grid {
 155     width: 20%;
 156   }
 157
 158   .medium-block-grid-6 > .grid {
 159     width: 16.66667%;
 160   }
 161
 162   .medium-block-grid-7 > .grid {
 163     width: 14.28571%;
 164   }
 165
 166   .medium-block-grid-8 > .grid {
 167     width: 12.5%;
 168   }
 169
 170   .medium-block-grid-9 > .grid {
 171     width: 11.11111%;
 172   }
 173
 174   .medium-block-grid-10 > .grid {
 175     width: 10%;
 176   }
 177
 178   .medium-block-grid-11 > .grid {
 179     width: 9.09091%;
 180   }
 181
 182   .medium-block-grid-12 > .grid {
 183     width: 8.33333%;
 184   }
 185
 186   .medium-block-grid-1 > .grid:nth-of-type(1n),
 187   .medium-block-grid-2 > .grid:nth-of-type(1n),
 188   .medium-block-grid-3 > .grid:nth-of-type(1n),
 189   .medium-block-grid-4 > .grid:nth-of-type(1n),
 190   .medium-block-grid-5 > .grid:nth-of-type(1n),
 191   .medium-block-grid-6 > .grid:nth-of-type(1n),
 192   .medium-block-grid-7 > .grid:nth-of-type(1n),
 193   .medium-block-grid-8 > .grid:nth-of-type(1n),
 194   .medium-block-grid-9 > .grid:nth-of-type(1n),
 195   .medium-block-grid-10 > .grid:nth-of-type(1n),
 196   .medium-block-grid-11 > .grid:nth-of-type(1n),
 197   .medium-block-grid-12 > .grid:nth-of-type(1n) {
 198     clear: none;
 199   }
 200
 201   .medium-block-grid-1 > .grid:nth-of-type(1n+1),
 202   .medium-block-grid-2 > .grid:nth-of-type(2n+1),
 203   .medium-block-grid-3 > .grid:nth-of-type(3n+1),
 204   .medium-block-grid-4 > .grid:nth-of-type(4n+1),
 205   .medium-block-grid-5 > .grid:nth-of-type(5n+1),
 206   .medium-block-grid-6 > .grid:nth-of-type(6n+1),
 207   .medium-block-grid-7 > .grid:nth-of-type(7n+1),
 208   .medium-block-grid-8 > .grid:nth-of-type(8n+1),
 209   .medium-block-grid-9 > .grid:nth-of-type(9n+1),
 210   .medium-block-grid-10 > .grid:nth-of-type(10n+1),
 211   .medium-block-grid-11 > .grid:nth-of-type(11n+1),
 212   .medium-block-grid-12 > .grid:nth-of-type(12n+1) {
 213     clear: both;
 214   }
 215 }
 216
 217 /** 1025px with 16px base font. */
 218 @media only screen and (min-width: 64.063em) {
 219   .large-block-grid-1 > .grid {
 220     width: 100%;
 221   }
 222
 223   .large-block-grid-2 > .grid {
 224     width: 50%;
 225   }
 226
 227   .large-block-grid-3 > .grid {
 228     width: 33.33333%;
 229   }
 230
 231   .large-block-grid-4 > .grid {
 232     width: 25%;
 233   }
 234
 235   .large-block-grid-5 > .grid {
 236     width: 20%;
 237   }
 238
 239   .large-block-grid-6 > .grid {
 240     width: 16.66667%;
 241   }
 242
 243   .large-block-grid-7 > .grid {
 244     width: 14.28571%;
 245   }
 246
 247   .large-block-grid-8 > .grid {
 248     width: 12.5%;
 249   }
 250
 251   .large-block-grid-9 > .grid {
 252     width: 11.11111%;
 253   }
 254
 255   .large-block-grid-10 > .grid {
 256     width: 10%;
 257   }
 258
 259   .large-block-grid-11 > .grid {
 260     width: 9.09091%;
 261   }
 262
 263   .large-block-grid-12 > .grid {
 264     width: 8.33333%;
 265   }
 266
 267   .large-block-grid-1 > .grid:nth-of-type(1n),
 268   .large-block-grid-2 > .grid:nth-of-type(1n),
 269   .large-block-grid-3 > .grid:nth-of-type(1n),
 270   .large-block-grid-4 > .grid:nth-of-type(1n),
 271   .large-block-grid-5 > .grid:nth-of-type(1n),
 272   .large-block-grid-6 > .grid:nth-of-type(1n),
 273   .large-block-grid-7 > .grid:nth-of-type(1n),
 274   .large-block-grid-8 > .grid:nth-of-type(1n),
 275   .large-block-grid-9 > .grid:nth-of-type(1n),
 276   .large-block-grid-10 > .grid:nth-of-type(1n),
 277   .large-block-grid-11 > .grid:nth-of-type(1n),
 278   .large-block-grid-12 > .grid:nth-of-type(1n) {
 279     clear: none;
 280   }
 281
 282   .large-block-grid-1 > .grid:nth-of-type(1n+1),
 283   .large-block-grid-2 > .grid:nth-of-type(2n+1),
 284   .large-block-grid-3 > .grid:nth-of-type(3n+1),
 285   .large-block-grid-4 > .grid:nth-of-type(4n+1),
 286   .large-block-grid-5 > .grid:nth-of-type(5n+1),
 287   .large-block-grid-6 > .grid:nth-of-type(6n+1),
 288   .large-block-grid-7 > .grid:nth-of-type(7n+1),
 289   .large-block-grid-8 > .grid:nth-of-type(8n+1),
 290   .large-block-grid-9 > .grid:nth-of-type(9n+1),
 291   .large-block-grid-10 > .grid:nth-of-type(10n+1),
 292   .large-block-grid-11 > .grid:nth-of-type(11n+1),
 293   .large-block-grid-12 > .grid:nth-of-type(12n+1) {
 294     clear: both;
 295   }
 296 }