Reset som Hugo Zen changes from Drupal Zen.
This commit is contained in:
Fredrik Jonsson
parent
0d815bad38
commit
6b5fdc019c
17 changed files with 58 additions and 199 deletions
|
|
@ -46,10 +46,6 @@ strong {
|
|||
// Cite
|
||||
//
|
||||
// The `<cite>` element represents a reference to a creative work.
|
||||
//
|
||||
// Markup: text-cite.twig
|
||||
//
|
||||
// Style guide: base.text.cite
|
||||
|
||||
cite {
|
||||
// Add your styles.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
//
|
||||
|
|
|
|||
|
|
@ -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 <a> 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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
// Divider
|
||||
//
|
||||
// Can be used as an `<hr>`, an empty `<div>` or as a container.
|
||||
//
|
||||
// Markup: divider.twig
|
||||
//
|
||||
// Style guide: components.divider
|
||||
|
||||
.divider,
|
||||
%divider {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 `<mark>`
|
||||
// element directly.
|
||||
//
|
||||
// Markup: highlight-mark.twig
|
||||
//
|
||||
// Style guide: components.highlight-mark
|
||||
|
||||
.highlight-mark,
|
||||
%highlight-mark {
|
||||
|
|
@ -14,12 +10,3 @@
|
|||
// Remove background highlighting from <mark> in normalize.
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
//
|
||||
// Drupal selectors. (In case a module doesn't use theme_mark().)
|
||||
//
|
||||
|
||||
.new,
|
||||
.update {
|
||||
@extend %highlight-mark;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
// Watermark
|
||||
//
|
||||
// Make the element appear beneath sibling elements, like a watermark.
|
||||
//
|
||||
// Markup: watermark.twig
|
||||
//
|
||||
// Style guide: components.watermark
|
||||
|
||||
.watermark,
|
||||
%watermark {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
//
|
||||
// Drupal selectors.
|
||||
// Zen selectors.
|
||||
//
|
||||
|
||||
// .pager-item - A list item containing a page number in the list of pages.
|
||||
|
|
|
|||
Loading…
Reference in a new issue