SPR-863: Function "logged in as" css for anchor + qs all icons in header
This commit is contained in:
parent
e8f2530ce8
commit
1466b31431
5 changed files with 116 additions and 16 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)";
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue