xmeter
Version:
A default stylesheet with a set of tools that make designing with vertical rhythm easy.
570 lines (531 loc) • 15.8 kB
text/less
/*################################*\
xmeter | _base.less
\*################################*/
@import (reference) url('./__settings.less');
@import (reference) url('./__tool.fontsize.less');
@import (reference) url('./__tool.borders.less');
@import (reference) url('./__tool.delims.less');
@import (reference) url('./_h-FontSize.less');
@import (reference) url('./_-mb.less');
@import (reference) url('./_-pt.less');
@import (reference) url('./_-pl.less');
@p-line-height: 1.5; // equivalent to custom prop `--line-height` // COMBAK{FALLBACK} for custom property
@p-color-gray-fallback: rgba(0,0,0, 0.25); // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
@p-color-gray: #00000040;
@p-lh: (@p-line-height * 1rem); // equivalent to unit `1lh`, or custom prop `--lh`
// Contents
// ------------------------------------
// # GENERIC...........................`html` and far-reaching page-wide selectors
// # SECTIONS..........................sections, articles, headers, footers, headings
// # GROUPING..........................grouping content
// ## Paragraphs.........................paragraphs, block-level textual elements
// ## Lists..............................ordered, unordered, dictionary
// ## Tables.............................tables
// # TEXT..............................text-level, phrasing (inline) content and links
// ## Links..............................inline hyperlinks
// ## Stress.............................text outstanding from surrounding prose
// ## Documentation......................documentation elements
// ## Data...............................machine- or human-readable data
// # FORMS.............................form elements
// ## Resets.............................resets for form elements
// ## Textual............................textual form elements
// ## Buttons............................button-like form elements
// # EMBEDDED..........................images, videos, other media
// # INTERACTIVE.......................user-interactive HTML elements
//++++++++++++++++++++++++++++++++//
// # GENERIC
//++++++++++++++++++++++++++++++++//
@import (inline) url('reset.css');
@import (inline) url('../../node_modules/normalize.css/normalize.css');
* {
&,
&::before,
&::after {
content: none;
box-sizing: border-box;
column-rule: 0 solid; // change initial column-rule from `medium none`
@media print {
background: transparent ;
box-shadow: none ;
text-shadow: none ;
}
}
&:not(input):not(button):not(select), // NOTE be careful here: if overriding, specificity > 3
// &:not(input, button, select), // CHANGED{NEW} selector not supported yet // NB{LINK} <https://caniuse.com/#feat=css-not-sel-list> // TODO once removed, fix NB:LINK (L430)
&::before,
&::after {
border: 0 solid; // change initial border from `medium none`
}
}
// Set up vertical rhythm system.
// [1] default line-height. Change in your own project if you wish.
// [2] COMBAK{FALLBACK} for `lh` units (https://drafts.csswg.org/css-values/#lh)
// [3] COMBAK{FALLBACK} for custom property
// [4] addresses support for `rem` units (otherwise these would be in `body` selector)
// [5] Root font-size (rem) should *not* be set to an absolute unit, so that users can specify
// font sizing settings in their user agent.
html {
--line-height: 1.5; // [1]
--lh: calc(var(--line-height) * 1rem); // [2]
font-size: 100%; // [4] [5]
line-height: @p-line-height; // [3]
line-height: var(--line-height); // [4]
}
// Vertical spacing between typographical blocks
// NOTE: `textarea` is inline by default but overriding here: should be block (opinionated)
h1, h2, h3, h4, h5, h6,
p, pre, figure, blockquote,
ol, ul, dl,
table,
form, fieldset, textarea,
details {
.-mb-1;
}
h1 {
.-pt-1;
}
// Font sizes for text-level elements should be in units of `em` instead of `rem` because
// they should scale with their parents.
// Also, inline elements should not affect vertical rhythm, thus line-heights are zero.
// (The `display` property of these elements should automatically
// have a value of `inline` (do not set manually), either by browser default
// or by CSS **initial value**.)
span, br,
em, strong, i, mark, u, small, s,
dfn, b, abbr, var, q, cite, sup, sub,
data, time, code, kbd, samp,
label {
line-height: 0;
}
// Elements with a transparent content model
// should display what their contents display.
a, ins, del, slot {
}
//++++ end # GENERIC ++++//
//++++++++++++++++++++++++++++++++//
// # SECTIONS
//++++++++++++++++++++++++++++++++//
body {
tab-size: 4;
}
main {
}
section {
}
article {
}
aside {
}
nav {
}
main {
}
header {
}
footer {
}
h1, h2, h3, h4, h5, h6 {
.h-FontSize;
font-weight: 700;
}
h1 { --font-scale: @g-font-size-h1; --tracks: 2; }
h2 { --font-scale: @g-font-size-h2; --tracks: 2; }
h3 { --font-scale: @g-font-size-h3; --tracks: 2; }
h4 { --font-scale: @g-font-size-h4; }
h5 { --font-scale: @g-font-size-h5; }
h6 { --font-scale: @g-font-size-h6; }
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
h1 { .font-size-el(@g-font-size-h1; 2); }
h2 { .font-size-el(@g-font-size-h2; 2); }
h3 { .font-size-el(@g-font-size-h3; 2); }
h4 { .font-size-el(@g-font-size-h4; ); }
h5 { .font-size-el(@g-font-size-h5; ); }
h6 { .font-size-el(@g-font-size-h6; ); }
}
h1 {
margin-top: 0; // COMBAK{FALLBACK}
margin-top: initial; // COMBAK{FALLBACK}
margin-top: unset; // COMBAK{FALLBACK}
margin-block-start: unset; // undo Normalize
}
address {
}
//++++ end # SECTIONS ++++//
//++++++++++++++++++++++++++++++++//
// # GROUPING
//++++++++++++++++++++++++++++++++//
div {
}
hr {
display: none;
}
//--------------------------------//
// ## Paragraphs
//--------------------------------//
p {
}
pre {
.h-FontSize;
--font-scale: @g-font-size-mill;
text-align: left; // code blocks are always aligned left, regardless of writing mode
text-indent: 0;
white-space: pre;
overflow: auto;
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
pre {
.font-size-el(@g-font-size-mill);
}
}
figure {
// undo Normalize
margin-top: 0 ; margin-left: 0 ; margin-right: 0 ; // COMBAK{FALLBACK}
margin-top: initial; margin-left: initial; margin-right: initial; // COMBAK{FALLBACK}
margin-top: unset ; margin-left: unset ; margin-right: unset ; // COMBAK{FALLBACK}
margin-block-start: unset;
margin-inline: unset;
}
figcaption {
}
blockquote {
}
//---- end ## Paragraphs ----//
//--------------------------------//
// ## Lists
//--------------------------------//
ol,
ul,
dl {
li > &,
dt > &,
dd > & {
margin-bottom: 0; // COMBAK{FALLBACK}
margin-bottom: initial; // COMBAK{FALLBACK}
margin-bottom: unset; // COMBAK{FALLBACK}
margin-block-end: unset; // undo default vertical spacing for nested lists
}
}
ol,
ul {
.-pl-4;
li > &,
dt > &,
dd > & {
.-pl-2;
}
}
ol {
}
ul {
}
dl {
}
li {
}
dt {
}
dd {
}
//---- end ## Lists ----//
//--------------------------------//
// ## Tables
//--------------------------------//
table {
max-width: 100%; // fluid tables for responsive purposes
border-collapse: collapse;
text-align: left; // fix browser BUG // which? file an issue!
}
caption {
text-align: center;
}
thead,
tfoot {
vertical-align: bottom; // for heading alignment
}
thead {
}
tfoot {
}
tbody {
vertical-align: top; // for data alignment
}
tr {
}
th {
font-weight: 700;
}
td {
}
//---- end ## Tables ----//
//++++ end # GROUPING ++++//
//++++++++++++++++++++++++++++++++//
// # TEXT
//++++++++++++++++++++++++++++++++//
// NB: RECOMMENDATION:
// Do not use `br` to indicate line breaks, use CSS instead.
// One exception: MAY use `address > br` to indicate line breaks (by convention)
br {
}
//--------------------------------//
// ## Links
//--------------------------------//
a[href] {
// color: #00e; // default `:link`
// color: #551a8b; // default `:visited`
// color: #f00; // default `:active`
color: #06c; // `hsl(210deg, 100%, 40%)` // ratios: 5.57 aginst white, 3.77 against black
text-decoration: underline; // COMBAK{FALLBACK}
text-decoration-line: underline;
cursor: pointer;
}
//---- end ## Links ----//
//--------------------------------//
// ## Stress
//--------------------------------//
em {
font-style: italic;
}
strong {
font-weight: 700;
}
i {
font-style: italic;
}
mark {
background-color: fadeout(#ffe168, 50%); // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
background-color: #ffe16880; // Google-flavored comments in Google Docs
color: inherit; // COMBAK{FALLBACK}
color: unset; // unset browser default color
}
u {
color: #360; // `hsl(90deg, 100%, 20%)` // ratios: 6.90 aginst white, 3.04 against black
// color: #405a04; // StackOverflow-flavored diff // ratios: 7.83 against white, 2.68 against black
text-decoration: underline; // COMBAK{FALLBACK}
text-decoration-line: underline;
}
small {
font-size: (@g-font-size-mill * 1em);
}
s {
color: #c03; // `hsl(345deg, 100%, 40%)` // ratios: 5.81 aginst white, 3.62 against black
// color: #a82400; // StackOverflow-flavored diff // ratios: 7.20 against white, 2.92 against black
text-decoration: line-through; // COMBAK{FALLBACK}
text-decoration-line: line-through;
}
//---- end ## Stress ----//
//--------------------------------//
// ## Documentation
//--------------------------------//
ins {
// background-color: #d1e1ad; // StackOverflow-flavored diff
background-color: #acf2bd; // GitHub-flavored diff
}
del {
// background-color: #e5bdb2; // StackOverflow-flavored diff
background-color: #fdb8c0; // GitHub-flavored diff
}
dfn {
font-style: inherit; // undo Normalize
font-weight: 700;
}
b {
font-weight: 700;
}
abbr {
&[title] {
cursor: help;
text-decoration: none; // COMBAK{FALLBACK} for `text-decoration-line` // also IE fallback for `initial`
text-decoration-line: initial; // COMBAK{FALLBACK}
text-decoration-line: unset; // undo Normalize
}
}
var {
font-style: italic;
}
q {
.quotes-double(); // COMBAK{FALLBACK} for `initial`
.delims(initial);
}
cite {
font-style: italic;
}
sup, sub {
font-size: (@g-font-size-mill * 1em);
}
sup {
}
sub {
}
//---- end ## Documentation ----//
//--------------------------------//
// ## Data
//--------------------------------//
data {
}
time {
}
code, kbd, samp {
font-size: (@g-font-size-mill * 1em);
white-space: nowrap;
& & {
font-size: inherit; // undo compounding font sizes
}
pre & {
white-space: inherit; // COMBAK{FALLBACK}
white-space: unset; // sometimes people put a `code` in a `pre` // override `nowrap` above
}
}
code {
}
kbd {
}
samp {
}
//---- end ## Data ----//
//++++ end # TEXT ++++//
//++++++++++++++++++++++++++++++++//
// # FORMS
//++++++++++++++++++++++++++++++++//
//--------------------------------//
// ## Resets
//--------------------------------//
input,
button,
select,
textarea {
line-height: inherit; // override opinionated Normalize.css
}
//---- end ## Resets ----//
fieldset {
padding: 0 1rem;
html body & { // HACK NB{LINK} (L61) need a specificity of 3 to override generic `*:not(input):not(button):not(select)`
// NOTE cannot use box-shadow hack due to shadow covering <legend>
.border-vert(all; 1px);
@supports (margin-block-start: 0) {
.border-vert(all; 0);
.border-block(all; 1px);
}
border-style: solid;
border-color: @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
border-color: @p-color-gray;
}
}
//--------------------------------//
// ## Textual
//--------------------------------//
textarea,
input {
padding: 0 0.25rem;
cursor: text;
}
textarea {
display: block; // override browser default
height: (6 * @p-lh); // COMBAK{FALLBACK}
height: calc(6 * var(--lh)); // COMBAK{FALLBACK}
height: 6lh;
width: 30rem;
@supports (block-size: var(-v)) and (inline-size: 1rem) {
height: unset;
width: unset;
block-size: calc(6 * var(--lh)); // COMBAK{FALLBACK}
block-size: 6lh;
inline-size: 30rem;
}
font-size: (@g-font-size-mill * 1rem); // .font-size-mod(@g-font-size-mill); // textarea cannot contain any element children
box-shadow: 0 0 0 1px @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
box-shadow: 0 0 0 1px @p-color-gray; // HACK vertical border hack
}
input:not([type="button"]):not([type="reset"]):not([type="submit"]) { // NOTE be careful here: if overriding, specificity > 31
// input:not([type="button"], [type="reset"], [type="submit"]) { // CHANGED{NEW} selector not supported yet // NB{LINK} <https://caniuse.com/#feat=css-not-sel-list>
font-size: (@g-font-size-mill * 1em);
}
//---- end ## Textual ----//
//--------------------------------//
// ## Non-Textual
//--------------------------------//
input[type="color"],
input[type="file"],
input[type="range"],
input[type="checkbox"],
input[type="radio"],
select {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
&:hover {
// NOTE: Chrome applies these styles to inputs even when their associated labels
// (having the correct `[for]` attribute) are hovered.
box-shadow: inset 0 0 0.25rem 0 @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
box-shadow: inset 0 0 0.25rem 0 @p-color-gray;
}
}
input[type="checkbox"] {
border-radius: 25%;
}
input[type="radio"] {
border-radius: 100%;
}
select {
font-size: (@g-font-size-mill * 1em);
}
//---- end ## Non-Textual ----//
//--------------------------------//
// ## Buttons
//--------------------------------//
input[type="button"],
input[type="reset"],
input[type="submit"],
button {
padding: 0.125em 0.25em;
cursor: default;
&:hover,
&:focus {
box-shadow: inset 0 0 0.25rem 0 @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
box-shadow: inset 0 0 0.25rem 0 @p-color-gray;
}
}
//---- end ## Buttons ----//
label {
cursor: default;
}
select[multiple] > optgroup > option {
padding-left: 1rem;
padding-inline-start: 1rem;
}
//++++ end # FORMS ++++//
//++++++++++++++++++++++++++++++++//
// # EMBEDDED
//++++++++++++++++++++++++++++++++//
// [1] Correct squishing when one dimension changes (override `[height]`/`[width]` attributes)
// [2] fluid images for responsive purposes
// [3] offset `[alt]` attribute text from surrounding copy
// [4] safer alternative to `display: block;`
img {
height: auto; width: auto; // COMBAK{FALLBACK}
block-size: auto; inline-size: auto; // [1]
max-width: 100%; // COMBAK{FALLBACK}
@supports (max-inline-size: 1%) {
max-width: unset;
max-inline-size: 100%; // [2]
}
font-style: italic; // [3]
vertical-align: middle; // [4]
}
//++++ end # EMBEDDED ++++//
//++++++++++++++++++++++++++++++++//
// # INTERACTIVE
//++++++++++++++++++++++++++++++++//
summary {
cursor: default;
}
dialog {
padding: (0.5 * @p-lh) 1rem; // COMBAK{FALLBACK}
padding: calc(0.5 * var(--lh)) 1rem; // COMBAK{FALLBACK}
padding: 0.5lh 1rem;
&::backdrop {
background-color: @p-color-gray-fallback; // COMBAK{FALLBACK} for `#rrggbbaa` color syntax
background-color: @p-color-gray;
}
}
//++++ end # INTERACTIVE ++++//