From da7e18f85225d1e61d7b08348ad958fde47c2bc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= Date: Tue, 13 Dec 2016 17:13:23 +0100 Subject: [PATCH] nav-tools menu icons --- css/area_nav-usertools.less | 81 ++++++++++++++++++++++++++++++++++-- css/base.less | 37 +++++++++------- css/base_mixins.less | 57 +++++++++++++++++++++++++ images/logo.png | Bin 0 -> 5704 bytes style.ini | 12 ++++-- tpl/nav-usertools.php | 4 +- 6 files changed, 165 insertions(+), 26 deletions(-) create mode 100644 images/logo.png diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 9510f75..bcbadcd 100644 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -10,17 +10,92 @@ li{ display: inline-block; float: right; - border: 1px solid @color-border; + margin: 0 .1rem; + padding: 0; + font-size: .8rem; *{ font-size: .8rem; } a{ - .fontello(); - &.register{ + color: @color-nav; + box-sizing: content-box; + padding: .3em .25em .15em; + text-align: center; + text-decoration: none; + border: 1px solid @color-border; + border-radius: @border-radius; + margin: 2px; + cursor: pointer; + &:hover, &:active, &:focus{ + background-color: @color-nav-hover-bg; + border-width: 3px; + border-style: double; + margin: 0; + + //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); + color: @color-nav-hover; } + + .fontello(); + .hide-text-show-before(); + &:before{ + font-size: 1.12em; + cursor: pointer; + content: "?"; + } + + /* icon register new user */ + &.register{ + .icon-user(); + } + /* icon log-out */ + &.logout{ + .icon-logout(); + } + /* icon log-in */ + &.login{ + .icon-login(); + } + /* icon admin */ + &.admin{ + .icon-cog(); + } + + /* add more icons if needed */ } + &.user{ + border: 1px solid @color-border; + border-radius: @border-radius; + color: @color-nav; + display: inline-block; + height: 1rem; + min-height: 20px; + min-width: 24px; + box-sizing: content-box; + padding: .3em .25em .15em; + margin-top: 2px; + bdi{ + color: @color-nav; + display: inline-block; + padding-top: 1px; + } + >bdi:first-of-type{ + .fontello(); + .icon-user(); + &:before{ + border: 4px solid @color-nav; + margin-top: -1px; + border-radius: 50%; + background: @color-nav; + color: #fff; + font-size: .5rem; + float: left; + } + } + } } } } diff --git a/css/base.less b/css/base.less index b4c198b..947c4ca 100755 --- a/css/base.less +++ b/css/base.less @@ -62,30 +62,35 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* col width */ -@c12: 100%; -@c11: 91.66666667%; -@c10: 83.33333333%; -@c9: 75%; -@c8: 66.66666667%; -@c7: 58.33333333%; -@c6: 50%; -@c5: 41.66666667%; -@c4: 33.33333333%; -@c3: 25%; -@c2: 16.66666667%; -@c1: 8.33333333%; +@c12: 100%; +@c11: 91.66666667%; +@c10: 83.33333333%; +@c9: 75%; +@c8: 66.66666667%; +@c7: 58.33333333%; +@c6: 50%; +@c5: 41.66666667%; +@c4: 33.33333333%; +@c3: 25%; +@c2: 16.66666667%; +@c1: 8.33333333%; -@grid-columns: 12; +@grid-columns: 12; /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* margin / padding */ -@margin-big: 2.5rem; +@margin-big: 2.5rem; + +@border-radius: __default_border_radius__; -@color-border: __border__; +@color-border: __border__; +@color-nav: __nav_menu_color__; +@color-nav-hover: __nav_menu_hover_color__; +@color-nav-hover-bg:__nav_menu_hover_bg__; -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ html, body{ diff --git a/css/base_mixins.less b/css/base_mixins.less index 24fd603..2c876cb 100644 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -65,6 +65,44 @@ } +.fontello-double(){ + + &::before, &::after{ + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ + } + +} + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @@ -103,6 +141,25 @@ } } +.hide-text-show-before(){ + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-indent: -9999px; + width: 1rem; + height: 1rem; + min-height: 20px; + min-width: 24px; + &::before{ + text-indent: 0; + float: left; + } + &::after{ + text-indent: 0; + float: left; + } +} + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Screenreader / Hide */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..662f7ab9d89e1646ca195c3bb5b993d099ae077d GIT binary patch literal 5704 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 literal 0 HcmV?d00001 diff --git a/style.ini b/style.ini index 652927b..553c27c 100755 --- a/style.ini +++ b/style.ini @@ -114,12 +114,12 @@ __highlight__ = "#efefef" ; @ini_highlight ; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ; these are used for links -__existing__ = "#286da8" ; @ini_existing -__missing__ = "#CD5360" ; @ini_missing +__existing__ = "#286da8" ; @ini_existing +__missing__ = "#CD5360" ; @ini_missing ; widths -__site_width__ = "64em" ; @ini_site_width -__sidebar_width__ = "16em" ; @ini_sidebar_width +__site_width__ = "64em" ; @ini_site_width +__sidebar_width__ = "16em" ; @ini_sidebar_width __font_family_screen__ = "roboto, 'helvetica', arial, sans-serif" __font_family_menu__ = "'roboto condensed', 'helvetica neue', arial, sans-serif" @@ -128,6 +128,10 @@ __font_family_print__ = "'times new roman', serif" __nav_direct_background__ = "#FFF" __nav_direct_color__ = "#286da8" __box_shadow__ = "0 0 .5em rgba(40,109,168,.5)" +__nav_menu_color__ = "#696969" +__nav_menu_hover_color__ = "#286da8" +__nav_menu_hover_bg__ = "#FFFFFF" + __default_border_radius__ = "5px" diff --git a/tpl/nav-usertools.php b/tpl/nav-usertools.php index 3e02d91..e4c81d4 100644 --- a/tpl/nav-usertools.php +++ b/tpl/nav-usertools.php @@ -6,16 +6,14 @@