third_party/ot-br-posix/repo/third_party/mdl/repo/src/resets/_h5bp.scss

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