Topic: Little css issue in md-outline
                  
                  gianlucagiacometti
                  priority
                  asked 6 years ago
                
PRO version only
Expected behavior
active labels should be consistent
Actual behavior
textarea active label is always light blue, the others have no active color set
I suggest to add this in /pro/skins.scss:
.md-form {
  &.md-outline {
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=url],
    input[type=time],
    input[type=date],
    input[type=datetime-local],
    input[type=tel],
    input[type=number],
    input[type=search-md],
    input[type=search],
    textarea {
        ~ label.active {
            color: map-get($data, $skin-accent);
        }
    }
  }
}
                
                  
                      
                      gianlucagiacometti
                      priority
                        answered 6 years ago
                    
Ok, I improved the CSS to include mdb-select with md-outline.
Please check also my open issue on mdb-select for the related javascript.
This is the final version:
.md-form {
  .prefix {
    color: $input-label-color;
  }
  &.md-outline {
    .select-wrapper {
     + label {
        z-index: 0;
        &.active {
          color: map-get($data, skin-accent);
        }
      }
    }
    .caret {
      right: 0.5rem;
      color: $input-label-color;
    }
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=url],
    input[type=time],
    input[type=date],
    input[type=datetime-local],
    input[type=tel],
    input[type=number],
    input[type=search-md],
    input[type=search],
    textarea {
      ~ label.active {
        color: map-get($data, skin-accent);
      }
    }
    input[type=text].form-control.valid + label:after,
    input[type=text].form-control:focus.valid + label:after,
    input[type=password].form-control.valid + label:after,
    input[type=password].form-control:focus.valid + label:after,
    input[type=email].form-control.valid + label:after,
    input[type=email].form-control:focus.valid + label:after,
    input[type=url].form-control.valid + label:after,
    input[type=url].form-control:focus.valid + label:after,
    input[type=time].form-control.valid + label:after,
    input[type=time].form-control:focus.valid + label:after,
    input[type=date].form-control.valid + label:after,
    input[type=date].form-control:focus.valid + label:after,
    input[type=datetime-local].form-control.valid + label:after,
    input[type=datetime-local].form-control:focus.valid + label:after,
    input[type=tel].form-control.valid + label:after,
    input[type=tel].form-control:focus.valid + label:after,
    input[type=number].form-control.valid + label:after,
    input[type=number].form-control:focus.valid + label:after,
    input[type=search-md].form-control.valid + label:after,
    input[type=search-md].form-control:focus.valid + label:after,
    input[type=search].form-control.valid + label:after,
    input[type=search].form-control:focus.valid + label:after,
    textarea.md-textarea.form-control.valid + label:after,
    textarea.md-textarea.form-control:focus.valid + label:after {
      top: 3.75rem;
    }
    input[type=text].form-control.invalid + label:after,
    input[type=text].form-control:focus.invalid + label:after,
    input[type=password].form-control.invalid + label:after,
    input[type=password].form-control:focus.invalid + label:after,
    input[type=email].form-control.invalid + label:after,
    input[type=email].form-control:focus.invalid + label:after,
    input[type=url].form-control.invalid + label:after,
    input[type=url].form-control:focus.invalid + label:after,
    input[type=time].form-control.invalid + label:after,
    input[type=time].form-control:focus.invalid + label:after,
    input[type=date].form-control.invalid + label:after,
    input[type=date].form-control:focus.invalid + label:after,
    input[type=datetime-local].form-control.invalid + label:after,
    input[type=datetime-local].form-control:focus.invalid + label:after,
    input[type=tel].form-control.invalid + label:after,
    input[type=tel].form-control:focus.invalid + label:after,
    input[type=number].form-control.invalid + label:after,
    input[type=number].form-control:focus.invalid + label:after,
    input[type=search-md].form-control.invalid + label:after,
    input[type=search-md].form-control:focus.invalid + label:after,
    input[type=search].form-control.invalid + label:after,
    input[type=search].form-control:focus.invalid + label:after,
    textarea.md-textarea.form-control.invalid + label:after,
    textarea.md-textarea.form-control:focus.invalid + label:after {
      top: 3.75rem;
    }
  }
}
                    
                      
                      
                      gianlucagiacometti
                      priority
                        answered 6 years ago
                    
Moreover, the value of "top" for all elements should be 3.75rem, and not 2.75 rem.
WHATEVERINPUT.form-control.valid + label:after,
WHATEVERINPUT.form-control:focus.valid + label:after {
    top: 3.75rem;
}
WHATEVERINPUT.form-control.invalid + label:after,
WHATEVERINPUT.form-control:focus.invalid + label:after {
    top: 3.75rem;
}
                    
                      FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
 - Premium support: Yes
 - Technology: MDB jQuery
 - MDB Version: 4.8.0
 - Device: All
 - Browser: All
 - OS: All
 - Provided sample code: No
 - Provided link: No