mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
105 lines
2.6 KiB
SCSS
105 lines
2.6 KiB
SCSS
// Cross-module `@extend` rules, loaded last from `tabler.scss`.
|
||
//
|
||
// With the Sass module system an extension only applies to upstream
|
||
// stylesheets — the modules the extending file loads, directly or
|
||
// transitively — never to sibling modules loaded elsewhere. The extends below
|
||
// target element selectors spread across many modules (`h1`–`h6`, `hr`,
|
||
// `.table`, `[data-bs-theme='dark']`), so they live here, with the whole
|
||
// `core` upstream.
|
||
//
|
||
// Rules containing only `@extend` emit no CSS of their own, so placing them
|
||
// here does not change the compiled output — each extension is applied
|
||
// in-place to the rules it extends.
|
||
@use 'config' as *;
|
||
@use 'core';
|
||
|
||
// Heading helpers (from `bootstrap/_type.scss`)
|
||
.h1 {
|
||
@extend h1;
|
||
}
|
||
|
||
.h2 {
|
||
@extend h2;
|
||
}
|
||
|
||
.h3 {
|
||
@extend h3;
|
||
}
|
||
|
||
.h4 {
|
||
@extend h4;
|
||
}
|
||
|
||
.h5 {
|
||
@extend h5;
|
||
}
|
||
|
||
.h6 {
|
||
@extend h6;
|
||
}
|
||
|
||
// Emphasis helpers (from `bootstrap/_type.scss`)
|
||
.small {
|
||
@extend small;
|
||
}
|
||
|
||
.mark {
|
||
@extend mark;
|
||
}
|
||
|
||
// Horizontal rule helper (from `ui/typo/_hr.scss`)
|
||
.hr {
|
||
@extend hr;
|
||
}
|
||
|
||
// Markdown tables pick up the styled table look (from `ui/_markdown.scss`)
|
||
.prose > table,
|
||
.markdown > table {
|
||
@extend .table;
|
||
font-size: var(--body-font-size);
|
||
|
||
th:first-child,
|
||
td:first-child {
|
||
padding-left: 0;
|
||
}
|
||
|
||
th:last-child,
|
||
td:last-child {
|
||
padding-right: 0;
|
||
}
|
||
|
||
tr:last-child > * {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
th {
|
||
--bg-surface-tertiary: transparent;
|
||
}
|
||
}
|
||
|
||
// Light-scoped subtrees inside a dark body inherit the dark styles
|
||
// (from `layout/_dark.scss`)
|
||
@if $enable-dark-mode {
|
||
body[data-bs-theme='dark'] [data-bs-theme='light'],
|
||
body[data-theme='dark'] [data-theme='light'] {
|
||
@extend [data-bs-theme='dark'];
|
||
}
|
||
|
||
// Navbar theme chosen at runtime (data-bs-navbar-theme on <html>). It covers
|
||
// whichever navigation the page shows — the vertical sidebar is a .navbar
|
||
// too. Extending the dark color mode keeps this route identical to the
|
||
// static one, which sets data-bs-theme="dark" on the element itself; the
|
||
// primary variant is the dark palette on a primary background (see
|
||
// layout/_navbar.scss). The default value writes no attribute and means
|
||
// "follow the page", so there is no rule for it.
|
||
//
|
||
// The two-row navbar keeps its menu row in a collapse wrapper next to the
|
||
// header, so that row is matched on its own.
|
||
html[data-bs-navbar-theme='dark'] .page > .navbar,
|
||
html[data-bs-navbar-theme='primary'] .page > .navbar,
|
||
html[data-bs-navbar-theme='dark'] .page > [class*='navbar-expand'] .navbar,
|
||
html[data-bs-navbar-theme='primary'] .page > [class*='navbar-expand'] .navbar {
|
||
@extend [data-bs-theme='dark'];
|
||
}
|
||
}
|