diff --git a/assets/styles/layouts/_inline-icons.scss b/assets/styles/layouts/_inline-icons.scss index b69275408..5c81ed87c 100644 --- a/assets/styles/layouts/_inline-icons.scss +++ b/assets/styles/layouts/_inline-icons.scss @@ -64,17 +64,87 @@ background: #be2ee4; background: linear-gradient(180deg,#be2ee4 0,#00a3ff); } + + &:first-child { + margin-right: 1.25rem; + } + + &.account { + padding: .25rem; + position: relative; + width: 210px; + height: 56px; + + &:after { display: none; } + + .acct-inner { + display: flex; + position: relative; + align-items: center; + width: 100%; + height: 100%; + background: $article-nav-acct-bg; + border-radius: 6px; + border: 3px solid $g8-storm; + + &:after { + content: ""; + position: absolute; + right: 1rem; + width: 0; + height: 0; + border-style: solid; + border-width: 5px 5px 0 5px; + border-color: $g16-pearl transparent transparent transparent; + } + } + + .acct-icon { + margin: 0 .9rem 0 .5rem; + border-radius: 50%; + height: 28px; + width: 28px; + background: linear-gradient(45deg,#00a3ff,#67d74e); + color: $g20-white; + text-align: center; + line-height: 0; + overflow: hidden; + .icon { + margin-left: -.1rem; + font-size: 2rem; + } + } + + .acct-label { + .username { color: $g16-pearl; font-weight: $medium; font-size: .85rem; line-height: 1.2rem; } + .orgname { color: $g11-sidewalk; font-size: .75rem; } + } + + &.small { + width: 56px; + .acct-inner { + justify-content: center; + align-items: center; + &:after { display: none; } + } + .acct-icon { margin: 0 } + } + } } .nav-icon { - background: $g5-pepper; + display: flex; + justify-content: left; + align-items: center; color: $g20-white; width: 210px; + height: 56px; font-family: $rubik; font-weight: $medium; padding: .9rem 1.1rem; font-size: 1rem; position: relative; + background: $article-nav-icon-bg; .icon { display: inline-block; @@ -109,17 +179,12 @@ background: linear-gradient(90deg,#00a3ff 0,rgba(190,46,228,0)); } - &:first-child { - margin-right: 1.5rem; - } - &.small { display: flex; justify-content: center; align-items: center; padding: 0; width: 56px; - height: 56px; flex-direction: column; .icon { @@ -130,9 +195,15 @@ .nav-icon-label { padding: 0; margin-top: .75rem; - font-size: .7rem; + font-size: .67rem; line-height: 0; } } } } + +///////////////////////////////// MEDIA QUERIES //////////////////////////////// + +@include media(small) { + .article--content .nav-item:nth-child(2) {display: none;} +} diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index e051efdce..9dfaaa39c 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -159,6 +159,10 @@ $article-btn-text: $g20-white; $article-btn-hover: $b-pool; $article-btn-text-hover: $g20-white; +// Article UI nav icons +$article-nav-icon-bg: $g5-pepper; +$article-nav-acct-bg: $g3-castle; + // Error Page Colors $error-page-btn: $b-dodger; $error-page-btn-text: $g20-white; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index 84481ab46..94f35fad3 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -160,6 +160,10 @@ $article-btn-text: $g20-white !default; $article-btn-hover: $b-dodger !default; $article-btn-text-hover: $g20-white !default; +// Article UI nav icons +$article-nav-icon-bg: $g6-smoke !default; +$article-nav-acct-bg: $g5-pepper !default; + // Error Page Colors $error-page-btn: $b-dodger !default; $error-page-btn-text: $g20-white !default; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index 9793b5679..25d5822ca 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -9,7 +9,7 @@ enterprise_all: true #enterprise_some: true #cloud_all: true cloud_some: true -draft: true +#draft: true "v2.0/tags": [influxdb, functions] related: - /v2.0/write-data/ @@ -19,7 +19,14 @@ related: This is a paragraph. Lorem ipsum dolor ({{< icon "trash" >}}) sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo. -{{< nav-icon "dashboards" >}} +{{< nav-icon "account" >}} +{{< nav-icon "data" >}} +{{< nav-icon "explore" >}} +{{< nav-icon "org" >}} +{{< nav-icon "boards" >}} +{{< nav-icon "tasks" >}} +{{< nav-icon "alerts" >}} +{{< nav-icon "settings" >}} ## h2 This is a header2 This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo. diff --git a/layouts/shortcodes/nav-icon.html b/layouts/shortcodes/nav-icon.html index 75d8e1e63..c5b3604af 100644 --- a/layouts/shortcodes/nav-icon.html +++ b/layouts/shortcodes/nav-icon.html @@ -4,11 +4,11 @@ {{ .Scratch.Set "icon" "influx-icon" }} {{ .Scratch.Set "title" "username (org-name)" }} {{ .Scratch.Set "short_title" "User" }} -{{ else if or (eq $navIcon "data-explorer") (eq $navIcon "data explorer") }} +{{ else if or (eq $navIcon "data-explorer") (eq $navIcon "data explorer") (eq $navIcon "explore") }} {{ .Scratch.Set "icon" "data-explorer" }} {{ .Scratch.Set "title" "Data Explorer" }} {{ .Scratch.Set "short_title" "Explore" }} -{{ else if eq $navIcon "dashboards" }} +{{ else if or (eq $navIcon "dashboards") (eq $navIcon "boards") }} {{ .Scratch.Set "icon" "dashboards" }} {{ .Scratch.Set "title" "Dashboards" }} {{ .Scratch.Set "short_title" "Dashboards" }} @@ -21,7 +21,7 @@ {{ .Scratch.Set "icon" "bell" }} {{ .Scratch.Set "title" "Alerts" }} {{ .Scratch.Set "short_title" "Alerts" }} -{{ else if or (eq $navIcon "disks") (eq $navIcon "load data") (eq $navIcon "load-data") }} +{{ else if or (eq $navIcon "disks") (eq $navIcon "load data") (eq $navIcon "load-data") (eq $navIcon "data") }} {{ .Scratch.Set "icon" "disks-nav" }} {{ .Scratch.Set "title" "Load Data" }} {{ .Scratch.Set "short_title" "Data" }} @@ -29,26 +29,51 @@ {{ .Scratch.Set "icon" "wrench-nav" }} {{ .Scratch.Set "title" "Settings" }} {{ .Scratch.Set "short_title" "Settings" }} +{{ else if or (eq $navIcon "org") (eq $navIcon "organization") }} + {{ .Scratch.Set "icon" "users-trio" }} + {{ .Scratch.Set "title" "Organization" }} + {{ .Scratch.Set "short_title" "Org" }} {{ end }} -{{ $icon := .Scratch.Get "icon" }} -{{ $title := .Scratch.Get "title" }} -{{ $shortTitle := .Scratch.Get "short_title" }} - -
-
- -
- {{ $shortTitle }} +{{ if or (eq $navIcon "profile") (eq $navIcon "account") }} +
+ +
-
- -
-
- -
- {{ $title }} +{{ else }} + {{ $icon := .Scratch.Get "icon" }} + {{ $title := .Scratch.Get "title" }} + {{ $shortTitle := .Scratch.Get "short_title" }} +
+
+
+ +
+ {{ $shortTitle }} +
+
+
+
+
+ +
+ {{ $title }} +
+
-
+{{ end }}