@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
247 lines (227 loc) • 5.47 kB
CSS
/* stylelint-disable selector-max-type */
/* Disable selector-max-type rule to target individual element types. */
/* Make sure these tags are wrapped in `:where()` for 0 specificity. */
.rt-reset {
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Margins */
/* */
/* * * * * * * * * * * * * * * * * * * */
&:where(body, blockquote, dl, dd, figure, p) {
margin: 0;
}
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Typography */
/* */
/* * * * * * * * * * * * * * * * * * * */
&:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
font: unset;
}
&:where(h1, h2, h3, h4, h5, h6) {
font: unset;
margin: 0;
}
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Interactive elements */
/* */
/* * * * * * * * * * * * * * * * * * * */
&:where(a) {
all: unset;
-webkit-tap-highlight-color: transparent;
}
&:where(
button,
select,
/* Buttons */
[type='button'],
[type='image'],
[type='reset'],
[type='submit'],
/* Non-textual inputs */
[type='checkbox'],
[type='color'],
[type='radio'],
[type='range']
) {
all: unset;
display: inline-block;
font-weight: normal;
font-style: normal;
text-indent: initial;
-webkit-tap-highlight-color: transparent;
}
&:where(label) {
-webkit-tap-highlight-color: transparent;
}
&:where(select) {
font-weight: normal;
font-style: normal;
text-align: start;
}
&:where(
textarea,
input:not(
/* Buttons */
[type='button'],
[type='image'],
[type='reset'],
[type='submit'],
/* Non-textual inputs */
[type='checkbox'],
[type='color'],
[type='radio'],
[type='range']
)
) {
all: unset;
display: block;
width: stretch;
font-weight: normal;
font-style: normal;
text-align: start;
text-indent: initial;
-webkit-tap-highlight-color: transparent;
/* Make sure parent <label> doesn't change the text cursor */
cursor: text;
/* Recover textarea pre-wrap in Firefox */
white-space: pre-wrap;
}
&:where(:focus) {
outline: none;
}
&::placeholder {
color: unset;
opacity: unset;
/* Weird, but placeholders are selectable in Chrome and Safari */
user-select: none;
}
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Tables */
/* */
/* * * * * * * * * * * * * * * * * * * */
&:where(table) {
all: unset;
display: table;
text-indent: initial;
}
&:where(caption) {
text-align: inherit;
}
&:where(td) {
padding: 0;
}
&:where(th) {
font-weight: unset;
text-align: inherit;
padding: 0;
}
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Individual style tweaks */
/* */
/* * * * * * * * * * * * * * * * * * * */
&:where(abbr, acronym) {
text-decoration: none;
}
&:where(canvas, object, picture, summary) {
display: block;
}
&:where(del, s) {
text-decoration: unset;
}
&:where(fieldset, hr) {
all: unset;
display: block;
}
&:where(legend) {
padding: 0;
border: none;
/* Normalize with label */
cursor: default;
}
&:where(li) {
display: block;
text-align: unset;
}
&:where(ol, ul) {
list-style: none;
margin: 0;
padding: 0;
}
&:where(iframe) {
display: block;
border: none;
}
&:where(iframe) {
width: stretch;
}
&:where(ins, u) {
text-decoration: none;
}
&:where(img) {
display: block;
max-width: 100%;
}
&:where(svg) {
display: block;
max-width: 100%;
flex-shrink: 0;
}
&:where(mark) {
all: unset;
}
&:where(pre) {
font: unset;
margin: unset;
}
&:where(q)::before,
&:where(q)::after {
content: '';
}
&:where(sub, sup) {
font: unset;
vertical-align: unset;
}
&:where(details) ::marker,
&:where(summary)::marker {
content: none;
}
&:where(video) {
display: block;
width: stretch;
}
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Cursors */
/* */
/* * * * * * * * * * * * * * * * * * * */
&:where(:any-link) {
cursor: var(--cursor-link);
}
&:where(button) {
cursor: var(--cursor-button);
}
&:where(:disabled, [data-disabled]) {
cursor: var(--cursor-disabled);
}
&:where(input[type='checkbox']) {
cursor: var(--cursor-checkbox);
}
&:where(input[type='radio']) {
cursor: var(--cursor-radio);
}
/* * * * * * * * * * * * * * * * * * * */
/* */
/* Box sizing */
/* */
/* * * * * * * * * * * * * * * * * * * */
&,
&::before,
&::after {
/* Don't reorder this rule or remove "&" */
box-sizing: border-box;
}
}