| rev | line source | 
| bsw/jbe@1309 | 1 /** | 
| bsw/jbe@1309 | 2  * Copyright 2015 Google Inc. All Rights Reserved. | 
| bsw/jbe@1309 | 3  * | 
| bsw/jbe@1309 | 4  * Licensed under the Apache License, Version 2.0 (the "License"); | 
| bsw/jbe@1309 | 5  * you may not use this file except in compliance with the License. | 
| bsw/jbe@1309 | 6  * You may obtain a copy of the License at | 
| bsw/jbe@1309 | 7  * | 
| bsw/jbe@1309 | 8  *      http://www.apache.org/licenses/LICENSE-2.0 | 
| bsw/jbe@1309 | 9  * | 
| bsw/jbe@1309 | 10  * Unless required by applicable law or agreed to in writing, software | 
| bsw/jbe@1309 | 11  * distributed under the License is distributed on an "AS IS" BASIS, | 
| bsw/jbe@1309 | 12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | 
| bsw/jbe@1309 | 13  * See the License for the specific language governing permissions and | 
| bsw/jbe@1309 | 14  * limitations under the License. | 
| bsw/jbe@1309 | 15  */ | 
| bsw/jbe@1309 | 16 | 
| bsw/jbe@1309 | 17 @import "../variables"; | 
| bsw/jbe@1309 | 18 | 
| bsw/jbe@1309 | 19 /* | 
| bsw/jbe@1309 | 20  * What follows is the result of much research on cross-browser styling. | 
| bsw/jbe@1309 | 21  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, | 
| bsw/jbe@1309 | 22  * Kroc Camen, and the H5BP dev community and team. | 
| bsw/jbe@1309 | 23  */ | 
| bsw/jbe@1309 | 24 | 
| bsw/jbe@1309 | 25 /* ========================================================================== | 
| bsw/jbe@1309 | 26    Base styles: opinionated defaults | 
| bsw/jbe@1309 | 27    ========================================================================== */ | 
| bsw/jbe@1309 | 28 | 
| bsw/jbe@1309 | 29 html { | 
| bsw/jbe@1309 | 30     color: $text-color-primary; | 
| bsw/jbe@1309 | 31     font-size: 1em; | 
| bsw/jbe@1309 | 32     line-height: 1.4; | 
| bsw/jbe@1309 | 33 } | 
| bsw/jbe@1309 | 34 | 
| bsw/jbe@1309 | 35 /* | 
| bsw/jbe@1309 | 36  * Remove text-shadow in selection highlight: | 
| bsw/jbe@1309 | 37  * https://twitter.com/miketaylr/status/12228805301 | 
| bsw/jbe@1309 | 38  * | 
| bsw/jbe@1309 | 39  * These selection rule sets have to be separate. | 
| bsw/jbe@1309 | 40  * Customize the background color to match your design. | 
| bsw/jbe@1309 | 41  */ | 
| bsw/jbe@1309 | 42 | 
| bsw/jbe@1309 | 43 ::selection { | 
| bsw/jbe@1309 | 44     background: #b3d4fc; | 
| bsw/jbe@1309 | 45     text-shadow: none; | 
| bsw/jbe@1309 | 46 } | 
| bsw/jbe@1309 | 47 | 
| bsw/jbe@1309 | 48 /* | 
| bsw/jbe@1309 | 49  * A better looking default horizontal rule | 
| bsw/jbe@1309 | 50  */ | 
| bsw/jbe@1309 | 51 | 
| bsw/jbe@1309 | 52 hr { | 
| bsw/jbe@1309 | 53     display: block; | 
| bsw/jbe@1309 | 54     height: 1px; | 
| bsw/jbe@1309 | 55     border: 0; | 
| bsw/jbe@1309 | 56     border-top: 1px solid #ccc; | 
| bsw/jbe@1309 | 57     margin: 1em 0; | 
| bsw/jbe@1309 | 58     padding: 0; | 
| bsw/jbe@1309 | 59 } | 
| bsw/jbe@1309 | 60 | 
| bsw/jbe@1309 | 61 /* | 
| bsw/jbe@1309 | 62  * Remove the gap between audio, canvas, iframes, | 
| bsw/jbe@1309 | 63  * images, videos and the bottom of their containers: | 
| bsw/jbe@1309 | 64  * https://github.com/h5bp/html5-boilerplate/issues/440 | 
| bsw/jbe@1309 | 65  */ | 
| bsw/jbe@1309 | 66 | 
| bsw/jbe@1309 | 67 audio, | 
| bsw/jbe@1309 | 68 canvas, | 
| bsw/jbe@1309 | 69 iframe, | 
| bsw/jbe@1309 | 70 img, | 
| bsw/jbe@1309 | 71 svg, | 
| bsw/jbe@1309 | 72 video { | 
| bsw/jbe@1309 | 73     vertical-align: middle; | 
| bsw/jbe@1309 | 74 } | 
| bsw/jbe@1309 | 75 | 
| bsw/jbe@1309 | 76 /* | 
| bsw/jbe@1309 | 77  * Remove default fieldset styles. | 
| bsw/jbe@1309 | 78  */ | 
| bsw/jbe@1309 | 79 | 
| bsw/jbe@1309 | 80 fieldset { | 
| bsw/jbe@1309 | 81     border: 0; | 
| bsw/jbe@1309 | 82     margin: 0; | 
| bsw/jbe@1309 | 83     padding: 0; | 
| bsw/jbe@1309 | 84 } | 
| bsw/jbe@1309 | 85 | 
| bsw/jbe@1309 | 86 /* | 
| bsw/jbe@1309 | 87  * Allow only vertical resizing of textareas. | 
| bsw/jbe@1309 | 88  */ | 
| bsw/jbe@1309 | 89 | 
| bsw/jbe@1309 | 90 textarea { | 
| bsw/jbe@1309 | 91     resize: vertical; | 
| bsw/jbe@1309 | 92 } | 
| bsw/jbe@1309 | 93 | 
| bsw/jbe@1309 | 94 /* ========================================================================== | 
| bsw/jbe@1309 | 95    Browser Upgrade Prompt | 
| bsw/jbe@1309 | 96    ========================================================================== */ | 
| bsw/jbe@1309 | 97 | 
| bsw/jbe@1309 | 98 .browserupgrade { | 
| bsw/jbe@1309 | 99     margin: 0.2em 0; | 
| bsw/jbe@1309 | 100     background: #ccc; | 
| bsw/jbe@1309 | 101     color: #000; | 
| bsw/jbe@1309 | 102     padding: 0.2em 0; | 
| bsw/jbe@1309 | 103 } | 
| bsw/jbe@1309 | 104 | 
| bsw/jbe@1309 | 105 /* ========================================================================== | 
| bsw/jbe@1309 | 106    Author's custom styles | 
| bsw/jbe@1309 | 107    ========================================================================== */ | 
| bsw/jbe@1309 | 108 | 
| bsw/jbe@1309 | 109 | 
| bsw/jbe@1309 | 110 | 
| bsw/jbe@1309 | 111 | 
| bsw/jbe@1309 | 112 | 
| bsw/jbe@1309 | 113 | 
| bsw/jbe@1309 | 114 | 
| bsw/jbe@1309 | 115 | 
| bsw/jbe@1309 | 116 | 
| bsw/jbe@1309 | 117 | 
| bsw/jbe@1309 | 118 | 
| bsw/jbe@1309 | 119 | 
| bsw/jbe@1309 | 120 | 
| bsw/jbe@1309 | 121 | 
| bsw/jbe@1309 | 122 | 
| bsw/jbe@1309 | 123 | 
| bsw/jbe@1309 | 124 | 
| bsw/jbe@1309 | 125 /* ========================================================================== | 
| bsw/jbe@1309 | 126    Helper classes | 
| bsw/jbe@1309 | 127    ========================================================================== */ | 
| bsw/jbe@1309 | 128 | 
| bsw/jbe@1309 | 129 /* | 
| bsw/jbe@1309 | 130  * Hide visually and from screen readers: | 
| bsw/jbe@1309 | 131  */ | 
| bsw/jbe@1309 | 132 | 
| bsw/jbe@1309 | 133 .hidden { | 
| bsw/jbe@1309 | 134     display: none !important; | 
| bsw/jbe@1309 | 135 } | 
| bsw/jbe@1309 | 136 | 
| bsw/jbe@1309 | 137 /* | 
| bsw/jbe@1309 | 138  * Hide only visually, but have it available for screen readers: | 
| bsw/jbe@1309 | 139  * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility | 
| bsw/jbe@1309 | 140  */ | 
| bsw/jbe@1309 | 141 | 
| bsw/jbe@1309 | 142 .visuallyhidden { | 
| bsw/jbe@1309 | 143     border: 0; | 
| bsw/jbe@1309 | 144     clip: rect(0 0 0 0); | 
| bsw/jbe@1309 | 145     height: 1px; | 
| bsw/jbe@1309 | 146     margin: -1px; | 
| bsw/jbe@1309 | 147     overflow: hidden; | 
| bsw/jbe@1309 | 148     padding: 0; | 
| bsw/jbe@1309 | 149     position: absolute; | 
| bsw/jbe@1309 | 150     width: 1px; | 
| bsw/jbe@1309 | 151 } | 
| bsw/jbe@1309 | 152 | 
| bsw/jbe@1309 | 153 /* | 
| bsw/jbe@1309 | 154  * Extends the .visuallyhidden class to allow the element | 
| bsw/jbe@1309 | 155  * to be focusable when navigated to via the keyboard: | 
| bsw/jbe@1309 | 156  * https://www.drupal.org/node/897638 | 
| bsw/jbe@1309 | 157  */ | 
| bsw/jbe@1309 | 158 | 
| bsw/jbe@1309 | 159 .visuallyhidden.focusable:active, | 
| bsw/jbe@1309 | 160 .visuallyhidden.focusable:focus { | 
| bsw/jbe@1309 | 161     clip: auto; | 
| bsw/jbe@1309 | 162     height: auto; | 
| bsw/jbe@1309 | 163     margin: 0; | 
| bsw/jbe@1309 | 164     overflow: visible; | 
| bsw/jbe@1309 | 165     position: static; | 
| bsw/jbe@1309 | 166     width: auto; | 
| bsw/jbe@1309 | 167 } | 
| bsw/jbe@1309 | 168 | 
| bsw/jbe@1309 | 169 /* | 
| bsw/jbe@1309 | 170  * Hide visually and from screen readers, but maintain layout | 
| bsw/jbe@1309 | 171  */ | 
| bsw/jbe@1309 | 172 | 
| bsw/jbe@1309 | 173 .invisible { | 
| bsw/jbe@1309 | 174     visibility: hidden; | 
| bsw/jbe@1309 | 175 } | 
| bsw/jbe@1309 | 176 | 
| bsw/jbe@1309 | 177 /* | 
| bsw/jbe@1309 | 178  * Clearfix: contain floats | 
| bsw/jbe@1309 | 179  * | 
| bsw/jbe@1309 | 180  * For modern browsers | 
| bsw/jbe@1309 | 181  * 1. The space content is one way to avoid an Opera bug when the | 
| bsw/jbe@1309 | 182  *    `contenteditable` attribute is included anywhere else in the document. | 
| bsw/jbe@1309 | 183  *    Otherwise it causes space to appear at the top and bottom of elements | 
| bsw/jbe@1309 | 184  *    that receive the `clearfix` class. | 
| bsw/jbe@1309 | 185  * 2. The use of `table` rather than `block` is only necessary if using | 
| bsw/jbe@1309 | 186  *    `:before` to contain the top-margins of child elements. | 
| bsw/jbe@1309 | 187  */ | 
| bsw/jbe@1309 | 188 | 
| bsw/jbe@1309 | 189 .clearfix:before, | 
| bsw/jbe@1309 | 190 .clearfix:after { | 
| bsw/jbe@1309 | 191     content: " "; /* 1 */ | 
| bsw/jbe@1309 | 192     display: table; /* 2 */ | 
| bsw/jbe@1309 | 193 } | 
| bsw/jbe@1309 | 194 | 
| bsw/jbe@1309 | 195 .clearfix:after { | 
| bsw/jbe@1309 | 196     clear: both; | 
| bsw/jbe@1309 | 197 } | 
| bsw/jbe@1309 | 198 | 
| bsw/jbe@1309 | 199 /* ========================================================================== | 
| bsw/jbe@1309 | 200    EXAMPLE Media Queries for Responsive Design. | 
| bsw/jbe@1309 | 201    These examples override the primary ('mobile first') styles. | 
| bsw/jbe@1309 | 202    Modify as content requires. | 
| bsw/jbe@1309 | 203    ========================================================================== */ | 
| bsw/jbe@1309 | 204 | 
| bsw/jbe@1309 | 205 @media only screen and (min-width: 35em) { | 
| bsw/jbe@1309 | 206     /* Style adjustments for viewports that meet the condition */ | 
| bsw/jbe@1309 | 207 } | 
| bsw/jbe@1309 | 208 | 
| bsw/jbe@1309 | 209 @media print, | 
| bsw/jbe@1309 | 210        (min-resolution: 1.25dppx), | 
| bsw/jbe@1309 | 211        (min-resolution: 120dpi) { | 
| bsw/jbe@1309 | 212     /* Style adjustments for high resolution devices */ | 
| bsw/jbe@1309 | 213 } | 
| bsw/jbe@1309 | 214 | 
| bsw/jbe@1309 | 215 /* ========================================================================== | 
| bsw/jbe@1309 | 216    Print styles. | 
| bsw/jbe@1309 | 217    Inlined to avoid the additional HTTP request: | 
| bsw/jbe@1309 | 218    http://www.phpied.com/delay-loading-your-print-css/ | 
| bsw/jbe@1309 | 219    ========================================================================== */ | 
| bsw/jbe@1309 | 220 | 
| bsw/jbe@1309 | 221 @media print { | 
| bsw/jbe@1309 | 222     *, | 
| bsw/jbe@1309 | 223     *:before, | 
| bsw/jbe@1309 | 224     *:after, | 
| bsw/jbe@1309 | 225     *:first-letter { | 
| bsw/jbe@1309 | 226         background: transparent !important; | 
| bsw/jbe@1309 | 227         color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ | 
| bsw/jbe@1309 | 228         box-shadow: none !important; | 
| bsw/jbe@1309 | 229     } | 
| bsw/jbe@1309 | 230 | 
| bsw/jbe@1309 | 231     a, | 
| bsw/jbe@1309 | 232     a:visited { | 
| bsw/jbe@1309 | 233         text-decoration: underline; | 
| bsw/jbe@1309 | 234     } | 
| bsw/jbe@1309 | 235 | 
| bsw/jbe@1309 | 236     a[href]:after { | 
| bsw/jbe@1309 | 237         content: " (" attr(href) ")"; | 
| bsw/jbe@1309 | 238     } | 
| bsw/jbe@1309 | 239 | 
| bsw/jbe@1309 | 240     abbr[title]:after { | 
| bsw/jbe@1309 | 241         content: " (" attr(title) ")"; | 
| bsw/jbe@1309 | 242     } | 
| bsw/jbe@1309 | 243 | 
| bsw/jbe@1309 | 244     /* | 
| bsw/jbe@1309 | 245      * Don't show links that are fragment identifiers, | 
| bsw/jbe@1309 | 246      * or use the `javascript:` pseudo protocol | 
| bsw/jbe@1309 | 247      */ | 
| bsw/jbe@1309 | 248 | 
| bsw/jbe@1309 | 249     a[href^="#"]:after, | 
| bsw/jbe@1309 | 250     a[href^="javascript:"]:after { | 
| bsw/jbe@1309 | 251         content: ""; | 
| bsw/jbe@1309 | 252     } | 
| bsw/jbe@1309 | 253 | 
| bsw/jbe@1309 | 254     pre, | 
| bsw/jbe@1309 | 255     blockquote { | 
| bsw/jbe@1309 | 256         border: 1px solid #999; | 
| bsw/jbe@1309 | 257         page-break-inside: avoid; | 
| bsw/jbe@1309 | 258     } | 
| bsw/jbe@1309 | 259 | 
| bsw/jbe@1309 | 260     /* | 
| bsw/jbe@1309 | 261      * Printing Tables: | 
| bsw/jbe@1309 | 262      * http://css-discuss.incutio.com/wiki/Printing_Tables | 
| bsw/jbe@1309 | 263      */ | 
| bsw/jbe@1309 | 264 | 
| bsw/jbe@1309 | 265     thead { | 
| bsw/jbe@1309 | 266         display: table-header-group; | 
| bsw/jbe@1309 | 267     } | 
| bsw/jbe@1309 | 268 | 
| bsw/jbe@1309 | 269     tr, | 
| bsw/jbe@1309 | 270     img { | 
| bsw/jbe@1309 | 271         page-break-inside: avoid; | 
| bsw/jbe@1309 | 272     } | 
| bsw/jbe@1309 | 273 | 
| bsw/jbe@1309 | 274     img { | 
| bsw/jbe@1309 | 275         max-width: 100% !important; | 
| bsw/jbe@1309 | 276     } | 
| bsw/jbe@1309 | 277 | 
| bsw/jbe@1309 | 278     p, | 
| bsw/jbe@1309 | 279     h2, | 
| bsw/jbe@1309 | 280     h3 { | 
| bsw/jbe@1309 | 281         orphans: 3; | 
| bsw/jbe@1309 | 282         widows: 3; | 
| bsw/jbe@1309 | 283     } | 
| bsw/jbe@1309 | 284 | 
| bsw/jbe@1309 | 285     h2, | 
| bsw/jbe@1309 | 286     h3 { | 
| bsw/jbe@1309 | 287         page-break-after: avoid; | 
| bsw/jbe@1309 | 288     } | 
| bsw/jbe@1309 | 289 } |