From 6b5fdc019c573af3aaadc6e33705846693f692a7 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Mon, 5 Feb 2018 15:11:28 +0100 Subject: [PATCH] Reset som Hugo Zen changes from Drupal Zen. --- sass/base/text/_text.scss | 4 -- sass/components/box/_box.scss | 2 +- sass/components/button/_button.scss | 29 ++++++++++-- sass/components/clearfix/_clearfix.scss | 4 -- sass/components/divider/_divider.scss | 4 -- sass/components/header/_header.scss | 46 ++++++------------- sass/components/hidden/_hidden.scss | 19 ++------ .../highlight-mark/_highlight-mark.scss | 13 ------ .../inline-links/_inline-links.scss | 16 ------- .../inline-sibling/_inline-sibling.scss | 26 ----------- .../responsive-video/_responsive-video.scss | 13 ------ .../visually-hidden/_visually-hidden.scss | 17 ------- sass/components/watermark/_watermark.scss | 4 -- sass/components/wireframe/_wireframe.scss | 22 +++++---- sass/navigation/more-link/_more-link.scss | 18 +------- sass/navigation/navbar/_navbar.scss | 18 -------- sass/navigation/pager/_pager.scss | 2 +- 17 files changed, 58 insertions(+), 199 deletions(-) diff --git a/sass/base/text/_text.scss b/sass/base/text/_text.scss index f036217..419ae47 100644 --- a/sass/base/text/_text.scss +++ b/sass/base/text/_text.scss @@ -46,10 +46,6 @@ strong { // Cite // // The `` element represents a reference to a creative work. -// -// Markup: text-cite.twig -// -// Style guide: base.text.cite cite { // Add your styles. diff --git a/sass/components/box/_box.scss b/sass/components/box/_box.scss index ebafbdc..5a9d44c 100644 --- a/sass/components/box/_box.scss +++ b/sass/components/box/_box.scss @@ -2,7 +2,7 @@ // // A simple box style. // -// A Drupal block is often styled as a box. However, this design component is +// A block is often styled as a box. However, this design component is // not applied to any blocks by default; it is used as an example of how to // build and document a CSS component. // diff --git a/sass/components/button/_button.scss b/sass/components/button/_button.scss index 7e769ad..1d26316 100644 --- a/sass/components/button/_button.scss +++ b/sass/components/button/_button.scss @@ -7,10 +7,6 @@ // // :hover - Hover styling. // :active - Depressed button styling. -// -// Markup: button.twig -// -// Style guide: forms.button // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // controls in Android 4. @@ -33,10 +29,14 @@ button, [type='button'], [type='reset'], [type='submit'] { + // sass-lint:disable no-color-hex, no-color-literals @extend %button--disabled; + @include typeface(headings); + @include margin-right(.75); + @include margin-bottom(.75); // Some styles don't apply to links since they are inline elements by default. display: inline-block; - padding: 2px 6px; + padding: 2px 10px; // Address Firefox 4+ setting `line-height` on `input` using `!important` in // the UA stylesheet. And prevent its "line-height: normal" rule below from // breaking the "appearance: button" styling on the input elements. @@ -45,6 +45,14 @@ button, // Improve usability and consistency of cursor style between image-type `input` and others. cursor: pointer; color: color(button); + text-align: center; + background-image: linear-gradient(#f6f6f6, #e2e2e2); + border: 1px solid #e4e4e4; + border-left-color: #d2d2d2; + border-right-color: #d2d2d2; + border-bottom-color: #b4b4b4; + border-radius: 2px; + // sass-lint:disable no-vendor-prefixes // Remove the inner border and padding in Firefox. @@ -66,6 +74,13 @@ button, text-decoration: none; color: color(button); } + + &:active { + border-color: #555; + text-shadow: color(button) 0 -1px 0; + background: color(grey-dark); + color: color(text-bg); + } } // Add button variations here. @@ -82,6 +97,10 @@ button, // Re-set default cursor for disabled elements. cursor: default; color: color(button-disabled); + background-color: color(grey-extra-light); + border-color: color(grey-extra-light); + background-image: none; + text-shadow: none; &:hover, &:focus, diff --git a/sass/components/clearfix/_clearfix.scss b/sass/components/clearfix/_clearfix.scss index dfd237d..3f04a11 100644 --- a/sass/components/clearfix/_clearfix.scss +++ b/sass/components/clearfix/_clearfix.scss @@ -2,10 +2,6 @@ // // Allows the bottom of an element to extend to the bottom of all floated child // elements. See http://nicolasgallagher.com/micro-clearfix-hack/ -// -// Markup: clearfix.twig -// -// Style guide: components.clearfix .clearfix, %clearfix { diff --git a/sass/components/divider/_divider.scss b/sass/components/divider/_divider.scss index a0ca6fa..1267eb8 100644 --- a/sass/components/divider/_divider.scss +++ b/sass/components/divider/_divider.scss @@ -1,10 +1,6 @@ // Divider // // Can be used as an `
`, an empty `
` or as a container. -// -// Markup: divider.twig -// -// Style guide: components.divider .divider, %divider { diff --git a/sass/components/header/_header.scss b/sass/components/header/_header.scss index c99a964..6ba7087 100644 --- a/sass/components/header/_header.scss +++ b/sass/components/header/_header.scss @@ -1,26 +1,20 @@ // Dependencies. @import 'base/grouping/grouping'; -@import 'components/clearfix/clearfix'; // Branding header -// -// Markup: header.twig -// -// Style guide: components.header .header, %header { - @extend %clearfix; + @include respond-to(s) { + display: flex; + } // Wrapping link for logo. &__logo { - float: left; - margin: 0 10px 0 0; - padding: 0; + margin: 0 $zen-gutters 0 0; @include rtl() { - float: right; - margin: 0 0 0 10px; + margin: 0 0 0 $zen-gutters; } } @@ -29,15 +23,11 @@ vertical-align: bottom; } - // Wrapper for website name and slogan. - &__name-and-slogan { - float: left; - } - // The name of the website. &__site-name { @extend %h1; margin: 0; + display: inline-block; } // The link around the name of the website. @@ -54,23 +44,15 @@ } } - // The slogan (or tagline) of a website. - &__site-slogan { - margin: 0; - } - - // The secondary menu (login, etc.) - &__secondary-menu { - float: right; - - @include rtl() { - float: left; - } - } - // Wrapper for any blocks placed in the header region. &__region { - // Clear the logo. - clear: both; + @include respond-to(s) { + margin-left: auto; + + @include rtl() { + margin-right: auto; + margin-left: 0; + } + } } } diff --git a/sass/components/hidden/_hidden.scss b/sass/components/hidden/_hidden.scss index 7bc1bdd..092cdca 100644 --- a/sass/components/hidden/_hidden.scss +++ b/sass/components/hidden/_hidden.scss @@ -8,10 +8,6 @@ // // For anything you want to hide on page load when JavaScript is enabled, use // the `.js-hidden` class. -// -// Markup: hidden.twig -// -// Style guide: components.hidden .hidden, %hidden { @@ -25,14 +21,9 @@ } } -// -// Drupal selectors. -// - -.element-hidden { - @extend %js-hidden; -} - -.js-hide { - @extend %js-hidden; +.nojs-hidden, +%nojs-hidden { + html.nojs & { + @extend %hidden; + } } diff --git a/sass/components/highlight-mark/_highlight-mark.scss b/sass/components/highlight-mark/_highlight-mark.scss index c0c6b59..a49c71e 100644 --- a/sass/components/highlight-mark/_highlight-mark.scss +++ b/sass/components/highlight-mark/_highlight-mark.scss @@ -3,10 +3,6 @@ // The "new" or "updated" marker. This is a very thin component. A front-end // developer may choose to delete this component and just style the `` // element directly. -// -// Markup: highlight-mark.twig -// -// Style guide: components.highlight-mark .highlight-mark, %highlight-mark { @@ -14,12 +10,3 @@ // Remove background highlighting from in normalize. background-color: transparent; } - -// -// Drupal selectors. (In case a module doesn't use theme_mark().) -// - -.new, -.update { - @extend %highlight-mark; -} diff --git a/sass/components/inline-links/_inline-links.scss b/sass/components/inline-links/_inline-links.scss index fd7591d..5b0a74a 100644 --- a/sass/components/inline-links/_inline-links.scss +++ b/sass/components/inline-links/_inline-links.scss @@ -1,10 +1,6 @@ // Inline links // // A list of links that are inline with each other. -// -// Markup: inline-links.twig -// -// Style guide: components.inline-links .inline-links, %inline-links { @@ -22,15 +18,3 @@ } } } - -// -// Drupal selectors. -// - -.inline.links { - @extend %inline-links; - - li { - @extend %inline-links__item; - } -} diff --git a/sass/components/inline-sibling/_inline-sibling.scss b/sass/components/inline-sibling/_inline-sibling.scss index 32ba38a..af89749 100644 --- a/sass/components/inline-sibling/_inline-sibling.scss +++ b/sass/components/inline-sibling/_inline-sibling.scss @@ -1,10 +1,6 @@ // Inline sibling // // An element that needs to appear inline with the content that follows. -// -// Markup: inline-sibling.twig -// -// Style guide: components.inline-sibling .inline-sibling, %inline-sibling { @@ -31,25 +27,3 @@ display: inline; } } - -// -// Drupal selectors. -// - -// Drupal core. -.field-label-inline { - .field-label { - @extend %inline-sibling; - } - - // Revert core's ridiculous styling without polluting the component. - .field-label, - .field-items { - float: none; - } -} - -// The inline field label used by the Fences 7.x-1.x module. -span.field-label { - @extend %inline-sibling; -} diff --git a/sass/components/responsive-video/_responsive-video.scss b/sass/components/responsive-video/_responsive-video.scss index 7230157..7f51844 100644 --- a/sass/components/responsive-video/_responsive-video.scss +++ b/sass/components/responsive-video/_responsive-video.scss @@ -6,10 +6,6 @@ // // .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the // default 16:9 one. -// -// Markup: responsive-video.twig -// -// Style guide: components.responsive-video .responsive-video, %responsive-video { @@ -34,12 +30,3 @@ padding-bottom: (3/4)*100%; // 4:3 aspect ratio } } - -// -// Drupal selectors. -// - -.media-youtube-video, -.media-vimeo-preview-wrapper { - @extend %responsive-video; -} diff --git a/sass/components/visually-hidden/_visually-hidden.scss b/sass/components/visually-hidden/_visually-hidden.scss index 94dd69b..56fdcfe 100644 --- a/sass/components/visually-hidden/_visually-hidden.scss +++ b/sass/components/visually-hidden/_visually-hidden.scss @@ -6,10 +6,6 @@ // .visually-hidden--focusable - Makes an element visually hidden by default, // but visible when receiving focus. // .visually-hidden--focusable:focus - A focused, and visible, element. -// -// Markup: visually-hidden.twig -// -// Style guide: components.visually-hidden .visually-hidden, %visually-hidden { @@ -26,16 +22,3 @@ } } } - -// -// Drupal selectors. -// - -.element-invisible { - @extend %visually-hidden; -} - -.element-focusable { - @extend %visually-hidden; - @extend %visually-hidden--focusable; -} diff --git a/sass/components/watermark/_watermark.scss b/sass/components/watermark/_watermark.scss index cf62dd4..65e33f0 100644 --- a/sass/components/watermark/_watermark.scss +++ b/sass/components/watermark/_watermark.scss @@ -1,10 +1,6 @@ // Watermark // // Make the element appear beneath sibling elements, like a watermark. -// -// Markup: watermark.twig -// -// Style guide: components.watermark .watermark, %watermark { diff --git a/sass/components/wireframe/_wireframe.scss b/sass/components/wireframe/_wireframe.scss index 9edab80..6a8673d 100644 --- a/sass/components/wireframe/_wireframe.scss +++ b/sass/components/wireframe/_wireframe.scss @@ -7,10 +7,6 @@ $with-wireframes: false !default; // // This design is not applied to the site unless you set the following Sass // variable: `$with-wireframes: true;` -// -// Markup: wireframe.twig -// -// Style guide: components.wireframe @if $with-wireframes { @@ -20,14 +16,20 @@ $with-wireframes: false !default; } // - // Drupal selectors. + // Zen selectors. // - .header, - .layout-3col > div, - .footer, - .region-bottom { - @extend %wireframe; + .layout { + &__header, + &__footer, + &__main, + &__navigation, + &__first-sidebar, + &__second-sidebar, + &__page-top, + &__page-bottom { + @extend %wireframe; + } } } diff --git a/sass/navigation/more-link/_more-link.scss b/sass/navigation/more-link/_more-link.scss index 68ae745..496d32e 100644 --- a/sass/navigation/more-link/_more-link.scss +++ b/sass/navigation/more-link/_more-link.scss @@ -1,10 +1,6 @@ // "More" link // -// Styles the "Read more…" and "Help" links common in Drupal. -// -// Markup: more-link.twig -// -// Style guide: navigation.more-link +// Styles the "Read more…" and "Help" links common on the web. .more-link, %more-link { @@ -26,15 +22,3 @@ } } } - -// -// Drupal selectors. -// - -.more-help-link { - @extend %more-link; - - a { - @extend %more-link__help-icon; - } -} diff --git a/sass/navigation/navbar/_navbar.scss b/sass/navigation/navbar/_navbar.scss index d6b5a53..758b1c7 100644 --- a/sass/navigation/navbar/_navbar.scss +++ b/sass/navigation/navbar/_navbar.scss @@ -29,21 +29,3 @@ } } } - -// -// Drupal selectors. -// - -.main-navigation { - // Hide the block titles put into the main-navigation area of the page.tpl.php. - .block-menu .block__title, - .block-menu-block .block__title { - @extend %visually-hidden; - } - - // Main menu and secondary menu links and menu block links. - .links, - .menu { - @extend %navbar; - } -} diff --git a/sass/navigation/pager/_pager.scss b/sass/navigation/pager/_pager.scss index 5784eb7..8691ac6 100644 --- a/sass/navigation/pager/_pager.scss +++ b/sass/navigation/pager/_pager.scss @@ -27,7 +27,7 @@ } // -// Drupal selectors. +// Zen selectors. // // .pager-item - A list item containing a page number in the list of pages.