bol/styles/global/forms.less
ZigmundKreud 7f6f813734 Support des propriétés d'items
Amélioration de l'interface d'édition d'items
2021-12-24 16:06:26 +01:00

259 lines
4.5 KiB
Plaintext

.bol {
input[readonly="true"] {
border: none;
color: dimgray;
cursor: not-allowed;
width: 100%;
vertical-align: middle;
background: transparent;
}
/*
Copied from dnd5e
*/
input[type="text"],
input[type="number"],
input[type="text"]:hover,
input[type="number"]:hover,
input[type="text"]:focus,
input[type="number"]:focus {
//border: 1px solid #111;
//box-shadow: 0 0 8px #26641c;
border-radius: 0;
border: none;
box-shadow: none;
}
input:disabled,
select:disabled,
textarea:disabled {
//color: $colorOlive;
}
input:disabled:hover,
select:disabled:hover,
textarea:disabled:hover,
input:disabled:focus,
select:disabled:focus,
textarea:disabled:focus {
box-shadow: none !important;
border: 1px solid transparent !important;
outline: none !important;
}
button {
background: rgba(0, 0, 0, 0.1);
//border: $borderGroove;
}
select {
box-shadow: none;
font-size: 14px;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
width: 100%;
border: none;
border-radius: 0;
}
select[multiple]{
box-shadow: none;
border: none;
font-size: 14px;
&:focus {
option:checked {
background: @c-darkred linear-gradient(0deg, @c-darkred 0%, @c-darkred 100%);
color:white;
}
}
}
option {
font-size: 14px;
.ellipsis();
}
option:hover,
option:focus,
option:active,
option:checked,
option[selected] {
cursor: pointer;
background: @c-darkred linear-gradient(0deg, @c-darkred 0%, @c-darkred 100%);
color:white;
}
//option:not(:checked) {
// color: black;
//} /* or whatever your default style is */
label.checkbox {
flex: auto;
padding: 0;
margin: 0;
height: 22px;
line-height: 22px;
font-size: 11px;
> input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0 2px 0 0;
position: relative;
top: 4px;
}
&.right > input[type="checkbox"] {
margin: 0 0 0 2px;
}
}
/* Form Groups */
.form-group {
label {
flex: 2;
//color: $colorOlive;
font-weight: bold;
}
.form-fields {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
> * {
flex: 1;
margin: 0 3px 0 0;
&:last-child {
margin-right: 0;
}
.flex1 {
flex: 1;
}
.flex2 {
flex: 2;
}
.flex3 {
flex: 3;
}
.flex4 {
flex: 4;
}
}
label {
flex: 0 0 100%;
margin: 0;
&.checkbox {
flex: auto;
text-align: left;
}
}
.field-value {
text-align: center;
}
}
// Stacked Groups
&.stacked {
label {
flex: 0 0 100%;
margin: 0;
&.checkbox {
flex: auto;
text-align: left;
}
}
}
}
.form-header {
margin: 0.25em 0 0.25em 0;
padding: 2px 5px;
//font-family: @font-special2;
//border-top: @borderGroove;
//border-bottom: @borderGroove;
font-family: @font-tertiary;
color: @colorOlive;
background-color: lightgray;
}
h1.form-header {
font-size: 2.5em;
font-weight: 700;
//color : black;
}
h2.form-header {
font-size: 2em;
font-weight: 500;
//color : black;
//border-top: @borderGroove;
border-bottom: @borderGroove;
}
h3.form-header {
font-size: 1.5em;
font-weight: 500;
//color : black;
//border-top: @borderGroove;
border-bottom: @borderGroove;
}
h4.form-header {
font-size: 1em;
font-weight: 500;
font-family: @font-primary;
color : black;
background-color: transparent;
border-top: none;
border-bottom: @borderGroove;
}
.tag {
display: inline-block;
margin: 0 2px 0 0;
padding: 0 3px;
font-size: 10px;
line-height: 16px;
border: 1px solid #999;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
}
/*
Placeholders
*/
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: lightgray;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: lightgray;
}
input::placeholder {
color: lightgray;
}
.property {
margin-top: 2px;
}
.inc-dec-btns {
color:@colorOlive;
}
}