146 lines
3.3 KiB
SCSS
146 lines
3.3 KiB
SCSS
/*
|
|
* Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License"); you may
|
|
* not use this file except in compliance with the License. You may obtain
|
|
* a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
* License for the specific language governing permissions and limitations
|
|
* under the License.
|
|
*/
|
|
|
|
/**
|
|
* The Tag-input form control
|
|
*/
|
|
.form-control.tag-input {
|
|
position: relative;
|
|
padding: .2em;
|
|
padding-bottom: 0px;
|
|
height: auto;
|
|
cursor: text;
|
|
min-height: 2.4em;
|
|
|
|
input.tag-input {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
// Size overrides
|
|
&.input-lg {
|
|
height: auto;
|
|
.tag {
|
|
border-radius: $border-radius-base;
|
|
}
|
|
|
|
}
|
|
&.input-sm {
|
|
height: auto;
|
|
.tag {
|
|
border-radius: ($border-radius-small - 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
padding: .2em .2em .2em .4em;
|
|
margin-right: .2em;
|
|
margin-bottom: .3em;
|
|
font-size: .9em;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
|
|
border-radius: $border-radius-small;
|
|
border: 1px solid $btn-default-border;
|
|
color: $btn-default-color;
|
|
background-color: $btn-default-bg;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
a {
|
|
color: $btn-default-color;
|
|
margin-left: .1em;
|
|
cursor: pointer;
|
|
padding: .2em .2em .2em .1em;
|
|
background: transparent;
|
|
filter: alpha(opacity=50);
|
|
opacity: .5;
|
|
font-weight: bold;
|
|
font-size: 1.4em;
|
|
line-height: .8em;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&.tag-primary {
|
|
border-color: $btn-primary-border;
|
|
color: $btn-primary-color;
|
|
background-color: $btn-primary-bg;
|
|
|
|
a {
|
|
color: $btn-primary-color;
|
|
}
|
|
}
|
|
|
|
&.tag-success {
|
|
border-color: $btn-success-border;
|
|
color: $btn-success-color;
|
|
background-color: $btn-success-bg;
|
|
|
|
a {
|
|
color: $btn-success-color;
|
|
}
|
|
}
|
|
|
|
&.tag-info {
|
|
border-color: $btn-info-border;
|
|
color: $btn-info-color;
|
|
background-color: $btn-info-bg;
|
|
|
|
a {
|
|
color: $btn-info-color;
|
|
}
|
|
}
|
|
|
|
&.tag-warning {
|
|
border-color: $btn-warning-border;
|
|
color: $btn-warning-color;
|
|
background-color: $btn-warning-bg;
|
|
|
|
a {
|
|
color: $btn-warning-color;
|
|
}
|
|
}
|
|
|
|
&.tag-danger {
|
|
border-color: $btn-danger-border;
|
|
color: $btn-danger-color;
|
|
background-color: $btn-danger-bg;
|
|
|
|
a {
|
|
color: $btn-danger-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag-complete {
|
|
&.focused {
|
|
.form-control.tag-input {
|
|
$color-rgba: rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6);
|
|
border-color: $input-border-focus;
|
|
outline: 0;
|
|
@include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #{$color-rgba}");
|
|
}
|
|
}
|
|
}
|