mirror of
https://github.com/primer/css.git
synced 2024-12-23 22:24:11 +03:00
Fix typos in docs/content (#1543)
This commit is contained in:
parent
99df9c9f28
commit
95bc6951fe
@ -92,7 +92,7 @@ Add an additional optional class to the `.blankslate` to change its appearance.
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used toghether.
|
**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used together.
|
||||||
|
|
||||||
### Add border
|
### Add border
|
||||||
|
|
||||||
|
@ -131,7 +131,7 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
|
|||||||
|
|
||||||
### Invisible button
|
### Invisible button
|
||||||
|
|
||||||
When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms.
|
When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.
|
||||||
|
|
||||||
```html live
|
```html live
|
||||||
<button class="btn btn-invisible" type="button">Cancel</button>
|
<button class="btn btn-invisible" type="button">Cancel</button>
|
||||||
|
@ -40,7 +40,7 @@ of the sidebar position.
|
|||||||
|
|
||||||
### Dividers
|
### Dividers
|
||||||
|
|
||||||
Use `Layout--divided` in conjuction with a `Layout-divider` to show a divider between the main content and the sidebar.
|
Use `Layout--divided` in conjunction with a `Layout-divider` to show a divider between the main content and the sidebar.
|
||||||
Flowing as row:
|
Flowing as row:
|
||||||
- default: shows a `1px` line between main and sidebar
|
- default: shows a `1px` line between main and sidebar
|
||||||
- `Layout-divider--flowRow-shallow`: shows a filled `8px` divider.
|
- `Layout-divider--flowRow-shallow`: shows a filled `8px` divider.
|
||||||
|
@ -426,7 +426,7 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
|||||||
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
|
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
|
||||||
|
|
||||||
```html live title="subnav"
|
```html live title="subnav"
|
||||||
<nav class="subnav" aria-label="Respository">
|
<nav class="subnav" aria-label="Repository">
|
||||||
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
|
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
|
||||||
<a class="subnav-item" href="#url">Item 2</a>
|
<a class="subnav-item" href="#url">Item 2</a>
|
||||||
<a class="subnav-item" href="#url">Item 3</a>
|
<a class="subnav-item" href="#url">Item 3</a>
|
||||||
|
@ -156,7 +156,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
|||||||
Enable live filtering of list items within a `.select-menu-list` with a search input. Only a handful of changes to your menu's markup are required:
|
Enable live filtering of list items within a `.select-menu-list` with a search input. Only a handful of changes to your menu's markup are required:
|
||||||
|
|
||||||
- Add the text input, housed in `.select-menu-filters`, before the `.select-menu-list`.
|
- Add the text input, housed in `.select-menu-filters`, before the `.select-menu-list`.
|
||||||
- Add two attritubes, `data-filterable-for` and `data-filterable-type`, to the `.select-menu-list` to scope the filter to the list.
|
- Add two attributes, `data-filterable-for` and `data-filterable-type`, to the `.select-menu-list` to scope the filter to the list.
|
||||||
|
|
||||||
There are no required changes for the `.select-menu-item`s.
|
There are no required changes for the `.select-menu-item`s.
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ When text reaches lengths larger than existing container, shorten with ellipses.
|
|||||||
|
|
||||||
## Truncate
|
## Truncate
|
||||||
|
|
||||||
Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text. `.Truncate-text` must be a direct decendent of `.Truncate`.
|
Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text. `.Truncate-text` must be a direct descendant of `.Truncate`.
|
||||||
|
|
||||||
```html live
|
```html live
|
||||||
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||||
|
@ -75,7 +75,7 @@ Change the color mode of your OS to see the switch between the `data-light-theme
|
|||||||
|
|
||||||
## Custom color variables
|
## Custom color variables
|
||||||
|
|
||||||
It's recommended to use the [functional variables](/support/color-system#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Somtimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin.
|
It's recommended to use the [functional variables](/support/color-system#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Sometimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin.
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@include color-variables(
|
@include color-variables(
|
||||||
|
Loading…
Reference in New Issue
Block a user