Sha256: 803725e69b40fde5a696a1f854109426696926c180f8736cf8fd9d9f12b02140
Contents?: true
Size: 1.81 KB
Versions: 48
Compression:
Stored size: 1.81 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 $space-sm/3;
height: $pb_form_pill_height;
border-radius: $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: $space-sm/4;
}
#{$selector}_close {
color: $color_value;
padding-left: $space-sm/2;
padding-right: $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: 16px;
font-weight: 400;
}
.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; }
}
}
}
Version data entries
48 entries across 48 versions & 1 rubygems