docs cleanup
This commit is contained in:
Jon McClure
parent
31ca5f04d8
commit
f317074998
26 changed files with 661 additions and 296 deletions
|
|
@ -1,5 +1,4 @@
|
|||
@import "../src/scss/mixins";
|
||||
@import "../src/scss/colours/thematic/tr";
|
||||
|
||||
table.docblock-argstable {
|
||||
p {
|
||||
|
|
@ -62,7 +61,7 @@ div.sbdocs-content {
|
|||
|
||||
a {
|
||||
@include font-display;
|
||||
color: $tr-muted-blue;
|
||||
color: var(--gfx-colour-tr-muted-blue);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -51,11 +51,22 @@ export const parameters = {
|
|||
'SCSS',
|
||||
['Intro', '*'],
|
||||
'Styles',
|
||||
['Typography', [
|
||||
[
|
||||
'Intro',
|
||||
'Using the type system',
|
||||
'*',
|
||||
]],
|
||||
'Typography', [
|
||||
'Classes',
|
||||
'Intro',
|
||||
'Using the type system',
|
||||
'*',
|
||||
],
|
||||
'Layout', [
|
||||
'Classes',
|
||||
'Spacers',
|
||||
'Flexbox',
|
||||
'*',
|
||||
],
|
||||
'Borders',
|
||||
],
|
||||
'Actions',
|
||||
['Intro', '*'],
|
||||
'Contributing',
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@ const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>
|
|||
const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
|
||||
const TH = (props) => <th>{props.children}</th>;
|
||||
|
||||
const CopyTable = (props) => {
|
||||
const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) => {
|
||||
return (
|
||||
<Unstyled>
|
||||
<div className={classes.title}>
|
||||
{props.title}
|
||||
{(props.title && !props.noLink) && (
|
||||
<a href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${props.title.toLowerCase().replaceAll(' ', '-')}`} target="_blank">
|
||||
{title}
|
||||
{(title && mdnLink) && (
|
||||
<a href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${mdnLink}`} target="_blank">
|
||||
<span className="material-symbols-outlined">link</span>
|
||||
</a>
|
||||
)}
|
||||
|
|
@ -34,11 +34,11 @@ const CopyTable = (props) => {
|
|||
<table className={classes.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
{props.header.map(h => (<TH>{h}</TH>))}
|
||||
{header.map(h => (<TH>{h}</TH>))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{props.body.map(b => (<TR {...props}>{b}</TR>))}
|
||||
{body.map(b => (<TR {...{ title, header, body, copyable, mdnLink}}>{b}</TR>))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Unstyled>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,25 @@ $header: #5e81ac;
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
display: block;
|
||||
width: 100%;
|
||||
tr {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
display: block;
|
||||
max-height: 305px;
|
||||
overflow-y: scroll;
|
||||
border-bottom: 1px solid hsla(203, 50%, 30%, 0.15);
|
||||
}
|
||||
tbody tr {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 1px solid hsla(203, 50%, 30%, 0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
|
|
|
|||
54
src/docs/styles/borders/classes.stories.mdx
Normal file
54
src/docs/styles/borders/classes.stories.mdx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import CopyTable from '../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderColor from '$lib/scss/borders/\_border-color.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderRadius from '$lib/scss/borders/\_border-radius.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderStyle from '$lib/scss/borders/\_border-style.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderWidth from '$lib/scss/borders/\_border-width.scss?raw';
|
||||
|
||||
<Meta title="Styles/Borders/Classes" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Border classes
|
||||
|
||||
<CopyTable
|
||||
title="Border color"
|
||||
mdnLink="border-color"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(borderColor)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Border radius"
|
||||
mdnLink="border-radius"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(borderRadius)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Border style"
|
||||
mdnLink="border-style"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(borderStyle)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Border width"
|
||||
mdnLink="border-width"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(borderWidth)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
|
@ -48,6 +48,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Align content"
|
||||
mdnLink="align-content"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(alignContent)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -55,6 +56,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Align items"
|
||||
mdnLink="align-items"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(alignItems)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -62,6 +64,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Align self"
|
||||
mdnLink="align-self"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(alignSelf)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -69,6 +72,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Flex direction"
|
||||
mdnLink="flex-direction"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(flexDirection)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -76,6 +80,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Flex grow"
|
||||
mdnLink="flex-grow"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(flexGrow)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -83,6 +88,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Flex shrink"
|
||||
mdnLink="flex-shrink"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(flexShrink)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -90,6 +96,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Flex wrap"
|
||||
mdnLink="flex-wrap"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(flexWrap)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -97,6 +104,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Flex"
|
||||
mdnLink="flex"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(flex)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -104,6 +112,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Justify content"
|
||||
mdnLink="justify-content"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(justifyContent)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -111,6 +120,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Justify items"
|
||||
mdnLink="justify-items"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(justifyItems)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -118,6 +128,7 @@ Our style library provides these flexbox utility classes:
|
|||
|
||||
<CopyTable
|
||||
title="Justify self"
|
||||
mdnLink="justify-self"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(justifySelf)}
|
||||
copyable={[true, false]}
|
||||
|
|
|
|||
32
src/docs/styles/layout/spacers.stories.mdx
Normal file
32
src/docs/styles/layout/spacers.stories.mdx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import CopyTable from '../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import margin from '$lib/scss/spacers/\_margin.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import padding from '$lib/scss/spacers/\_padding.scss?raw';
|
||||
|
||||
<Meta title="Styles/Layout/Spacers" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Spacer classes
|
||||
|
||||
<CopyTable
|
||||
title="Margin"
|
||||
mdnLink="margin"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(margin)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Padding"
|
||||
mdnLink="padding"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(padding)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
|
@ -20,6 +20,7 @@ import floats from '$lib/scss/layout/\_floats.scss?raw';
|
|||
|
||||
<CopyTable
|
||||
title="Display"
|
||||
mdnLink="display"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(display)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -27,6 +28,7 @@ import floats from '$lib/scss/layout/\_floats.scss?raw';
|
|||
|
||||
<CopyTable
|
||||
title="Float"
|
||||
mdnLink="float"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(floats)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -34,6 +36,7 @@ import floats from '$lib/scss/layout/\_floats.scss?raw';
|
|||
|
||||
<CopyTable
|
||||
title="Box sizing"
|
||||
mdnLink="box-sizing"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(boxSizine)}
|
||||
copyable={[true, false]}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Font family"
|
||||
mdnLink="font-family"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(fontFamily)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -50,6 +51,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Font style"
|
||||
mdnLink="font-style"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(fontStyle)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -57,6 +59,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Font weight"
|
||||
mdnLink="font-weight"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(fontWeight)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -64,6 +67,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Letter spacing"
|
||||
mdnLink="letter-spacing"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(letterSpacing)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -71,6 +75,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Text align"
|
||||
mdnLink="text-align"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(textAlign)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -78,6 +83,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Text decoration"
|
||||
mdnLink="text-decoration"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(textDecoration)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -85,6 +91,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Text transform"
|
||||
mdnLink="text-transform"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(textTransform)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -92,6 +99,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Vertical align"
|
||||
mdnLink="vertical-align"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(verticalAlign)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -99,6 +107,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="White space"
|
||||
mdnLink="white-space"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(whiteSpace)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -106,6 +115,7 @@ import './styles.scss';
|
|||
|
||||
<CopyTable
|
||||
title="Word break"
|
||||
mdnLink="word-break"
|
||||
header={['Class', 'Properties']}
|
||||
body={cssStringToTableArray(wordBreak)}
|
||||
copyable={[true, false]}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/Fonts" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Fonts
|
||||
|
||||
There are several ways to specify font styles.
|
||||
|
||||
## Classes
|
||||
|
||||
```html
|
||||
<p>
|
||||
<span class="font-serif">Lorem</span>
|
||||
<span class="font-sans">ipsum</span>
|
||||
<span class="font-mono">dolor</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
// Import SCSS variables
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/variables';
|
||||
|
||||
p {
|
||||
// Use one...
|
||||
font-family: $font-family-serif;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-family: $font-family-display;
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Mixins
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
// Import SCSS mixins
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
p {
|
||||
// Use one...
|
||||
@include font-serif;
|
||||
@include font-sans;
|
||||
@include font-display;
|
||||
@include font-monospace;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/Mixins" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# SCSS Mixins
|
||||
|
||||
### Prereqs
|
||||
|
||||
Mixins allow you to re-use styles we've already defined in your components. Read more about how they work [here](https://sass-lang.com/documentation/at-rules/mixin) or just follow the examples below.
|
||||
|
||||
## Available mixins
|
||||
|
||||
### `body-text`
|
||||
|
||||
Mixin our default body text styles.
|
||||
|
||||
```html
|
||||
<div class="my-custom-text">
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>Ig-pay atin-lay</p>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
// Import SCSS mixins
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
div.my-custom-text {
|
||||
// Use body-text rules for all text elements
|
||||
// inside your custom element.
|
||||
@include body-text;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### `graphic-text`
|
||||
|
||||
Graphic text styles.
|
||||
|
||||
```html
|
||||
<div class="my-chart-container">
|
||||
<h3>Things are going up</h3>
|
||||
<p>Recent data point to a clear trend.</p>
|
||||
<div id="chart"></div>
|
||||
<aside>
|
||||
<p>Source: Horoscopery</p>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
div.my-chart-container {
|
||||
@include graphic-text;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### `visually-hidden`
|
||||
|
||||
Hide text meant for screen readers.
|
||||
|
||||
```html
|
||||
<div class="hidden">
|
||||
<p>A chart that shows many things.</p>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
||||
|
||||
div.hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="SCSS/Spacers" parameters={{ ...parameters }} />
|
||||
|
||||
|
||||
|
||||
# Spacers
|
||||
|
||||
You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes.
|
||||
|
||||
```html
|
||||
<!-- Adds margin-top and padding -->
|
||||
<div class="mt-2 p-2">
|
||||
<p>My spaced out content</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Levels
|
||||
|
||||
Spacer classes are specified with a level, from `0` - `6`, where `0` is no spacing and `6` is the largest amount of spacing.
|
||||
|
||||
### Margin
|
||||
|
||||
| Class | Property |
|
||||
| ------------ | ----------------- |
|
||||
| `m-{level}` | margin |
|
||||
| `mt-{level}` | margin-top |
|
||||
| `mr-{level}` | margin-right |
|
||||
| `mb-{level}` | margin-bottom |
|
||||
| `ml-{level}` | margin-left |
|
||||
| `mx-{level}` | margin-left/right |
|
||||
| `my-{level}` | margin-top/bottom |
|
||||
|
||||
### Padding
|
||||
|
||||
| Class | Property |
|
||||
| ------------ | ------------------ |
|
||||
| `p-{level}` | padding |
|
||||
| `pt-{level}` | padding-top |
|
||||
| `pr-{level}` | padding-right |
|
||||
| `pb-{level}` | padding-bottom |
|
||||
| `pl-{level}` | padding-left |
|
||||
| `px-{level}` | padding-left/right |
|
||||
| `py-{level}` | padding-top/bottom |
|
||||
|
||||
## Customising spacing levels
|
||||
|
||||
You can customise the spacing levels in your project by defining the following SCSS variables, shown below with their default values:
|
||||
|
||||
```css
|
||||
$margin-levels: (
|
||||
'0': 0,
|
||||
'1': 1rem,
|
||||
'2': 2rem,
|
||||
'3': 3rem,
|
||||
'4': 4rem,
|
||||
'5': 5rem,
|
||||
'6': 6rem
|
||||
);
|
||||
|
||||
$padding-levels: (
|
||||
'0': 0,
|
||||
'1': 0.5rem,
|
||||
'2': 1rem,
|
||||
'3': 1.75rem,
|
||||
'4': 2.25rem,
|
||||
'5': 3rem,
|
||||
'6': 4rem
|
||||
);
|
||||
```
|
||||
|
||||
Make sure you import or define these variables _before_ importing the style library.
|
||||
|
||||
```css
|
||||
@import 'my-custom-variables'; // Where you overrided the spacer variables
|
||||
@import '@reuters-graphics/graphics-components/dist/scss/main';
|
||||
```
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import { compileString } from 'sass';
|
||||
import { convert } from '../../../bin/css-to-js/index.js';
|
||||
import { kebabCase } from 'lodash-es';
|
||||
|
||||
export const cssStringToTableArray = (cssString) => {
|
||||
const cssObj = convert(cssString);
|
||||
const cssObj = convert(compileString(cssString).css);
|
||||
return Object.entries(cssObj).map(([key, value]) => {
|
||||
const className = key.replace(/_/g, '-');
|
||||
const properties = Object.entries(value)
|
||||
|
|
|
|||
15
src/scss/borders/_border-color.scss
Normal file
15
src/scss/borders/_border-color.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.border-inherit {
|
||||
border-color: inherit;
|
||||
}
|
||||
.border-current {
|
||||
border-color: currentColor;
|
||||
}
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
.border-black {
|
||||
border-color: #000;
|
||||
}
|
||||
.border-white {
|
||||
border-color: #fff;
|
||||
}
|
||||
279
src/scss/borders/_border-radius.scss
Normal file
279
src/scss/borders/_border-radius.scss
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
.rounded-none {
|
||||
border-radius: 0px;
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.rounded-2xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.rounded-3xl {
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.rounded-t-none {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
.rounded-t-sm {
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-top-right-radius: 0.125rem;
|
||||
}
|
||||
.rounded-t {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
.rounded-t-md {
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
}
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
.rounded-t-xl {
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-top-right-radius: 0.75rem;
|
||||
}
|
||||
.rounded-t-2xl {
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
.rounded-t-3xl {
|
||||
border-top-left-radius: 1.5rem;
|
||||
border-top-right-radius: 1.5rem;
|
||||
}
|
||||
.rounded-t-full {
|
||||
border-top-left-radius: 9999px;
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
.rounded-r-none {
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
.rounded-r-sm {
|
||||
border-top-right-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
}
|
||||
.rounded-r {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
.rounded-r-md {
|
||||
border-top-right-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
}
|
||||
.rounded-r-lg {
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
.rounded-r-xl {
|
||||
border-top-right-radius: 0.75rem;
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
}
|
||||
.rounded-r-2xl {
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
.rounded-r-3xl {
|
||||
border-top-right-radius: 1.5rem;
|
||||
border-bottom-right-radius: 1.5rem;
|
||||
}
|
||||
.rounded-r-full {
|
||||
border-top-right-radius: 9999px;
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
.rounded-b-none {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
.rounded-b-sm {
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
.rounded-b {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
.rounded-b-md {
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
}
|
||||
.rounded-b-lg {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
.rounded-b-xl {
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
}
|
||||
.rounded-b-2xl {
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
}
|
||||
.rounded-b-3xl {
|
||||
border-bottom-right-radius: 1.5rem;
|
||||
border-bottom-left-radius: 1.5rem;
|
||||
}
|
||||
.rounded-b-full {
|
||||
border-bottom-right-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
.rounded-l-none {
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
.rounded-l-sm {
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
.rounded-l {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
.rounded-l-md {
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
}
|
||||
.rounded-l-lg {
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
.rounded-l-xl {
|
||||
border-top-left-radius: 0.75rem;
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
}
|
||||
.rounded-l-2xl {
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
}
|
||||
.rounded-l-3xl {
|
||||
border-top-left-radius: 1.5rem;
|
||||
border-bottom-left-radius: 1.5rem;
|
||||
}
|
||||
.rounded-l-full {
|
||||
border-top-left-radius: 9999px;
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
.rounded-tl-none {
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
.rounded-tl-sm {
|
||||
border-top-left-radius: 0.125rem;
|
||||
}
|
||||
.rounded-tl {
|
||||
border-top-left-radius: 0.25rem;
|
||||
}
|
||||
.rounded-tl-md {
|
||||
border-top-left-radius: 0.375rem;
|
||||
}
|
||||
.rounded-tl-lg {
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
.rounded-tl-xl {
|
||||
border-top-left-radius: 0.75rem;
|
||||
}
|
||||
.rounded-tl-2xl {
|
||||
border-top-left-radius: 1rem;
|
||||
}
|
||||
.rounded-tl-3xl {
|
||||
border-top-left-radius: 1.5rem;
|
||||
}
|
||||
.rounded-tl-full {
|
||||
border-top-left-radius: 9999px;
|
||||
}
|
||||
.rounded-tr-none {
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
.rounded-tr-sm {
|
||||
border-top-right-radius: 0.125rem;
|
||||
}
|
||||
.rounded-tr {
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
.rounded-tr-md {
|
||||
border-top-right-radius: 0.375rem;
|
||||
}
|
||||
.rounded-tr-lg {
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
.rounded-tr-xl {
|
||||
border-top-right-radius: 0.75rem;
|
||||
}
|
||||
.rounded-tr-2xl {
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
.rounded-tr-3xl {
|
||||
border-top-right-radius: 1.5rem;
|
||||
}
|
||||
.rounded-tr-full {
|
||||
border-top-right-radius: 9999px;
|
||||
}
|
||||
.rounded-br-none {
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
.rounded-br-sm {
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
}
|
||||
.rounded-br {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
.rounded-br-md {
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
}
|
||||
.rounded-br-lg {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
.rounded-br-xl {
|
||||
border-bottom-right-radius: 0.75rem;
|
||||
}
|
||||
.rounded-br-2xl {
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
.rounded-br-3xl {
|
||||
border-bottom-right-radius: 1.5rem;
|
||||
}
|
||||
.rounded-br-full {
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
.rounded-bl-none {
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
.rounded-bl-sm {
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
.rounded-bl {
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
.rounded-bl-md {
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
}
|
||||
.rounded-bl-lg {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
.rounded-bl-xl {
|
||||
border-bottom-left-radius: 0.75rem;
|
||||
}
|
||||
.rounded-bl-2xl {
|
||||
border-bottom-left-radius: 1rem;
|
||||
}
|
||||
.rounded-bl-3xl {
|
||||
border-bottom-left-radius: 1.5rem;
|
||||
}
|
||||
.rounded-bl-full {
|
||||
border-bottom-left-radius: 9999px;
|
||||
}
|
||||
18
src/scss/borders/_border-style.scss
Normal file
18
src/scss/borders/_border-style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
.border-dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
.border-dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
.border-double {
|
||||
border-style: double;
|
||||
}
|
||||
.border-hidden {
|
||||
border-style: hidden;
|
||||
}
|
||||
.border-none {
|
||||
border-style: none;
|
||||
}
|
||||
115
src/scss/borders/_border-width.scss
Normal file
115
src/scss/borders/_border-width.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
.border-0 {
|
||||
border-width: 0px;
|
||||
}
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
.border-8 {
|
||||
border-width: 8px;
|
||||
}
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-x-0 {
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px;
|
||||
}
|
||||
.border-x-2 {
|
||||
border-left-width: 2px;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
.border-x-4 {
|
||||
border-left-width: 4px;
|
||||
border-right-width: 4px;
|
||||
}
|
||||
.border-x-8 {
|
||||
border-left-width: 8px;
|
||||
border-right-width: 8px;
|
||||
}
|
||||
.border-x {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.border-y-0 {
|
||||
border-top-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
.border-y-2 {
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.border-y-4 {
|
||||
border-top-width: 4px;
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.border-y-8 {
|
||||
border-top-width: 8px;
|
||||
border-bottom-width: 8px;
|
||||
}
|
||||
.border-y {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.border-t-0 {
|
||||
border-top-width: 0px;
|
||||
}
|
||||
.border-t-2 {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
.border-t-4 {
|
||||
border-top-width: 4px;
|
||||
}
|
||||
.border-t-8 {
|
||||
border-top-width: 8px;
|
||||
}
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.border-r-0 {
|
||||
border-right-width: 0px;
|
||||
}
|
||||
.border-r-2 {
|
||||
border-right-width: 2px;
|
||||
}
|
||||
.border-r-4 {
|
||||
border-right-width: 4px;
|
||||
}
|
||||
.border-r-8 {
|
||||
border-right-width: 8px;
|
||||
}
|
||||
.border-r {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.border-b-0 {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
.border-b-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.border-b-4 {
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.border-b-8 {
|
||||
border-bottom-width: 8px;
|
||||
}
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.border-l-0 {
|
||||
border-left-width: 0px;
|
||||
}
|
||||
.border-l-2 {
|
||||
border-left-width: 2px;
|
||||
}
|
||||
.border-l-4 {
|
||||
border-left-width: 4px;
|
||||
}
|
||||
.border-l-8 {
|
||||
border-left-width: 8px;
|
||||
}
|
||||
.border-l {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
3
src/scss/borders/_main.scss
Normal file
3
src/scss/borders/_main.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'border-radius';
|
||||
@import 'border-style';
|
||||
@import 'border-width';
|
||||
|
|
@ -1,40 +1,42 @@
|
|||
$nord-0: #2E3440;
|
||||
$nord-polar-night-0: #2E3440;
|
||||
$nord-black: #2E3440;
|
||||
$nord-1: #3B4252;
|
||||
$nord-polar-night-1: #3B4252;
|
||||
$nord-2: #434C5E;
|
||||
$nord-polar-night-2: #434C5E;
|
||||
$nord-3: #4C566A;
|
||||
$nord-polar-night-3: #4C566A;
|
||||
$nord-4: #D8DEE9;
|
||||
$nord-snow-storm-0: #D8DEE9;
|
||||
$nord-5: #E5E9F0;
|
||||
$nord-snow-storm-1: #E5E9F0;
|
||||
$nord-6: #ECEFF4;
|
||||
$nord-snow-storm-2: #ECEFF4;
|
||||
$nord-white: #ECEFF4;
|
||||
$nord-7: #8FBCBB;
|
||||
$nord-frost-0: #8FBCBB;
|
||||
$nord-8: #88C0D0;
|
||||
$nord-frost-1: #88C0D0;
|
||||
$nord-9: #81A1C1;
|
||||
$nord-frost-2: #81A1C1;
|
||||
$nord-10: #5E81AC;
|
||||
$nord-frost-3: #5E81AC;
|
||||
$nord-blue: #5E81AC;
|
||||
$nord-11: #BF616A;
|
||||
$nord-aurora-0: #BF616A;
|
||||
$nord-red: #BF616A;
|
||||
$nord-12: #D08770;
|
||||
$nord-aurora-1: #D08770;
|
||||
$nord-orange: #D08770;
|
||||
$nord-13: #EBCB8B;
|
||||
$nord-aurora-2: #EBCB8B;
|
||||
$nord-yellow: #EBCB8B;
|
||||
$nord-14: #A3BE8C;
|
||||
$nord-aurora-3: #A3BE8C;
|
||||
$nord-green: #A3BE8C;
|
||||
$nord-15: #B48EAD;
|
||||
$nord-aurora-4: #B48EAD;
|
||||
$nord-purple: #B48EAD;
|
||||
:root {
|
||||
--gfx-colour-nord-0: #2e3440;
|
||||
--gfx-colour-nord-polar-night-0: #2e3440;
|
||||
--gfx-colour-nord-black: #2e3440;
|
||||
--gfx-colour-nord-1: #3b4252;
|
||||
--gfx-colour-nord-polar-night-1: #3b4252;
|
||||
--gfx-colour-nord-2: #434c5e;
|
||||
--gfx-colour-nord-polar-night-2: #434c5e;
|
||||
--gfx-colour-nord-3: #4c566a;
|
||||
--gfx-colour-nord-polar-night-3: #4c566a;
|
||||
--gfx-colour-nord-4: #d8dee9;
|
||||
--gfx-colour-nord-snow-storm-0: #d8dee9;
|
||||
--gfx-colour-nord-5: #e5e9f0;
|
||||
--gfx-colour-nord-snow-storm-1: #e5e9f0;
|
||||
--gfx-colour-nord-6: #eceff4;
|
||||
--gfx-colour-nord-snow-storm-2: #eceff4;
|
||||
--gfx-colour-nord-white: #eceff4;
|
||||
--gfx-colour-nord-7: #8fbcbb;
|
||||
--gfx-colour-nord-frost-0: #8fbcbb;
|
||||
--gfx-colour-nord-8: #88c0d0;
|
||||
--gfx-colour-nord-frost-1: #88c0d0;
|
||||
--gfx-colour-nord-9: #81a1c1;
|
||||
--gfx-colour-nord-frost-2: #81a1c1;
|
||||
--gfx-colour-nord-10: #5e81ac;
|
||||
--gfx-colour-nord-frost-3: #5e81ac;
|
||||
--gfx-colour-nord-blue: #5e81ac;
|
||||
--gfx-colour-nord-11: #bf616a;
|
||||
--gfx-colour-nord-aurora-0: #bf616a;
|
||||
--gfx-colour-nord-red: #bf616a;
|
||||
--gfx-colour-nord-12: #d08770;
|
||||
--gfx-colour-nord-aurora-1: #d08770;
|
||||
--gfx-colour-nord-orange: #d08770;
|
||||
--gfx-colour-nord-13: #ebcb8b;
|
||||
--gfx-colour-nord-aurora-2: #ebcb8b;
|
||||
--gfx-colour-nord-yellow: #ebcb8b;
|
||||
--gfx-colour-nord-14: #a3be8c;
|
||||
--gfx-colour-nord-aurora-3: #a3be8c;
|
||||
--gfx-colour-nord-green: #a3be8c;
|
||||
--gfx-colour-nord-15: #b48ead;
|
||||
--gfx-colour-nord-aurora-4: #b48ead;
|
||||
--gfx-colour-nord-purple: #b48ead;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,29 @@
|
|||
// Brand colours from RCOM's raptor system
|
||||
// https://github.com/tr/rcom-arc_raptor-ui/blob/develop/packages/rcom-raptor-ui_atomic/styles/_colors.scss
|
||||
$tr-orange: #fa6400;
|
||||
$tr-dark-orange: #dc4300;
|
||||
$tr-light-orange: #ffa100;
|
||||
$tr-dark-grey: #404040;
|
||||
$tr-medium-grey: #666666;
|
||||
$tr-light-grey: #afafaf;
|
||||
$tr-muted-grey: #d0d0d0;
|
||||
$tr-contrast-grey: #949494;
|
||||
$tr-hover-background-grey: #f8f8f8;
|
||||
$tr-light-muted-grey: #f4f4f4;
|
||||
$tr-ultra-light-grey: #fafafa;
|
||||
$tr-dark-blue: #005da2;
|
||||
$tr-light-blue: #0099c4;
|
||||
$tr-muted-blue: #4386B9;
|
||||
$tr-lighter-blue: #7FACCE;
|
||||
$tr-superlight-blue: #e5eef5;
|
||||
$tr-dark-purple: #621f95;
|
||||
$tr-light-purple: #6e3ab7;
|
||||
$tr-dark-red: #a00000;
|
||||
$tr-light-red: #dc0a0a;
|
||||
$tr-dark-green: #387c2b;
|
||||
$tr-light-green: #77a22d;
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$ad-placeholder: #ffb1b1;
|
||||
:root {
|
||||
--gfx-colour-tr-orange: #fa6400;
|
||||
--gfx-colour-tr-dark-orange: #dc4300;
|
||||
--gfx-colour-tr-light-orange: #ffa100;
|
||||
--gfx-colour-tr-dark-grey: #404040;
|
||||
--gfx-colour-tr-medium-grey: #666666;
|
||||
--gfx-colour-tr-light-grey: #afafaf;
|
||||
--gfx-colour-tr-muted-grey: #d0d0d0;
|
||||
--gfx-colour-tr-contrast-grey: #949494;
|
||||
--gfx-colour-tr-hover-background-grey: #f8f8f8;
|
||||
--gfx-colour-tr-light-muted-grey: #f4f4f4;
|
||||
--gfx-colour-tr-ultra-light-grey: #fafafa;
|
||||
--gfx-colour-tr-dark-blue: #005da2;
|
||||
--gfx-colour-tr-light-blue: #0099c4;
|
||||
--gfx-colour-tr-muted-blue: #4386b9;
|
||||
--gfx-colour-tr-lighter-blue: #7facce;
|
||||
--gfx-colour-tr-superlight-blue: #e5eef5;
|
||||
--gfx-colour-tr-dark-purple: #621f95;
|
||||
--gfx-colour-tr-light-purple: #6e3ab7;
|
||||
--gfx-colour-tr-dark-red: #a00000;
|
||||
--gfx-colour-tr-light-red: #dc0a0a;
|
||||
--gfx-colour-tr-dark-green: #387c2b;
|
||||
--gfx-colour-tr-light-green: #77a22d;
|
||||
--gfx-colour-tr-black: #000;
|
||||
--gfx-colour-tr-white: #fff;
|
||||
--gfx-colour-tr-ad-placeholder: #ffb1b1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
// Reset
|
||||
@import 'reset/rules';
|
||||
@import 'reset/main';
|
||||
|
||||
@import 'fonts/font-faces';
|
||||
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
@import 'mixins';
|
||||
|
||||
// Style rules
|
||||
@import 'spacers/rules';
|
||||
@import 'borders/main';
|
||||
@import 'spacers/main';
|
||||
@import 'typography/rules';
|
||||
@import 'text/rules';
|
||||
@import 'layout/rules';
|
||||
@import 'text/main';
|
||||
@import 'layout/main';
|
||||
|
|
|
|||
|
|
@ -17,19 +17,19 @@ $blockquote-font-size: ($font-size-base * 1.5) !default;
|
|||
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$text-muted: $tr-medium-grey;
|
||||
$text-muted: var(--colour-tr-medium-grey);
|
||||
|
||||
$blockquote-small-color: $tr-medium-grey;
|
||||
$blockquote-small-color: var(--colour-tr-medium-grey);
|
||||
|
||||
$blockquote-border-color: $tr-dark-grey !default;
|
||||
$blockquote-border-color: var(--colour-tr-dark-grey) !default;
|
||||
$blockquote-border-width: 0.25rem !default;
|
||||
|
||||
$hr-border-color: rgba($black, 0.1) !default;
|
||||
$hr-border-color: rgba(var(--colour-tr-black), 0.1) !default;
|
||||
|
||||
// Headings
|
||||
$headings-font-family: $font-family-display;
|
||||
$headings-font-weight: 700 !default;
|
||||
$headings-color: $tr-dark-grey;
|
||||
$headings-color: var(--colour-tr-dark-grey);
|
||||
|
||||
$h1-font-size: $font-size-base * 2.5 !default;
|
||||
$h2-font-size: $font-size-base * 2 !default;
|
||||
|
|
|
|||
Loading…
Reference in a new issue