frontend/app/assets/stylesheets/mno_enterprise/custom/form.less
input.fluroblue[type=radio] {
width : 18px;
margin : 0;
padding : 0;
opacity : 0;
}
input.fluroblue[type=radio] + label{
display : inline-block;
margin-left : -12px;
padding-left : 25px;
background : image-url('icons/radio-fluroblue.png') no-repeat 0 -18px;
line-height : 18px;
}
input.fluroblue[type=radio]:checked + label{
background-position : 0 1px;
}
form label {
color: @input-label-color;
}
.input-group-addon.select select {
background-color: @input-bg;
}
select {
text-indent: 1px;
text-overflow: '';
}
// Remove dropdown arrow (Chrome, Firefox and IE)
select.unstyled {
-webkit-appearance: none;
-moz-appearance: none;
}
select::-ms-expand {
display: none;
}
//----------------------------------------
// Styling for phone: select + input
//----------------------------------------
form .phone {
select.form-control {
width:30%;
.border-right-radius(0px);
}
input.form-control[type='text'] {
margin-left:23%;
margin-top:-34px;
width:77%;
.border-left-radius(0px);
}
}
form select.form-control {
height:44px;
-webkit-appearance: none;
}
form .select.fa {
margin: -28px 7% 0px 0px;
float: right;
}
//----------------------------------------
// Styling for password checker
//----------------------------------------
form li.checked {
color: lighten(@decorator-inverse-color,30%);
}
form li.unchecked {
color: lighten(@text-strong-color,70%);
}
//----------------------------------------
// Style for forms on inverse backgrounds
//----------------------------------------
form.inverse {
select {
background-color: @bg-inverse-color;
.font(16px, 300, @decorator-inverse-color);
border:solid 1px #111c21;
.border-radius(5px);
height:44px;
-webkit-appearance: none;
padding-left:15px;
width:100%;
// Placeholder
.placeholder(@decorator-inverse-color);
}
.select.fa {
.font(16px,300,@decorator-inverse-color);
margin: -28px 7% 0px 0px;
float: right;
}
.form-control {
// Placeholder
.placeholder(@decorator-inverse-color);
}
}
//------------------------------------
// Dark forms styles
//------------------------------------
form.dark {
input[type='text'], input[type='email'], textarea {
.border-radius(5px);
.font(16px, 300, @bg-main-color);
background-color: @bg-inverse-color;
border: solid 1px @bg-inverse-color;
line-height: 25px;
margin-bottom: 0px;
width: 100%;
min-height: 42px;
padding: 5px 5px 5px 15px;
}
*::-webkit-input-placeholder {
color: @bg-main-color;
}
*:-moz-placeholder {
/* FF 4-18 */
color: @bg-main-color;
}
*::-moz-placeholder {
/* FF 19+ */
color: @bg-main-color;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: @bg-main-color;
}
label {
color: @bg-main-color;
}
}
.dark {
.bootstrap-select {
select {
.font(16px, 300, @bg-main-color);
background-color: @bg-inverse-color;
}
.dropdown-toggle {
height: 42px;
}
.dropdown-menu {
.font(16px, 300, @bg-main-color);
background-color: @bg-inverse-color;
}
.dropdown-menu > li > a {
.font(16px, 300, @bg-main-color);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
.font(16px, 300, @decorator-inverse-color);
background-color: @bg-inverse-color;
}
}
}
// Put a dropdown inside an input-group-addon
.input-group-addon.select {
padding:0px;
select {
height:100%;
border:0px;
}
}
//------------------------------------
// Invalid inputs (AngularJS)
//------------------------------------
input.ng-dirty.ng-invalid {
border-color: @brand-danger;
}