bol/styles/global/forms.less
2021-11-08 14:40:29 +01:00

207 lines
3.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 {
//-webkit-appearance: none;
//-moz-appearance: none;
//color: $c-black;
//color: $colorDark;
//font-family: $font-primary;
font-size: 14px;
text-align: center;
text-align-last: center;
-moz-text-align-last: center;
width: 100%;
border: none;
border-radius: 0;
// height: calc(100% - 2px);
// //border: 1px solid $colorTan;
// background: rgba(0, 0, 0, 0.05);
// border-radius: 0;
// border: none;
// box-shadow: none;
// color: $colorDark;
}
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;
}
}
}
// Stacked Groups
&.stacked {
label {
flex: 0 0 100%;
margin: 0;
&.checkbox {
flex: auto;
text-align: left;
}
}
}
}
.form-header {
margin: 0 0 0.25em 0;
padding: 2px 0;
//border-top: $borderGroove;
//border-bottom: $borderGroove;
//font-family: $font-tertiary;
font-size: 20px;
font-weight: 700;
}
.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;
}
}