From 914fe244c95d84cc88345b0c9225c9b393b77fc8 Mon Sep 17 00:00:00 2001 From: Drew Larson Date: Sun, 3 Apr 2016 19:59:34 -0600 Subject: [PATCH] Import CSS separately. --- bikeshop_project/core/static/scss/screen.scss | 150 ++++++++++++++++-- 1 file changed, 134 insertions(+), 16 deletions(-) diff --git a/bikeshop_project/core/static/scss/screen.scss b/bikeshop_project/core/static/scss/screen.scss index 2d59944..1bd2db5 100644 --- a/bikeshop_project/core/static/scss/screen.scss +++ b/bikeshop_project/core/static/scss/screen.scss @@ -1,24 +1,142 @@ -/** - * Copyright 2015 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -@import "vendor/material-design-lite/src/material-design-lite.scss"; +@import "vendor/material-design-lite/src/textfield/textfield"; +@import "vendor/material-design-lite/src/typography/typography"; +@import "vendor/material-design-lite/src/shadow/shadow"; +@import "vendor/material-design-lite/src/ripple/ripple"; +@import "vendor/material-design-lite/src/grid/grid"; +@import "vendor/material-design-lite/src/layout/layout"; +@import "vendor/material-design-lite/src/footer/mega_footer"; +@import "vendor/material-design-lite/src/checkbox/checkbox"; +@import "vendor/material-design-lite/src/button/button"; +@import "vendor/material-design-lite/src/palette/palette"; +@import "vendor/material-design-lite/src/menu/menu"; +@import "vendor/material-design-lite/src/card/card"; html, body { font-family: 'Roboto', 'Helvetica', sans-serif; } + +/* ========================================================================== + Helper classes + ========================================================================== */ +/* + * Hide visually and from screen readers: + */ +.hidden { + display: none !important; } + +/* + * Hide only visually, but have it available for screen readers: + * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility + */ +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + +/* + * Extends the .visuallyhidden class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 + */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } + +/* + * Hide visually and from screen readers, but maintain layout + */ +.invisible { + visibility: hidden; } + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ +.clearfix:before, +.clearfix:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ } + +.clearfix:after { + clear: both; } + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + http://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ +@media print { + *, + *:before, + *:after, + *:first-letter { + background: transparent !important; + color: #000 !important; + /* Black prints faster: http://www.sanbeiji.com/archives/953 */ + box-shadow: none !important; } + a, + a:visited { + text-decoration: underline; } + a[href]:after { + content: " (" attr(href) ")"; } + abbr[title]:after { + content: " (" attr(title) ")"; } + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + /* + * Printing Tables: + * http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + p, + h2, + h3 { + orphans: 3; + widows: 3; } + h2, + h3 { + page-break-after: avoid; } } + .demo-avatar { width: 48px; height: 48px;