Skip to content

Instantly share code, notes, and snippets.

@DaleMckeown
Last active April 9, 2019 02:25
Show Gist options
  • Save DaleMckeown/7c24ea66bbd1c04717ca3dada654f8b8 to your computer and use it in GitHub Desktop.
Save DaleMckeown/7c24ea66bbd1c04717ca3dada654f8b8 to your computer and use it in GitHub Desktop.
//
// 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);
}
}
}
}
}
@yoanmalie
Copy link

Update variables :
$input-color-placeholder become $input-placeholder-color
$input-line-height become $input-btn-line-height

Quick fix :

// Fix variables name
$input-color-placeholder: $input-placeholder-color;
$input-line-height: $input-btn-line-height;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment