Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F117749440
forms.less
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Authored By
Unknown
Size
27 KB
Referenced Files
None
Subscribers
None
forms.less
View Options
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) 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 authors in the README.md 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
:
1
px
;
height
:
1
px
;
opacity
:
0
;
}
.
propform
{
//
TODO
:
do
we
need
this
?
&:
not
(
.
popupmenu
)
{
width
:
100
%
;
}
//
This
is
the
way
we
can
have
multiple
checkboxes
in
a
single
form
field
.
form-check
td
:
not
(
.
title
)
>
label
{
display
:
block
;
margin
:
0
;
line-height
:
2
rem
;
label
{
margin-right
:
.5
rem
;
}
}
td
.
datetime
{
display
:
flex
;
input
:
first
-
child
{
margin-right
:
.5
rem
;
}
input
:
last-child
{
width
:
75
%
;
}
}
td
.
rowbuttons
{
width
:
1
%
;
white-space
:
nowrap
;
vertical-align
:
top
;
span
{
display
:
none
;
}
a
{
padding
:
0
;
line-height
:
2.3
rem
;
height
:
2.3
rem
;
font-size
:
1
rem
;
&:before
{
&:extend(.font-icon-class)
;
content
:
@
fa-var-plus
;
vertical-align
:
unset
;
@media
screen
and
(
min-width
:
(
@
screen
-
width
-
bs-phone
+
1
px
))
{
margin
:
0
!important
;
}
}
&
.
delete
:
before
{
content
:
@
fa-var-trash-alt
;
}
&
.
advanced
:
before
{
content
:
@
fa-var-cog
;
}
&
:
not
(
:
last-child
)
{
margin-right
:
.25
rem
;
}
}
}
td
.
rowactions
{
width
:
1
%
;
vertical-align
:
top
;
.form-control
{
width
:
auto
;
}
}
td
.
rowtargets
{
vertical-align
:
top
;
.composite
{
input,
textarea,
select,
.multi-input,
.input-group
{
margin-bottom
:
.5
rem
;
}
.
input-group
{
input,
textarea,
select,
.multi-input
{
margin-bottom
:
0
;
}
}
br
{
display
:
block
;
}
}
.
input-group
{
margin-bottom
:
.25
rem
;
*:first-child.input-group-prepend
{
text-align
:
left
;
min-width
:
7.5
em
;
&
>
*
{
width
:
100
%
;
}
}
}
&
>
.
advanced
{
margin-top
:
.25
rem
;
}
}
td
.
title
{
padding-top
:
0
;
padding-bottom
:
0
;
}
td
>
.
flexbox
{
display
:
flex
;
&
>
.multi-input
{
width
:
100
%
;
margin-left
:
.25
rem
;
}
}
&
.
groupped
{
&.readonly
{
legend
{
margin
:
0
;
}
.
row
.
input-group
{
margin-bottom
:
0
!important
;
}
label
{
min-width
:
7
rem
;
//
Overwrite
Bootstrap
.input-group-*
style
to
make
the
label
transparent
background-color
:
transparent
;
border
:
0
;
border-radius
:
0
;
}
}
.
row
.
input-group
{
margin-bottom
:
.5
rem
;
flex-wrap
:
nowrap
;
&
>
*:first-child
{
.overflow-ellipsis
;
min-width
:
8
rem
;
&:not(select)
{
padding
:
0
;
}
@
media
screen
and
(
max-width
:
@
screen-width-xs
)
{
min-width
:
6rem
;
width
:
6rem
;
flex-grow
:
unset
;
}
label
{
width
:
100
%;
}
}
&
>
*
:
nth-child
(
2
)
{
flex-grow
:
30
;
}
&
:
last-child
{
margin-bottom
:
1
rem
;
}
select
{
text-align
:
left
;
}
&
.
composite
select
{
height
:
auto
;
}
.
content
{
padding
:
0
;
display
:
flex
;
flex-wrap
:
wrap
;
border-radius
:
0
;
input
{
border-radius
:
0
;
border-color
:
transparent
;
}
.
ff_street
{
width
:
100
%
;
}
.
ff_locality
{
width
:
75
%
;
}
.
ff_zipcode
{
width
:
25
%
;
}
.
ff_country
,
.
ff_region
{
width
:
50
%
;
}
}
}
.
form-control-plaintext
{
flex-grow
:
1
;
border
:
0
;
}
}
.
addfield
{
margin
:
0
;
select
{
width
:
8
rem
;
margin-top
:
.5
rem
;
}
}
.
form-text
{
font-size
:
90
%
;
color
:
@
color
-
form-hint
;
}
//
Some
dialogs
may
use
simple
one-row
forms
like
this
&
.
row
.
form-group
{
margin-left
:
0
;
margin-right
:
0
;
label,
div
{
padding-left
:
0
;
padding-right
:
0
;
}
}
//
Some
forms
may
use
multiple
elements
that
are
not
part
of
.
input-group
//
add
proper
spacing
select
+
select
,
select
+
.
input-group
{
padding-top
:
.5
rem
;
}
&
.
text-only
{
margin-bottom
:
.25
rem
;
tr
{
margin
:
0
;
}
label
{
padding-bottom
:
0
!important
;
}
@
media
screen
and
(
max-width
:
@
screen-width-bs-phone
)
{
tr
{
display
:
table-row
;
}
td
{
width
:
auto
;
&:first-child
{
width
:
33
%
;
}
}
:
not
(
tr
)
.
form-group
.
row
{
.
col-form-label
{
width
:
33
%
;
}
&
>
:
last-child
{
width
:
67
%
;
}
}
}
}
}
@
media
screen
and
(
max-width
:
@
screen-width-bs-phone
)
{
.
propform
{
table.compact-table
{
.rowactions
>
select,
.flexbox
>
select
{
width
:
100
%
;
}
tr
{
display
:
flex
;
flex-direction
:
column
;
td
{
width
:
100
%
;
padding
:
.25
rem
0
0
0
;
&.rowbuttons
{
text-align
:
right
;
padding-top
:
0
;
a
{
margin-left
:
.5
rem
;
&
>
span
{
display
:
inline
;
}
}
}
}
}
}
}
}
.
propform
,
.
formcontent
{
fieldset
:
not
(
.
tab-pane
)
:
nth-of-type
(
n
+
2
)
{
margin-top
:
1
em
;
}
legend
{
font-weight
:
bold
;
font-size
:
1.2
em
;
}
label
{
-webkit-
hyphens
:
auto
;
-ms-
hyphens
:
auto
;
hyphens
:
auto
;
overflow
:
hidden
;
margin-bottom
:
0
;
}
}
fieldset
.
advanced
{
>
legend
{
width
:
auto
;
cursor
:
pointer
;
&:after
{
&:extend(.font-icon-class)
;
float
:
right
;
margin
:
0
0
0
.25
rem
;
line-height
:
inherit
;
font-size
:
inherit
;
content
:
@
fa-var-angle-up
;
}
&
.
closed
:
after
{
content
:
@
fa-var-angle-down
;
}
}
}
@
media
screen
and
(
max-width
:
@
screen-width-bs-phone
)
{
.
formcontent
.
text-only
{
.
form-group
:
not
(
tr
)
{
margin-bottom
:
.25
rem
;
.col-form-label
{
width
:
33
%
;
&
+
span
{
width
:
67
%
;
}
}
}
}
html
.
iframe
.
formcontent
>
.
propform
{
padding
:
.
25rem
;
}
}
//
Forms
fixes
for
IE
and
Edge
html
.
ms
.
propform
{
.
row
:
not
(
.
form
-check
)
>
td
{
display
:
flex
;
flex-wrap
:
wrap
;
//
puts
"hint"
element
below
the
input
}
@
media
screen
and
(
min-width
:
@
screen-width-bs-phone
)
{
.
row
.
form-check
>
td
{
display
:
flex
;
}
}
}
.
formcontainer
{
display
:
flex
;
flex-direction
:
column
;
justify-content
:
flex-start
;
overflow-y
:
hidden
!
important
;
.
formcontent
{
overflow-x
:
hidden
;
overflow-y
:
auto
;
}
.
formbuttons
{
padding
:
0.5
rem
1
rem
;
button
{
margin-right
:
.5
rem
;
}
}
//
Prevent
button
truncation
on
tablets
html
.
iframe
.
ipad
&,
html
.
iframe
.
webkit
.
tablet
&
{
.formbuttons
{
min-height
:
4
rem
;
}
}
//
We
don
't need buttons element on small devices, nor flex display
html.layout-small &,
html.layout-phone & {
display: initial;
overflow: initial !important;
.formcontent {
overflow: initial !important;
}
.formbuttons {
display: none;
}
}
}
.formcontent {
&:not(.popupmenu) {
padding: 1rem;
}
.row {
margin-right: 0; // without these the form is too wide causing horizontal scrollbar appearence
margin-left: 0;
// Note: We never use odd numbers here
.col, .col-2, .col-4, .col-6, .col-8, .col-10, .col-12,
.col-sm, .col-sm-2, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-10, .col-sm-12 {
// overwrite Bootstrap'
s
redundant
padding
padding
:
0
;
}
.
form-control-plaintext
,
label
.
col-form-label
{
padding
:
.375
rem
.375
rem
.375
rem
0
;
}
.
form-control-plaintext
{
padding-bottom
:
0
;
border
:
0
;
}
@
media
screen
and
(
max-width
:
@
screen-width-bs-phone
)
{
&
.
form-group
{
&
>
td
label
{
padding-bottom
:
0
;
}
}
}
}
.
row
.
form-check
{
padding
:
0
;
//
without
these
e
.
g
.
inputs
in
compose
screen
are
not
aligned
properly
display
:
flex
;
//
https
://
github
.
com
/
twbs
/
bootstrap
/
issues
/
22348
flex-wrap
:
nowrap
;
//
alignment
fixes
needed
because
we
do
not
stick
precissely
to
Bootstrap
's form structure
@media screen and (max-width: @screen-width-bs-phone) {
.col-6 {
max-width: 100%;
flex: auto;
}
& > *:last-child {
width: 1%;
min-width: 2.6rem; // for .custom-switch
}
&.with-link > *:last-child {
min-width: 8rem;
}
}
.form-check-input {
margin: .5rem 0; // fixes checkbox alignment with other inputs in a form
}
.custom-switch + a {
line-height: 2;
vertical-align: bottom;
}
td > label {
padding-bottom: 0;
}
}
.nav-tabs {
margin-bottom: 1rem;
&:empty {
display: none;
}
}
.hint {
font-style: italic;
color: @color-form-hint;
}
// RAW (CodeMirror) editor
&.raweditor {
height: 100%;
form {
height: 100%;
}
textarea {
font-family: monospace;
height: 100%;
}
.CodeMirror {
border: 1px solid @color-input-border;
border-radius: .3rem;
height: 100%;
color: @color-font;
}
.CodeMirror-focused {
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}
.CodeMirror-linebackground.line-error {
background-color: @color-error;
opacity: 0.4;
}
.errorGutter {
width: .8em;
}
}
}
@media screen and (max-width: @screen-width-mini) {
.formcontent {
.col-form-label {
flex: auto;
max-width: 100%;
}
.col-6, .col-8, .col-10 {
flex: auto;
max-width: 100%;
}
}
}
/* Some common icons for "iconized inputs" */
.input-group .icon {
text-decoration: none;
padding: .375rem .5rem;
&.input-group-text {
min-width: 2.4rem;
}
&:before {
&:extend(.font-icon-class);
margin: 0 !important;
line-height: 1;
font-size: 1.1em;
}
&.user:before {
content: @fa-var-user;
}
&.pass:before {
content: @fa-var-lock;
}
&.host:before {
content: @fa-var-home;
}
&.language.before {
content: @fa-var-globe;
}
&.cancel:before {
content: @fa-var-times;
}
&.delete:before {
content: @fa-var-trash-alt;
}
&.edit:before {
content: @fa-var-pencil-alt;
}
&.add:before {
content: @fa-var-plus;
}
&.add.recipient:before {
content: @fa-var-users;
}
&.search:before {
content: @fa-var-search;
}
&.filter:before {
content: @fa-var-filter;
}
&.key:before {
content: @fa-var-key;
}
.inner {
display: none;
}
}
.input-group a {
&:focus {
background-color: @color-input-border-focus-shadow;
outline: 0;
}
}
@proplist-record-height: 2rem;
.proplist {
margin-bottom: 0;
padding: 0;
li {
list-style-type: none;
line-height: @proplist-record-height;
margin-bottom: .25rem;
display: flex;
align-items: center;
&:last-child {
margin-bottom: 0;
}
input[type=radio] {
margin-right: .5em;
&:disabled + label {
opacity: .5;
}
}
label:not(.input-group-text) {
margin: 0;
line-height: @proplist-record-height;
}
select {
width: auto;
display: inline;
}
}
}
.checklist {
& > div {
line-height: 2rem;
display: block; // overwrite .custom-switch
}
.custom-control-label {
&:before,
&:after {
margin: -.15rem 0 0 0;
}
}
& > div + br {
display: none;
}
}
/*** Forms in popups ***/
.popup form.propform {
padding: .25rem;
overflow-x: hidden;
}
.popupmenu.form {
&.nolist {
padding: 0 .5rem;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li:not(.separator) {
padding: 0 1rem;
label {
margin: 0;
line-height: @listing-line-height;
input {
margin-right: .5rem;
}
}
}
input {
vertical-align: middle;
}
select {
margin: .5rem 0;
}
.buttons {
text-align: center;
padding: .5rem;
}
}
/*** Smart list (multiple input) field ***/
.multi-input {
& > .content {
max-height: 11.65em;
overflow: hidden;
overflow-y: auto;
border-radius: .25rem;
border: 1px solid @color-input-border;
&.focused {
.style-input-focus;
}
// TODO: style button focus
}
a.icon {
&.reset:before {
&:extend(.font-icon-class);
content: @fa-var-trash-alt;
}
}
input.form-control {
padding-left: .75rem;
height: auto; // fixes input height
}
input,
input:focus,
.input-group-text {
border-radius: 0;
border: 0;
border-bottom: 1px solid @color-input-border;
box-shadow: none;
}
.input-group-text {
border-left: 1px solid @color-input-border;
}
.input-group-append {
margin-left: 0;
}
.input-group {
margin: 0 !important;
flex-wrap: nowrap; // Bootstrap makes them wrappable (imho)
&:last-child * {
border-bottom: 0;
}
}
& + .btn {
margin-top: .5rem;
}
&.is-invalid {
& > .content {
border: 1px solid @color-input-border-invalid;
&.focused {
border-color: @color-input-border-invalid;
box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
}
}
& > .invalid-feedback {
display: inline-block;
}
}
}
/*** Files upload widget with list of files, upload form and drop area ***/
.file-upload {
padding: 1rem 1rem 12rem;
margin: 0 1rem .25rem 1rem;
border-radius: .5rem;
border: .2rem dashed @color-table-border;
fieldset & {
margin: 0;
}
.upload-form {
text-align: center;
padding-bottom: 1em;
a.btn,
button {
margin-bottom: .25rem;
}
}
.hint {
margin-bottom: .5rem;
color: @color-form-hint;
text-align: center;
}
.attachmentslist {
li {
position: relative;
display: flex;
padding-right: 1.5em;
a.filename {
flex: 1;
}
a.delete,
a.cancelupload {
position: absolute;
right: 0;
width: auto; // fix button width if the widget is in a .popupmenu
&:before {
margin: 0;
}
}
.inner {
display: none;
}
}
}
&.droptarget {
padding-bottom: .5rem !important;
&:after {
content: @icon-file-drop;
width: 10rem;
margin: 5rem auto 0 auto;
display: block;
}
&.active {
border-color: darken(@color-toolbar-button-background-hover, 20%);
}
&.hover {
border-color: darken(@color-toolbar-button-background-hover, 20%);
background-color: @color-toolbar-button-background-hover;
}
}
}
/*** Smart recipient input field ***/
@recipient-input-margin-fix: .25rem;
.recipient-input {
display: flex;
flex-wrap: wrap;
padding: 0 .75rem @recipient-input-margin-fix .75rem;
list-style-type: none;
cursor: text;
height: auto; // reset .form-control height
&.focus {
.style-input-focus;
}
.recipient {
display: flex;
position: relative;
max-width: 50%;
border: 1px solid @color-recipient-input-border;
background-color: @color-recipient-input-background;
border-radius: .25em;
padding: 0 .25em;
margin-top: @recipient-input-margin-fix;
margin-right: .2em;
white-space: nowrap;
cursor: default;
@media screen and (max-width: 450px) {
width: 100%;
max-width: 100%;
}
}
.name {
.overflow-ellipsis;
flex-grow: 1;
display: inline-block;
line-height: 1.1;
padding: .25rem;
vertical-align: middle;
}
.email {
text-indent: -5000rem;
display: inline-block;
width: 0;
}
.quotes {
position: absolute;
width: 0;
opacity: 0;
}
a.button.icon {
font-size: .8em;
cursor: pointer;
padding: 0 0 0 .25em;
&:before {
float: none;
display: inline-block;
width: 1em;
margin: 0;
line-height: 1.5;
}
}
li {
max-width: 100%;
}
input {
width: 40px;
max-width: 100%;
background: transparent !important;
border: 0 !important;
margin-top: @recipient-input-margin-fix;
outline: 0;
line-height: 1.5;
&::-ms-clear {
display: none; // removes clear icon in IE11
}
}
}
/*** Tagedit widget (from jqueryui plugin) ***/
.tagedit-list {
display: flex;
flex-wrap: wrap;
padding: 0 .75rem @recipient-input-margin-fix .75rem;
margin: 0;
list-style-type: none;
min-height: 2.3rem;
& + .placeholder {
display: none;
}
&[tabindex="-1"] {
.style-input-focus;
}
li.tagedit-listelement-new {
margin-top: @recipient-input-margin-fix;
input {
width: 15px;
background: transparent !important;
border: 0;
outline: 0;
margin: 0;
padding: 0;
line-height: 1.5;
&.tagedit-input-disabled {
visibility: hidden;
}
}
}
li.tagedit-listelement-old {
max-width: 50%;
border: 1px solid @color-recipient-input-border;
background-color: @color-recipient-input-background;
border-radius: .25em;
margin-top: @recipient-input-margin-fix;
margin-right: .2em;
white-space: nowrap;
a /* TODO: .tagedit-close, .tagedit-break, .tagedit-delete, .tagedit-save */ {
font-size: .8em;
cursor: pointer;
display: inline-block;
width: 1.1em;
overflow: hidden;
vertical-align: middle;
margin-right: .2rem;
&:before {
&:extend(.font-icon-class);
content: @fa-var-times;
width: 1em;
line-height: 1.2;
}
}
span {
.overflow-ellipsis;
flex-grow: 1;
display: inline-block;
line-height: 1.4;
padding: 0 .25rem;
vertical-align: middle;
}
}
li.tagedit-listelement-focus {
// TODO
}
}
/*** 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;
}
}
.skinitem input {
width: auto;
}
.skinname {
font-weight: bold;
}
.skinlicense,
.skinlicense a {
font-style: italic;
text-decoration: none;
}
.skinlicense a:hover {
text-decoration: underline;
}
.skinlicense,
.skinauthor {
font-size: 90%;
}
.skinthumbnail {
width: 64px;
height: 64px;
border: 1px solid @color-input-border;
background: #fff;
border-radius: 4px;
}
}
/*** Percent input with jQuery-UI slider ***/
// Structure: <input><span.label><div.ui-slider>
.input-percent-slider {
display: flex;
align-items: center;
input {
max-width: 4em;
}
span.label {
line-height: 2.4;
padding: 0 .5rem 0 .25rem;
}
div.ui-slider {
flex: 1;
margin: 0 .5em;
}
}
/*** Image upload widget ***/
.image-upload {
position: relative;
overflow: hidden;
cursor: pointer;
background-color: @color-image-upload-background;
a.button {
display: none;
position: absolute;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, .85);
border-radius: 5px;
width: 2.5em;
padding: .5em;
margin: .5em;
line-height: 1;
}
&.changed a.button {
display: inline;
}
}
.input-group-combo {
select:first-of-type {
&.alone {
border-radius: .25rem !important;
}
&:not(.alone) {
flex: unset;
width: auto;
}
}
.input-group {
padding: 0 !important;
flex: 2;
}
select + select,
.input-group :first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/*** General browser hacks ***/
// Remove outline on selects in Firefox
@-moz-document url-prefix() {
select:-moz-focusring {
color: transparent !important;
text-shadow: 0 0 0 @color-font !important;
}
}
/*** Bootstrap style overrides and improvements ***/
.form-control {
color: @color-font;
&:focus {
color: @color-font;
border-color: @color-input-border-focus;
box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
}
// FIXME: This fixes style of required inputs in Firefox/Edge, but
// makes inputs on login form red-bordered, commented for now
// &:invalid,
&.is-invalid {
border-color: @color-input-border-invalid;
box-shadow: none;
&:focus {
border-color: @color-input-border-invalid;
box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
}
}
&::placeholder {
color: @color-input-placeholder;
}
}
.invalid-feedback {
color: @color-error;
font-size: 90%;
}
.form-group {
margin-bottom: .5rem;
}
.input-group-text {
color: @color-input;
background-color: @color-input-addon-background;
input:focus {
z-index: 1;
border-color: @color-input-border-focus !important;
}
}
.custom-switch {
padding-left: 0;
display: inline-block;
.custom-control-input {
left: 0;
&:focus ~ .custom-control-label:before {
box-shadow: 0 0 0 .2rem @color-checkbox-focus-shadow;
}
&:focus:not(:checked) ~ .custom-control-label::before {
border-color: @color-checkbox-focus;
}
&:checked ~ .custom-control-label::before {
border-color: @color-checkbox;
background-color: @color-checkbox;
}
&:checked:disabled ~ .custom-control-label::before {
border-color: @color-checkbox-checked-disabled;
background-color: @color-checkbox-checked-disabled;
}
}
// Make switches bigger, we use smaller font than Bootstrap'
s
default
.
custom-control-label
{
padding-left
:
2.5
rem
;
min-height
:
2
rem
;
line-height
:
2
;
display
:
inline-block
;
html.touch
&
{
padding-left
:
3
rem
;
}
&
:
before
,
&
:
after
{
border-radius
:
.6
rem
;
margin
:
.15
rem
0
;
html.touch
&
{
border-radius
:
.8
rem
;
margin
:
0
;
}
}
&
:
before
{
left
:
2
px
;
width
:
2
rem
;
height
:
1.2
rem
;
html.touch
&
{
top
:
.2
rem
;
width
:
2.6
rem
;
height
:
1.6
rem
;
}
}
&
:
after
{
left
:
4
px
;
width
:
~
"calc(1.2rem - 4px)"
;
height
:
~
"calc(1.2rem - 4px)"
;
html.touch
&
{
top
:
~
"calc(.2rem + 2px)"
;
height
:
~
"calc(1.6rem - 4px)"
;
width
:
~
"calc(1.6rem - 4px)"
;
}
}
}
.
custom-control-input
:
checked
~
.
custom-control-label
::
after
{
transform
:
translateX
(
.8
rem
);
html.touch
&
{
transform
:
translateX
(
1
rem
);
}
}
.
custom-control-input
:
not
(
:
disabled
)
~
.
custom-control-label
{
&:after,
&:before
{
cursor
:
pointer
;
}
}
}
.
custom-file
{
display
:
block
;
.custom-file-label
{
white-space
:
nowrap
;
.overflow-ellipsis
;
padding-right
:
100
px
;
line-height
:
1.5
!important
;
}
&
+
.
hint
{
margin-top
:
.25
rem
;
}
}
.
custom-file-input
:
focus
~
.
custom-file-label
{
border-color
:
@
color
-
input-border-focus
;
box-shadow
:
0
0
0
.2
rem
@
color
-
input-border-focus-shadow
;
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sat, Apr 4, 1:36 AM (1 w, 5 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
18821940
Default Alt Text
forms.less (27 KB)
Attached To
Mode
R113 roundcubemail
Attached
Detach File
Event Timeline