hacker.tours-website/themes/zen/assets/sass/components/box/_box.scss

72 lines
1.8 KiB
SCSS
Raw Normal View History

2024-06-13 22:14:05 +02:00
// 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;
}
}
}