Skip to content

Commit

Permalink
feat(clayui.com): Update content structure: Checkbox, Management Tool…
Browse files Browse the repository at this point in the history 
…bar, Select Box, Sticker, Table & Tabs
  • Loading branch information
@kresimir-coko
kresimir-coko committed May 15, 2020
1 parent 76108ed commit 0fcd54a
Show file tree
Hide file tree
Showing 12 changed files with 217 additions and 226 deletions.
203 changes: 76 additions & 127 deletions clayui.com/content/docs/components/css-checkbox-radio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,11 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-c
<div class="nav-toc-absolute">
<div class="nav-toc">

- [Checkboxes and Radios](#checkboxes-and-radios)
- [Default (stacked)](<#default-(stacked)>)
- [Inline](#inline)
- [Without labels](#without-labels)
- [Custom Checkboxes and radios](#custom-checkboxes-and-radios)
- [Checkboxes](#checkboxes)
- [Radios](#radios)
- [Inline](#inline)
- [Disabled](#disabled)
- [Default](#default)
- [Inline](#css-inline)
- [Disabled](#disabled)
- [Without labels](#without-labels)
- [Custom](#custom)

</div>
</div>
Expand All @@ -24,15 +20,15 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-c
Don't forget to check <a href="https://www.w3.org/TR/wai-aria-practices/#checkbox">WAI-ARIA</a> accessibility pratices for checkboxes when writting your markup.
</div>

## Checkboxes and Radios

Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
By [Bootstrap](https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios)

### Default (stacked)
# Default

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

## Default Checkboxes

<div class="sheet-example">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
Expand Down Expand Up @@ -74,6 +70,8 @@ By default, any number of checkboxes and radios that are immediate sibling will
</div>
```

## Default Radios

<div class="sheet-example">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
Expand Down Expand Up @@ -136,10 +134,12 @@ By default, any number of checkboxes and radios that are immediate sibling will
</div>
```

### Inline
# Inline(#css-inline)

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

## Checkbox

<div class="sheet-example">
<div class="form-check form-check-inline">
<label class="form-check-label">
Expand Down Expand Up @@ -181,6 +181,8 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
</div>
```

## Radio

<div class="sheet-example">
<div class="form-check form-check-inline">
<label class="form-check-label">
Expand Down Expand Up @@ -224,7 +226,64 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
</div>
```

### Without labels
# Disabled

Disable checkboxes or radios by adding a `disabled` prop.

<div class="sheet-example">
<div class="custom-control custom-radio">
<label>
<input disabled="" class="custom-control-input" id="radio1" name="customDisabledRadio" type="radio">
<span class="custom-control-label">
<span class="custom-control-label-text">Toggle this custom radio</span>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input disabled="" class="custom-control-input" type="checkbox" id="customDisabledCheck1"/>
<span class="custom-control-label">
<span class="custom-control-label-text">Check this custom checkbox</span>
</span>
</label>
</div>
</div>

```html
<div class="custom-control custom-radio">
<label>
<input
disabled=""
class="custom-control-input"
id="radio1"
name="customDisabledRadio"
type="radio"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Toggle this custom radio</span
>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input
disabled=""
class="custom-control-input"
type="checkbox"
id="customDisabledCheck1"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Check this custom checkbox</span
>
</span>
</label>
</div>
```

# Without labels

Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).

Expand Down Expand Up @@ -264,7 +323,7 @@ Remember to still provide some form of label for assistive technologies (for ins
</div>
```

## Custom Checkboxes and radios
# Custom

The two ways for you to structure the marking of a Checkbox and Radio:

Expand Down Expand Up @@ -296,7 +355,7 @@ Using the `id` binding engine with `<label />`and `<input />`.
</div>
```

### Checkboxes
## Custom Checkboxes

<div class="sheet-example">
<div class="custom-control custom-checkbox">
Expand Down Expand Up @@ -335,7 +394,7 @@ Custom checkboxes can also utilize the `:indeterminate` pseudo class when manual
</div>
</div>

### Radios
## Custom Radios

<div class="sheet-example">
<div class="custom-control custom-radio">
Expand Down Expand Up @@ -389,113 +448,3 @@ Custom checkboxes can also utilize the `:indeterminate` pseudo class when manual
</label>
</div>
```

### Inline

<div class="sheet-example">
<div class="custom-control custom-radio custom-control-inline">
<label>
<input checked="" class="custom-control-input" id="radio1" name="customInlineRadio" type="radio">
<span class="custom-control-label">
<span class="custom-control-label-text">Toggle this custom radio</span>
</span>
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<label>
<input class="custom-control-input" id="radio1" name="customInlineRadio" type="radio">
<span class="custom-control-label">
<span class="custom-control-label-text">Or toggle this other custom radio</span>
</span>
</label>
</div>
</div>

```html
<div class="custom-control custom-radio custom-control-inline">
<label>
<input
checked=""
class="custom-control-input"
id="radio1"
name="customInlineRadio"
type="radio"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Toggle this custom radio</span
>
</span>
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<label>
<input
class="custom-control-input"
id="radio1"
name="customInlineRadio"
type="radio"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Or toggle this other custom radio</span
>
</span>
</label>
</div>
```

### Disabled

<div class="sheet-example">
<div class="custom-control custom-radio">
<label>
<input disabled="" class="custom-control-input" id="radio1" name="customDisabledRadio" type="radio">
<span class="custom-control-label">
<span class="custom-control-label-text">Toggle this custom radio</span>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input disabled="" class="custom-control-input" type="checkbox" id="customDisabledCheck1"/>
<span class="custom-control-label">
<span class="custom-control-label-text">Check this custom checkbox</span>
</span>
</label>
</div>
</div>

```html
<div class="custom-control custom-radio">
<label>
<input
disabled=""
class="custom-control-input"
id="radio1"
name="customDisabledRadio"
type="radio"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Toggle this custom radio</span
>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input
disabled=""
class="custom-control-input"
type="checkbox"
id="customDisabledCheck1"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Check this custom checkbox</span
>
</span>
</label>
</div>
```
24 changes: 12 additions & 12 deletions clayui.com/content/docs/components/css-management-toolbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/toolbars/mana
Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="/docs/components/drop-down.html#alignment">Dropdown Alignment</a>.
</div>

## Light
# Light

<div class="sheet-example">
<nav class="management-bar management-bar-light navbar navbar-expand-md">
Expand Down Expand Up @@ -187,7 +187,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/toolbars/mana
</nav>
```

## Primary
# Primary

<div class="sheet-example">
<nav class="management-bar management-bar-primary navbar navbar-expand-md">
Expand Down Expand Up @@ -343,7 +343,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/toolbars/mana
</nav>
```

## Overlay
# Overlay

Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to create an overlay on top of the navbar with alternate content, useful for expanding search bars or an alternate navbar that depends on some state in your application. Toggle the `navbar-overlay`'s visibility by adding or removing the class `show` to `navbar-overlay`.

Expand Down Expand Up @@ -740,7 +740,7 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

### Breakpoints
## Breakpoints

`navbar-overlay-up` overlays the navbar at all screen widths.
`navbar-overlay-lg-down`: 1199px and below
Expand Down Expand Up @@ -1135,9 +1135,9 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

## Only Search
# Only Search

### Always Open
## Always Open

<div class="sheet-example">
<nav class="management-bar management-bar-light navbar navbar-expand-md">
Expand Down Expand Up @@ -1217,7 +1217,7 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

### Collapses in Mobile
## Collapses in Mobile

<div class="sheet-example">
<nav class="management-bar management-bar-light navbar navbar-expand-md">
Expand Down Expand Up @@ -1325,9 +1325,9 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

## Search(#css-markup-search)
# Search(#css-markup-search)

### Summary
## Summary

<div class="sheet-example">
<nav class="tbar subnav-tbar subnav-tbar-primary">
Expand Down Expand Up @@ -1363,7 +1363,7 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

### Results
## Results

<div class="sheet-example">
<nav class="tbar subnav-tbar subnav-tbar-primary">
Expand Down Expand Up @@ -1414,7 +1414,7 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

### Results with Filter
## Results with Filter

<div class="sheet-example">
<nav class="tbar tbar-inline-md-down subnav-tbar subnav-tbar-primary">
Expand Down Expand Up @@ -1572,7 +1572,7 @@ Use `navbar-overlay navbar-overlay-up` on any direct descendant of navbar to cre
</nav>
```

## Using Buttons
# Using Buttons

<div class="sheet-example">
<nav class="management-bar management-bar-primary navbar navbar-expand-md">
Expand Down
Loading

0 comments on commit 0fcd54a

Please sign in to comment.