WIP new nav icon styles
Scott Anderson
parent
0377c4bff3
commit
b0ebe86ed7
|
|
@ -48,24 +48,91 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
background: linear-gradient(to right, #00A3FF, #BE2EE4);
|
||||
font-family: $rubik;
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: 0 5px 5px 0;
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #be2ee4;
|
||||
background: linear-gradient(180deg,#be2ee4 0,#00a3ff);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
background: $g5-pepper;
|
||||
color: $g20-white;
|
||||
width: 210px;
|
||||
font-family: $rubik;
|
||||
font-weight: $medium;
|
||||
padding: .9rem 1.1rem;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
font-size: 1.65rem;
|
||||
vertical-align: middle;
|
||||
margin-right: 1.25rem;
|
||||
display: inline-block;
|
||||
font-size: 1.35rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $g20-white;
|
||||
font-weight: $medium;
|
||||
.nav-icon-label {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
z-index: 2;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
background: #be2ee4;
|
||||
background: linear-gradient(90deg,#be2ee4 0,rgba(190,46,228,0));
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
background: #00a3ff;
|
||||
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 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-icon-label {
|
||||
padding: 0;
|
||||
margin-top: .75rem;
|
||||
font-size: .7rem;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?9r9zke');
|
||||
src: url('fonts/icomoon.eot?9r9zke#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?9r9zke') format('truetype'),
|
||||
url('fonts/icomoon.woff?9r9zke') format('woff'),
|
||||
url('fonts/icomoon.svg?9r9zke#icomoon') format('svg');
|
||||
src: url('fonts/icomoon.eot?rgf1km');
|
||||
src: url('fonts/icomoon.eot?rgf1km#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?rgf1km') format('truetype'),
|
||||
url('fonts/icomoon.woff?rgf1km') format('woff'),
|
||||
url('fonts/icomoon.svg?rgf1km#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
|
|
@ -30,11 +31,8 @@
|
|||
.icon-ui-wrench-nav:before {
|
||||
content: "\e93d";
|
||||
}
|
||||
.icon-ui-eye-closed:before {
|
||||
content: "\e956";
|
||||
}
|
||||
.icon-ui-eye-open:before {
|
||||
content: "\e957";
|
||||
.icon-ui-user:before {
|
||||
content: "\e93e";
|
||||
}
|
||||
.icon-ui-chat:before {
|
||||
content: "\e93a";
|
||||
|
|
@ -42,12 +40,21 @@
|
|||
.icon-ui-bell:before {
|
||||
content: "\e93b";
|
||||
}
|
||||
.icon-ui-users-trio:before {
|
||||
content: "\e940";
|
||||
}
|
||||
.icon-ui-cloud:before {
|
||||
content: "\e93f";
|
||||
}
|
||||
.icon-ui-nav-chat:before {
|
||||
content: "\e941";
|
||||
}
|
||||
.icon-ui-eye-closed:before {
|
||||
content: "\e956";
|
||||
}
|
||||
.icon-ui-eye-open:before {
|
||||
content: "\e957";
|
||||
}
|
||||
.icon-ui-add-cell:before {
|
||||
content: "\e91f";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,54 @@
|
|||
{{ $navIcon := lower (.Get 0) | default "influx" }}
|
||||
|
||||
{{ if or (eq $navIcon "admin") (eq $navIcon "influx") }}
|
||||
{{ .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") }}
|
||||
{{ .Scratch.Set "icon" "data-explorer" }}
|
||||
{{ .Scratch.Set "title" "Data Explorer" }}
|
||||
{{ .Scratch.Set "short_title" "Explore" }}
|
||||
{{ else if eq $navIcon "dashboards" }}
|
||||
{{ .Scratch.Set "icon" "dashboards" }}
|
||||
{{ .Scratch.Set "title" "Dashboards" }}
|
||||
{{ .Scratch.Set "short_title" "Dashboards" }}
|
||||
{{ .Scratch.Set "short_title" "Boards" }}
|
||||
{{ else if eq $navIcon "tasks" }}
|
||||
{{ .Scratch.Set "icon" "calendar" }}
|
||||
{{ .Scratch.Set "title" "Tasks" }}
|
||||
{{ .Scratch.Set "short_title" "Tasks" }}
|
||||
{{ else if or (eq $navIcon "monitor") (eq $navIcon "alerts") (eq $navIcon "bell") }}
|
||||
{{ .Scratch.Set "icon" "bell" }}
|
||||
{{ .Scratch.Set "title" "Monitoring & Alerting" }}
|
||||
{{ .Scratch.Set "title" "Alerts" }}
|
||||
{{ .Scratch.Set "short_title" "Alerts" }}
|
||||
{{ else if or (eq $navIcon "disks") (eq $navIcon "load data") (eq $navIcon "load-data") }}
|
||||
{{ .Scratch.Set "icon" "disks-nav" }}
|
||||
{{ .Scratch.Set "title" "Load Data" }}
|
||||
{{ .Scratch.Set "short_title" "Data" }}
|
||||
{{ else if eq $navIcon "settings" }}
|
||||
{{ .Scratch.Set "icon" "wrench-nav" }}
|
||||
{{ .Scratch.Set "title" "Settings" }}
|
||||
{{ else if or (eq $navIcon "feedback") }}
|
||||
{{ .Scratch.Set "icon" "nav-chat" }}
|
||||
{{ .Scratch.Set "title" "Feedback" }}
|
||||
{{ .Scratch.Set "short_title" "Settings" }}
|
||||
{{ end }}
|
||||
|
||||
{{ $icon := .Scratch.Get "icon" }}
|
||||
{{ $title := .Scratch.Get "title" }}
|
||||
{{ $shortTitle := .Scratch.Get "short_title" }}
|
||||
|
||||
<div class="nav-icon">
|
||||
<strong><span class ="icon icon-ui-{{ $icon }}"></span> {{ $title }}</strong>
|
||||
<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>
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -69,7 +69,9 @@
|
|||
<glyph unicode="" glyph-name="bell" horiz-adv-x="961" d="M944.923 49.267l-35.234 60.859c-12.813 22.422-25.625 41.641-35.234 57.656-35.234 54.453-54.453 86.484-67.266 150.547l-44.844 214.61c-25.625 137.735-147.344 233.828-285.078 237.031h-6.406c-140.938 0-265.86-105.703-288.282-246.641l-28.828-182.578c-12.813-86.484-38.438-131.328-86.484-208.203-6.406-12.813-16.016-25.625-22.422-41.641l-22.422-41.641c-25.625-41.641-25.625-96.094 0-137.735 19.219-44.844 67.266-70.469 118.516-70.469h214.61c12.813-54.453 64.063-96.094 124.922-96.094 57.656 0 112.109 41.641 124.922 96.094h214.61c48.047 0 99.297 25.625 124.922 70.469 22.422 41.641 22.422 96.094 0 137.735zM820.001-62.843h-679.063c-32.031 0-54.453 35.234-38.438 64.063l22.422 41.641c60.859 105.703 105.703 160.156 121.719 281.875l28.828 182.578c19.219 92.891 96.094 166.563 195.391 166.563h3.203c92.891 0 172.969-67.266 188.985-156.953l44.844-214.61c19.219-105.703 57.656-147.344 115.313-240.235l35.234-60.859c16.016-28.828-6.406-64.063-38.438-64.063z" />
|
||||
<glyph unicode="" glyph-name="disks-nav" d="M512 706.909c-162.909 0-325.818-41.891-325.818-139.636v-558.545c0-97.745 162.909-139.636 325.818-139.636s325.818 41.891 325.818 139.636v558.545c0 97.745-162.909 139.636-325.818 139.636zM744.727 385.745c-13.964-13.964-93.091-51.2-232.727-51.2s-218.764 37.236-232.727 51.2v79.127c60.509-23.273 148.945-37.236 232.727-37.236s172.218 13.964 232.727 37.236v-79.127zM744.727 199.564c-13.964-13.964-93.091-51.2-232.727-51.2s-218.764 37.236-232.727 51.2v79.127c60.509-23.273 148.945-37.236 232.727-37.236s172.218 13.964 232.727 37.236v-79.127zM512 613.818c130.327 0 204.8-27.927 228.073-46.545-23.273-18.618-97.745-46.545-228.073-46.545s-204.8 27.927-228.073 46.545c23.273 18.618 97.745 46.545 228.073 46.545zM512-37.818c-139.636 0-218.764 32.582-232.727 51.2v79.127c60.509-23.273 148.945-37.236 232.727-37.236s172.218 13.964 232.727 37.236v-79.127c-13.964-18.618-93.091-51.2-232.727-51.2z" />
|
||||
<glyph unicode="" glyph-name="wrench-nav" d="M186.182-177.455c-37.236 0-74.473 13.964-97.745 41.891-55.855 55.855-55.855 144.291 0 195.491l339.782 339.782c-4.655 27.927-9.309 51.2-9.309 74.473 0 153.6 125.673 279.273 279.273 279.273 41.891 0 88.436-9.309 130.327-32.582 13.964-4.655 23.273-18.618 23.273-32.582s-4.655-27.927-13.964-41.891l-121.018-121.018 37.236-37.236 121.018 121.018c9.309 9.309 23.273 13.964 41.891 13.964 13.964-4.655 27.927-9.309 32.582-23.273 18.618-41.891 27.927-83.782 27.927-125.673 0-153.6-125.673-279.273-279.273-279.273-23.273 0-46.545 4.655-69.818 9.309l-339.782-339.782c-27.927-27.927-65.164-41.891-102.4-41.891zM698.182 660.364c-102.4 0-186.182-83.782-186.182-186.182 0-23.273 4.655-46.545 13.964-69.818 4.655-18.618 4.655-37.236-9.309-51.2l-363.055-363.055c-18.618-18.618-18.618-46.545 0-65.164s46.545-18.618 65.164 0l363.055 363.055c13.964 13.964 32.582 18.618 51.2 9.309 23.273-9.309 46.545-13.964 69.818-13.964 102.4 0 186.182 83.782 186.182 186.182 0 4.655 0 9.309 0 18.618l-97.745-97.745c-18.618-18.618-46.545-18.618-65.164 0l-102.4 102.4c-13.964 9.309-18.618 18.618-18.618 32.582s4.655 23.273 13.964 32.582l97.745 102.4c-4.655 0-13.964 0-18.618 0z" />
|
||||
<glyph unicode="" glyph-name="user" d="M589.376 290.783c58.938 28.188 99.938 89.688 99.938 161.438 0 99.938-79.438 179.375-179.375 179.375s-179.375-79.438-179.375-179.375c0-71.75 41-130.688 99.938-161.438-84.563-20.5-176.813-120.438-176.813-233.188v-146.063c0-12.813 7.688-25.625 17.938-25.625h476.625c10.25 0 17.938 10.25 17.938 25.625v146.063c0 112.75-89.688 210.125-176.813 233.188z" />
|
||||
<glyph unicode="" glyph-name="cloud" d="M835.77-54.33h-646.539c-102.5 0-189.231 86.731-189.231 197.115 0 78.846 43.365 149.808 110.385 181.346 0 7.885 0 15.769 0 23.654 0 149.808 114.327 268.077 256.25 268.077 86.731 0 165.577-43.365 212.885-118.269 23.654 7.885 47.308 11.827 70.961 11.827 102.5 0 189.231-70.961 216.827-173.461 90.674-15.769 157.692-94.615 157.692-193.174 0-110.385-82.789-197.115-189.231-197.115zM366.635 537.016c-98.558 0-177.404-86.731-177.404-189.231 0-15.769 0-27.596 3.942-43.365l7.885-39.423-35.481-7.885c-51.25-11.827-86.731-59.135-86.731-114.327 0-67.019 47.308-118.269 110.385-118.269h646.539c59.135 0 110.385 51.25 110.385 118.269s-47.308 118.269-110.385 118.269h-39.423l-3.942 35.481c-7.885 78.846-70.961 137.981-141.924 137.981-23.654 0-47.308-7.885-70.961-19.711l-39.423-23.654-19.711 39.423c-23.654 67.019-86.731 106.442-153.75 106.442z" />
|
||||
<glyph unicode="" glyph-name="users-trio" horiz-adv-x="1332" d="M1181.314 224.158c43.563 41 69.188 102.5 69.188 164 0 130.688-102.5 230.625-230.625 230.625-46.125 0-89.688-12.813-125.563-35.875-20.5 107.625-112.75 187.063-228.063 187.063-117.875 0-207.563-82-228.063-189.625-35.875 23.063-76.875 35.875-125.563 35.875-130.688 0-230.625-102.5-230.625-230.625 0-64.063 25.625-120.438 69.188-164-82-46.125-151.188-143.5-151.188-253.688v-156.313c0-35.875 25.625-66.625 56.375-66.625h509.938c33.313 0 58.938 30.75 61.5 66.625v87.125h76.875v-87.125c0-35.875 25.625-66.625 56.375-66.625h509.938c33.313 0 58.938 30.75 61.5 66.625v156.313c0 110.188-71.75 207.563-151.188 256.25zM545.813-178.155h-474.063v143.5c0 97.375 84.563 192.188 158.875 210.125 15.375 5.125 25.625 17.938 28.188 33.313s-5.125 30.75-20.5 38.438c-51.25 28.188-84.563 79.438-84.563 138.375 0 87.125 66.625 153.75 153.75 153.75s153.75-69.188 153.75-153.75c0-58.938-33.313-112.75-84.563-138.375-12.813-7.688-20.5-23.063-20.5-38.438s12.813-28.188 28.188-33.313c76.875-20.5 158.875-110.188 158.875-210.125v-143.5zM704.688-24.405h-76.875c-2.563 107.625-74.313 199.875-151.188 248.563 23.063 20.5 41 48.688 53.813 79.438 17.938 12.813 35.875 23.063 56.375 25.625 15.375 5.125 25.625 17.938 28.188 33.313s-5.125 30.75-20.5 38.438c-20.5 12.813-41 28.188-53.813 46.125-5.125 23.063-15.375 46.125-28.188 64.063-2.563 7.688-2.563 17.938-2.563 25.625 0 87.125 66.625 153.75 153.75 153.75s153.75-69.188 153.75-153.75c0-58.938-33.313-112.75-84.563-138.375-12.813-7.688-20.5-23.063-20.5-38.438s12.813-28.188 28.188-33.313c23.063-5.125 48.688-20.5 71.75-38.438 12.813-25.625 28.188-48.688 48.688-66.625-84.563-46.125-153.75-140.938-156.313-246zM1250.501-178.155h-474.063v143.5c0 97.375 84.563 192.188 158.875 210.125 15.375 5.125 25.625 17.938 28.188 33.313s-5.125 30.75-20.5 38.438c-51.25 28.188-84.563 79.438-84.563 138.375 0 87.125 66.625 153.75 153.75 153.75s153.75-69.188 153.75-153.75c0-58.938-33.313-112.75-84.563-138.375-12.813-7.688-20.5-23.063-20.5-38.438s12.813-28.188 28.188-33.313c76.875-20.5 158.875-110.188 158.875-210.125v-143.5z" />
|
||||
<glyph unicode="" glyph-name="nav-chat" d="M729.327-192.311c-7.885 0-15.769 3.942-23.654 7.885l-279.904 208.942h-275.961c-59.135 0-110.385 55.192-110.385 110.385v346.924c0 59.135 55.192 114.327 110.385 114.327h721.443c59.135 0 114.327-55.192 114.327-114.327v-346.924c0-59.135-55.192-110.385-110.385-110.385h-106.442v-177.404c0-15.769-7.885-27.596-23.654-35.481-3.942-3.942-7.885-3.942-15.769-3.942zM149.808 517.305c-11.827 0-31.539-19.711-31.539-35.481v-346.924c0-15.769 19.711-31.539 31.539-31.539h287.789c7.885 0 15.769-3.942 23.654-7.885l224.711-169.52v137.981c0 23.654 15.769 39.423 39.423 39.423h145.865c15.769 0 31.539 19.711 31.539 31.539v346.924c3.942 15.769-15.769 35.481-27.596 35.481h-725.385z" />
|
||||
<glyph unicode="" glyph-name="map2" d="M672 576l-320 128-352-128v-768l352 128 320-128 352 128v768l-352-128zM384 622.27l256-102.4v-630.138l-256 102.398v630.14zM64 531.172l256 93.090v-631.8l-256-93.088v631.798zM960-19.172l-256-93.092v631.8l256 93.090v-631.798z" />
|
||||
<glyph unicode="" glyph-name="eye-closed" d="M1017.313 272.845c-41 76.875-99.938 143.5-171.688 192.188l-128.125-128.125c7.688-23.063 12.813-48.688 12.813-76.875 0-120.438-97.375-217.813-217.813-217.813-28.188 0-53.813 5.125-76.875 12.813l-82-82c51.25-12.813 105.063-20.5 158.875-20.5 215.25 0 407.438 112.75 504.813 292.125l7.688 12.813-7.688 15.375zM179.375 52.47l128.125 128.125c-7.688 23.063-12.813 48.688-12.813 76.875 0 120.438 97.375 217.813 217.813 217.813 28.188 0 53.813-5.125 76.875-12.813l82 82c-51.25 12.813-105.063 20.5-158.875 20.5-217.813 0-410-112.75-504.813-292.125l-7.688-15.375 7.688-15.375c41-76.875 99.938-140.938 171.688-189.625zM128.125-165.343c-10.25 0-20.5 2.563-28.188 10.25-15.375 15.375-15.375 38.438 0 53.813l768.751 768.751c15.375 15.375 38.438 15.375 53.813 0s15.375-38.438 0-53.813l-768.751-768.751c-5.125-7.688-15.375-10.25-25.625-10.25z" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue