Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Elastic: Move readonly (locker) icon on folder lists to the left

Browse source 
This is a state indicator icon, this way it does not collide with
list buttons on the right side of each record.
This commit is contained in:
Aleksander Machniak 2019-06-07 12:31:20 +00:00
parent 32b42e21ee
commit 3a13f5c3a7
2 changed files with 65 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
plugins/libkolab/skins/elastic/include/calendar.less
View file

@ -73,11 +73,11 @@ a.button {
} }
a.calname { a.calname {
padding-right: 4em; padding-right: 2.5em;
} }
.count { .count {
right: 5.5em; right: 4.2em;
font-style: normal; font-style: normal;
} }
} }

82
plugins/libkolab/skins/elastic/libkolab.less
View file

@ -51,15 +51,6 @@
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
&:after {
color: #ccc;
position: absolute;
top: 0;
right: 0;
height: @listing-line-height !important;
font-size: 1.1em !important;
}
& + input { & + input {
position: initial; position: initial;
} }
@ -96,6 +87,13 @@
display: none; display: none;
} }
} }
html.touch & {
margin-left: .2rem;
a {
margin-right: .5rem;
}
}
} }
a.quickview { a.quickview {
@ -152,11 +150,25 @@
& > div.readonly a:first-child, & > div.readonly a:first-child,
&.readonly:not(.virtual) > div a:first-child { &.readonly:not(.virtual) > div a:first-child {
padding-right: 1.6em;
&:after { &:after {
&:extend(.font-icon-class); &:extend(.font-icon-class);
content: @fa-var-lock; content: @fa-var-lock;
position: absolute;
left: 2.25rem;
top: @listing-line-height / 2;
font-size: .9em !important;
width: .9em;
line-height: 1;
height: 1em !important;
background-color: #fff;
border-radius: 50% 50% 0 0;
color: @color-font;
opacity: .9;
html.touch & {
top: @listing-touch-line-height / 2;
left: 2.7rem;
}
} }
} }
@ -222,19 +234,49 @@
} }
} }
html.touch .listing { @treelist-readonly-icon-margin: 1.7em;
.treelist {
ul {
li { li {
& > div { a:first-child:after {
a:after { margin-left: 1 * @treelist-readonly-icon-margin !important;
height: @listing-touch-line-height !important; }
li {
a:first-child:after {
margin-left: 2 * @treelist-readonly-icon-margin !important;
}
li {
a:first-child:after {
margin-left: 3 * @treelist-readonly-icon-margin !important;
}
li {
a:first-child:after {
margin-left: 4 * @treelist-readonly-icon-margin !important;
}
li {
a:first-child:after {
margin-left: 5 * @treelist-readonly-icon-margin !important;
}
li {
a:first-child:after {
margin-left: 6 * @treelist-readonly-icon-margin !important;
}
}
}
}
}
}
} }
} }
.actions { &.notree {
margin-left: .2rem; li a:first-child:after {
a { left: 1.3rem !important;
margin-right: .5rem;
}
} }
} }
} }