diff --git a/STARTERKIT/sass/_print.scss b/STARTERKIT/sass/_print.scss index 932e58e..be64c57 100644 --- a/STARTERKIT/sass/_print.scss +++ b/STARTERKIT/sass/_print.scss @@ -17,7 +17,7 @@ text-decoration: underline !important; /* Don't underline header. */ - &.header--site-link { + &.header__site-link { text-decoration: none !important; } } diff --git a/STARTERKIT/sass/components/_misc-rtl.scss b/STARTERKIT/sass/components/_misc-rtl.scss index 98584cd..0fca8e5 100644 --- a/STARTERKIT/sass/components/_misc-rtl.scss +++ b/STARTERKIT/sass/components/_misc-rtl.scss @@ -8,12 +8,12 @@ */ /* Wrapping link for logo. */ -.header--logo { +.header__logo { float: right; } /* The secondary menu (login, etc.) */ -.header--secondary-menu { +.header__secondary-menu { float: left; } @@ -42,31 +42,31 @@ padding: 10px 50px 10px 10px; background-position: 99% 8px; } -.messages-status { +.messages--status { @extend .messages; } -.messages-warning { +.messages--warning { @extend .messages; } -.messages-error { +.messages--error { @extend .messages; } /** * Tabs. */ -%tabs--tab { +%tabs__tab { float: right; } -.tabs-primary--tab { - @extend %tabs--tab; +.tabs-primary__tab { + @extend %tabs__tab; } -.tabs-primary--tab-active { - @extend .tabs-primary--tab; +.tabs-primary__tab.is-active { + @extend .tabs-primary__tab; } -.tabs-secondary--tab, -.tabs-secondary--tab-active { - @extend %tabs--tab; +.tabs-secondary__tab, +.tabs-secondary__tab.is-active { + @extend %tabs__tab; } /** @@ -102,7 +102,7 @@ span.field-label { /** * Menus. */ -.menu--collapsed { +.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"); diff --git a/STARTERKIT/sass/components/_misc.scss b/STARTERKIT/sass/components/_misc.scss index 3ce6f48..62d87cf 100644 --- a/STARTERKIT/sass/components/_misc.scss +++ b/STARTERKIT/sass/components/_misc.scss @@ -78,30 +78,30 @@ */ /* Wrapping link for logo. */ -.header--logo { +.header__logo { float: left; /* LTR */ margin: 0; padding: 0; } /* Logo image. */ -.header--logo-image { +.header__logo-image { vertical-align: bottom; } /* Wrapper for website name and slogan. */ -.header--name-and-slogan { +.header__name-and-slogan { float: left; } /* The name of the website. */ -.header--site-name { +.header__site-name { margin: 0; @include adjust-font-size-to( $h1-font-size ); } /* The link around the name of the website. */ -.header--site-link { +.header__site-link { &:link, &:visited { color: #000; @@ -115,17 +115,17 @@ } /* The slogan (or tagline) of a website. */ -.header--site-slogan { +.header__site-slogan { margin: 0; } /* The secondary menu (login, etc.) */ -.header--secondary-menu { +.header__secondary-menu { float: right; /* LTR */ } /* Wrapper for any blocks placed in the header region. */ -.header--region { +.header__region { /* Clear the logo. */ clear: both; } @@ -141,8 +141,8 @@ margin-bottom: 0; } - .block-menu .block--title, - .block-menu-block .block--title { + .block-menu .block__title, + .block-menu-block .block__title { @extend %element-invisible; } @@ -182,12 +182,12 @@ /** * 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. */ +.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; } @@ -205,11 +205,11 @@ background-repeat: no-repeat; border: 1px solid #be7; } -.messages-status { +.messages--status { @extend .messages; @extend %ok; } -.messages-warning { +.messages--warning { @extend .messages; @extend %warning; background-image: inline-image("message-24-warning.png"); @@ -218,7 +218,7 @@ } border-color: #ed5; } -.messages-error { +.messages--error { @extend .messages; @extend %error; background-image: inline-image("message-24-error.png"); @@ -228,15 +228,15 @@ border-color: #ed541d; } -.messages--list { +.messages__list { margin: 0; } -.messages--item { +.messages__item { list-style-image: none; } /* Core/module installation error messages. */ -.messages-error p.error { +.messages--error p.error { color: #333; } @@ -272,11 +272,11 @@ padding: 0 2px; white-space: nowrap; } -%tabs--tab { +%tabs__tab { float: left; /* LTR */ margin: 0 3px; } -%tabs--tab-link { +%tabs__tab-link { border: 1px solid #e9e9e9; border-right: 0; border-bottom: 0; @@ -289,8 +289,8 @@ .tabs-primary { @extend %tabs; } -.tabs-primary--tab { - @extend %tabs--tab; +.tabs-primary__tab { + @extend %tabs__tab; @include border-top-radius(4px); @include single-text-shadow(#fff, 1px, 1px, 0); border: 1px solid $tabs-border; @@ -298,14 +298,14 @@ /* IE 9 and earlier don't understand gradients. */ border-bottom: 0 \0/ie; } -.tabs-primary--tab-active { - @extend .tabs-primary--tab; +.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; +%tabs-primary__tab-link { + @extend %tabs__tab-link; @include border-top-radius(4px); @include transition(background-color 0.3s); color: #333; @@ -314,31 +314,31 @@ padding: 0 1em; text-align: center; } -%tabs-primary--tab-link-hover { +%tabs-primary__tab-link-is-hover { background-color: #e9e9e9; border-color: #f2f2f2; } -%tabs-primary--tab-link-active { +%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; +a.tabs-primary__tab-link { + @extend %tabs-primary__tab-link; &:hover, &:focus { - @extend %tabs-primary--tab-link-hover; + @extend %tabs-primary__tab-link-is-hover; } &:active { - @extend %tabs-primary--tab-link-active; + @extend %tabs-primary__tab-link-is-active; } } -a.tabs-primary--tab-link-active { - @extend %tabs-primary--tab-link; - @extend %tabs-primary--tab-link-active; +a.tabs-primary__tab-link.is-active { + @extend %tabs-primary__tab-link; + @extend %tabs-primary__tab-link-is-active; } /* Secondary tabs. */ @@ -348,15 +348,15 @@ a.tabs-primary--tab-link-active { /* Collapse bottom margin of ul.primary. */ margin-top: -(rhythm(1)); } -.tabs-secondary--tab, -.tabs-secondary--tab-active { - @extend %tabs--tab; +.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; +%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); @@ -364,32 +364,32 @@ a.tabs-primary--tab-link-active { color: #666; padding: 0 .5em; } -%tabs-secondary--tab-link-focus { +%tabs-secondary__tab-link-is-focus { background-color: #dedede; border-color: #999; color: #333; } -%tabs-secondary--tab-link-active { +%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; +a.tabs-secondary__tab-link { + @extend %tabs-secondary__tab-link; &:hover, &:focus { - @extend %tabs-secondary--tab-link-focus; + @extend %tabs-secondary__tab-link-is-focus; } &:active { - @extend %tabs-secondary--tab-link-active; + @extend %tabs-secondary__tab-link-is-active; } } -a.tabs-secondary--tab-link-active { - @extend %tabs-secondary--tab-link; - @extend %tabs-secondary--tab-link-active; +a.tabs-secondary__tab-link.is-active { + @extend %tabs-secondary__tab-link; + @extend %tabs-secondary__tab-link-is-active; } /** @@ -442,8 +442,7 @@ span.field-label { padding: 0; text-align: center; } - -%pager-item { +%pager__item { display: inline; padding: 0 0.5em; list-style-type: none; @@ -456,12 +455,12 @@ span.field-label { .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; + @extend %pager__item; } /* The current page's list item. */ .pager-current { - @extend %pager-item; + @extend %pager__item; font-weight: bold; } @@ -477,27 +476,27 @@ span.field-label { /** * Menus. */ -.menu--expanded { +.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--collapsed { +.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; } -.menu--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; -} /* The active item in a Drupal menu. */ .menu a.active { diff --git a/template.php b/template.php index 077d0b5..f7d4abd 100644 --- a/template.php +++ b/template.php @@ -322,7 +322,7 @@ function zen_preprocess_node(&$variables, $hook) { $variables['classes_array'][] = 'node-by-viewer'; } - $variables['title_attributes_array']['class'][] = 'node--title'; + $variables['title_attributes_array']['class'][] = 'node__title'; $variables['title_attributes_array']['class'][] = 'node-title'; } @@ -353,7 +353,7 @@ function zen_preprocess_comment(&$variables, $hook) { } $variables['classes_array'][] = $variables['zebra']; - $variables['title_attributes_array']['class'][] = 'comment--title'; + $variables['title_attributes_array']['class'][] = 'comment__title'; $variables['title_attributes_array']['class'][] = 'comment-title'; } @@ -380,7 +380,7 @@ function zen_preprocess_region(&$variables, $hook) { } // Add a SMACSS-style class for header region. elseif ($variables['region'] == 'header') { - array_unshift($variables['classes_array'], 'header--region'); + array_unshift($variables['classes_array'], 'header__region'); } } @@ -408,7 +408,7 @@ function zen_preprocess_block(&$variables, $hook) { } $variables['classes_array'][] = $variables['block_zebra']; - $variables['title_attributes_array']['class'][] = 'block--title'; + $variables['title_attributes_array']['class'][] = 'block__title'; $variables['title_attributes_array']['class'][] = 'block-title'; // Add Aria Roles via attributes. @@ -584,9 +584,15 @@ function zen_menu_local_task($variables) { $type = in_array('menu_local_task__secondary', $variables['element']['#theme']) ? 'tabs-secondary' : 'tabs-primary'; } + // Add SMACSS-style class names. + if ($type) { + $link['localized_options']['attributes']['class'][] = $type . '__tab-link'; + $class = $type . '__tab'; + } + if (!empty($variables['element']['#active'])) { // Add text to indicate active tab for non-visual users. - $active = '' . t('(active tab)') . ''; + $active = ' ' . t('(active tab)') . ''; // If the link does not contain HTML already, check_plain() it now. // After we set 'html'=TRUE the link will not be sanitized by l(). @@ -599,16 +605,9 @@ function zen_menu_local_task($variables) { if (!$type) { $class = 'active'; } - // Add SMACSS-style class names. else { - $link['localized_options']['attributes']['class'][] = $type . '--tab-link-active'; - $class = $type . '--tab-active active'; - } - } - else { - if ($type) { - $link['localized_options']['attributes']['class'][] = $type . '--tab-link'; - $class = $type . '--tab'; + $link['localized_options']['attributes']['class'][] = 'is-active'; + $class .= ' is-active'; } } @@ -627,25 +626,29 @@ function zen_preprocess_menu_link(&$variables, $hook) { case 'leaf': case 'active': // Menu block module classes. - case 'has-children': case 'active-trail': - array_unshift($variables['element']['#attributes']['class'], 'menu--' . $class); + array_unshift($variables['element']['#attributes']['class'], 'is-' . $class); + break; + case 'has-children': + array_unshift($variables['element']['#attributes']['class'], 'is-parent'); break; } } + array_unshift($variables['element']['#attributes']['class'], 'menu__item'); if (empty($variables['element']['#localized_options']['attributes']['class'])) { - $variables['element']['#localized_options']['attributes']['class'][] = 'menu--link'; + $variables['element']['#localized_options']['attributes']['class'] = array(); } else { foreach ($variables['element']['#localized_options']['attributes']['class'] as $key => $class) { switch ($class) { case 'active': case 'active-trail': - array_unshift($variables['element']['#localized_options']['attributes']['class'], 'menu--link-' . $class); + array_unshift($variables['element']['#localized_options']['attributes']['class'], 'is-' . $class); break; } } } + array_unshift($variables['element']['#localized_options']['attributes']['class'], 'menu__link'); } /** @@ -661,14 +664,14 @@ function zen_status_messages($variables) { 'warning' => t('Warning message'), ); foreach (drupal_get_messages($display) as $type => $messages) { - $output .= "
\n"; + $output .= "
\n"; if (!empty($status_heading[$type])) { $output .= '

' . $status_heading[$type] . "

\n"; } if (count($messages) > 1) { - $output .= "