Move widgets and icons style to separate less files
Aleksander Machniak
8 years ago
parent
4d2236965f
commit
b4e311ceb1
@ -0,0 +1,280 @@
|
||||
/* font-icons */
|
||||
|
||||
button.ui.button.icon:before,
|
||||
.toolbar a.button:before,
|
||||
.toolbarmenu li a:before,
|
||||
.folderlist li a:before,
|
||||
.listing.iconized tr td:before,
|
||||
.listing.iconized li a:before,
|
||||
#taskmenu a:before {
|
||||
font-size: 1.25em;
|
||||
/*display: inline-block;*/
|
||||
/* FIXME: with inline-block we have a problem with icon alignment,
|
||||
use display:block; float: left;
|
||||
*/
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0em 0.25rem 0em 0em;
|
||||
width: 1.18em;
|
||||
height: 1em;
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
speak: none;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
button.ui.button.icon:before {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.toolbar a.button:before {
|
||||
display: inline;
|
||||
float: initial;
|
||||
}
|
||||
|
||||
.toolbar a.button {
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.toolbar .dropbutton > a.button:first-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.toolbar .dropbutton > a.button.dropdown {
|
||||
font-size: 70%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#taskmenu a {
|
||||
padding: 0.4em 0;
|
||||
}
|
||||
|
||||
#taskmenu a,
|
||||
#taskmenu a:before {
|
||||
display: block;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#taskmenu a:before {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
#taskmenu a.button-mail:before {
|
||||
content: @fa-var-envelope;
|
||||
}
|
||||
#taskmenu a.button-addressbook:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
#taskmenu a.button-settings:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
#taskmenu a.button-help:before {
|
||||
content: @fa-var-life-bouy;
|
||||
}
|
||||
#taskmenu a.button-logout:before {
|
||||
content: @fa-var-power-off;
|
||||
}
|
||||
#taskmenu a.button-about:before {
|
||||
content: @fa-var-question;
|
||||
}
|
||||
#taskmenu a.button-logout:hover {
|
||||
color: @taskmenu-logout-button-hover-color;
|
||||
}
|
||||
|
||||
.listing.iconized li.preferences > a:before {
|
||||
content: @fa-var-sliders;
|
||||
}
|
||||
.listing.iconized li.folders > a:before {
|
||||
content: @fa-var-folder;
|
||||
}
|
||||
.listing.iconized li.responses > a:before {
|
||||
content: @fa-var-comment;
|
||||
}
|
||||
.listing.iconized li.identities > a:before {
|
||||
content: @fa-var-at;
|
||||
}
|
||||
.listing.iconized li.password > a:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
.listing.iconized li.addressbook a:before {
|
||||
content: @fa-var-book;
|
||||
}
|
||||
.listing.iconized li.contactgroup a:before {
|
||||
content: @fa-var-group;
|
||||
}
|
||||
.listing.iconized li.contactsearch a:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
.listing.iconized tr.contact.person td.name:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
.listing.iconized tr.general > td.section:before {
|
||||
content: @fa-var-desktop;
|
||||
}
|
||||
.listing.iconized tr.mailbox > td.section:before {
|
||||
content: @fa-var-envelope-o;
|
||||
}
|
||||
.listing.iconized tr.mailview > td.section:before {
|
||||
content: @fa-var-inbox;
|
||||
}
|
||||
.listing.iconized tr.compose > td.section:before {
|
||||
content: @fa-var-paper-plane;
|
||||
}
|
||||
.listing.iconized tr.addressbook > td.section:before {
|
||||
content: @fa-var-user;
|
||||
}
|
||||
.listing.iconized tr.folders > td.section:before {
|
||||
content: @fa-var-folder-o;
|
||||
}
|
||||
.listing.iconized tr.server > td.section:before {
|
||||
content: @fa-var-server;
|
||||
}
|
||||
|
||||
.folderlist li a:before {
|
||||
content: @fa-var-folder-o;
|
||||
}
|
||||
.folderlist li.inbox a:before {
|
||||
content: @fa-var-inbox;
|
||||
}
|
||||
.folderlist li.trash a:before {
|
||||
content: @fa-var-trash;
|
||||
}
|
||||
.folderlist li.trash.empty a:before {
|
||||
content: @fa-var-trash-o;
|
||||
}
|
||||
.folderlist li.drafts a:before {
|
||||
content: @fa-var-edit;
|
||||
}
|
||||
.folderlist li.sent a:before {
|
||||
content: @fa-var-paper-plane;
|
||||
}
|
||||
.folderlist li.junk a:before {
|
||||
content: ""; /* TODO */
|
||||
}
|
||||
.folderlist li.archive a:before {
|
||||
content: @fa-var-archive;
|
||||
}
|
||||
|
||||
.toolbarmenu li a.print:before {
|
||||
content: @fa-var-print;
|
||||
}
|
||||
.toolbarmenu li a.copy:before {
|
||||
content: @fa-var-copy;
|
||||
}
|
||||
.toolbarmenu li a.move:before {
|
||||
content: @fa-var-arrows;
|
||||
}
|
||||
.toolbarmenu li a.source:before {
|
||||
content: @fa-var-flask;
|
||||
}
|
||||
.toolbarmenu li a.download:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
.toolbarmenu li a.extwin:before {
|
||||
content: @fa-var-external-link;
|
||||
}
|
||||
.toolbarmenu li a.edit:before {
|
||||
content: @fa-var-edit; /* TODO: edit.asnew */
|
||||
}
|
||||
.toolbarmenu li a.read:before {
|
||||
content: @fa-var-star-o;
|
||||
}
|
||||
.toolbarmenu li a.unread:before {
|
||||
content: @fa-var-star;
|
||||
}
|
||||
.toolbarmenu li a.flag:before {
|
||||
content: @fa-var-flag;
|
||||
}
|
||||
.toolbarmenu li a.unflag:before {
|
||||
content: @fa-var-flag-o;
|
||||
}
|
||||
.toolbar a.button.reply:before {
|
||||
content: @fa-var-mail-reply;
|
||||
}
|
||||
.toolbar a.button.reply-all:before {
|
||||
content: @fa-var-mail-reply-all;
|
||||
}
|
||||
.toolbar a.button.forward:before {
|
||||
content: @fa-var-mail-forward;
|
||||
}
|
||||
.toolbar a.button.delete:before {
|
||||
content: @fa-var-trash-o;
|
||||
}
|
||||
.toolbar a.button.markmessage:before {
|
||||
content: @fa-var-tag;
|
||||
}
|
||||
.toolbar a.button.more:before {
|
||||
content: @fa-var-ellipsis-h;
|
||||
}
|
||||
.toolbar a.button.dropdown:before {
|
||||
content: @fa-var-caret-down;
|
||||
}
|
||||
.toolbar a.button.settings:before {
|
||||
content: @fa-var-cog;
|
||||
}
|
||||
.toolbar a.button.print:before {
|
||||
content: @fa-var-print;
|
||||
}
|
||||
.toolbar a.button.search:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
.toolbar a.button.upload:before,
|
||||
.toolbar a.button.import:before {
|
||||
content: @fa-var-upload;
|
||||
}
|
||||
.toolbar a.button.download:before,
|
||||
.toolbar a.button.export:before {
|
||||
content: @fa-var-download;
|
||||
}
|
||||
.toolbar a.button.compose:before {
|
||||
content: @fa-var-edit;
|
||||
}
|
||||
.toolbar a.button.refresh:before {
|
||||
content: @fa-var-refresh;
|
||||
}
|
||||
.toolbar a.button.archive:before {
|
||||
content: @fa-var-archive;
|
||||
}
|
||||
.toolbar a.button.encrypt:before {
|
||||
content: @fa-var-lock;
|
||||
}
|
||||
.toolbar a.button.firstpage:before {
|
||||
content: @fa-var-fast-backward;
|
||||
}
|
||||
.toolbar a.button.prevpage:before {
|
||||
content: @fa-var-backward;
|
||||
}
|
||||
.toolbar a.button.nextpage:before {
|
||||
content: @fa-var-forward;
|
||||
}
|
||||
.toolbar a.button.lastpage:before {
|
||||
content: @fa-var-fast-forward;
|
||||
}
|
||||
|
||||
.searchbar > a.button.reset:before {
|
||||
content: @fa-var-remove;
|
||||
}
|
||||
.searchbar > a.button.options:before {
|
||||
content: @fa-var-angle-down;
|
||||
}
|
||||
|
||||
button.icon.save:before {
|
||||
content: @fa-var-check;
|
||||
}
|
||||
button.icon.edit:before {
|
||||
content: @fa-var-pencil;
|
||||
}
|
||||
button.icon.qrcode:before {
|
||||
content: @fa-var-qrcode;
|
||||
}
|
||||
button.icon.search:before {
|
||||
content: @fa-var-search;
|
||||
}
|
||||
@ -0,0 +1,261 @@
|
||||
/*** Common UI elements ***/
|
||||
|
||||
#uploadform,
|
||||
.ui.modal,
|
||||
.voice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.iframe .formcontent {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
body.iframe .formbuttons {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
#messagestack {
|
||||
position: absolute;
|
||||
bottom: 0.5em;
|
||||
right: 0.5em;
|
||||
z-index: 50000;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
max-height: 85%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#messagestack div.voice {
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
}
|
||||
|
||||
#messagestack div a {
|
||||
color: #94c0da; /* TODO: less'ify this color */
|
||||
}
|
||||
|
||||
#messagestack div i.icon {
|
||||
font-size: 2em !important;
|
||||
}
|
||||
|
||||
#messagestack div a:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui.message {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.ui-dialog iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ui-dialog-content.iframe {
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.ui.popup {
|
||||
padding: 0;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.button.disabled,
|
||||
.listing li a.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.listbox .scroller {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.listing tbody td,
|
||||
.listing li {
|
||||
display: block;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
cursor: default;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.listbox .listitem a,
|
||||
.listbox .listitem span,
|
||||
.listbox .tablink a,
|
||||
.listing tbody td,
|
||||
.listing li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
padding: 0 0.5em;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
line-height: 2.4em;
|
||||
}
|
||||
|
||||
.listing tbody td {
|
||||
display: table-cell;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
table.listing {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.listing {
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.listing li {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.listing li ul {
|
||||
border-top: 1px solid #f4f4f4;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
ul.listing li ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul.treelist li div.treetoggle {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 4px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: /* TODO */ no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.folderlist li.mailbox .unreadcount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 2em;
|
||||
line-height: 1.4em;
|
||||
margin: 0.5em 0.2em;
|
||||
padding: 0 0.3em;
|
||||
background: /* todo */ #1e70bf;
|
||||
border-radius: 0.4em;
|
||||
color: @badge-font-color;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.listing li input[type=checkbox] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0.2em;
|
||||
height: 2.4em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.folderlist li.mailbox.selected > a .unreadcount {
|
||||
background: /* todo */;
|
||||
}
|
||||
|
||||
.folderlist li.mailbox.recent > a .unreadcount {
|
||||
background: /* todo */;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
height: 2.4em;
|
||||
}
|
||||
|
||||
.toolbar .ui.popup,
|
||||
.toolbar.ui.popup {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.toolbar > .spacer {
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
}
|
||||
|
||||
.toolbar a.button span.inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
display: table;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
background-color: @layout-header-background-color;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.searchbar > * {
|
||||
height: 2.4em;
|
||||
}
|
||||
|
||||
.searchbar > form,
|
||||
.searchbar > a.button.options,
|
||||
.searchbar > a.button.reset {
|
||||
display: none;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.searchbar > form,
|
||||
.searchbar > form > input {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.searchbar input {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.searchbar > a.button.search.active {
|
||||
color: @searchbar-icon-active-color;
|
||||
}
|
||||
|
||||
.header > .buttons > input.button {
|
||||
padding: 0.3em 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* fixes border set by accordion widget */
|
||||
.propform.ui.accordion td.title {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
/* make some elements bigger on tablets/phones */
|
||||
/* TODO: we should/could maybe do this more globally? */
|
||||
@media screen and (max-width: 1024px) {
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
ul.toolbar {
|
||||
margin: 0;
|
||||
}
|
||||
ul.toolbar > li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
ul.toolbar a.button .inner {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
#messagestack {
|
||||
left: 0.5em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue