Sha256: 9a494cf48a0a0a52f45e2af6b7c973fded5202be2eedda2a90a6f1c63940a29c
Contents?: true
Size: 1.65 KB
Versions: 92
Compression:
Stored size: 1.65 KB
Contents
@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/typography";
@import "../tokens/opacity";
@import "../pb_icon/icon";
$pb_icon_circle_sizes: (
"xxs": 16px,
"xs": 28px,
"sm": 38px,
"md": 60px,
"base": 60px,
"lg": 80px,
"xl": 100px,
);
@mixin svg_size($name, $match, $adjust) {
@if $name == $match {
$svg_xy: $adjust;
& > svg {
width: #{$svg_xy};
height: #{$svg_xy};
}
}
}
[class^=pb_icon_circle_kit] {
display: flex;
justify-content: center;
align-items: center;
object-fit: cover;
overflow: hidden;
position: relative;
// font-family set to sans-serif ONLY for emojis.
//Needed to fix misalignment issue caused by Proxima font
.icon_circle_emoji {
font-family: monospace;
}
i,
svg {
&[class^=pb_icon_kit] {
width: 100%;
height: 100%;
display: block;
text-align: center;
text-transform: uppercase;
position: relative;
z-index: 0;
}
}
@each $name, $size in $pb_icon_circle_sizes {
&[class*=_size_#{$name}] {
width: $size;
height: $size;
border-radius: calc($size/2);
background: $silver;
color: $text_lt_light;
font-size: $size * 0.38;
line-height: $size;
flex-shrink: 0;
flex-grow: 0;
flex-basis: $size;
@include svg_size($name, "xxs", $size - 6px);
}
}
@each $color_name, $color_value in $colors {
&[class*=_#{"" + $color_name}] {
color: $color_value;
background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
&.dark {
background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
}
}
}
}
Version data entries
92 entries across 92 versions & 1 rubygems