nav-tools menu icons
This commit is contained in:
parent
414d889f3f
commit
da7e18f852
6 changed files with 165 additions and 26 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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{
|
||||
|
|
|
@ -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 */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue