finished new nav icon styles
Scott Anderson
parent
b0ebe86ed7
commit
47f4f7c94c
|
|
@ -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;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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" }}
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon small">
|
||||
<span class ="icon icon-ui-{{ $icon }}"></span>
|
||||
<div class="nav-icon-label">
|
||||
{{ $shortTitle }}
|
||||
{{ if or (eq $navIcon "profile") (eq $navIcon "account") }}
|
||||
<div class="nav-items">
|
||||
<div class="nav-item account small">
|
||||
<div class="acct-inner">
|
||||
<div class="acct-icon">
|
||||
<span class="icon icon-ui-user"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item account">
|
||||
<div class="acct-inner">
|
||||
<div class="acct-icon"><span class="icon icon-ui-user"></span></div>
|
||||
<div class="acct-label">
|
||||
<div class="username">username</div>
|
||||
<div class="orgname">org-name</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<span class ="icon icon-ui-{{ $icon }}"></span>
|
||||
<div class="nav-icon-label">
|
||||
{{ $title }}
|
||||
{{ else }}
|
||||
{{ $icon := .Scratch.Get "icon" }}
|
||||
{{ $title := .Scratch.Get "title" }}
|
||||
{{ $shortTitle := .Scratch.Get "short_title" }}
|
||||
<div class="nav-items">
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon small">
|
||||
<span class ="icon icon-ui-{{ $icon }}"></span>
|
||||
<div class="nav-icon-label">
|
||||
{{ $shortTitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<span class ="icon icon-ui-{{ $icon }}"></span>
|
||||
<div class="nav-icon-label">
|
||||
{{ $title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue