uniform styles for icon-buttons (+ mixin added)
This commit is contained in:
Silke Pisulla
parent
e4e1e8685d
commit
ed6fc9e542
3 changed files with 236 additions and 213 deletions
|
|
@ -8,109 +8,145 @@
|
||||||
padding: 2rem 2rem 1rem;
|
padding: 2rem 2rem 1rem;
|
||||||
border-bottom: 1px solid @color-border;
|
border-bottom: 1px solid @color-border;
|
||||||
|
|
||||||
> p{
|
> p {
|
||||||
font-size: .83rem;
|
font-size: .83rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
*{
|
|
||||||
|
* {
|
||||||
font-size: .83rem;
|
font-size: .83rem;
|
||||||
}
|
}
|
||||||
.bchead{
|
|
||||||
|
.bchead {
|
||||||
.sr-only();
|
.sr-only();
|
||||||
}
|
}
|
||||||
a{
|
|
||||||
&:hover,&:focus,&:active{
|
a {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
color: @color-nav;
|
color: @color-nav;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
span.home{
|
|
||||||
a{
|
span.home {
|
||||||
|
a {
|
||||||
.fontello();
|
.fontello();
|
||||||
.hide-text-show-before();
|
.hide-text-show-before();
|
||||||
.icon-home();
|
.icon-home();
|
||||||
|
|
||||||
height: 1em;
|
height: 1em;
|
||||||
width: auto;
|
width: auto;
|
||||||
text-decoration:none;
|
text-decoration: none;
|
||||||
&:before{
|
transition: @transition color;
|
||||||
|
|
||||||
|
&:before {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin-top: .17rem;
|
margin-top: .17rem;
|
||||||
}
|
}
|
||||||
&:hover,&:focus,&:active{
|
|
||||||
color: @color-nav;
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @color-link-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page-attributes{
|
|
||||||
float:right;
|
.page-attributes {
|
||||||
|
float: right;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin:0; padding:0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
max-width: 30%;
|
max-width: 30%;
|
||||||
> li{
|
|
||||||
display: inline-block;
|
|
||||||
//float: right;
|
|
||||||
margin: 0 .1rem;
|
|
||||||
padding: 0;
|
|
||||||
font-size: .8rem;
|
|
||||||
|
|
||||||
#plugin__qc__wrapper{
|
> li {
|
||||||
position:absolute;
|
.btn-usertools-wrapper(); // uniform li
|
||||||
right:0;
|
|
||||||
width: auto;
|
|
||||||
border: 0 none;
|
|
||||||
background: @color-site-bg;
|
|
||||||
}
|
|
||||||
a[aria-expanded="false"] + #plugin__qc__wrapper{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#plugin__qc__wrapper[aria-hidden="false"]{
|
|
||||||
margin-top: .7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#plugin__qc__icon{
|
float: left;
|
||||||
display: none;
|
|
||||||
}
|
&.plugin__qc {
|
||||||
&.plugin__qc{
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
#plugin__qc__link{
|
|
||||||
font-size: .8rem;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
height: 1rem;
|
|
||||||
width: 1rem;
|
|
||||||
border: 1px solid @color-border;
|
|
||||||
background-color: @color-site-bg;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
color: @color-nav;
|
|
||||||
min-height: 1.2em;
|
|
||||||
min-width: 1.4em;
|
|
||||||
box-sizing: content-box;
|
|
||||||
padding: .3em .25em .15em;
|
|
||||||
|
|
||||||
.prefix{
|
&.do_none {
|
||||||
font-size: .8rem;
|
background-color: @color-site-bg;
|
||||||
.fontello();
|
}
|
||||||
.hide-text-show-before();
|
|
||||||
.icon-emo-happy();
|
|
||||||
color: @color-nav;
|
.btn-usertools-num ();
|
||||||
|
|
||||||
|
|
||||||
|
.prefix {
|
||||||
|
.fontello();
|
||||||
|
.hide-text-show-before();
|
||||||
|
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
color: @color-nav;
|
||||||
|
text-align: center;
|
||||||
|
transition: @transition color;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 100%;
|
||||||
|
margin: .35em 0 0;
|
||||||
}
|
}
|
||||||
.num{
|
}
|
||||||
position: absolute;
|
} // li
|
||||||
padding: .2em .3em .1em;
|
|
||||||
text-align: center;
|
a {
|
||||||
font-size: .6rem;
|
display: block;
|
||||||
line-height: 100%;
|
width: auto;
|
||||||
font-weight: 400;
|
min-height: 2em;
|
||||||
right: -0.3em;
|
margin: 0;
|
||||||
top: -0.4em;
|
border: 1px solid @color-border;
|
||||||
background-color: @color-border;
|
border-radius: @border-radius;
|
||||||
border-radius: 2px;
|
color: @color-nav;
|
||||||
color: @color-nav;
|
transition: @transition color, @transition border-color;
|
||||||
|
|
||||||
|
&[aria-expanded="false"] + #plugin__qc__wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-color: @button_color;
|
||||||
|
color: @button_color;
|
||||||
|
|
||||||
|
.prefix {
|
||||||
|
color: @button_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#plugin__qc__wrapper {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: auto;
|
||||||
|
border: 0 none;
|
||||||
|
background: @color-site-bg;
|
||||||
|
|
||||||
|
&[aria-hidden="false"] {
|
||||||
|
margin-top: .7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#plugin__qc__icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#plugin__qc__link {
|
||||||
|
font-size: .8rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.prefix {
|
||||||
|
.icon-emo-happy();
|
||||||
|
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,159 +4,153 @@
|
||||||
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
.nav-usertools {
|
.nav-usertools {
|
||||||
&.has-bar{
|
&.has-bar {
|
||||||
margin-top: @height-context-bar;
|
margin-top: @height-context-bar;
|
||||||
padding-top: .5rem;
|
padding-top: .5rem;
|
||||||
}
|
}
|
||||||
ul{
|
|
||||||
|
ul {
|
||||||
float: right;
|
float: right;
|
||||||
padding: 0; margin: .2rem -.2rem 0 0;
|
padding: 0;
|
||||||
li{
|
margin: .2rem -.2rem 0 0;
|
||||||
display: inline-block;
|
|
||||||
|
li {
|
||||||
|
.btn-usertools-wrapper(); // uniform li
|
||||||
|
|
||||||
float: right;
|
float: right;
|
||||||
margin: 0 .1rem;
|
|
||||||
padding: 0;
|
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
*{
|
|
||||||
|
* {
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
}
|
}
|
||||||
a{
|
|
||||||
color: @color-nav;
|
> strong,
|
||||||
box-sizing: content-box;
|
> a {
|
||||||
padding: .3em .25em .15em;
|
display: block;
|
||||||
text-align: center;
|
width: auto;
|
||||||
text-decoration: none;
|
min-height: 2em;
|
||||||
border: 1px solid @color-border;
|
border: 1px solid @color-border;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
margin: 2px;
|
color: @color-nav;
|
||||||
cursor: pointer;
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
&: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-task{
|
.btn-usertools-num ();
|
||||||
|
|
||||||
|
&.user {
|
||||||
border: 1px solid @color-border;
|
border: 1px solid @color-border;
|
||||||
border-radius: @border-radius;
|
border-radius: @border-radius;
|
||||||
color: @color-nav;
|
padding: .3rem .25rem;
|
||||||
display: inline-block;
|
|
||||||
height: 1rem;
|
bdi {
|
||||||
width: 1rem;
|
color: @color-nav;
|
||||||
min-height: 1.2em;
|
display: inline-block;
|
||||||
min-width: 1.4em;
|
padding-top: 1px;
|
||||||
box-sizing: content-box;
|
}
|
||||||
padding: .3em .25em .15em;
|
|
||||||
margin-top: 2px;
|
> bdi:first-of-type {
|
||||||
|
.fontello();
|
||||||
|
.icon-user();
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
float: left;
|
||||||
|
background: @color-nav;
|
||||||
|
border: 4px solid @color-nav;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: .5rem;
|
||||||
|
margin-top: -1px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // user
|
||||||
|
|
||||||
|
&.user-task {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
a {
|
||||||
a{
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
&:before{
|
|
||||||
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.prefix{
|
.prefix {
|
||||||
.fontello();
|
.fontello();
|
||||||
.hide-text-show-before();
|
.hide-text-show-before();
|
||||||
.icon-clipboard();
|
.icon-clipboard();
|
||||||
|
|
||||||
color: @color-nav;
|
color: @color-nav;
|
||||||
|
margin-top: .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.opentasks,
|
||||||
|
&.opentask {
|
||||||
.num{
|
.num {
|
||||||
position: absolute;
|
|
||||||
padding: .2em .3em .1em;
|
|
||||||
text-align: center;
|
|
||||||
font-size: .6rem;
|
|
||||||
line-height: 100%;
|
|
||||||
font-weight: 400;
|
|
||||||
right: -0.3em;
|
|
||||||
top: -0.4em;
|
|
||||||
background-color: @color-border;
|
|
||||||
border-radius: 2px;
|
|
||||||
color: @color-nav;
|
|
||||||
}
|
|
||||||
&.opentasks, &.opentask{
|
|
||||||
.num{
|
|
||||||
background-color: @color-link;
|
background-color: @color-link;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} // user-task
|
||||||
|
} // li
|
||||||
|
|
||||||
|
a {
|
||||||
|
.fontello();
|
||||||
|
.hide-text-show-before();
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: @transition color, @transition border-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-color: @color-nav-hover;
|
||||||
|
//-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;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.user{
|
&::before {
|
||||||
border: 1px solid @color-border;
|
content: "?";
|
||||||
border-radius: @border-radius;
|
display: block;
|
||||||
color: @color-nav;
|
width: 100%;
|
||||||
display: inline-block;
|
box-sizing: border-box;
|
||||||
height: 1rem;
|
font-size: 1.12em;
|
||||||
min-height: 1.2em;
|
cursor: pointer;
|
||||||
min-width: 1.4em;
|
margin: .3rem 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,39 +2,32 @@
|
||||||
/* all media */
|
/* all media */
|
||||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||||
|
|
||||||
ul.page-attributes{
|
ul.page-attributes {
|
||||||
.plugin__do_pagetasks{
|
.plugin__do_pagetasks {
|
||||||
&.do_none{
|
@icon-size: 2em;
|
||||||
border: 1px solid @color-border;
|
|
||||||
border-radius: @border-radius;
|
.btn-usertools-num ();
|
||||||
color: @color-nav;
|
|
||||||
display: inline-block;
|
.prefix {
|
||||||
height: 1rem;
|
|
||||||
min-height: 1.2em;
|
|
||||||
min-width: 1.4em;
|
|
||||||
box-sizing: content-box;
|
|
||||||
padding: .3em .25em .15em;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.num{
|
|
||||||
position: absolute;
|
|
||||||
padding: .2em .3em .1em;
|
|
||||||
text-align: center;
|
|
||||||
font-size: .6rem;
|
|
||||||
line-height: 100%;
|
|
||||||
font-weight: 400;
|
|
||||||
right: -0.3em;
|
|
||||||
top: -0.4em;
|
|
||||||
background-color: @color-border;
|
|
||||||
border-radius: 2px;
|
|
||||||
color: @color-nav;
|
|
||||||
}
|
|
||||||
.prefix{
|
|
||||||
.fontello();
|
.fontello();
|
||||||
.hide-text-show-before();
|
.hide-text-show-before();
|
||||||
.icon-clipboard();
|
.icon-clipboard();
|
||||||
color: @color-nav;
|
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
|
min-height: @icon-size;
|
||||||
|
min-width: @icon-size;
|
||||||
|
color: @color-nav;
|
||||||
|
transition: @transition color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.do_none {
|
||||||
|
position: relative;
|
||||||
|
height: 1rem;
|
||||||
|
width: 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid @color-border;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
padding: 0 .2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue