72 lines
1.8 KiB
SCSS
72 lines
1.8 KiB
SCSS
|
// 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. We also provide a
|
||
|
|
// `%box` placeholder selector so that we can easily extend the basic box
|
||
|
|
// component with `@extend %box;`.
|
||
|
|
//
|
||
|
|
// Take a look at the source code for this component for more information about
|
||
|
|
// building a good component.
|
||
|
|
//
|
||
|
|
// :hover - The hover/focus styling.
|
||
|
|
// .box--highlight - The "highlight" box variant.
|
||
|
|
|
||
|
|
.box,
|
||
|
|
%box {
|
||
|
|
// Add vertical rhythm margins.
|
||
|
|
@include margin-block(1);
|
||
|
|
@include padding(.5);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--fit {
|
||
|
|
width: fit-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--gutter {
|
||
|
|
padding-inline: var(--gutters);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--inverted {
|
||
|
|
@extend %link-inverted;
|
||
|
|
background: var(--color-border);
|
||
|
|
color: var(--color-text-bg);
|
||
|
|
|
||
|
|
// Make sure headings etc. also gets inverted.
|
||
|
|
* {
|
||
|
|
color: var(--color-text-bg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
> * {
|
||
|
|
&:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|