Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation for Implement no-* attributes for <box> #1042

Merged
merged 2 commits into from
Mar 3, 2020
Merged

Documentation for Implement no-* attributes for <box> #1042

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e28606
Update User guide
nbriannl Feb 14, 2020
0d916d9
Update user guide
nbriannl Feb 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions docs/userGuide/syntax/boxes.mbdf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,38 @@ As <code>light</code> and <code>seamless</code> are mutually exclusive styles, <
</span>
</include>

**You can remove the background, icon and borders of preset styles.**

<box type="info">
Custom styles (<code>background-color</code>, <code>border-color</code>, <code>border-left-color</code>, <code>icon</code>) as introduced in the previous section, takes precedence over and are not affected by <code>no-background</code>, <code>no-border</code>, <code>no-icon</code>
</box>


<include src="outputBox.md" boilerplate >
<span id="code">

```html
<box no-icon no-background type="success">
success box without a tick icon and backgound
</box>

<box no-border type="definition" light>
definition type box, light style without border
</box>
```
</span>

<span id="output">
<box no-icon no-background type="success">
success box without a tick icon and backgound
</box>

<box no-border type="definition" light>
definition type box, light style without border
</box>
</span>
</include>

**You can also use icons and resize them accordingly.**

<include src="outputBox.md" boilerplate >
Expand Down Expand Up @@ -264,6 +296,12 @@ header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>heading <br> (de
type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
light | `Boolean` | `false` | Uses a light color scheme for the box.
seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated.
no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`.
no-backgound | `Boolean` | `false` | Removes background, except if styled by `backgound-color` option.
no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The attributes list should ideally be sorted. Noted that we have some of the entries being off unfortunately. Perhaps we can move these attributes to above "type" to make it less messy?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. I assumed we were separating String options from the Boolean options. I'll move it above "type" for now.

type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
light | `Boolean` | `false` | Uses a light color scheme for the box.
seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated.

<span id="short" class="d-none">
```html
Expand Down