Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #23371
Closed
Open
Issue created Aug 12, 2017 by Administrator@rootContributor

v4-beta form-validation-state() mixin does not work

Created by: tkrotoff

See demo here: https://codepen.io/tkrotoff/pen/QMMqXZ

I'm re-implementing the equivalent of has-warning from alpha-6 (and adding has-info) since it has been removed from beta (in my opinion this is a bad choice).

// See https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_variables.scss#L484
$form-feedback-warning-color: theme-color("warning") !default;

// See https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_forms.scss#L266
.warning-feedback {
  //display: none;
  margin-top: .25rem;
  font-size: .875rem;
  color: $form-feedback-warning-color;
}

// See https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_forms.scss#L288
@include form-validation-state("warning", $form-feedback-warning-color);

form-validation-state() mixin generates:

.was-validated .form-control:warning, .form-control.is-warning, .was-validated
.custom-select:warning,
.custom-select.is-warning {
  border-color: #ffc107; }
  .was-validated .form-control:warning:focus, .form-control.is-warning:focus, .was-validated
  .custom-select:warning:focus,
  .custom-select.is-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); }
  .was-validated .form-control:warning ~ .invalid-feedback,
  .was-validated .form-control:warning ~ .invalid-tooltip, .form-control.is-warning ~ .invalid-feedback,
  .form-control.is-warning ~ .invalid-tooltip, .was-validated
  .custom-select:warning ~ .invalid-feedback,
  .was-validated
  .custom-select:warning ~ .invalid-tooltip,
  .custom-select.is-warning ~ .invalid-feedback,
  .custom-select.is-warning ~ .invalid-tooltip {
    display: block; }

This part does not work:

.was-validated .form-control:warning, .form-control.is-warning, .was-validated
.custom-select:warning,
.custom-select.is-warning {
  border-color: #ffc107; }

border-color is not applied.

This works:

/*.was-validated .form-control:warning,*/ .form-control.is-warning/*, .was-validated
.custom-select:warning,
.custom-select.is-warning*/ {
  border-color: #ffc107; }

It does not make sense to me.

Tried with Chrome, Firefox and Safari => same problem.

Also what is invalid-tooltip about? It does not seem to be used anywhere.

Assignee
Assign to
Time tracking