SPR-863: Function "logged in as" css for anchor + qs all icons in header

This commit is contained in:
Silke Pisulla 2017-03-09 15:30:27 +01:00
commit 1466b31431
5 changed files with 116 additions and 16 deletions

View file

@ -107,6 +107,7 @@
.btn-prefix (); .btn-prefix ();
.icon-clipboard(); .icon-clipboard();
display: block;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1; line-height: 1;
} }

View file

@ -34,6 +34,14 @@
color: @color-nav; color: @color-nav;
text-align: center; text-align: center;
margin: 0; margin: 0;
@media @screen_max-xxlg {
min-height: 28px;
}
@media @screen_max-md {
min-height: @toggle-size;
}
} }
&.noopentasks { &.noopentasks {
@ -48,28 +56,84 @@
} }
&.user { &.user {
border: 1px solid @color-border; position: relative;
border-radius: @border-radius; padding: 1px .2em 0 1px; // 1px for border
padding: .3em .25rem;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 1px @color-border;
border-radius: @border-radius;
}
> a {
background: #FFF; // for removing bg-image
border: 0 none;
text-indent: 0;
font-size: inherit;
margin-top: -1px; // for border
margin-right: -.2em;
padding: 1px .2em 0 0;
@media @screen_only-lg {
padding-top: 3px;
}
&::before {
content: '';
position: absolute;
top: -3px;
left: 0;
right: 0;
bottom: 0;
display: block;
border: solid 1px @color-border;
border-radius: @border-radius;
transition: @transition border-color;
}
&:hover,
&:focus,
&:active {
&::before {
border-color: @button_background;
}
bdi,
bdi:first-of-type {
color: @button_background;
&::before {
color: @button_background;
}
}
}
}
bdi { bdi {
color: @color-nav; color: @color-nav;
display: inline-block; display: inline-block;
padding-top: 1px; padding-top: 1px;
transition: @transition color;
} }
> bdi:first-of-type { bdi:first-of-type {
.fontello(); .fontello();
.icon-user-circle(); .icon-user-circle();
position: relative; position: relative;
margin: .3em 0 .3em .25rem;
@media @screen_min-md { @media @screen_min-md {
padding-left: 22px; padding-left: 1.3rem;
} }
@media @screen_max-md { @media @screen_max-md {
padding-left: 25px; padding-left: 1.5rem;
} }
&::before { &::before {
@ -78,6 +142,7 @@
font-size: 1.4rem; font-size: 1.4rem;
color: @color-nav; color: @color-nav;
margin: 0; margin: 0;
transition: @transition color;
@media @screen_min-xlg { @media @screen_min-xlg {
top: -2px; top: -2px;
@ -103,6 +168,10 @@
white-space: normal; white-space: normal;
text-indent: 0; text-indent: 0;
@media @screen_only-lg {
padding-top: .14rem;
}
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@ -113,7 +182,10 @@
.btn-prefix(); .btn-prefix();
.icon-clipboard(); .icon-clipboard();
display: block;
font-size: 1.2rem; font-size: 1.2rem;
text-align: center;
margin-bottom: -1px;
} }
} // user-task } // user-task
} // li } // li
@ -129,6 +201,10 @@
text-decoration: none; text-decoration: none;
transition: @transition color, @transition background-color, @transition border-color; transition: @transition color, @transition background-color, @transition border-color;
@media @screen_only-lg {
min-width: 2rem;
}
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@ -157,16 +233,34 @@
/* icon log-out */ /* icon log-out */
&.logout { &.logout {
.icon-logout(); .icon-logout();
&::before {
@media @screen_only-lg {
margin-top: .27rem;
}
}
} }
/* icon log-in */ /* icon log-in */
&.login { &.login {
.icon-login(); .icon-login();
&::before {
@media @screen_only-lg {
margin-top: .27rem;
}
}
} }
/* icon admin */ /* icon admin */
&.admin { &.admin {
.icon-cog(); .icon-cog();
&::before {
@media @screen_only-lg {
margin-top: .28rem;
}
}
} }
} // a } // a
} // ul } // ul

View file

@ -138,6 +138,7 @@
@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)"; @screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)"; @screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
@screen_only-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)"; @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)"; @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";

View file

@ -194,20 +194,22 @@
margin-top: .3rem; margin-top: .3rem;
} }
.hide-text-show-before(){ .hide-text-show-before() {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-indent: -9999px; text-indent: -9999px;
&::before{ &::before {
text-indent: 0;
float: left; float: left;
width: 100%;
text-indent: 0;
margin: 0;
} }
&::after{ &::after {
text-indent: 0;
float: left; float: left;
text-indent: 0;
} }
} }
@ -217,13 +219,14 @@
white-space: nowrap; white-space: nowrap;
text-indent: -9999px; text-indent: -9999px;
&::before{ &::before {
text-indent: 0;
float: right; float: right;
text-indent: 0;
} }
&::after{
text-indent: 0; &::after {
float: right; float: right;
text-indent: 0;
} }
} }

View file

@ -39,7 +39,8 @@
@media @screen_min-md { @media @screen_min-md {
.make-grid(md); .make-grid(md);
html { html {
font-size: 81.25%; //13px font-size: 87.5%; //14px
//font-size: 81.25%; //13px
} }
} }