You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
roundcubemail/skins/elastic/styles/widgets/forms.less

307 lines
6.0 KiB
Plaintext

/**
* Roundcube webmail styles for the Elastic skin
*
* Copyright (c) 2017, The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original autors in the README file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Common form elements ***/
#uploadform {
display: none;
}
form.smart-upload,
input.smart-upload {
visibility: hidden;
width: 1px;
height: 1px;
opacity: 0;
}
/* TODO: review when decided what css framework to use */
.propform:not(.popupmenu) {
width: 100%;
}
/* Forms fixes for IE and Edge */
html.ms .propform {
.row:not(.form-check) > td {
display: flex;
}
@media screen and (min-width: 576px) {
.row.form-check > td {
display: flex;
}
}
@media screen and (max-width: 575px) {
.row {
display: block;
}
}
}
.formcontent {
padding: 1em;
.row {
margin-right: 0; /* without these the form is too wide causing horizontal scrollbar appearence */
margin-left: 0;
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
/* overwrite Bootstrap's redundant padding */
padding-right: 0;
padding-left: 0;
}
}
.row.form-check {
padding-right: 0; /* without these e.g. inputs in compose screen are not aligned properly */
@media screen and (min-width: 576px) {
display: flex; /* https://github.com/twbs/bootstrap/issues/22348 */
}
/* fixed checkbox vertical alignment */
td:not(.col-form-label) {
padding-top: ~"calc(.5rem - 1px * 2)";
padding-bottom: ~"calc(.5rem - 1px * 2)";
}
.form-check-input {
margin-left: 0; /* fixes checkbox alignment with other inputs in a form */
}
}
td.form-control-plaintext {
padding-top: ~"calc(1rem - 1px * 2)";
padding-bottom: ~"calc(1rem - 1px * 2)";
}
}
.formbuttons {
padding: 0 1em 1em 1em;
}
/* Some common icons for "iconized inputs" */
.input-group-addon.icon {
text-decoration: none;
&:before {
&:extend(.font-icon-class);
margin: 0;
line-height: 1;
}
&.user:before {
content: @fa-var-user;
}
&.pass:before {
content: @fa-var-lock;
}
&.host:before {
content: @fa-var-home;
}
&.cancel:before {
content: @fa-var-close;
}
&.edit:before {
content: @fa-var-pencil;
}
&.add:before {
content: @fa-var-plus;
}
.inner {
display: none;
}
}
td.editfield { width: 99%; /* TODO */ }
/*** Forms in popups ***/
.popupmenu.form {
margin: .5rem;
ul {
list-style-type: none;
padding: 0;
}
.buttons {
text-align: center;
}
}
/*** Files upload widget with list of files, upload form and drop area ***/
.file-upload {
/* TODO */
padding: 1em 1em 12em;
margin: 1em;
background-color: #f4f4f4;
.upload-form {
text-align: center;
padding-bottom: 1em;
}
.hint {
margin-bottom: .5rem;
}
.attachmentslist {
padding: 0;
list-style: none;
li {
display: block;
padding-bottom: .5em;
}
}
&.droptarget {
&.hover {
}
&.active {
}
}
}
/*** Smart recipient input field ***/
.recipient-input {
display: block !important; /* overwrites Bootstrap */
min-height: 2.4em;
overflow: hidden;
/* padding: .2em .5em; */
.recipient {
border: 1px solid #ddd; /* TODO */
background-color: #f4f4f4; /* TODO */
border-radius: .25em;
padding: 0 .25em;
margin-right: .2em;
display: inline-block;
white-space: nowrap;
}
.name {
max-width: 25em;
display: inline-block;
line-height: 1.1;
padding: .25em;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.email {
text-indent: -5000rem;
display: inline-block;
width: 0;
}
.quotes {
position: absolute;
width: 0;
opacity: 0;
}
a.button.icon {
font-size: .8em;
cursor: pointer;
&:before {
float: none;
display: inline-block;
width: 1em;
margin: 0;
}
}
}
/*** Skin selection widget ***/
.skinselection {
white-space: nowrap;
display: table-row;
& > span {
display: table-cell;
vertical-align: middle;
padding: .1em .5em;
white-space: normal;
&:last-child {
padding-right: 0;
}
}
7 years ago
.skinitem input {
width: auto;
}
.skinname {
font-weight: bold;
}
.skinlicense,
.skinlicense a {
font-style: italic;
text-decoration: none;
}
.skinlicense a:hover {
text-decoration: underline;
}
.skinthumbnail {
width: 64px;
height: 64px;
border: 1px solid #ccc; /* TODO */
background: #fff;
border-radius: 4px;
}
}
/*** Image upload widget ***/
.image-upload {
position: relative;
overflow: hidden;
cursor: pointer;
a.button {
display: none;
position: absolute;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, .85);
border-radius: 5px;
width: 2.5em;
padding: .5em;
margin: .5em;
}
&.changed a.button {
display: inline;
}
}
/*** TinyMCE editor ***/
.mce-tinymce.mce-container.mce-panel {
border-radius: .25rem;
overflow: hidden;
}