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

   1 /**
   2  * @file
   3  * Experimental: CSS3 multi-column.
   4  *
   5  * column-count is the maximum number of columns and column-width is the minimum
   6  * width for those columns.
   7  * Gets consistent with Grid Foundation even if non-BEM classes.
   8  * Note: The reason for making column-width somewhat flexible is to achieve
   9  * scalable designs that can fit many screen sizes. To set an exact column
  10  * width, the column gap and the width of the multicol element (assuming
  11  * horizontal text) must also be specified.
  12  * @todo: Consider BEM classes at version 2.x, or so.
  13  */
  14
  15 [class*="block-column-"],
  16 [class*="block-column-"] * {
  17   -webkit-box-sizing: border-box;
  18   box-sizing: border-box;
  19 }
  20
  21 [class*="block-column-"],
  22 .item-list > [class*="block-column-"] {
  23   display: block;
  24   list-style: none;
  25   margin: 0 auto;
  26   padding: 0;
  27 }
  28
  29 /** https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside */
  30 [class*="block-column-"] > .grid {
  31   display: block;
  32   float: none;
  33   height: auto;
  34   overflow: hidden;
  35   -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  36   page-break-inside: avoid; /* Deprecated Firefox, works at 49.0.2 */
  37   -moz-column-break-inside: avoid; /* Current Firefox, but no joy */
  38   break-inside: avoid; /* IE 10+ */
  39   break-inside: avoid-column;
  40 }
  41
  42 [class*="block-column-"] > .grid ,
  43 .item-list > [class*="block-column-"] > .grid {
  44   margin: 0 0 1rem;
  45   padding: 0;
  46 }
  47
  48 /** Fix for broken break-inside with extremely tall grid for FF. */
  49 [class*="block-column-"] .grid__content {
  50   display: inline-block;
  51   margin: 0;
  52   max-width: 100%;
  53   vertical-align: top;
  54   width: 100%;
  55 }
  56
  57 /** 480px with 16px base font. */
  58 @media only screen and (min-width: 30em) {
  59   .small-block-column-1 {
  60     -webkit-columns: 30em 1;
  61     -moz-columns: 30em 1;
  62     columns: 30em 1;
  63   }
  64
  65   .small-block-column-2 {
  66     -webkit-columns: 15em 2;
  67     -moz-columns: 15em 2;
  68     columns: 15em 2;
  69   }
  70 }
  71
  72 /** 641px with 16px base font. */
  73 @media only screen and (min-width: 40.063em) {
  74   .medium-block-column-1 {
  75     -webkit-columns: 40.063em 1;
  76     -moz-columns: 40.063em 1;
  77     columns: 40.063em 1;
  78   }
  79
  80   .medium-block-column-2 {
  81     -webkit-columns: 20.0315em 2;
  82     -moz-columns: 20.0315em 2;
  83     columns: 20.0315em 2;
  84   }
  85
  86   .medium-block-column-3 {
  87     -webkit-columns: 3 auto;
  88     -moz-columns: 3 auto;
  89     columns: 3 auto;
  90   }
  91
  92   .medium-block-column-4 {
  93     -webkit-columns: 4 auto;
  94     -moz-columns: 4 auto;
  95     columns: 4 auto;
  96   }
  97
  98   .medium-block-column-5 {
  99     -webkit-columns: 5 auto;
 100     -moz-columns: 5 auto;
 101     columns: 5 auto;
 102   }
 103
 104   .medium-block-column-6 {
 105     -webkit-columns: 6 auto;
 106     -moz-columns: 6 auto;
 107     columns: 6 auto;
 108   }
 109
 110   .medium-block-column-7 {
 111     -webkit-columns: 7 auto;
 112     -moz-columns: 7 auto;
 113     columns: 7 auto;
 114   }
 115
 116   .medium-block-column-8 {
 117     -webkit-columns: 8 auto;
 118     -moz-columns: 8 auto;
 119     columns: 8 auto;
 120   }
 121
 122   .medium-block-column-9 {
 123     -webkit-columns: 9 auto;
 124     -moz-columns: 9 auto;
 125     columns: 9 auto;
 126   }
 127
 128   .medium-block-column-10 {
 129     -webkit-columns: 10 auto;
 130     -moz-columns: 10 auto;
 131     columns: 10 auto;
 132   }
 133
 134   .medium-block-column-11 {
 135     -webkit-columns: 11 auto;
 136     -moz-columns: 11 auto;
 137     columns: 11 auto;
 138   }
 139
 140   .medium-block-column-12 {
 141     -webkit-columns: 12 auto;
 142     -moz-columns: 12 auto;
 143     columns: 12 auto;
 144   }
 145 }
 146
 147 /** 1025px with 16px base font. */
 148 @media only screen and (min-width: 64.063em) {
 149   .large-block-column-1 {
 150     -webkit-columns: 64.063em 1;
 151     -moz-columns: 64.063em 1;
 152     columns: 64.063em 1;
 153   }
 154
 155   .large-block-column-2,
 156   .large-block-column-3.block-count-2,
 157   .large-block-column-4.block-count-2 {
 158     -webkit-columns: 32.0315em 2;
 159     -moz-columns: 32.0315em 2;
 160     columns: 32.0315em 2;
 161   }
 162
 163   .large-block-column-3,
 164   .large-block-column-4.block-count-3 {
 165     -webkit-columns: 3 auto;
 166     -moz-columns: 3 auto;
 167     columns: 3 auto;
 168   }
 169
 170   .large-block-column-4 {
 171     -webkit-columns: 4 auto;
 172     -moz-columns: 4 auto;
 173     columns: 4 auto;
 174   }
 175
 176   .large-block-column-5 {
 177     -webkit-columns: 5 auto;
 178     -moz-columns: 5 auto;
 179     columns: 5 auto;
 180   }
 181
 182   .large-block-column-6 {
 183     -webkit-columns: 6 auto;
 184     -moz-columns: 6 auto;
 185     columns: 6 auto;
 186   }
 187
 188   .large-block-column-7 {
 189     -webkit-columns: 7 auto;
 190     -moz-columns: 7 auto;
 191     columns: 7 auto;
 192   }
 193
 194   .large-block-column-8 {
 195     -webkit-columns: 8 auto;
 196     -moz-columns: 8 auto;
 197     columns: 8 auto;
 198   }
 199
 200   .large-block-column-9 {
 201     -webkit-columns: 9 auto;
 202     -moz-columns: 9 auto;
 203     columns: 9 auto;
 204   }
 205
 206   .large-block-column-10 {
 207     -webkit-columns: 10 auto;
 208     -moz-columns: 10 auto;
 209     columns: 10 auto;
 210   }
 211
 212   .large-block-column-11 {
 213     -webkit-columns: 11 auto;
 214     -moz-columns: 11 auto;
 215     columns: 11 auto;
 216   }
 217
 218   .large-block-column-12 {
 219     -webkit-columns: 12 auto;
 220     -moz-columns: 12 auto;
 221     columns: 12 auto;
 222   }
 223 }