|
// |
|
// bootstrap-tagsinput v0.8.0 for Bootstrap v4.0.0-alpha.6 |
|
// -------------------------------------------------- |
|
|
|
|
|
.bootstrap-tagsinput { |
|
width: 100%; |
|
cursor: text; |
|
background-color: $input-bg; |
|
border: $input-btn-border-width solid $input-border-color; |
|
color: $input-color; |
|
font-size: $font-size-base; |
|
@include border-radius($border-radius); |
|
@include box-shadow($input-box-shadow); |
|
@include transition($input-transition); |
|
padding: 4px 6px; |
|
line-height: $input-line-height; |
|
|
|
& input { |
|
border: none; |
|
box-shadow: none; |
|
outline: none; |
|
background-color: transparent; |
|
padding: 0 6px; |
|
margin: 0 2px; |
|
width: auto; |
|
max-width: inherit; |
|
|
|
&:focus { |
|
border: none; |
|
box-shadow: none; |
|
} |
|
|
|
&::-moz-placeholder { |
|
color: $input-color-placeholder; |
|
opacity: 1; |
|
} |
|
|
|
&:-ms-input-placeholder { |
|
color: $input-color-placeholder; |
|
} |
|
|
|
&::-webkit-input-placeholder { |
|
color: $input-color-placeholder; |
|
} |
|
} |
|
|
|
&.form-control { |
|
& input::-moz-placeholder { |
|
color: $input-color-placeholder; |
|
opacity: 1; |
|
} |
|
|
|
& input:-ms-input-placeholder { |
|
color: $input-color-placeholder; |
|
} |
|
|
|
& input::-webkit-input-placeholder { |
|
color: $input-color-placeholder; |
|
} |
|
} |
|
|
|
& .badge { |
|
margin-right: 2px; |
|
font-size: 75%; |
|
@include border-radius($border-radius); |
|
|
|
& [data-role="remove"] { |
|
margin-left: 8px; |
|
cursor: pointer; |
|
|
|
&:after { |
|
content: "x"; |
|
padding: 0px 5px; |
|
background-color: rgba(0, 0, 0, 0.1); |
|
@include border-radius($border-radius); |
|
} |
|
|
|
&:hover { |
|
&:after { |
|
background-color: rgba(0, 0, 0, 0.62); |
|
} |
|
|
|
&:active { |
|
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); |
|
} |
|
} |
|
} |
|
} |
|
} |
Update variables :
$input-color-placeholder
become$input-placeholder-color
$input-line-height
become$input-btn-line-height
Quick fix :