nav-tools menu icons

This commit is contained in:
Jana Deutschländer 2016-12-13 17:13:23 +01:00
commit da7e18f852
6 changed files with 165 additions and 26 deletions

View file

@ -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;
}
}
}
}
}
}

View file

@ -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{

View file

@ -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 */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */