Newer
Older
/**
* @file
*
* Adds modular sets of styles.
*
* Additional useful selectors can be found in Zen's online documentation.
* http://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 & {
border: 1px solid #ccc; /* IE6/7 do not support the outline property. */
}
}
}
}
/* =============================================================================
John Albin Wilkins
committed
Accessibility features
========================================================================== */
John Albin Wilkins
committed
/* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.element-invisible,
%element-invisible {
John Albin Wilkins
committed
@include element-invisible;
John Albin Wilkins
committed
}
%element-invisible-off { /* Turns off the element-invisible effect. */
John Albin Wilkins
committed
@include element-invisible-off;
John Albin Wilkins
committed
}
.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
========================================================================== */
.header--logo { /* Wrapping link for logo */
float: left; /* LTR */
margin: 0;
padding: 0;
.header--logo-image { /* Logo image */
vertical-align: bottom;
}
.header--name-and-slogan { /* Wrapper for website name and slogan */
float: left;
}
.header--site-name { /* The name of the website */
margin: 0;
font-size: 2em;
line-height: 1.5em;
.header--site-link { /* The link around the name of the website */
&:link,
&:visited {
color: #000;
text-decoration: none;
}
&:hover,
&:focus {
text-decoration: underline;
}
}
.header--site-slogan { /* The slogan (or tagline) of a website */
margin: 0;
font-size: 1em;
}
.header--secondary-menu {
float: right; /* LTR */
}
.header--region { /* Wrapper for any blocks placed in the header region */
clear: both; /* Clear the logo */
}
/* =============================================================================
Navigation bar
========================================================================== */
#navigation {
/* overflow: hidden; */ /* Sometimes you want to prevent overlapping with main div. */
.block {
margin-bottom: 0;
}
.block-menu .block--title,
.block-menu-block .block--title {
John Albin Wilkins
committed
@extend %element-invisible;
.links, /* Main menu and secondary menu links */
.menu { /* Menu block links */
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 { /* The path to the current page in the form of a list of links */
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: url(../images/message-24-ok.png);
}
background-position: 8px 8px; /* LTR */
background-repeat: no-repeat;
border: 1px solid #be7;
}
.messages-status {
@extend .messages;
John Albin Wilkins
committed
@extend %ok;
}
.messages-warning {
@extend .messages;
John Albin Wilkins
committed
@extend %warning;
background-image: inline-image("message-24-warning.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*background-image: url(../images/message-24-warning.png);
}
border-color: #ed5;
}
.messages-error {
@extend .messages;
John Albin Wilkins
committed
@extend %error;
background-image: inline-image("message-24-error.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*background-image: url(../images/message-24-error.png);
}
border-color: #ed541d;
p.error { /* Core/module installation error messages. */
color: #333;
}
}
.messages--list {
margin: 0;
}
.messages--item {
list-style-image: none;
}
/*
* System status report
*/
.ok,
John Albin Wilkins
committed
%ok {
background-color: #f8fff0;
color: #234600;
}
.warning,
John Albin Wilkins
committed
%warning {
background-color: #fffce5;
color: #840;
}
.error,
John Albin Wilkins
committed
%error {
background-color: #fef5f1;
color: #8c2e0b;
}
/* =============================================================================
Tabs
========================================================================== */
/*
* Basic positioning styles shared by primary and secondary tabs.
*/
John Albin Wilkins
committed
%tabs {
@include background-image(linear-gradient(bottom, $tabs-border 1px, transparent 1px));
border-bottom: 1px solid $tabs-border \0/ie; /* IE 9 and earlier don't understand gradients. */
margin: rhythm(1) 0;
padding: 0 2px;
white-space: nowrap;
John Albin Wilkins
committed
%tabs--tab {
float: left; /* LTR */
margin: 0 3px;
}
John Albin Wilkins
committed
%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
*/
John Albin Wilkins
committed
@extend %tabs;
.tabs-primary--tab {
John Albin Wilkins
committed
@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;
border-bottom: 0 \0/ie; /* IE 9 and earlier don't understand gradients. */
}
.tabs-primary--tab-active {
@extend .tabs-primary--tab;
border-bottom-color: $tabs-container-bg;
}
// We use 3 placeholder styles to prevent @extend from going selector crazy.
John Albin Wilkins
committed
%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;
John Albin Wilkins
committed
%tabs-primary--tab-link-hover {
background-color: #e9e9e9;
border-color: #f2f2f2;
John Albin Wilkins
committed
%tabs-primary--tab-link-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 {
John Albin Wilkins
committed
@extend %tabs-primary--tab-link;
&:hover,
&:focus {
John Albin Wilkins
committed
@extend %tabs-primary--tab-link-hover;
John Albin Wilkins
committed
@extend %tabs-primary--tab-link-active;
a.tabs-primary--tab-link-active {
John Albin Wilkins
committed
@extend %tabs-primary--tab-link;
@extend %tabs-primary--tab-link-active;
/*
* Secondary tabs
*/
John Albin Wilkins
committed
@extend %tabs;
margin-top: -(rhythm(1)); /* Collapse bottom margin of ul.primary. */
}
.tabs-secondary--tab,
.tabs-secondary--tab-active {
John Albin Wilkins
committed
@extend %tabs--tab;
margin: rhythm(1)/2 3px;
}
// We use 3 placeholder styles to prevent @extend from going selector crazy.
John Albin Wilkins
committed
%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;
John Albin Wilkins
committed
%tabs-secondary--tab-link-focus {
background-color: #dedede;
border-color: #999;
color: #333;
John Albin Wilkins
committed
%tabs-secondary--tab-link-active {
@include single-text-shadow(#333, 1px, 1px, 0);
background-color: #666;
border-color: #000;
color: #fff;
}
a.tabs-secondary--tab-link {
John Albin Wilkins
committed
@extend %tabs-secondary--tab-link;
&:hover,
&:focus {
John Albin Wilkins
committed
@extend %tabs-secondary--tab-link-focus;
John Albin Wilkins
committed
@extend %tabs-secondary--tab-link-active;
a.tabs-secondary--tab-link-active {
John Albin Wilkins
committed
@extend %tabs-secondary--tab-link;
@extend %tabs-secondary--tab-link-active;
/* =============================================================================
Inline styles
========================================================================== */
.inline { /* List of links generated by theme_links() */
display: inline;
padding: 0;
li {
display: inline;
list-style-type: none;
padding: 0 1em 0 0; /* LTR */
}
}
span.field-label { /* The inline field label used by the Fences module */
padding: 0 1em 0 0; /* LTR */
}
John Albin Wilkins
committed
/* =============================================================================
"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: url(../images/help.png);
}
background-position: 0 50%; /* LTR */
background-repeat: no-repeat;
padding: 1px 0 1px 20px; /* LTR */
}
/* =============================================================================
Pager
========================================================================== */
.pager { /* A list of page numbers when more than 1 page of content is available. */
John Albin Wilkins
committed
clear: both;
padding: 0;
John Albin Wilkins
committed
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;
}
.pager-current { /* The current page's list item. */
@extend %pager-item;
John Albin Wilkins
committed
font-weight: bold;
}
/* =============================================================================
Blocks
========================================================================== */
.block { /* Block wrapper */
margin-bottom: 1.5em;
}
/* =============================================================================
Menus
========================================================================== */
.menu--expanded {
list-style-image: inline-image("menu-expanded.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: url(../images/menu-expanded.png);
}
list-style-type: circle;
}
.menu--collapsed {
list-style-image: inline-image("menu-collapsed.png"); /* LTR */
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: url(../images/menu-collapsed.png); /* LTR */
}
list-style-type: disc;
}
.menu--leaf {
list-style-image: inline-image("menu-leaf.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: url(../images/menu-leaf.png);
}
list-style-type: square;
}
.menu a.active { /* The active item in a Drupal menu */
color: #000;
}
John Albin Wilkins
committed
/* =============================================================================
Nodes
========================================================================== */
.new,
.update { /* The "new" or "updated" marker. */
John Albin Wilkins
committed
color: #c00;
background-color: transparent; /* Remove background highlighting from <mark> in normalize. */
}
/* =============================================================================
========================================================================== */
.unpublished { /* The word "Unpublished" displayed underneath the content. */
background-color: transparent; /* Remove background highlighting from <mark> in normalize. */
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;
word-wrap: break-word; /* A very nice CSS3 property */
}
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
.lt-ie8 .node-unpublished>*,
.lt-ie8 .comment-unpublished>* {
position: relative; /* Otherwise these elements will appear below the "Unpublished" text. */
}
}
/* =============================================================================
Comments
========================================================================== */
.comments { /* Wrapper for the list of comments and its title */
margin: 1.5em 0;
}
.comment-preview { /* Preview of the comment before submitting new or updated comment */
background-color: #ffffea; /* Drupal core will use a #ffffea background. See #1110842 */
}
.comment { /* Wrapper for a single comment */
.permalink { /* Comment's permalink wrapper */
text-transform: uppercase;
font-size: 75%;
}
}
.indented { /* Nested comments are indented */
margin-left: $indent-amount; /* Drupal core uses a 25px left margin */
}
/* =============================================================================
Forms
========================================================================== */
.form-item { /* Wrapper for a form element (or group of form elements) and its label */
margin: 1.5em 0;
.form-checkboxes & ,
.form-radios & { /* Pack groups of checkboxes and radio buttons closer together */
margin: 0; /* Drupal core uses "0.4em 0" */
}
John Albin Wilkins
committed
tr.odd &,
tr.even & { /* Form items in a table. */
margin: 0;
}
input.error,
textarea.error,
select.error { /* Highlight the form elements that caused a form submission error */
border: 1px solid #c00;
}
.description { /* The descriptive help text (separate from the label) */
font-size: 0.85em;
}
}
John Albin Wilkins
committed
.form-type-radio,
.form-type-checkbox {
.description {
margin-left: 2.4em;
}
}
.form-required { /* The part of the label that indicates a required field */
color: #c00;
}
John Albin Wilkins
committed
label.option {
display: inline;
font-weight: normal;
}
a.button { /* Buttons used by contrib modules like Media */
@include appearance(button);
}
.password-parent,
.confirm-parent { /* Password confirmation */
margin: 0;
}
#user-login-form { /* Drupal's default login form block */
text-align: left; /* LTR */
}
/*
* OpenID
*
* The default styling for the OpenID login link seems to assume Garland's
* styling of list items.
*/
.openid-links { /* OpenID creates a new ul above the login form's links. */
margin-bottom: 0; /* Position OpenID's ul next to the rest of the links. */
}
.openid-link, /* The "Log in using OpenID" link. */
.user-link { /* The "Cancel OpenID login" link. */
margin-top: 1.5em;
}
html.js #user-login-form li.openid-link,
#user-login-form li.openid-link {
margin-left: -20px; /* LTR */ /* Un-do some of the padding on the ul list. */
}
#user-login ul {
margin: 1.5em 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;
}
John Albin Wilkins
committed
table ul {
margin: 0;
}
}
John Albin Wilkins
committed
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 {
border-bottom: 1px solid #ccc; /* IE doesn't display borders on table rows */
}
}
}
John Albin Wilkins
committed
td.active { /* Markup generated by theme_tablesort_indicator(). */
background-color: #ddd;
}
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;
}
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
/**
* Autocomplete.
*
* @see autocomplete.js
*/
#autocomplete .selected { /* Suggestion list */
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: url(../images/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: url(../images/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: inline-image("progress.gif");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*background-image: url(../images/progress.gif);
}
}
}