Convert to css style comments, part 1.
This commit is contained in:
Fredrik Jonsson
parent
114e529c48
commit
2eee4d3c24
9 changed files with 127 additions and 151 deletions
|
|
@ -1,6 +1,4 @@
|
|||
// Anchor
|
||||
//
|
||||
// For heading anchor links. See render-heading.html.example.
|
||||
|
||||
.anchor,
|
||||
%anchor {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,4 @@
|
|||
// Box
|
||||
//
|
||||
// A simple box style.
|
||||
//
|
||||
// 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.
|
||||
//
|
||||
// "box" is the name of our component, so we define a `.box` class that we can
|
||||
// apply to any HTML element that needs the box styling.
|
||||
|
||||
.box {
|
||||
// Add vertical rhythm margins.
|
||||
|
|
@ -15,18 +6,11 @@
|
|||
padding: var(--spacing-xs);
|
||||
border: 5px solid var(--color-border);
|
||||
|
||||
// Sass compiles this to the selector: .box__title, %box__title {}
|
||||
// The "__" (double underscore) is part of a BEM naming convention that
|
||||
// indicates the "title" is an _element_ of (a piece of) the "box" component.
|
||||
&__title,
|
||||
.title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Sass compiles this to the selector: .box--highlight, %box--highlight {}
|
||||
// The "--" (double dash) is part of a BEM naming convention that indicates
|
||||
// the "highlight" is a _modifier_, creating a new variation of the standard
|
||||
// "box" component.
|
||||
&--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
// The disabled variation should always go last, so that it overrides any
|
||||
// other variations.
|
||||
/* The disabled variation should always go last, so that it overrides any
|
||||
other variations. */
|
||||
%button--disabled[disabled] {
|
||||
@extend %disabled;
|
||||
background-color: var(--color-grey-200);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Cards
|
||||
//
|
||||
// A simple cards style.
|
||||
/* Cards
|
||||
|
||||
A simple cards style. */
|
||||
|
||||
.cards,
|
||||
%cards {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Clearfix
|
||||
//
|
||||
// Allows the bottom of an element to extend to the bottom of all floated child
|
||||
// elements. See http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
/* Clearfix
|
||||
|
||||
Allows the bottom of an element to extend to the bottom of all floated child
|
||||
elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
|
||||
.clearfix,
|
||||
%clearfix {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// Hidden
|
||||
//
|
||||
// Hide elements from all users. Compare to the visually-hidden component.
|
||||
//
|
||||
// Used for elements which should not be immediately displayed to any user. An
|
||||
// example would be a collapsible fieldset that will be expanded with a click
|
||||
// from a user.
|
||||
//
|
||||
// For anything you want to hide on page load when JavaScript is enabled, use
|
||||
// the `.js-hidden` class.
|
||||
/* Hidden
|
||||
|
||||
Hide elements from all users. Compare to the visually-hidden component.
|
||||
|
||||
Used for elements which should not be immediately displayed to any user. An
|
||||
example would be a collapsible fieldset that will be expanded with a click
|
||||
from a user.
|
||||
|
||||
For anything you want to hide on page load when JavaScript is enabled, use
|
||||
the `.js-hidden` class. */
|
||||
|
||||
.hidden,
|
||||
%hidden {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Pager
|
||||
//
|
||||
// Paged navigation is a list of page numbers when more than 1 page of content
|
||||
// is available.
|
||||
/* Pager
|
||||
|
||||
Paged navigation is a list of page numbers when more than 1 page of content
|
||||
is available. */
|
||||
|
||||
.pagination,
|
||||
.pager,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Responsive video
|
||||
//
|
||||
// Using a wrapper div, embedded videos can be made responsive so that their
|
||||
// intrinsic aspect ratio is preserved at any screen width. The
|
||||
// `responsive-video__embed` class is optional if the embed is an `iframe`.
|
||||
//
|
||||
// .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
|
||||
// default 16:9 one.
|
||||
/* Responsive video
|
||||
|
||||
Using a wrapper div, embedded videos can be made responsive so that their
|
||||
intrinsic aspect ratio is preserved at any screen width. The
|
||||
`responsive-video__embed` class is optional if the embed is an `iframe`.
|
||||
|
||||
.responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
|
||||
default 16:9 one. */
|
||||
|
||||
.responsive-video,
|
||||
%responsive-video {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Visually hidden
|
||||
//
|
||||
// Make an element visually hidden, but accessible to screen readers, etc.
|
||||
/* Visually hidden
|
||||
|
||||
Make an element visually hidden, but accessible to screen readers, etc. */
|
||||
|
||||
.visually-hidden,
|
||||
%visually-hidden {
|
||||
|
|
|
|||
Loading…
Reference in a new issue