salix/front/core/components/chip/style.scss

53 lines
1.0 KiB
SCSS

@import "variables";
vn-chip {
border-radius: 16px;
background-color: $color-bg;
margin: 0 0.5em 0.5em 0;
color: $color-font;
font-size: 14px;
margin: .25em;
display: inline-flex;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
height: 28px;
padding: 0 .7em;
overflow: hidden;
&.colored {
background-color: $color-main;
color: $color-font-dark;
}
& > div {
display: flex;
align-items: center;
max-width: 100%;
height: 100%;
& > vn-avatar {
margin-left: -0.7em;
margin-right: .4em;
}
}
& > vn-icon {
margin-left: .2em;
margin-right: -0.3em;
vertical-align: middle;
opacity: .6;
cursor: pointer;
transition: opacity 250ms ease-out;
&:hover,
&:focus {
opacity: 1;
}
}
}
vn-avatar {
display: inline-block;
height: 28px;
width: 28px;
border-radius: 50%;
}