EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

uniform styles for icon-buttons (+ mixin added)

Browse source
This commit is contained in:
Silke Pisulla 2017-01-03 14:48:13 +01:00
commit ed6fc9e542
3 changed files with 236 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

136
css/area_nav-breadcrumb.less
View file

@ -11,48 +11,116 @@
> 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 { a {
&:hover,&:focus,&:active{ &:hover,
&:focus,
&:active {
color: @color-nav; color: @color-nav;
} }
} }
span.home { span.home {
a { 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;
transition: @transition color;
&:before { &: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 { .page-attributes {
float: right; float: right;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
margin:0; padding:0; margin: 0;
max-width: 30%;
> li{
display: inline-block;
//float: right;
margin: 0 .1rem;
padding: 0; padding: 0;
font-size: .8rem; max-width: 30%;
> li {
.btn-usertools-wrapper(); // uniform li
float: left;
&.plugin__qc {
display: inline-block;
overflow: visible;
}
&.do_none {
background-color: @color-site-bg;
}
.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;
}
}
} // li
a {
display: block;
width: auto;
min-height: 2em;
margin: 0;
border: 1px solid @color-border;
border-radius: @border-radius;
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 { #plugin__qc__wrapper {
position: absolute; position: absolute;
@ -60,56 +128,24 @@
width: auto; width: auto;
border: 0 none; border: 0 none;
background: @color-site-bg; background: @color-site-bg;
}
a[aria-expanded="false"] + #plugin__qc__wrapper{ &[aria-hidden="false"] {
display: none;
}
#plugin__qc__wrapper[aria-hidden="false"]{
margin-top: .7rem; margin-top: .7rem;
} }
}
#plugin__qc__icon { #plugin__qc__icon {
display: none; display: none;
} }
&.plugin__qc{
display: inline-block;
overflow: visible;
}
#plugin__qc__link { #plugin__qc__link {
font-size: .8rem; font-size: .8rem;
position: relative; 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 { .prefix {
font-size: .8rem;
.fontello();
.hide-text-show-before();
.icon-emo-happy(); .icon-emo-happy();
color: @color-nav;
} font-size: inherit;
.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;
}
} }
} }
} }

200
css/area_nav-usertools.less
View file

@ -4,94 +4,80 @@
* @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;
li{
display: inline-block;
float: right;
margin: 0 .1rem;
padding: 0; padding: 0;
margin: .2rem -.2rem 0 0;
li {
.btn-usertools-wrapper(); // uniform li
float: right;
font-size: .8rem; font-size: .8rem;
* { * {
font-size: .8rem; font-size: .8rem;
} }
a{
> strong,
> a {
display: block;
width: auto;
min-height: 2em;
border: 1px solid @color-border;
border-radius: @border-radius;
color: @color-nav; color: @color-nav;
box-sizing: content-box;
padding: .3em .25em .15em;
text-align: center; 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; 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(); .btn-usertools-num ();
.hide-text-show-before();
&:before{
font-size: 1.12em;
cursor: pointer;
content: "?";
}
/* icon register new user */ &.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{
border: 1px solid @color-border; border: 1px solid @color-border;
border-radius: @border-radius; border-radius: @border-radius;
padding: .3rem .25rem;
bdi {
color: @color-nav; color: @color-nav;
display: inline-block; display: inline-block;
height: 1rem; padding-top: 1px;
width: 1rem; }
min-height: 1.2em;
min-width: 1.4em;
box-sizing: content-box;
padding: .3em .25em .15em;
margin-top: 2px;
position: relative;
> 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;
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;
} }
@ -101,62 +87,70 @@
.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{
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 { .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 register new user */
&.register {
.icon-user(); .icon-user();
&:before{ }
border: 4px solid @color-nav;
margin-top: -1px; /* icon log-out */
border-radius: 50%; &.logout {
background: @color-nav; .icon-logout();
color: #fff; }
font-size: .5rem;
float: left; /* icon log-in */
} &.login {
} .icon-login();
} }
/* icon admin */
&.admin {
.icon-cog();
}
/* add more icons if needed */
} }
} }
} }

45
css/plugins/do_tasks.less
View file

@ -4,37 +4,30 @@
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;
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 { .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;
} }
} }
} }