| 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 }
 |