1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Little css issue in md-outline

gianlucagiacometti priority asked 5 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 5 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;
    }
  }
}

Bartłomiej Malanowski staff commented 5 years ago

Thank you for sharing!

Tomek Makowski staff answered 5 years ago

Thanks @gianlucagiacometti for your suggest. We're going to include this idea soon.

gianlucagiacometti priority answered 5 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;
}
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • 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
Tags
md-outline
About author
gianlucagiacometti
308Support score
17Questions 23Answers 1Snippets