Sha256: b04e994b4a9fceb870087a646063214d5e05ddcd0bdf418a6cf9705ea731e0ad
Contents?: true
Size: 1.96 KB
Versions: 6
Compression:
Stored size: 1.96 KB
Contents
@import "../tokens/spacing";
@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/shadows";
@import "../pb_avatar/avatar";
$selector: ".pb_form_pill";
$pb_form_pill_height: 37px;
$form_pill_colors: (
primary: map-get($status_color_text, "primary"),
);
[class^=pb_form_pill_kit] {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0 calc($space-sm/3);
height: $pb_form_pill_height;
border-radius: calc($pb_form_pill_height/2);
margin-bottom: 2px;
margin-top: 2px;
cursor: pointer;
@each $color_name, $color_value in $form_pill_colors {
&[class*=_#{$color_name}] {
background-color: rgba($color_value, $opacity-1);
transition: background-color 0.2s ease;
box-shadow: none;
@media (hover:hover) {
&:hover {
background-color: rgba($color_value, $opacity-2);
}
}
#{$selector}_text {
color: $color_value;
padding-left: $space-sm;
padding-right: calc($space-sm/4);
}
#{$selector}_close {
color: $color_value;
padding-left: calc($space-sm/2);
padding-right: calc($space-sm/4);
display: flex;
align-items: center;
height: 100%;
cursor: pointer;
}
#{$selector}_tag {
color: $color_value;
padding-left: $space-sm;
}
}
}
&.small {
height: fit-content;
height: -moz-fit-content;
.pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
font-size: $font_base;
font-weight: $regular;
}
.pb_form_pill_text, .pb_form_pill_tag {
line-height: 1.7;
padding-left: $space_xs;
padding-right: 2px;
}
[class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
width: 20px;
height: 20px;
flex-basis: 20px;
&::before { line-height: 21px; }
}
}
&[class*=lowercase] {
text-transform: lowercase;
}
&[class*=none] {
text-transform: none;
}
}
Version data entries
6 entries across 6 versions & 1 rubygems