From b0ebe86ed7f7c3ba0cf513708597fc753372cfcd Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Wed, 8 Apr 2020 13:04:45 -0600 Subject: [PATCH] WIP new nav icon styles --- assets/styles/layouts/_inline-icons.scss | 93 +++++++++++++++++++---- assets/styles/tools/_icomoon.scss | 27 ++++--- layouts/shortcodes/nav-icon.html | 33 ++++++-- static/fonts/icomoon.eot | Bin 17144 -> 17844 bytes static/fonts/icomoon.svg | 2 + static/fonts/icomoon.ttf | Bin 16980 -> 17680 bytes static/fonts/icomoon.woff | Bin 17056 -> 17756 bytes 7 files changed, 126 insertions(+), 29 deletions(-) mode change 100755 => 100644 static/fonts/icomoon.eot mode change 100755 => 100644 static/fonts/icomoon.svg mode change 100755 => 100644 static/fonts/icomoon.ttf mode change 100755 => 100644 static/fonts/icomoon.woff diff --git a/assets/styles/layouts/_inline-icons.scss b/assets/styles/layouts/_inline-icons.scss index c1ec8efb5..b69275408 100644 --- a/assets/styles/layouts/_inline-icons.scss +++ b/assets/styles/layouts/_inline-icons.scss @@ -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; + } } } } diff --git a/assets/styles/tools/_icomoon.scss b/assets/styles/tools/_icomoon.scss index 32f4e000f..282139f46 100644 --- a/assets/styles/tools/_icomoon.scss +++ b/assets/styles/tools/_icomoon.scss @@ -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"; } diff --git a/layouts/shortcodes/nav-icon.html b/layouts/shortcodes/nav-icon.html index 6a39fae71..75d8e1e63 100644 --- a/layouts/shortcodes/nav-icon.html +++ b/layouts/shortcodes/nav-icon.html @@ -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" }} -
- {{ $title }} +
+
+ +
+ {{ $shortTitle }} +
+
+
+ +
+
+ +
+ {{ $title }} +
+
diff --git a/static/fonts/icomoon.eot b/static/fonts/icomoon.eot old mode 100755 new mode 100644 index c2e03e9b413b1bcf9b340508073dbdacf9ccc341..76da8948c0e17a2d82ffacaf1da1a3126bec8d79 GIT binary patch delta 1138 zcmah|TWH%>82*o<$QQ|yElYA@$?-*zWUGnR`bxLVw%nDi^Fkk*HEBm#OfGdtE{60W zV+F&YV{BzvYY3$4V3chv6h?*%eb@zddD_dMk7W;oy)1s(#s+1h_Ks}tsSg!L=Re>7 z{r`8qBXk~KMR(st)ZLQ+{*%|KJej+)d#`2N!u7eO=9d8Q6@C|&)@zOZ@Ar2Bkb?2G zi?yu=j(&_k!_j?l?e$fmcmHFI4**Jw^_ALk^#0yo05-0Hd>tp)4SE9O7ciczuV3Ci zz8c=ccn$Z=tZgpUw%&g8HbBME`)Iwk-GB?0BYwhZh;7u?SN2}?{EKlNH@wx@+`0@S zn1SbhcX${f`PMRe z4;j?^HAG7PNPkG1k|KT}?ugg05^CARc>4nJFx^DZ?Y&2IiEU7^jUvirbu~eWf)t`$ zEOJp1BuJTfI{z%n8Wu8igP5Hz)T`BcVLBFzX8fGjjed4}Ie$7Diz8J$o3CEFRL#$Y z+@e%84D*K9&oVbm-6)EZ2iqh7dOwngsKX>Y571i9ecL2)4vpqU2sj0sun#{0XpWQq zhS-fuAFle2TozIj{ng_x3%LwVI(`eob_2z8*+LN&^8LwC%4PGJv?L170Ue3v1d5=7 zI@rX(rGt_0C-9jc@0dU#JO&@gHTuL29DVY`xEAD#rg>B?%Pvuv(TyWhy77!4xSMiu z^4Jlx7~r*7RF+MKiHA^kTqS0Q(Z`sIJn`siS7%vEi6}Hj5HzD(3wC9}(!F$metPBh zEb{qGSylqFhn4;P651c}ker7=3l)1%$ON>2cZ`cEis@qzk?3k1Yc&-`VK@SL8U3kq zj-=t~Oa2m_w~m=+k>`Vfq?$;xEXQWlM2g3cbC9ERF+Low=tk<6oJ`8|^Ui!LW#|=I z=DQm^nyMZb1d8MtTBO8N)Aqvo(sVUQi8RBL+;(;6W>VA2;qV#Wp9*M}`2qT_t=!wal6#e#`5S2bi{a-%`_AhB zv6Ujb{s9ICn*|xEi7B#6R!v}FuuA~Sn`Hn6`0}`cdhKQa z`6?N?B^3rnlCyz)p!tj@Ir+(nK@$=-F)-MF0LstFO{^$jh}L6V!NB0q0~AomOUzB3 z>BadQ$X^50&{mLNT*AN%lwoi(0m(Bkv+z$&VXPKz0P zPTY*F3_xl1$p+5ilkJ_Ss6LP~kV=udC+#OaN&1&em+ToiEx7=o+ZY&p8J98ef(&3_ On!M0ecr(AtQbquoo_56m diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg old mode 100755 new mode 100644 index df72e9985..3f41602ce --- a/static/fonts/icomoon.svg +++ b/static/fonts/icomoon.svg @@ -69,7 +69,9 @@ + + diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf old mode 100755 new mode 100644 index 0a5bee2552ca57f9c64386fe2ed2183f8c379d5b..72ed90623b60a755698688ee2ac1773a4655b599 GIT binary patch delta 1101 zcmah}OKcle6uoyc8Gq(yk7vfIXB>YfGZRk}H}zMAF#do9#R^%pB54t#R!QngNo*-y z1cBrV6@;pagj%YUQY5GV5g|c@7a-9^5vy9K5=jN4}coUfl`Y&gbj9*;3o*4YOP<|I?h(Gd-rVZIvmW`QUO{rBxxTXdWZ)lyTcqICPJ8nb5lY5mzj|>P zqop_Qz9@DGm>{~wz)$)~_MXCcuZ>Yj{agJ_ZL7NSrn0SEBVp{lgA@JF@UL7KVQ}y| zHK4Y@Ak;1v3zm^)6j_ZjJ^_799A!11%9S3$f}KU%vZ;mHa;wp3m1mR5L_Q=2{rH1F zD28&0WC{)C=~Cn3#YX9L)UT+nZ9CV4A%VN@ShlOE0iurrIQW`Iss&TFF&WmfM&r7RoM`OT)!u zDi%uloT|uPgC0e96607lMu*rWbu>#u2kH6#ib;%;Il3U<_yZ5{`02M&W<+uwXU?c< zK1H6l?4vW5{je79-Q5+mGsD(qzbB?Y}{`<y*^c)S2Wtlj&zqV;~N>}2+16IxZ<(Z14M k{UiPN_}Ta`iJ8RJ#QyMSv54;j?~wsTzNSe3^fPIfq_v5$e)v* zSX=<41%P~z8jkdw$~3oa7Y_mX2N)P^7G$I*rpPW?HGzS_E&(WSmH`yt%i{*>wVMIt zt7PPsR2UdZ&Ia;<<};e)x|1&WDe=N=-&MeL(_CxHwSgx3q=uFXG(Jr8F#>o>I zB_=OmWZk@y@rTi5LDLJH4K1E?$lSd1R5PC6<|_j?3(zJ8hMRLXZ-LR1O&rY`eK+Sg qax+e@ciJHRK*~TWMe3fkpY$Z@Uou^?XXLcx0>Gi{yV=kA5F-F+FK!V4 diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff old mode 100755 new mode 100644 index a232e31cc369010b9a8fb17431f8d67e53a106f4..3b6501310ccf8790456cc6112d1e16afd0f537f2 GIT binary patch delta 1150 zcmah|U1%It6uxIN*}s{cnVp@PO?PH9vpb!c>@?Z7`%5)WcDGomYs`bCNoz%ynsy6K zQb@sw!h%qdQjBIxA+bU!J{W`&jG!PsSbY*f>0>D(_+t01QeV{UdhhJM^`V#h-E-%= z=X~d!%iLR6;K5ap-kLjh3<1L9`7?;|tXL2_b0VlWPRqKWyJP z-&`f!WBeT&LO6f%?Q@v>522Yi2&DeK&svMkHxa6x!9HaI{odx|7A7%w9e?j9;Fg*3 z*3#uQ%zcC7rwNXnOKx6VIg9;Xu9GCU2v$FM@Agu24JSTIf(;+9!RO1(rA5qrg#+Iw z*nBbk@1>R1%eWydHuM|8yAfLKu<#C#70?(G&t{2UaW95}W^%}!NXjYg|7Wf*!v;3FY;5Q^|ZUN_QU$|uW>3l|#Y6N!+l zc#h+4LGZfWR;at0h6TO$}rr4bg5YJpi=f1qEsrD3wcGBNP|S8Jq{_Tn1dt^ zb{)*JPvD-Pj2MRmo`VYtjy^R3(WgI6TXE5I-9u(o4a(BA?Hri2oo6K})KXTJ&WgZZB5fyo`MK#A3Q}Qov<(Y zyFQ;g?7E&P#$yv^CeLv^S1>bK5f9SHp%aFfOxA5DdsCg5Q0M2#dNb?TbyXF6%j=eD z9+9K~EwYRpkdIH*7EaGhHR1u8VMUr>YpicgSXMQed_@$pi7-bE93zQnEE5fIf!e88 zXC@ocsLZl4nwGhECMqWPRV~Zedb;%P&!s;@+SfPUExpc9|BV>@i{Wv9_Y3^E2e$L8 zSAn_R&gtpFRec9PH-zSP Jf2-bw{{dK`-gy83 delta 438 zcmcc9#kioAQKa18&5ePP0SKHHFmQwEkjaj&5)*ZV>vtsQCKfO-FlGRS=Ya5J*U5_M ziN!!MCKe!{1BwOGb1Kt-Vmu5CHVZ)5ZQI2|8L5dW3=DQ_fNIP@Sa!*(2^l~^px6^2 zUj>Bu^0;L(a!V>080>*&F`9s|fsy3wocv^ zXvP(JiMgpju^&K`13;$#u#_B|ns0@Pu12Y2;(ANqt zZC~2IbbRUaGW_MOS9-5DyxRBb(Eq>x{{vM4ZF$K6l?{W+?uE)S{(mgaBF-$%B=$q> zy;!c8l;}*+UePX~sf@s|livK9@t4u$SknueYb~C0$lSd1R5PC6<|_j?D9{)fZqC`f z1x8P9a5QK1-Mqt*n{o1Krw!5%qzt4|r0z-kNl%jgCDSE)MovpE0O(Q%2H(xIoDVSq E099y$f&c&j