diff options
Diffstat (limited to 'sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass')
14 files changed, 2251 insertions, 0 deletions
diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/README.txt b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/README.txt new file mode 100644 index 000000000..8e08b701d --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/README.txt @@ -0,0 +1,58 @@ +ABOUT SASS AND COMPASS +---------------------- + +This directory includes Sass versions of Zen's CSS files. (If you are wondering +how these Sass files are organized, read the css/README.txt file.) + +Sass is a language that is just normal CSS plus some extra features, like +variables, nested rules, math, mixins, etc. If your stylesheets are written in +Sass, helper applications can convert them to standard CSS so that you can +include the CSS in the normal ways with your theme. + +To learn more about Sass, visit: http://sass-lang.com + +Compass is a helper library for Sass. It includes libraries of shared mixins, a +package manager to add additional extension libraries, and an executable that +can easily convert Sass files into CSS. + +To learn more about Compass, visit: http://compass-style.org + + +DEVELOPING WITH SASS AND COMPASS +-------------------------------- + +To automatically generate the CSS versions of the scss while you are doing theme +development, you'll need to tell Compass to "watch" the sass directory so that +any time a .scss file is changed it will automatically place a generated CSS +file into your sub-theme's css directory: + + compass watch <path to your sub-theme's directory> + + If you are already in the root of your sub-theme's directory, you can simply + type: compass watch + +While using generated CSS with Firebug, the line numbers it reports will be +wrong since it will be showing the generated CSS file's line numbers and not the +line numbers of the source Sass files. To correct this problem, you can install +the FireSass plug-in into Firefox and then edit your sub-theme's config.rb file +to set: firesass = true + https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/ + + +MOVING YOUR CSS TO PRODUCTION +----------------------------- + +Once you have finished your sub-theme development and are ready to move your CSS +files to your production server, you'll need to tell sass to update all your CSS +files and to compress them (to improve performance). Note: the Compass command +will only generate CSS for .scss files that have recently changed; in order to +force it to regenerate all the CSS files, you can use the Compass' clean command +to delete all the generated CSS files. + +- Delete all CSS files by running: compass clean +- Edit the config.rb file in your theme's directory and uncomment this line by + deleting the "#" from the beginning: + #environment = :production +- Regenerate all the CSS files by running: compass compile + +And don't forget to turn on Drupal's CSS aggregation. :-) diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_init.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_init.scss new file mode 100644 index 000000000..dd0beb18d --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_init.scss @@ -0,0 +1,126 @@ +// +// Initialization partial +// +// To make it easier to use all variables and mixins in any Sass file in this +// theme, each .scss file has a @import "init" declaration. And this _init.scss +// file is in charge of importing all the other partials needed for the theme. +// +// This initialization partial is organized in this way: +// - First we set any shared Sass variables. +// - Next we import Compass plug-ins (Sass mixin libraries). +// - Last we define our custom mixins for this theme. +// + + +// ============================================================================= +// Variables +// ============================================================================= + +// +// Legacy IE support +// +// These variables are used by many mixins to add additional CSS to support +// specific versions of IE or specific vendor prefixes. +// +// IE6-7 don't support box-sizing: border-box. We can fix this in 1 of 3 ways: +// - Drop support for IE 6/7. :-) Set $legacy-support-for-ie6 +// and $legacy-support-for-ie7 to false. +// - (Preferred) Install the box-sizing polyfill and set the variable below to +// the absolute path URL to the boxsizing.htc file. +// @see https://github.com/Schepp/box-sizing-polyfill +// $box-sizing-polyfill-path: "/path/to/boxsizing.htc"; +// - Use the same CSS unit for grid and gutter width in resonsive-sidebars.scss +// (use px for both or use % for both) and set the box-sizing variable to content-box. +// +// Zen does not require special handling for IE8 or later. But Compass uses that +// variable for a couple edge cases. We include it for completeness sake. See +// the documentation at http://compass-style.org/reference/compass/support/ +$legacy-support-for-ie6: false; +$legacy-support-for-ie7: false; +$legacy-support-for-ie8: true; + + +// +// Font faces, stacks and sizes. +// + +// Compass' vertical_rhythm extension is a powerful tool to set up a vertical +// rhythm for your entire page. You can see some of its mixins and functions in +// use in the normalize.scss file. +// @see http://compass-style.org/reference/compass/typography/vertical_rhythm/ + +$base-font-size: 16px; // The font size set on the root html element. +$base-line-height: 24px; // This line-height determines the basic unit of vertical rhythm. + +$h1-font-size: 2 * $base-font-size; +$h2-font-size: 1.5 * $base-font-size; +$h3-font-size: 1.17 * $base-font-size; +$h4-font-size: 1 * $base-font-size; +$h5-font-size: 0.83 * $base-font-size; +$h6-font-size: 0.67 * $base-font-size; + +// The following font family declarations are based on the Microsoft core web +// fonts which are common fonts available on most computer systems. The DejaVu +// and Nimbus Sans fonts are commonly available on Linux systems where the MS +// fonts are less common. Tahoma and Helvetica are also widely available. +// +// A user's web browser will look at the comma-separated list and will +// attempt to use each font in turn until it finds one that is available +// on the user's computer. The final "generic" font (sans-serif, serif or +// monospace) hints at what type of font to use if the web browser doesn't +// find any of the fonts in the list. + +// First, let's create some font stacks. +$times-new-roman: "Times New Roman", Times, Georgia, "DejaVu Serif", serif; +$times: Times, "Times New Roman", Georgia, "DejaVu Serif", serif; +$georgia: Georgia, "Times New Roman", "DejaVu Serif", serif; + +$verdana: Verdana, Tahoma, "DejaVu Sans", sans-serif; +$tahoma: Tahoma, Verdana, "DejaVu Sans", sans-serif; +$helvetica: Helvetica, Arial, "Nimbus Sans L", sans-serif; +$arial: Arial, Helvetica, "Nimbus Sans L", sans-serif; + +// For an explanation of why "sans-serif" is at the end of this list, see +// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ +$courier: "Courier New", "DejaVu Sans Mono", monospace, sans-serif; + +// Now create some variables for the font stacks we want to use on this site. +$base-font-family: $verdana; // The font family set on the html element. +$font-body: $verdana; +$font-monospace: $courier; + + +// +// Colors, etc. +// + +// The amount lists, blockquotes and comments are indented. +$indent-amount: 30px; + +// The height of the navigation container. +$nav-height: 3em; + +// Tab styling. +$tabs-container-bg: #fff; +$tabs-border: #bbb; + + +// ============================================================================= +// Partials to be shared with all .scss files. +// ============================================================================= + +// Add Compass' IE and vendor prefix support variables. +@import "compass/support"; +// Better than Drupal's clearfix. +@import "compass/utilities/general/clearfix"; +// See http://compass-style.org/help/tutorials/spriting/ +@import "compass/utilities/sprites"; +// Use one CSS3 mixin instead of multiple vendor prefixes. +@import "compass/css3"; +// Helps set up a vertical rhythm. +@import "compass/typography/vertical_rhythm"; +// Add the Zen Grids responsive layout mixins. +@import "zen"; + +// Now we add our custom helper mixins. +@import "mixins"; diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss new file mode 100644 index 000000000..b9cb09aee --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_mixins.scss @@ -0,0 +1,37 @@ +// @file +// Custom sass mixins +// +// Define the custom mixins for your project here. +// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin + +// Makes an element visually hidden, but accessible. +// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +@mixin element-invisible { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax. + } + clip: rect(1px, 1px, 1px, 1px); +} + +// Turns off the element-invisible effect. +@mixin element-invisible-off { + position: static !important; + clip: auto; + height: auto; + width: auto; + overflow: auto; +} + +// Makes an element visually hidden by default, but visible when focused. +@mixin element-focusable { + @include element-invisible; + + &:active, + &:focus { + @include element-invisible-off; + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_normalize-rtl.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_normalize-rtl.scss new file mode 100644 index 000000000..a08a9814a --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_normalize-rtl.scss @@ -0,0 +1,29 @@ +/** + * @file + * Normalize-rtl.scss is the RTL language extension of normalize.scss + */ + +/** + * Lists + */ +dd { + margin: 0 $indent-amount 0 0; +} + +/* Address paddings set differently in IE 6/7. */ +menu, +ol, +ul { + padding: 0 $indent-amount 0 0; +} + +@if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + /** + * Forms + */ + legend { + /* Correct alignment displayed oddly in IE 6/7. */ + *margin-left: 0; + *margin-right: -7px; + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_normalize.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_normalize.scss new file mode 100644 index 000000000..163f27460 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_normalize.scss @@ -0,0 +1,545 @@ +/** + * @file + * Normalize.css is intended to be used as an alternative to CSS resets. + * + * This file is a slight fork of these original sources: + * - normalize.css v2.1.2 | MIT License | git.io/normalize + * - normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-with-compass + * + * It's suggested that you read the normalize.scss file and customise it to meet + * your needs, rather then including the file in your project and overriding the + * defaults later in your CSS. + * @see http://nicolasgallagher.com/about-normalize-css/ + * + * Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ + * @see http://snook.ca/archives/html_and_css/no_css_reset/ + */ + +/** + * HTML5 display definitions + */ + +/* Correct `block` display not defined in IE 8/9. */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +nav, +section, +summary { + display: block; +} + +/* Correct `inline-block` display not defined in IE 8/9. */ +audio, +canvas, +video { + display: inline-block; + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *display: inline; + *zoom: 1; + } +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; +} + +/* Address styling not present in IE 8/9. */ +[hidden] { + display: none; +} + +/** + * Base + * + * Instead of relying on the fonts that are available on a user's computer, you + * can use web fonts which, like images, are resources downloaded to the user's + * browser. Because of the bandwidth and rendering resources required, web fonts + * should be used with care. + * + * Numerous resources for web fonts can be found on Google. Here are a few + * websites where you can find Open Source fonts to download: + * - http://www.fontsquirrel.com/fontface + * - http://www.theleagueofmoveabletype.com + * + * In order to use these fonts, you will need to convert them into formats + * suitable for web fonts. We recommend the free-to-use Font Squirrel's + * Font-Face Generator: + * http://www.fontsquirrel.com/fontface/generator + * + * The following is an example @font-face declaration. This font can then be + * used in any ruleset using a property like this: font-family: Example, serif; + * + * Since we're using Sass, you'll need to declare your font faces here, then you + * can add them to the font variables in the _base.scss partial. + */ +/* +@font-face { + font-family: 'Example'; + src: url('../fonts/example.eot'); + src: url('../fonts/example.eot?iefix') format('eot'), + url('../fonts/example.woff') format('woff'), + url('../fonts/example.ttf') format('truetype'), + url('../fonts/example.svg#webfontOkOndcij') format('svg'); + font-weight: normal; + font-style: normal; +} +*/ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + */ +html { + font-family: $base-font-family; /* 1 */ + font-size: 100% * ($base-font-size / 16px); /* 3 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + // Establish a vertical rhythm unit using $base-line-height. + @include adjust-leading-to(1); +} + +@if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + /* Address `font-family` inconsistency between `textarea` and other form elements. */ + button, + input, + select, + textarea { + font-family: $base-font-family; + } +} + +/* Remove default margin. */ +body { + margin: 0; + padding: 0; +} + +/** + * Links + * + * The order of link states are based on Eric Meyer's article: + * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states + */ +a:link { +} +a:visited { +} +a:hover, +a:focus { +} +a:active { +} + +/* Address `outline` inconsistency between Chrome and other browsers. */ +a:focus { + outline: thin dotted; +} + +/* Improve readability when focused and also mouse hovered in all browsers. */ +a:active, +a:hover { + outline: 0; +} + +/** + * Typography + * + * To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins + * so that the line height of our base font becomes the basic unit of vertical + * measurement. We use multiples of that unit to set the top and bottom margins + * for our block level elements and to set the line heights of any fonts. + * For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm + */ + +/* Set 1 unit of vertical rhythm on the top and bottom margin. */ +p, +pre { + margin: rhythm(1) 0; +} +blockquote { + /* Also indent the quote on both sides. */ + margin: rhythm(1) $indent-amount; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ +h1 { + /* Set the font-size and line-height while keeping a proper vertical rhythm. */ + @include adjust-font-size-to( $h1-font-size ); + + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + @include leader(1, $h1-font-size); + @include trailer(1, $h1-font-size); +} +h2 { + @include adjust-font-size-to( $h2-font-size ); + @include leader(1, $h2-font-size); + @include trailer(1, $h2-font-size); +} +h3 { + @include adjust-font-size-to( $h3-font-size ); + @include leader(1, $h3-font-size); + @include trailer(1, $h3-font-size); +} +h4 { + @include adjust-font-size-to( $h4-font-size ); + @include leader(1, $h4-font-size); + @include trailer(1, $h4-font-size); +} +h5 { + @include adjust-font-size-to( $h5-font-size ); + @include leader(1, $h5-font-size); + @include trailer(1, $h5-font-size); +} +h6 { + @include adjust-font-size-to( $h6-font-size ); + @include leader(1, $h6-font-size); + @include trailer(1, $h6-font-size); +} + +/* Address styling not present in IE 8/9, Safari 5, and Chrome. */ +abbr[title] { + border-bottom: 1px dotted; +} + +/* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ +b, +strong { + font-weight: bold; +} + +/* Address styling not present in Safari 5 and Chrome. */ +dfn { + font-style: italic; +} + +/* Address differences between Firefox and other browsers. */ +hr { + @include box-sizing(content-box); + height: 0; + border: 1px solid #666; + padding-bottom: -1px; + margin: rhythm(1) 0; +} + +/* Address styling not present in IE 8/9. */ +mark { + background: #ff0; + color: #000; +} + +/* Correct font family set oddly in Safari 5 and Chrome. */ +code, +kbd, +pre, +samp, +tt, +var { + font-family: $font-monospace; // The value of $font-monospace ends with ", serif". + @if $legacy-support-for-ie6 { + _font-family: 'courier new', monospace; + } + @include adjust-font-size-to( $base-font-size ); +} + +/* Improve readability of pre-formatted text in all browsers. */ +pre { + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + } + @else { + white-space: pre-wrap; + } +} + +/* Set consistent quote types. */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* Address inconsistent and variable font size in all browsers. */ +small { + font-size: 80%; +} + +/* Prevent `sub` and `sup` affecting `line-height` in all browsers. */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/** + * Lists + */ +dl, +menu, +ol, +ul { + /* Address margins set differently in IE 6/7. */ + margin: rhythm(1) 0; +} +ol, +ul { + ol, + ul { + /* Turn off margins on nested lists. */ + margin: 0; + } +} +dd { + margin: 0 0 0 $indent-amount; /* LTR */ +} + +/* Address paddings set differently in IE 6/7. */ +menu, +ol, +ul { + padding: 0 0 0 $indent-amount; /* LTR */ +} + +@if $legacy-support-for-ie7 { + /* Correct list images handled incorrectly in IE 7. */ + nav ul, + nav ol { + list-style: none; + list-style-image: none; + } +} + +/** + * Embedded content and figures + * + * @todo Look into adding responsive embedded video. + */ +img { + /* Remove border when inside `a` element in IE 8/9. */ + border: 0; + @if $legacy-support-for-ie7 { + /* Improve image quality when scaled in IE 7. */ + -ms-interpolation-mode: bicubic; + } + + /* Suppress the space beneath the baseline */ + /* vertical-align: bottom; */ + + /* Responsive images */ + max-width: 100%; + height: auto; + @if $legacy-support-for-ie8 { + /* Correct IE 8 not scaling image height when resized. */ + width: auto; + } +} + +/* Correct overflow displayed oddly in IE 9. */ +svg:not(:root) { + overflow: hidden; +} + +/* Address margin not present in IE 8/9 and Safari 5. */ +figure { + margin: 0; +} + +/** + * Forms + */ + +@if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + /* Correct margin displayed oddly in IE 6/7. */ + form { + margin: 0; + } +} + +/* Define consistent border, margin, and padding. */ +fieldset { + margin: 0 2px; + /* Apply borders and padding that keep the vertical rhythm. */ + border-color: #c0c0c0; + @include apply-side-rhythm-border(top, $width: 1px, $lines: 0.35); + @include apply-side-rhythm-border(bottom, $width: 1px, $lines: 0.65); + @include apply-side-rhythm-border(left, $width: 1px, $lines: 0.65); + @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.65); +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 3. Correct alignment displayed oddly in IE 6/7. + */ +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *margin-left: -7px; /* 3 */ /* LTR */ + } +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + * 4. Improve appearance and consistency with IE 6/7. + * 5. Keep form elements constrained in their containers. + */ +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + vertical-align: baseline; /* 4 */ + *vertical-align: middle; /* 4 */ + } + max-width: 100%; /* 5 */ + @include box-sizing(border-box); /* 5 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + @if $legacy-support-for-ie7 { + *overflow: visible; /* 4 */ + } +} + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ +input[type="checkbox"], +input[type="radio"] { + @include box-sizing(border-box); /* 1 */ + padding: 0; /* 2 */ + @if $legacy-support-for-ie7 { + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ + } +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + @include box-sizing(content-box); /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* Remove inner padding and border in Firefox 4+. */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* Drupal-style form labels. */ +label { + display: block; + font-weight: bold; +} + +/** + * Tables + */ +table { + /* Remove most spacing between table cells. */ + border-collapse: collapse; + border-spacing: 0; + /* Prevent cramped-looking tables */ + /* width: 100%; */ + /* Add vertical rhythm margins. */ + @include leader(1); + @include trailer(1); +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_print.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_print.scss new file mode 100644 index 000000000..be64c57e0 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/_print.scss @@ -0,0 +1,81 @@ +/** + * @file + * Print styling + * + * We provide some sane print styling for Drupal using Zen's layout method. + */ + +/** + * By importing this CSS file as media "all", we allow this print file to be + * aggregated with other stylesheets, for improved front-end performance. + */ +@media print { + + /* Underline all links. */ + a:link, + a:visited { + text-decoration: underline !important; + + /* Don't underline header. */ + &.header__site-link { + text-decoration: none !important; + } + } + + #content { + /* Add visible URL after links. */ + a[href]:after { + content: " (" attr(href) ")"; + font-weight: normal; + font-size: $base-font-size; + } + + /* Only display useful links. */ + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + /* Add visible title after abbreviations. */ + abbr[title]:after { + content: " (" attr(title) ")"; + } + } + + /* Un-float the content. */ + #content { + float: none !important; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + } + + /* Turn off any background colors or images. */ + body, + #page, + #main, + #content { + color: #000; + background-color: transparent !important; + background-image: none !important; + } + + /* Hide sidebars and nav elements. */ + #skip-link, + #toolbar, + #navigation, + .region-sidebar-first, + .region-sidebar-second, + #footer, + .breadcrumb, + .tabs, + .action-links, + .links, + .book-navigation, + .forum-topic-navigation, + .pager, + .feed-icons { + visibility: hidden; + display: none; + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/components/_misc-rtl.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/components/_misc-rtl.scss new file mode 100644 index 000000000..cee287fc3 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/components/_misc-rtl.scss @@ -0,0 +1,167 @@ +/** + * @file + * RTL companion for the modular-styles.css file. + */ + +/** + * Branding header. + */ + +/* Wrapping link for logo. */ +.header__logo { + float: right; +} + +/* The secondary menu (login, etc.) */ +.header__secondary-menu { + float: left; +} + +/** + * Navigation bar. + */ + +/* Main menu and secondary menu links and menu block links. */ +#navigation { + .links, + .menu { + text-align: right; + + li { + /* A simple method to get navigation links to appear in one line. */ + float: right; + padding: 0 0 0 10px; + } + } +} + +/** + * Messages. + */ +.messages { + padding: 10px 50px 10px 10px; + background-position: 99% 8px; +} +.messages--status { + @extend .messages; +} +.messages--warning { + @extend .messages; +} +.messages--error { + @extend .messages; +} + +/** + * Tabs. + */ +%tabs__tab { + float: right; +} +.tabs-primary__tab { + @extend %tabs__tab; +} +.tabs-primary__tab.is-active { + @extend .tabs-primary__tab; +} +.tabs-secondary__tab, +.tabs-secondary__tab.is-active { + @extend %tabs__tab; +} + +/** + * Inline styles. + */ + +/* List of links */ +.inline li { + /* Bug in Safari causes display: inline to fail. */ + display: inline-block; + padding: 0 0 0 1em; +} + +/* The inline field label used by the Fences.module */ +span.field-label { + padding: 0 0 0 1em; +} + +/** + * "More" links. + */ +.more-link { + text-align: left; +} +.more-help-link { + text-align: left; +} +.more-help-link a { + background-position: 100% 50%; + padding: 1px 20px 1px 0; +} + +/** + * Menus. + */ +.menu__item.is-collapsed { + list-style-image: inline-image("menu-collapsed-rtl.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *list-style-image: image-url("menu-collapsed-rtl.png"); + } +} + +/** + * Comments. + */ + +/* Nested comments are indented. */ +.indented { + margin-left: 0; + margin-right: $indent-amount; +} + +/** + * Forms. + */ + +/* Drupal's default login form block */ +#user-login-form { + text-align: right; +} + +html.js #user-login-form li.openid-link, +#user-login-form li.openid-link { + /* Un-do some of the padding on the ul list. */ + margin-left: 0; + margin-right: -20px; +} + +/* + * Drupal admin tables. + */ +form { + th { + text-align: right; + padding-left: 1em; + padding-right: 0; + } +} + +/** + * Collapsible fieldsets. + * + * @see collapse.js + */ +.fieldset-legend { + html.js .collapsible & { + background-position: 98% 75%; + padding-left: 0; + padding-right: 15px; + } + html.js .collapsed & { + background-image: inline-image("menu-collapsed-rtl.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("menu-collapsed-rtl.png"); + } + background-position: 98% 50%; + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/components/_misc.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/components/_misc.scss new file mode 100644 index 000000000..7fc011b48 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/components/_misc.scss @@ -0,0 +1,807 @@ +/** + * @file + * SMACSS Modules + * + * Adds modular sets of styles. + * + * Additional useful selectors can be found in Zen's online documentation. + * https://drupal.org/node/1707736 + */ + +/** + * Wireframes. + */ +.with-wireframes { + #header, + #main, + #content, + #navigation, + .region-sidebar-first, + .region-sidebar-second, + #footer, + .region-bottom { + outline: 1px solid #ccc; + + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + .lt-ie8 & { + /* IE6/7 do not support the outline property. */ + border: 1px solid #ccc; + } + } + } +} + +/** + * Accessibility features. + */ + +/* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ +.element-invisible, +%element-invisible { + @include element-invisible; +} + +/* Turns off the element-invisible effect. */ +%element-invisible-off { + @include element-invisible-off; +} + +.element-focusable, +%element-focusable { + @extend %element-invisible; + + &:active, + &:focus { + @extend %element-invisible-off; + } +} + +/* + * The skip-link link will be completely hidden until a user tabs to the link. + */ +#skip-link { + margin: 0; + + a, + a:visited { + display: block; + width: 100%; + padding: 2px 0 3px 0; + text-align: center; + background-color: #666; + color: #fff; + } +} + +/** + * Branding header. + */ + +/* Wrapping link for logo. */ +.header__logo { + float: left; /* LTR */ + margin: 0; + padding: 0; +} + +/* Logo image. */ +.header__logo-image { + vertical-align: bottom; +} + +/* Wrapper for website name and slogan. */ +.header__name-and-slogan { + float: left; +} + +/* The name of the website. */ +.header__site-name { + margin: 0; + @include adjust-font-size-to( $h1-font-size ); +} + +/* The link around the name of the website. */ +.header__site-link { + &:link, + &:visited { + color: #000; + text-decoration: none; + } + + &:hover, + &:focus { + text-decoration: underline; + } +} + +/* The slogan (or tagline) of a website. */ +.header__site-slogan { + margin: 0; +} + +/* The secondary menu (login, etc.) */ +.header__secondary-menu { + float: right; /* LTR */ +} + +/* Wrapper for any blocks placed in the header region. */ +.header__region { + /* Clear the logo. */ + clear: both; +} + +/** + * Navigation bar. + */ +#navigation { + /* Sometimes you want to prevent overlapping with main div. */ + /* overflow: hidden; */ + + .block { + margin-bottom: 0; + } + + .block-menu .block__title, + .block-menu-block .block__title { + @extend %element-invisible; + } + + /* Main menu and secondary menu links and menu block links. */ + .links, + .menu { + margin: 0; + padding: 0; + text-align: left; /* LTR */ + + li { + /* A simple method to get navigation links to appear in one line. */ + float: left; /* LTR */ + padding: 0 10px 0 0; /* LTR */ + list-style-type: none; + list-style-image: none; + } + } +} + +/** + * Breadcrumb navigation. + */ +.breadcrumb { + ol { + margin: 0; + padding: 0; + } + li { + display: inline; + list-style-type: none; + margin: 0; + padding: 0; + } +} + +/** + * Titles. + */ +.page__title, /* The title of the page. */ +.node__title, /* Title of a piece of content when it is given in a list of content. */ +.block__title, /* Block title. */ +.comments__title, /* Comment section heading. */ +.comments__form-title, /* Comment form heading. */ +.comment__title { /* Comment title. */ + margin: 0; +} + +/** + * Messages. + */ +.messages { + margin: rhythm(1) 0; + padding: 10px 10px 10px 50px; /* LTR */ + background-image: inline-image("message-24-ok.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("message-24-ok.png"); + } + background-position: 8px 8px; /* LTR */ + background-repeat: no-repeat; + border: 1px solid #be7; +} +.messages--status { + @extend .messages; + @extend %ok; +} +.messages--warning { + @extend .messages; + @extend %warning; + background-image: inline-image("message-24-warning.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("message-24-warning.png"); + } + border-color: #ed5; +} +.messages--error { + @extend .messages; + @extend %error; + background-image: inline-image("message-24-error.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("message-24-error.png"); + } + border-color: #ed541d; + +} +.messages__list { + margin: 0; +} +.messages__item { + list-style-image: none; +} + +/* Core/module installation error messages. */ +.messages--error p.error { + color: #333; +} + +/* System status report. */ +.ok, +%ok { + background-color: #f8fff0; + color: #234600; +} +.warning, +%warning { + background-color: #fffce5; + color: #840; +} +.error, +%error { + background-color: #fef5f1; + color: #8c2e0b; +} + +/** + * Tabs. + */ + +/* Basic positioning styles shared by primary and secondary tabs. */ +%tabs { + @include clearfix; + @include background-image(linear-gradient(bottom, $tabs-border 1px, transparent 1px)); + /* IE 9 and earlier don't understand gradients. */ + list-style: none; + border-bottom: 1px solid $tabs-border \0/ie; + margin: rhythm(1) 0; + padding: 0 2px; + white-space: nowrap; +} +%tabs__tab { + float: left; /* LTR */ + margin: 0 3px; +} +%tabs__tab-link { + border: 1px solid #e9e9e9; + border-right: 0; + border-bottom: 0; + display: block; + @include adjust-leading-to(1); + text-decoration: none; +} + +/* Primary tabs. */ +.tabs-primary { + @extend %tabs; +} +.tabs-primary__tab { + @extend %tabs__tab; + @include border-top-radius(4px); + @include single-text-shadow(#fff, 1px, 1px, 0); + border: 1px solid $tabs-border; + border-bottom-color: transparent; + /* IE 9 and earlier don't understand gradients. */ + border-bottom: 0 \0/ie; +} +.tabs-primary__tab.is-active { + @extend .tabs-primary__tab; + border-bottom-color: $tabs-container-bg; +} + +// We use 3 placeholder styles to prevent @extend from going selector crazy. +%tabs-primary__tab-link { + @extend %tabs__tab-link; + @include border-top-radius(4px); + @include transition(background-color 0.3s); + color: #333; + background-color: #dedede; + letter-spacing: 1px; + padding: 0 1em; + text-align: center; +} +%tabs-primary__tab-link-is-hover { + background-color: #e9e9e9; + border-color: #f2f2f2; +} +%tabs-primary__tab-link-is-active { + background-color: transparent; + @include filter-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0)); + @include background-image(linear-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0))); + border-color: #fff; +} + +a.tabs-primary__tab-link { + @extend %tabs-primary__tab-link; + + &:hover, + &:focus { + @extend %tabs-primary__tab-link-is-hover; + } + &:active { + @extend %tabs-primary__tab-link-is-active; + } +} +a.tabs-primary__tab-link.is-active { + @extend %tabs-primary__tab-link; + @extend %tabs-primary__tab-link-is-active; +} + +/* Secondary tabs. */ +.tabs-secondary { + @extend %tabs; + font-size: .9em; + /* Collapse bottom margin of ul.primary. */ + margin-top: -(rhythm(1)); +} +.tabs-secondary__tab, +.tabs-secondary__tab.is-active { + @extend %tabs__tab; + margin: rhythm(1)/2 3px; +} + +// We use 3 placeholder styles to prevent @extend from going selector crazy. +%tabs-secondary__tab-link { + @extend %tabs__tab-link; + @include border-radius(.75em); + @include transition(background-color 0.3s); + @include single-text-shadow(#fff, 1px, 1px, 0); + background-color: #f2f2f2; + color: #666; + padding: 0 .5em; +} +%tabs-secondary__tab-link-is-focus { + background-color: #dedede; + border-color: #999; + color: #333; +} +%tabs-secondary__tab-link-is-active { + @include single-text-shadow(#333, 1px, 1px, 0); + background-color: #666; + border-color: #000; + color: #fff; +} + +a.tabs-secondary__tab-link { + @extend %tabs-secondary__tab-link; + + &:hover, + &:focus { + @extend %tabs-secondary__tab-link-is-focus; + } + &:active { + @extend %tabs-secondary__tab-link-is-active; + } +} +a.tabs-secondary__tab-link.is-active { + @extend %tabs-secondary__tab-link; + @extend %tabs-secondary__tab-link-is-active; +} + +/** + * Inline styles. + */ + +/* List of links generated by theme_links(). */ +.inline { + display: inline; + padding: 0; + + li { + display: inline; + list-style-type: none; + padding: 0 1em 0 0; /* LTR */ + } +} + +/* The inline field label used by the Fences module. */ +span.field-label { + padding: 0 1em 0 0; /* LTR */ +} + +/** + * "More" links. + */ +.more-link { + text-align: right; /* LTR */ +} +.more-help-link { + text-align: right; /* LTR */ +} +.more-help-link a { + background-image: inline-image("help.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("help.png"); + } + background-position: 0 50%; /* LTR */ + background-repeat: no-repeat; + padding: 1px 0 1px 20px; /* LTR */ +} + +/** + * Pager. + */ + +/* A list of page numbers when more than 1 page of content is available. */ +.pager { + clear: both; + padding: 0; + text-align: center; +} +%pager__item { + display: inline; + padding: 0 0.5em; + list-style-type: none; + background-image: none; +} + +.pager-item, /* A list item containing a page number in the list of pages. */ +.pager-first, /* The first page's list item. */ +.pager-previous, /* The previous page's list item. */ +.pager-next, /* The next page's list item. */ +.pager-last, /* The last page's list item. */ +.pager-ellipsis { /* A concatenation of several list items using an ellipsis. */ + @extend %pager__item; +} + +/* The current page's list item. */ +.pager-current { + @extend %pager__item; + font-weight: bold; +} + +/** + * Blocks. + */ + +/* Block wrapper. */ +.block { + margin-bottom: rhythm(1); +} + +/** + * Menus. + */ +.menu__item.is-leaf { + list-style-image: inline-image("menu-leaf.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *list-style-image: image-url("menu-leaf.png"); + } + list-style-type: square; +} +.menu__item.is-expanded { + list-style-image: inline-image("menu-expanded.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *list-style-image: image-url("menu-expanded.png"); + } + list-style-type: circle; +} +.menu__item.is-collapsed { + list-style-image: inline-image("menu-collapsed.png"); /* LTR */ + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *list-style-image: image-url("menu-collapsed.png"); /* LTR */ + } + list-style-type: disc; +} + +/* The active item in a Drupal menu. */ +.menu a.active { + color: #000; +} + +/** + * Marker. + */ + +/* The "new" or "updated" marker. */ +.new, +.update { + color: #c00; + /* Remove background highlighting from <mark> in normalize. */ + background-color: transparent; +} + +/** + * Unpublished note. + */ + +/* The word "Unpublished" displayed underneath the content. */ +.unpublished { + height: 0; + overflow: visible; + /* Remove background highlighting from <mark> in normalize. */ + background-color: transparent; + color: #d8d8d8; + font-size: 75px; + line-height: 1; + font-family: Impact, "Arial Narrow", Helvetica, sans-serif; + font-weight: bold; + text-transform: uppercase; + text-align: center; + /* A very nice CSS3 property. */ + word-wrap: break-word; +} +@if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + .lt-ie8 .node-unpublished>*, + .lt-ie8 .comment-unpublished>* { + /* Otherwise these elements will appear below the "Unpublished" text. */ + position: relative; + } +} + +/** + * Comments. + */ + +/* Wrapper for the list of comments and its title. */ +.comments { + margin: rhythm(1) 0; +} + +/* Preview of the comment before submitting new or updated comment. */ +.comment-preview { + /* Drupal core will use a #ffffea background. See #1110842. */ + background-color: #ffffea; +} + +/* Wrapper for a single comment. */ +.comment { + + /* Comment's permalink wrapper. */ + .permalink { + text-transform: uppercase; + font-size: 75%; + } +} + +/* Nested comments are indented. */ +.indented { + /* Drupal core uses a 25px left margin. */ + margin-left: $indent-amount; /* LTR */ +} + +/** + * Forms. + */ + +/* Wrapper for a form element (or group of form elements) and its label. */ +.form-item { + margin: rhythm(1) 0; + + /* Pack groups of checkboxes and radio buttons closer together. */ + .form-checkboxes & , + .form-radios & { + /* Drupal core uses "0.4em 0". */ + margin: 0; + } + + /* Form items in a table. */ + tr.odd &, + tr.even & { + margin: 0; + } + + /* Highlight the form elements that caused a form submission error. */ + input.error, + textarea.error, + select.error { + border: 1px solid #c00; + } + + /* The descriptive help text (separate from the label). */ + .description { + font-size: 0.85em; + } +} + +.form-type-radio, +.form-type-checkbox { + .description { + margin-left: 2.4em; + } +} + +/* The part of the label that indicates a required field. */ +.form-required { + color: #c00; +} + +/* Labels for radios and checkboxes. */ +label.option { + display: inline; + font-weight: normal; +} + +/* Buttons used by contrib modules like Media. */ +a.button { + @include appearance(button); +} + +/* Password confirmation. */ +.password-parent, +.confirm-parent { + margin: 0; +} + +/* Drupal's default login form block. */ +#user-login-form { + text-align: left; /* LTR */ +} + +/** + * OpenID + * + * The default styling for the OpenID login link seems to assume Garland's + * styling of list items. + */ + +/* OpenID creates a new ul above the login form's links. */ +.openid-links { + /* Position OpenID's ul next to the rest of the links. */ + margin-bottom: 0; +} + +/* The "Log in using OpenID" and "Cancel OpenID login" links. */ +.openid-link, +.user-link { + margin-top: rhythm(1); +} +html.js #user-login-form li.openid-link, +#user-login-form li.openid-link { + /* Un-do some of the padding on the ul list. */ + margin-left: -20px; /* LTR */ +} +#user-login ul { + margin: rhythm(1) 0; +} + +/** + * Drupal admin tables. + */ +form { + th { + text-align: left; /* LTR */ + padding-right: 1em; /* LTR */ + border-bottom: 3px solid #ccc; + } + tbody { + border-top: 1px solid #ccc; + } + table ul { + margin: 0; + } +} +tr.even, +tr.odd { + background-color: #eee; + border-bottom: 1px solid #ccc; + padding: 0.1em 0.6em; +} +tr.even { + background-color: #fff; +} +@if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + .lt-ie8 tr.even, + .lt-ie8 tr.odd { + th, + td { + /* IE doesn't display borders on table rows. */ + border-bottom: 1px solid #ccc; + } + } +} + +/* Markup generated by theme_tablesort_indicator(). */ +td.active { + background-color: #ddd; +} + +/* Center checkboxes inside table cell. */ +td.checkbox, +th.checkbox { + text-align: center; +} + +/* Drupal core wrongly puts this in system.menus.css. Since we override that, add it back. */ +td.menu-disabled { + background: #ccc; +} + +/** + * Autocomplete. + * + * @see autocomplete.js + */ + +/* Suggestion list. */ +#autocomplete .selected { + background: #0072b9; + color: #fff; +} + +/** + * Collapsible fieldsets. + * + * @see collapse.js + */ +.fieldset-legend { + html.js .collapsible & { + background-image: inline-image("menu-expanded.png"); + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("menu-expanded.png"); + } + background-position: 5px 65%; /* LTR */ + background-repeat: no-repeat; + padding-left: 15px; /* LTR */ + } + html.js .collapsed & { + background-image: inline-image("menu-collapsed.png"); /* LTR */ + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + *background-image: image-url("menu-collapsed.png"); /* LTR */ + } + background-position: 5px 50%; /* LTR */ + } + .summary { + color: #999; + font-size: 0.9em; + margin-left: 0.5em; + } +} + +/** + * TableDrag behavior. + * + * @see tabledrag.js + */ +tr.drag { + background-color: #fffff0; +} +tr.drag-previous { + background-color: #ffd; +} +.tabledrag-toggle-weight { + font-size: 0.9em; +} + +/** + * TableSelect behavior. + * + * @see tableselect.js + */ +tr.selected td { + background: #ffc; +} + +/** + * Progress bar. + * + * @see progress.js + */ +.progress { + font-weight: bold; + + .bar { + background: #ccc; + border-color: #666; + margin: 0 0.2em; + @include border-radius(3px); + } + .filled { + background-color: #0072b9; + background-image: image-url("progress.gif"); + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_fixed-rtl.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_fixed-rtl.scss new file mode 100644 index 000000000..f5ad9de6d --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_fixed-rtl.scss @@ -0,0 +1,10 @@ +/** + * @file + * RTL companion for the layout-fixed-width.css file. + */ + +// First we tell Zen grids to reverse the direction of all floats. +$zen-reverse-all-floats: true; + +// Then we import the LTR layout and the directions are automatically reversed. +@import "fixed"; diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_fixed.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_fixed.scss new file mode 100644 index 000000000..f3894e286 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_fixed.scss @@ -0,0 +1,126 @@ +/** + * @file + * Positioning for a fixed-width, desktop-centric layout. + * + * Define CSS classes to create a table-free, 3-column, 2-column, or single + * column layout depending on whether blocks are enabled in the left or right + * columns. + * + * This layout uses the Zen Grids plugin for Compass: http://zengrids.com + */ + +// We are going to create a 980px wide, 5 column grid with 20px gutters between +// columns (applied as 10px of left/right padding on each column). +$zen-column-count: 5; +$zen-gutter-width: 20px; +$zen-grid-width: 980px; + +// If you need IE6/7 support for box-sizing: border-box (default), see _base.scss +// Since the same CSS unit for grid width and gutter width are set here +// we can use box-sizing: content-box; without worrying about polyfills. +$zen-box-sizing: content-box; + +// You can generate more efficient CSS if you manually apply the +// zen-grid-item-base mixin to all grid items from within a single ruleset. +$zen-auto-include-item-base: false; +// $zen-auto-include-flow-item-base: false; + +// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles. +@if $zen-reverse-all-floats == false { + +/** + * Center the page. + * + * If you want to make the page a fixed width and centered in the viewport, + * this is the standards-compliant way to do that. + */ +#page, +.region-bottom { + margin-left: auto; + margin-right: auto; + width: $zen-grid-width; +} + +/* Apply the shared properties of grid items in a single, efficient ruleset. */ +#header, +#content, +#navigation, +.region-sidebar-first, +.region-sidebar-second, +#footer { + // See the note about $zen-auto-include-item-base above. + @include zen-grid-item-base(); +} + +/* Containers for grid items and flow items. */ +#header, +#main, +#footer { + @include zen-grid-container(); +} + +/* Navigation bar */ +#main { + /* Move all the children of #main down to make room. */ + padding-top: $nav-height; + position: relative; +} +#navigation { + /* Move the navbar up inside #main's padding. */ + position: absolute; + top: 0; + height: $nav-height; + width: $zen-grid-width - $zen-gutter-width; +} + +} // End of @if $zen-reverse-all-floats == true + +/** + * The layout when there is only one sidebar, the left one. + */ +.sidebar-first { + /* Span 4 columns, starting in 2nd column from left. */ + #content { + @include zen-grid-item(4, 2); + } + + /* Span 1 column, starting in 1st column from left. */ + .region-sidebar-first { + @include zen-grid-item(1, 1); + } +} + +/** + * The layout when there is only one sidebar, the right one. + */ +.sidebar-second { + /* Span 4 columns, starting in 1st column from left. */ + #content { + @include zen-grid-item(4, 1); + } + + /* Span 1 column, starting in 5th column from left. */ + .region-sidebar-second { + @include zen-grid-item(1, 5); + } +} + +/** + * The layout when there are two sidebars. + */ +.two-sidebars { + /* Span 3 columns, starting in 2nd column from left. */ + #content { + @include zen-grid-item(3, 2); + } + + /* Span 1 column, starting in 1st column from left. */ + .region-sidebar-first { + @include zen-grid-item(1, 1); + } + + /* Span 1 column, starting in 5th column from left. */ + .region-sidebar-second { + @include zen-grid-item(1, 5); + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive-rtl.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive-rtl.scss new file mode 100644 index 000000000..06e655210 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive-rtl.scss @@ -0,0 +1,10 @@ +/** + * @file + * RTL companion for the layout-responsive.css file. + */ + +// First we tell Zen grids to reverse the direction of all floats. +$zen-reverse-all-floats: true; + +// Then we import the LTR layout and the directions are automatically reversed. +@import "responsive"; diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive.scss new file mode 100644 index 000000000..f1fd2117a --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/layouts/_responsive.scss @@ -0,0 +1,210 @@ +/** + * @file + * Positioning for a responsive layout. + * + * Define CSS classes to create a fluid grid layout with optional sidebars + * depending on whether blocks are placed in the left or right sidebars. + * + * This layout uses the Zen Grids plugin for Compass: http://zengrids.com + */ + +// We are going to create a fluid grid with 1, 3, or 5 columns and 20px gutters +// between columns (applied as 10px of left/right padding on each column). +$zen-column-count: 1; +$zen-gutter-width: 20px; + +// If you need IE6/7 support for box-sizing: border-box (default), see _base.scss +//$zen-box-sizing: content-box; + +// You can generate more efficient CSS if you manually apply the +// zen-grid-item-base mixin to all grid items from within a single ruleset. +$zen-auto-include-item-base: false; +// $zen-auto-include-flow-item-base: false; + +// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles. +@if $zen-reverse-all-floats == false { + +/** + * Center the page. + * + * For screen sizes larger than 1200px, prevent excessively long lines of text + * by setting a max-width. + */ +#page, +.region-bottom { + margin-left: auto; + margin-right: auto; + max-width: 1200px; +} + +/* Apply the shared properties of grid items in a single, efficient ruleset. */ +#header, +#content, +#navigation, +.region-sidebar-first, +.region-sidebar-second, +#footer { + // See the note about $zen-auto-include-item-base above. + @include zen-grid-item-base(); +} + +/* Containers for grid items and flow items. */ +#header, +#main, +#footer { + @include zen-grid-container(); +} + +/* Navigation bar */ +@media all and (min-width: 480px) { + #main { + /* Move all the children of #main down to make room. */ + padding-top: $nav-height; + position: relative; + } + #navigation { + /* Move the navbar up inside #main's padding. */ + position: absolute; + top: 0; + height: $nav-height; + width: $zen-grid-width; + } +} + +} // End of @if $zen-reverse-all-floats == true + +/** + * Use 3 grid columns for smaller screens. + */ +@media all and (min-width: 480px) and (max-width: 959px) { + + $zen-column-count: 3; + + /** + * The layout when there is only one sidebar, the left one. + */ + .sidebar-first { + /* Span 2 columns, starting in 2nd column from left. */ + #content { + @include zen-grid-item(2, 2); + } + + /* Span 1 column, starting in 1st column from left. */ + .region-sidebar-first { + @include zen-grid-item(1, 1); + } + } + + /** + * The layout when there is only one sidebar, the right one. + */ + .sidebar-second { + /* Span 2 columns, starting in 1st column from left. */ + #content { + @include zen-grid-item(2, 1); + } + + /* Span 1 column, starting in 3rd column from left. */ + .region-sidebar-second { + @include zen-grid-item(1, 3); + } + } + + /** + * The layout when there are two sidebars. + */ + .two-sidebars { + /* Span 2 columns, starting in 2nd column from left. */ + #content { + @include zen-grid-item(2, 2); + } + + /* Span 1 column, starting in 1st column from left. */ + .region-sidebar-first { + @include zen-grid-item(1, 1); + } + + /* Start a new row and span all 3 columns. */ + .region-sidebar-second { + @include zen-grid-item(3, 1); + @include zen-nested-container(); // Since we're making every block in this region be a grid item. + @include zen-clear(); + + /* Apply the shared properties of grid items in a single, efficient ruleset. */ + .block { + @include zen-grid-item-base(); + } + /* Span 1 column, starting in the 1st column from left. */ + .block:nth-child(3n+1) { + @include zen-grid-item(1, 1); + @include zen-clear(); + } + /* Span 1 column, starting in the 2nd column from left. */ + .block:nth-child(3n+2) { + @include zen-grid-item(1, 2); + } + /* Span 1 column, starting in the 3rd column from left. */ + .block:nth-child(3n) { + @include zen-grid-item(1, 3); + } + } + } +} + +/** + * Use 5 grid columns for larger screens. + */ +@media all and (min-width: 960px) { + + $zen-column-count: 5; + + /** + * The layout when there is only one sidebar, the left one. + */ + .sidebar-first { + /* Span 4 columns, starting in 2nd column from left. */ + #content { + @include zen-grid-item(4, 2); + } + + /* Span 1 column, starting in 1st column from left. */ + .region-sidebar-first { + @include zen-grid-item(1, 1); + } + } + + /** + * The layout when there is only one sidebar, the right one. + */ + .sidebar-second { + /* Span 4 columns, starting in 1st column from left. */ + #content { + @include zen-grid-item(4, 1); + } + + /* Span 1 column, starting in 5th column from left. */ + .region-sidebar-second { + @include zen-grid-item(1, 5); + } + } + + /** + * The layout when there are two sidebars. + */ + .two-sidebars { + /* Span 3 columns, starting in 2nd column from left. */ + #content { + @include zen-grid-item(3, 2); + } + + /* Span 1 column, starting in 1st column from left. */ + .region-sidebar-first { + @include zen-grid-item(1, 1); + } + + /* Span 1 column, starting in 5th column from left. */ + .region-sidebar-second { + @include zen-grid-item(1, 5); + } + } +} diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/styles-rtl.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/styles-rtl.scss new file mode 100644 index 000000000..2a45ff013 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/styles-rtl.scss @@ -0,0 +1,20 @@ +/** + * @file + * RTL companion for the styles.scss file. + */ + +/* Import Sass mixins, variables, Compass modules, etc. */ +@import "init"; + +/* HTML element (SMACSS base) rules */ +@import "normalize-rtl"; + +/* Layout rules */ +@import "layouts/responsive-rtl"; + +/* Component (SMACSS module) rules */ +@import "components/misc-rtl"; + +/* SMACSS theme rules */ +/* @import "theme-A-rtl"; */ +/* @import "theme-B-rtl"; */ diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/styles.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/styles.scss new file mode 100644 index 000000000..0838acff2 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass/styles.scss @@ -0,0 +1,25 @@ +/** + * @file + * Styles are organized using the SMACSS technique. @see http://smacss.com/book/ + * + * When you turn on CSS aggregation at admin/config/development/performance, all + * of these @include files will be combined into a single file. + */ + +/* Import Sass mixins, variables, Compass modules, etc. */ +@import "init"; + +/* HTML element (SMACSS base) rules */ +@import "normalize"; + +/* Layout rules */ +@import "layouts/responsive"; + +/* Component (SMACSS module) rules */ +@import "components/misc"; +// Optionally, add your own components here. +@import "print"; + +/* SMACSS theme rules */ +/* @import "theme-A"; */ +/* @import "theme-B"; */ |