/* ⭐️ Box 0.0.6 + border */
/* box */
box- {
/* default settings */
--box-light-color: #eee;
--box-dark-color: #222;
display: block;
/* 🔸 axiom: box's content should be away with its edges */
padding: var(--spacing);
/* 🔸 axiom: box should be visible */
border: var(--border-thin);
background-color: var(--box-light-color);
color: var(--box-dark-color);
/*
High contrast themes tend to eliminate backgrounds. By employing a transparent outline the box shape can be restored.
When a high contrast theme is not running, the outline is invisible.
*/
outline: 0.125rem solid transparent;
outline-offset: -0.125rem;
}
/*
box (dark theme)
----------------
In a greyscale design, it is possible to switch between
dark/light theme with `filter`.
box.invert { filter: invert(100%); }
*/
box-.dark {
color: var(--box-light-color);
background-color: var(--box-dark-color);
border: var(--border-thin);
}
/* elements in box */
box- * {
/*
Changing `background-color` requires you to change `color` to ensure the content is still legible. This can be made easier by
applying `color: inherit` to any elements inside box.
*/
color: inherit;
}
replit ⟩
,
codepen ⟩
codesandbox ⟩
- 讀取屬性並強迫再設定一次屬性❗️
- remove render(), use attributeChangedCallback() instead