From 1bfb6775a21ff7d989238f1e13122dcd4e723cfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= Date: Thu, 21 May 2020 09:51:45 +0200 Subject: [PATCH] feat(clayui.com): Add Markup/CSS page for Toolbar component --- .../content/docs/components/css-toolbar.md | 640 ++++++++++++++++++ 1 file changed, 640 insertions(+) create mode 100644 clayui.com/content/docs/components/css-toolbar.md diff --git a/clayui.com/content/docs/components/css-toolbar.md b/clayui.com/content/docs/components/css-toolbar.md new file mode 100644 index 0000000000..bb64f62a6c --- /dev/null +++ b/clayui.com/content/docs/components/css-toolbar.md @@ -0,0 +1,640 @@ +--- +title: 'Toolbar' +description: 'Toolbar used as part of some Clay components like Management Toolbar and Modal' +lexiconDefinition: 'https://liferay.design/lexicon/core-components/toolbars/' +--- + +
+
+ +- [Subnav](#subnav) + - [Subnav Light](#subnav-light) + - [Subnav Primary](#subnav-primary) + - [Subnav Primary Disabled](#subnav-primary-disabled) +- [Helper Classes](#helper-classes) + +
+
+ +
+ +
+ +```html + +``` + +## Subnav + +Subnavigation to use with main navigations such as [Management Toolbar](/docs/components/management-toolbar.html). + +
+ +
+ +```html + +``` + +### Subnav Light + +Subnavigation used in [Modals](/docs/components/modal.html) + +
+
+
+
+
+
+ + User Information + +
+
+
+ Step 1 of 2 +
+
+
+
+
+ +```html +
+
+
+
+
+ + User Information + +
+
+
+ Step 1 of 2 +
+
+
+
+``` + +### Subnav Primary + +Subnavigation used in [Management Toolbar](/docs/components/management-toolbar.html). + +
+ +
+ +```html + +``` + +### Subnav Primary Disabled + +Disabled sub-navigation used in [Management Toolbar](/docs/components/management-toolbar.html), just add `subnav-tbar-disabled`. The `disabled` attribute must be added to any `button` tag. The class `disabled` and attribute `tabindex="-1"` must be added to any `anchor` tag and clicks disabled via javascript. + +
+ +
+ +```html + +``` + +## Helper Classes + +### `tbar-inline-{xs|sm|md|lg|xl}-down` + +A helper class on `tbar` that turns `tbar-nav`, `tbar-item`, `tbar-section`, and `component-title` inline at specific breakpoints. + +### `tbar-nav-wrap` + +A helper class on `tbar-nav` that breaks `tbar-nav` content to new line when the container becomes too small. + +### `tbar-nav-shrink` + +A helper class on `tbar-nav` that makes it only as wide as its content, use with other `tbar-nav`'s.