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

172
css/area_nav-breadcrumb.less
View file

@ -8,109 +8,145 @@
padding: 2rem 2rem 1rem;
border-bottom: 1px solid @color-border;
> p{
> p {
font-size: .83rem;
margin: 0;
*{
* {
font-size: .83rem;
}
.bchead{
.bchead {
.sr-only();
}
a{
&:hover,&:focus,&:active{
a {
&:hover,
&:focus,
&:active {
color: @color-nav;
}
}
span.home{
a{
span.home {
a {
.fontello();
.hide-text-show-before();
.icon-home();
height: 1em;
width: auto;
text-decoration:none;
&:before{
text-decoration: none;
transition: @transition color;
&:before {
font-size: 1rem;
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;
list-style: none;
margin:0; padding:0;
max-width: 30%;
> li{
display: inline-block;
//float: right;
margin: 0 .1rem;
margin: 0;
padding: 0;
font-size: .8rem;
max-width: 30%;
#plugin__qc__wrapper{
position:absolute;
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;
}
> li {
.btn-usertools-wrapper(); // uniform li
#plugin__qc__icon{
display: none;
}
&.plugin__qc{
float: left;
&.plugin__qc {
display: inline-block;
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{
font-size: .8rem;
&.do_none {
background-color: @color-site-bg;
}
.btn-usertools-num ();
.prefix {
.fontello();
.hide-text-show-before();
.icon-emo-happy();
height: auto;
width: 100%;
color: @color-nav;
}
.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;
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 {
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;
}
}
}
}

206
css/area_nav-usertools.less
View file

@ -4,159 +4,153 @@
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
.nav-usertools {
&.has-bar{
&.has-bar {
margin-top: @height-context-bar;
padding-top: .5rem;
}
ul{
ul {
float: right;
padding: 0; margin: .2rem -.2rem 0 0;
li{
display: inline-block;
float: right;
margin: 0 .1rem;
padding: 0;
margin: .2rem -.2rem 0 0;
li {
.btn-usertools-wrapper(); // uniform li
float: right;
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;
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: "?";
}
.btn-usertools-num ();
/* 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{
&.user {
border: 1px solid @color-border;
border-radius: @border-radius;
padding: .3rem .25rem;
bdi {
color: @color-nav;
display: inline-block;
height: 1rem;
width: 1rem;
min-height: 1.2em;
min-width: 1.4em;
box-sizing: content-box;
padding: .3em .25em .15em;
margin-top: 2px;
padding-top: 1px;
}
> 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;
overflow: visible;
white-space: normal;
text-indent: 0;
&:before{
&::before {
content: "";
position: absolute;
}
}
.prefix{
.prefix {
.fontello();
.hide-text-show-before();
.icon-clipboard();
color: @color-nav;
margin-top: .3rem;
}
.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{
&.opentasks,
&.opentask {
.num {
background-color: @color-link;
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{
border: 1px solid @color-border;
border-radius: @border-radius;
color: @color-nav;
display: inline-block;
height: 1rem;
min-height: 1.2em;
min-width: 1.4em;
box-sizing: content-box;
padding: .3em .25em .15em;
margin-top: 2px;
bdi{
color: @color-nav;
display: inline-block;
padding-top: 1px;
&::before {
content: "?";
display: block;
width: 100%;
box-sizing: border-box;
font-size: 1.12em;
cursor: pointer;
margin: .3rem 0;
}
>bdi:first-of-type{
.fontello();
/* icon register new user */
&.register {
.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 log-out */
&.logout {
.icon-logout();
}
/* icon log-in */
&.login {
.icon-login();
}
/* icon admin */
&.admin {
.icon-cog();
}
/* add more icons if needed */
}
}
}

51
css/plugins/do_tasks.less
View file

@ -2,39 +2,32 @@
/* all media */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
ul.page-attributes{
.plugin__do_pagetasks{
&.do_none{
border: 1px solid @color-border;
border-radius: @border-radius;
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{
ul.page-attributes {
.plugin__do_pagetasks {
@icon-size: 2em;
.btn-usertools-num ();
.prefix {
.fontello();
.hide-text-show-before();
.icon-clipboard();
color: @color-nav;
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;
}
}
}