diff --git a/packages/docs/src/app/components/navbar/_navbar-theme.scss b/packages/docs/src/app/components/navbar/_navbar-theme.scss index aa2df7baa..fcd46b122 100644 --- a/packages/docs/src/app/components/navbar/_navbar-theme.scss +++ b/packages/docs/src/app/components/navbar/_navbar-theme.scss @@ -1,4 +1,4 @@ -@mixin mc-navbar-theme($theme) { +@mixin mc-docs-navbar-theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); $primary: map-get($theme, primary); diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts index b9ce5857a..75c39bfc2 100644 --- a/packages/docs/src/app/shared/documentation-items/documentation-items.ts +++ b/packages/docs/src/app/shared/documentation-items/documentation-items.ts @@ -155,6 +155,18 @@ const DOCS: { [key: string]: DocCategory[] } = { name: 'Autocomplete', summary: '', examples: ['autocomplete-types'] + }, + { + id: 'tags-input', + name: 'Tags input', + summary: '', + examples: ['tags-input-types'] + }, + { + id: 'tags-autocomplete', + name: 'Tags autocomplete', + summary: '', + examples: ['tags-autocomplete-types'] } ] }, @@ -199,6 +211,12 @@ const DOCS: { [key: string]: DocCategory[] } = { name: 'Divider', summary: '', examples: ['divider-types'] + }, + { + id: 'tabs', + name: 'Tabs', + summary: '', + examples: ['tabs-types'] } ] }, @@ -256,6 +274,12 @@ const DOCS: { [key: string]: DocCategory[] } = { name: 'Tree', summary: '', examples: ['tree-types'] + }, + { + id: 'tags-list', + name: 'Tags list', + summary: '', + examples: ['tags-list-types'] } ] } diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss index 39f05efd3..dcfb9e592 100644 --- a/packages/docs/src/app/shared/example-viewer/example-viewer.scss +++ b/packages/docs/src/app/shared/example-viewer/example-viewer.scss @@ -91,6 +91,8 @@ .docs-example-viewer-body { padding: 16px; + + overflow: auto; } .docs-example-source__switcher_hide { diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss index fe3803c36..0a0d549ea 100644 --- a/packages/docs/src/main.scss +++ b/packages/docs/src/main.scss @@ -32,10 +32,12 @@ $typography: mc-typography-config(); @mixin docs-component-theme($theme) { @include mosaic-theme($theme); + @include layouts_for_breakpoint(); + @include layout-padding-margin(); @include mosaic-docs-app-theme($theme); @include layout-padding-margin(); @include mc-anchors-theme($theme); - @include mc-navbar-theme($theme); + @include mc-docs-navbar-theme($theme); @include mc-footer-theme($theme); @include mc-main-layout-theme($theme); @include mc-sidenav-theme($theme); diff --git a/packages/mosaic-examples/mosaic/alerts/alerts-overview/alerts-overview-example.css b/packages/mosaic-examples/mosaic/alerts/alerts-overview/alerts-overview-example.css index 8991851f0..6999d8a48 100644 --- a/packages/mosaic-examples/mosaic/alerts/alerts-overview/alerts-overview-example.css +++ b/packages/mosaic-examples/mosaic/alerts/alerts-overview/alerts-overview-example.css @@ -6,20 +6,6 @@ max-height: 100%; } -.flex-50 { - flex: 1 1 100%; - max-width: 50%; - max-height: 100%; - box-sizing: border-box; -} - -.flex-33 { - flex: 1 1 100%; - max-width: 33.33%; - max-height: 100%; - box-sizing: border-box; -} - .mc-column-container { margin-left: 15px; margin-right: 15px; diff --git a/packages/mosaic-examples/mosaic/navbar/module.ts b/packages/mosaic-examples/mosaic/navbar/module.ts new file mode 100644 index 000000000..217ac88a6 --- /dev/null +++ b/packages/mosaic-examples/mosaic/navbar/module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { McIconModule } from '@ptsecurity/mosaic/icon'; +import { McNavbarModule } from '@ptsecurity/mosaic/navbar'; + +import { NavbarOverviewExample } from './navbar-overview/navbar-overview-example'; + + +const EXAMPLES = [ + NavbarOverviewExample +]; + +@NgModule({ + imports: [ + BrowserModule, + McNavbarModule, + McIconModule + ], + declarations: EXAMPLES, + exports: EXAMPLES +}) +export class NavbarExamplesModule { +} diff --git a/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.css b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.css new file mode 100644 index 000000000..7b3b660b2 --- /dev/null +++ b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.css @@ -0,0 +1,7 @@ +.logo { + margin-top: 5px; +} + +.demo-container { + margin-bottom: 10px; +} diff --git a/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.html b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.html new file mode 100644 index 000000000..8415fbc51 --- /dev/null +++ b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.html @@ -0,0 +1,50 @@ +
+ + + + + + + + + + Brand + + + + Left icon + + + + Left icon + + + + In-progress + + + + Disabled in-progress + + + Right Icon + + + + + + + + + + + Right Icon + + + + + + + + +
diff --git a/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.ts b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.ts new file mode 100644 index 000000000..399eadb3a --- /dev/null +++ b/packages/mosaic-examples/mosaic/navbar/navbar-overview/navbar-overview-example.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + + +/** + * @title Navbar + */ +@Component({ + selector: 'navbar-overview-example', + templateUrl: 'navbar-overview-example.html', + styleUrls: ['navbar-overview-example.css'] +}) +export class NavbarOverviewExample {} diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-fixed/splitter-fixed-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-fixed/splitter-fixed-example.css index cdda22ab4..4a0e841ce 100644 --- a/packages/mosaic-examples/mosaic/splitter/splitter-fixed/splitter-fixed-example.css +++ b/packages/mosaic-examples/mosaic/splitter/splitter-fixed/splitter-fixed-example.css @@ -12,7 +12,3 @@ mc-splitter { div[mc-splitter-area] { background: #c5c0c0 } - -.flex { - flex: 1; -} diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-nested/splitter-nested-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-nested/splitter-nested-example.css index 4d7ade7ca..d7ef6f16c 100644 --- a/packages/mosaic-examples/mosaic/splitter/splitter-nested/splitter-nested-example.css +++ b/packages/mosaic-examples/mosaic/splitter/splitter-nested/splitter-nested-example.css @@ -19,11 +19,3 @@ mc-splitter.without-border { .nested-splitter > div[mc-splitter-area] { background: #9f9f9f; } - -.flex { - flex: 1; -} - -.layout-column { - flex-direction: column; -} diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-overview/splitter-overview-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-overview/splitter-overview-example.css index 4965c0979..98467ee90 100644 --- a/packages/mosaic-examples/mosaic/splitter/splitter-overview/splitter-overview-example.css +++ b/packages/mosaic-examples/mosaic/splitter/splitter-overview/splitter-overview-example.css @@ -7,7 +7,3 @@ mc-splitter { div[mc-splitter-area] { background: #c5c0c0 } - -.flex { - flex: 1; -} diff --git a/packages/mosaic-examples/mosaic/splitter/splitter-vertical/splitter-vertical-example.css b/packages/mosaic-examples/mosaic/splitter/splitter-vertical/splitter-vertical-example.css index 1692b2fe8..3b8751569 100644 --- a/packages/mosaic-examples/mosaic/splitter/splitter-vertical/splitter-vertical-example.css +++ b/packages/mosaic-examples/mosaic/splitter/splitter-vertical/splitter-vertical-example.css @@ -12,7 +12,3 @@ mc-splitter { div[mc-splitter-area] { background: #c5c0c0 } - -.flex { - flex: 1; -} diff --git a/packages/mosaic-examples/mosaic/tabs/module.ts b/packages/mosaic-examples/mosaic/tabs/module.ts new file mode 100644 index 000000000..f02d2d5da --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { McTabsModule } from '@ptsecurity/mosaic/tabs'; + +import { TabsLightExample } from './tabs-light-overview/tabs-light-example'; +import { TabsOverviewExample } from './tabs-overview/tabs-overview-example'; +import { TabsStretchExample } from './tabs-stretch-overview/tabs-stretch-example'; + + +const EXAMPLES = [ + TabsOverviewExample, + TabsLightExample, + TabsStretchExample +]; + +@NgModule({ + imports: [ + BrowserModule, + McTabsModule + ], + declarations: EXAMPLES, + exports: EXAMPLES +}) +export class TabsExamplesModule {} diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.css b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.html b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.html new file mode 100644 index 000000000..6dc8e53f5 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.html @@ -0,0 +1,11 @@ + + + Chuck Norris counted to infinity. Twice. + + + Chuck Norris can speak braille. + + + nothing + + diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.ts b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.ts new file mode 100644 index 000000000..ad2b6c815 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/tabs-light-overview/tabs-light-example.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + + +/** + * @title Navbar + */ +@Component({ + selector: 'tabs-light-example', + templateUrl: 'tabs-light-example.html', + styleUrls: ['tabs-light-example.css'] +}) +export class TabsLightExample {} diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.css b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.html b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.html new file mode 100644 index 000000000..00d457d4e --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.html @@ -0,0 +1,14 @@ + + + Fact 1 + Chuck Norris can hear sign language. + + + Fact 2 + Chuck Norris makes onions cry. + + + Fact 3 + nothing + + diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.ts b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.ts new file mode 100644 index 000000000..056a23ca9 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/tabs-overview/tabs-overview-example.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + + +/** + * @title Navbar + */ +@Component({ + selector: 'tabs-overview-example', + templateUrl: 'tabs-overview-example.html', + styleUrls: ['tabs-overview-example.css'] +}) +export class TabsOverviewExample {} diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.css b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.html b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.html new file mode 100644 index 000000000..e374ae1ef --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.html @@ -0,0 +1,11 @@ + + + Chuck Norris knows Victoria's secret. + + + Chuck Norris can drown a fish. + + + Chuck Norris narrates Morgan Freeman's life. + + diff --git a/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.ts b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.ts new file mode 100644 index 000000000..d1db84864 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tabs/tabs-stretch-overview/tabs-stretch-example.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + + +/** + * @title Navbar + */ +@Component({ + selector: 'tabs-stretch-example', + templateUrl: 'tabs-stretch-example.html', + styleUrls: ['tabs-stretch-example.css'] +}) +export class TabsStretchExample {} diff --git a/packages/mosaic/navbar/navbar.md b/packages/mosaic/navbar/navbar.md new file mode 100644 index 000000000..dbacb55f8 --- /dev/null +++ b/packages/mosaic/navbar/navbar.md @@ -0,0 +1 @@ + diff --git a/packages/mosaic/tabs/tabs.md b/packages/mosaic/tabs/tabs.md index 67ada65a7..23119dd6b 100644 --- a/packages/mosaic/tabs/tabs.md +++ b/packages/mosaic/tabs/tabs.md @@ -1,8 +1,8 @@ -| Attribute | Description | -|--------------------|-----------------------------------------------------------------------------| -| `mc-tab-group` | | -| `mc-tab` | | +#### Default tabs + -### Theming +### Light tabs + -### Accessibility \ No newline at end of file +### Stretch tabs + diff --git a/packages/mosaic/tags/tags-autocomplete.md b/packages/mosaic/tags/tags-autocomplete.md new file mode 100644 index 000000000..55f3190da --- /dev/null +++ b/packages/mosaic/tags/tags-autocomplete.md @@ -0,0 +1 @@ + diff --git a/packages/mosaic/tags/tags-input.md b/packages/mosaic/tags/tags-input.md new file mode 100644 index 000000000..b5d522131 --- /dev/null +++ b/packages/mosaic/tags/tags-input.md @@ -0,0 +1 @@ + diff --git a/packages/mosaic/tags/tags-list.md b/packages/mosaic/tags/tags-list.md new file mode 100644 index 000000000..ead81e70d --- /dev/null +++ b/packages/mosaic/tags/tags-list.md @@ -0,0 +1 @@ + diff --git a/packages/mosaic/tags/tags.md b/packages/mosaic/tags/tags.md index 5a2a85c64..ba92b8e50 100644 --- a/packages/mosaic/tags/tags.md +++ b/packages/mosaic/tags/tags.md @@ -1,11 +1,2 @@ #### Simple Tags - - -### Tags list - - -### Input tags - - -### Autocomplete tags - \ No newline at end of file + \ No newline at end of file