diff --git a/contents/_includes/covers/split-navigation.njk b/contents/_includes/covers/split-navigation.njk new file mode 100644 index 0000000..d724e06 --- /dev/null +++ b/contents/_includes/covers/split-navigation.njk @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 9ff2b39..1445439 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -132,6 +132,7 @@ eleventyExcludeFromCollections: true {% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %} {% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %} {% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %} + {% pattern "Split navigation" %}{% include "covers/split-navigation.njk" %}{% endpattern %} {% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %} {% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %} diff --git a/contents/split-navigation.md b/contents/split-navigation.md new file mode 100644 index 0000000..d3c12f7 --- /dev/null +++ b/contents/split-navigation.md @@ -0,0 +1,52 @@ +--- +layout: layouts/post.njk +title: Split navigation +description: Create a split navigation with CSS flexbox +keywords: css flexbox, css menu, css navigation, css split navigation +--- + +## HTML + +```html + +``` + +## CSS + +```css +.split-navigation { + /* Content is centered horizontally */ + align-items: center; + display: flex; + + /* Reset styles */ + list-style-type: none; + margin: 0; + padding: 0 0 0.5rem 0; +} + +.split-navigation__item { + margin-right: 0.25rem; + + /* Demo */ + width: 1.25rem; +} + +.split-navigation__item--right { + /* Sticks to the right */ + margin-left: auto; + margin-right: 0; +} +``` + +{% demo %}{% include "covers/split-navigation.njk" %}{% enddemo %} diff --git a/pages/split-navigation/index.tsx b/pages/split-navigation/index.tsx deleted file mode 100644 index b31da5e..0000000 --- a/pages/split-navigation/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
  • - ... -
    • - - -
  • - ... -
    • - -`} - css={` - .container { - /* Content is centered horizontally */ - align-items: center; - display: flex; - - /* Reset styles */ - list-style-type: none; - margin: 0; - } - - .container__item--right { - /* Sticks to the right */ - margin-left: auto; - } - `} - > -
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    -     - - -     - ); -}; - -export default Details; diff --git a/patterns/split-navigation/Cover.tsx b/patterns/split-navigation/Cover.tsx deleted file mode 100644 index 567480d..0000000 --- a/patterns/split-navigation/Cover.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 119b3b1..c547d84 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -81,6 +81,7 @@ @import './patterns/simple-grid'; @import './patterns/slider'; @import './patterns/spin-button'; +@import './patterns/split-navigation'; @import './patterns/split-screen'; @import './patterns/stacked-cards'; @import './patterns/stamp-border'; diff --git a/styles/patterns/_split-navigation.scss b/styles/patterns/_split-navigation.scss new file mode 100644 index 0000000..489bafa --- /dev/null +++ b/styles/patterns/_split-navigation.scss @@ -0,0 +1,27 @@ +.split-navigation { + /* Content is centered horizontally */ + align-items: center; + display: flex; + + /* Reset styles */ + list-style-type: none; + margin: 0; + padding: 0 0 0.5rem 0; + + /* Demo */ + border-bottom: 1px solid #d1d5db; + width: 8rem; +} + +.split-navigation__item { + margin-right: 0.25rem; + + /* Demo */ + width: 1.25rem; +} + +.split-navigation__item--right { + /* Sticks to the right */ + margin-left: auto; + margin-right: 0; +} \ No newline at end of file