bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * What follows is the result of much research on cross-browser styling.
bsw/jbe@1309:  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
bsw/jbe@1309:  * Kroc Camen, and the H5BP dev community and team.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========================================================================
bsw/jbe@1309:    Base styles: opinionated defaults
bsw/jbe@1309:    ========================================================================== */
bsw/jbe@1309: 
bsw/jbe@1309: html {
bsw/jbe@1309:     color: $text-color-primary;
bsw/jbe@1309:     font-size: 1em;
bsw/jbe@1309:     line-height: 1.4;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Remove text-shadow in selection highlight:
bsw/jbe@1309:  * https://twitter.com/miketaylr/status/12228805301
bsw/jbe@1309:  *
bsw/jbe@1309:  * These selection rule sets have to be separate.
bsw/jbe@1309:  * Customize the background color to match your design.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: ::selection {
bsw/jbe@1309:     background: #b3d4fc;
bsw/jbe@1309:     text-shadow: none;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * A better looking default horizontal rule
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: hr {
bsw/jbe@1309:     display: block;
bsw/jbe@1309:     height: 1px;
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     border-top: 1px solid #ccc;
bsw/jbe@1309:     margin: 1em 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Remove the gap between audio, canvas, iframes,
bsw/jbe@1309:  * images, videos and the bottom of their containers:
bsw/jbe@1309:  * https://github.com/h5bp/html5-boilerplate/issues/440
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: audio,
bsw/jbe@1309: canvas,
bsw/jbe@1309: iframe,
bsw/jbe@1309: img,
bsw/jbe@1309: svg,
bsw/jbe@1309: video {
bsw/jbe@1309:     vertical-align: middle;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Remove default fieldset styles.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: fieldset {
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     margin: 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Allow only vertical resizing of textareas.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: textarea {
bsw/jbe@1309:     resize: vertical;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========================================================================
bsw/jbe@1309:    Browser Upgrade Prompt
bsw/jbe@1309:    ========================================================================== */
bsw/jbe@1309: 
bsw/jbe@1309: .browserupgrade {
bsw/jbe@1309:     margin: 0.2em 0;
bsw/jbe@1309:     background: #ccc;
bsw/jbe@1309:     color: #000;
bsw/jbe@1309:     padding: 0.2em 0;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========================================================================
bsw/jbe@1309:    Author's custom styles
bsw/jbe@1309:    ========================================================================== */
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========================================================================
bsw/jbe@1309:    Helper classes
bsw/jbe@1309:    ========================================================================== */
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Hide visually and from screen readers:
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: .hidden {
bsw/jbe@1309:     display: none !important;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Hide only visually, but have it available for screen readers:
bsw/jbe@1309:  * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: .visuallyhidden {
bsw/jbe@1309:     border: 0;
bsw/jbe@1309:     clip: rect(0 0 0 0);
bsw/jbe@1309:     height: 1px;
bsw/jbe@1309:     margin: -1px;
bsw/jbe@1309:     overflow: hidden;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:     position: absolute;
bsw/jbe@1309:     width: 1px;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Extends the .visuallyhidden class to allow the element
bsw/jbe@1309:  * to be focusable when navigated to via the keyboard:
bsw/jbe@1309:  * https://www.drupal.org/node/897638
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: .visuallyhidden.focusable:active,
bsw/jbe@1309: .visuallyhidden.focusable:focus {
bsw/jbe@1309:     clip: auto;
bsw/jbe@1309:     height: auto;
bsw/jbe@1309:     margin: 0;
bsw/jbe@1309:     overflow: visible;
bsw/jbe@1309:     position: static;
bsw/jbe@1309:     width: auto;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Hide visually and from screen readers, but maintain layout
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: .invisible {
bsw/jbe@1309:     visibility: hidden;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /*
bsw/jbe@1309:  * Clearfix: contain floats
bsw/jbe@1309:  *
bsw/jbe@1309:  * For modern browsers
bsw/jbe@1309:  * 1. The space content is one way to avoid an Opera bug when the
bsw/jbe@1309:  *    `contenteditable` attribute is included anywhere else in the document.
bsw/jbe@1309:  *    Otherwise it causes space to appear at the top and bottom of elements
bsw/jbe@1309:  *    that receive the `clearfix` class.
bsw/jbe@1309:  * 2. The use of `table` rather than `block` is only necessary if using
bsw/jbe@1309:  *    `:before` to contain the top-margins of child elements.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: .clearfix:before,
bsw/jbe@1309: .clearfix:after {
bsw/jbe@1309:     content: " "; /* 1 */
bsw/jbe@1309:     display: table; /* 2 */
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .clearfix:after {
bsw/jbe@1309:     clear: both;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========================================================================
bsw/jbe@1309:    EXAMPLE Media Queries for Responsive Design.
bsw/jbe@1309:    These examples override the primary ('mobile first') styles.
bsw/jbe@1309:    Modify as content requires.
bsw/jbe@1309:    ========================================================================== */
bsw/jbe@1309: 
bsw/jbe@1309: @media only screen and (min-width: 35em) {
bsw/jbe@1309:     /* Style adjustments for viewports that meet the condition */
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: @media print,
bsw/jbe@1309:        (min-resolution: 1.25dppx),
bsw/jbe@1309:        (min-resolution: 120dpi) {
bsw/jbe@1309:     /* Style adjustments for high resolution devices */
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========================================================================
bsw/jbe@1309:    Print styles.
bsw/jbe@1309:    Inlined to avoid the additional HTTP request:
bsw/jbe@1309:    http://www.phpied.com/delay-loading-your-print-css/
bsw/jbe@1309:    ========================================================================== */
bsw/jbe@1309: 
bsw/jbe@1309: @media print {
bsw/jbe@1309:     *,
bsw/jbe@1309:     *:before,
bsw/jbe@1309:     *:after,
bsw/jbe@1309:     *:first-letter {
bsw/jbe@1309:         background: transparent !important;
bsw/jbe@1309:         color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
bsw/jbe@1309:         box-shadow: none !important;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     a,
bsw/jbe@1309:     a:visited {
bsw/jbe@1309:         text-decoration: underline;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     a[href]:after {
bsw/jbe@1309:         content: " (" attr(href) ")";
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     abbr[title]:after {
bsw/jbe@1309:         content: " (" attr(title) ")";
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     /*
bsw/jbe@1309:      * Don't show links that are fragment identifiers,
bsw/jbe@1309:      * or use the `javascript:` pseudo protocol
bsw/jbe@1309:      */
bsw/jbe@1309: 
bsw/jbe@1309:     a[href^="#"]:after,
bsw/jbe@1309:     a[href^="javascript:"]:after {
bsw/jbe@1309:         content: "";
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     pre,
bsw/jbe@1309:     blockquote {
bsw/jbe@1309:         border: 1px solid #999;
bsw/jbe@1309:         page-break-inside: avoid;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     /*
bsw/jbe@1309:      * Printing Tables:
bsw/jbe@1309:      * http://css-discuss.incutio.com/wiki/Printing_Tables
bsw/jbe@1309:      */
bsw/jbe@1309: 
bsw/jbe@1309:     thead {
bsw/jbe@1309:         display: table-header-group;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     tr,
bsw/jbe@1309:     img {
bsw/jbe@1309:         page-break-inside: avoid;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     img {
bsw/jbe@1309:         max-width: 100% !important;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     p,
bsw/jbe@1309:     h2,
bsw/jbe@1309:     h3 {
bsw/jbe@1309:         orphans: 3;
bsw/jbe@1309:         widows: 3;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     h2,
bsw/jbe@1309:     h3 {
bsw/jbe@1309:         page-break-after: avoid;
bsw/jbe@1309:     }
bsw/jbe@1309: }