Sha256: 65f8d1ba788fe65644a0241831fc27478ed12a31d39d7b8d5f01bfc575abd743
Contents?: true
Size: 1.89 KB
Versions: 39
Compression:
Stored size: 1.89 KB
Contents
$arrow-size: rem(14px);
$visible-portion-of-arrow: rem(5px);
$content-max-height: rem(295px);
$content-max-width: rem(400px);
.Polaris-Popover {
max-width: calc(100vw - #{2 * spacing()});
margin: $visible-portion-of-arrow spacing() spacing();
opacity: 1;
box-shadow: shadow(deep);
border-radius: border-radius(large);
will-change: opacity, left, top;
transition: opacity duration() easing(in);
}
.Polaris-Popover--measuring:not(.Polaris-Popover--leaving),
.Polaris-Popover--leaving {
opacity: 0;
}
.Polaris-Popover--measuring {
.Polaris-Popover__Content {
display: block;
}
}
.Polaris-Popover--leaving {
transition-timing-function: easing(out);
}
.Polaris-Popover--positionedAbove {
margin: spacing() spacing() $visible-portion-of-arrow;
.Polaris-Popover__Tip {
top: inherit;
bottom: 0;
border-top-left-radius: 0;
border-bottom-right-radius: border-radius();
}
}
.Polaris-Popover__Wrapper {
position: relative;
overflow: hidden;
background-color: color(white);
border-radius: border-radius(large);
}
.Polaris-Popover__Content {
position: relative;
display: flex;
flex-direction: column;
border-radius: border-radius(large);
max-width: $content-max-width;
max-height: $content-max-height;
&:focus {
outline: none;
}
}
.Polaris-Popover__Tip {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(45deg);
height: $arrow-size;
width: $arrow-size;
background: color(white);
border-top-left-radius: border-radius();
box-shadow: shadow(deep);
}
.Polaris-Popover__Pane {
flex: 1 1 0%;
max-width: 100%;
+ .Polaris-Popover__Pane {
border-top: border();
}
}
.Polaris-Popover__Pane--fixed {
overflow: visible;
flex: 0 0 auto;
}
.Polaris-Popover__Section {
padding: spacing();
+ .Polaris-Popover__Section {
border-top: border();
}
}
.Polaris-Popover__FocusTracker {
@include visually-hidden;
}
Version data entries
39 entries across 39 versions & 1 rubygems