rsuite/Popover/styles/index.css

A suite of react components

*[class*=rs-],*[class*=rs-]::before, *[class*=rs-]::after{
  box-sizing:border-box;
}
:root{
  --rs-gray-0:#fff;
  --rs-gray-100:#f2f2f5;
  --rs-gray-200:#e5e5ea;
  --rs-gray-600:#717273;
  --rs-gray-700:#575757;
  --rs-gray-800:#343434;
  --rs-border-primary:var(--rs-gray-200);
  --rs-bg-overlay:var(--rs-gray-0);
  --rs-popover-shadow:0 1px 8px rgba(0, 0, 0, 0.12);
}

[data-theme=dark],
.rs-theme-dark{
  --rs-gray-0:#fff;
  --rs-gray-100:#cbced4;
  --rs-gray-200:#a4a9b3;
  --rs-gray-600:#3c3f43;
  --rs-gray-700:#292d33;
  --rs-gray-800:#1a1d24;
  --rs-border-primary:var(--rs-gray-600);
  --rs-bg-overlay:var(--rs-gray-700);
  --rs-popover-shadow:0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme=high-contrast],
.rs-theme-high-contrast{
  --rs-gray-0:#fff;
  --rs-gray-100:#cbced4;
  --rs-gray-200:#a4a9b3;
  --rs-gray-600:#3c3f43;
  --rs-gray-700:#292d33;
  --rs-gray-800:#1a1d24;
  --rs-border-primary:var(--rs-gray-100);
  --rs-bg-overlay:var(--rs-gray-800);
  --rs-popover-shadow:0 4px 6px rgba(0, 0, 0, 0.3);
}

:root{
  --rs-font-size-xs:0.75rem;
  --rs-font-size-sm:0.875rem;
  --rs-font-size-lg:1.125rem;
  --rs-font-size-xl:1.25rem;
  --rs-font-size-2xl:1.5rem;
  --rs-font-size-3xl:1.875rem;
  --rs-font-size-4xl:2.25rem;
  --rs-font-size-5xl:3rem;
  --rs-text-line-height-xs:calc(1 / 0.75);
  --rs-text-line-height-sm:calc(1.25 / 0.875);
  --rs-text-line-height-lg:calc(1.75 / 1.125);
  --rs-text-line-height-xl:calc(1.75 / 1.25);
  --rs-text-line-height-2xl:calc(2 / 1.5);
  --rs-text-line-height-3xl:calc(2.25 / 1.875);
  --rs-text-line-height-4xl:calc(2.5 / 2.25);
  --rs-text-line-height-5xl:1;
  --rs-radius-sm:0.25rem;
  --rs-zindex-popover:1060;
}

@media (max-width: calc(576px - 1px)){
  [data-visible-from=xs]{
    display:none !important;
  }
}
@media (min-width: 576px){
  [data-hidden-from=xs]{
    display:none !important;
  }
}
@media (max-width: calc(768px - 1px)){
  [data-visible-from=sm]{
    display:none !important;
  }
}
@media (min-width: 768px){
  [data-hidden-from=sm]{
    display:none !important;
  }
}
@media (max-width: calc(992px - 1px)){
  [data-visible-from=md]{
    display:none !important;
  }
}
@media (min-width: 992px){
  [data-hidden-from=md]{
    display:none !important;
  }
}
@media (max-width: calc(1200px - 1px)){
  [data-visible-from=lg]{
    display:none !important;
  }
}
@media (min-width: 1200px){
  [data-hidden-from=lg]{
    display:none !important;
  }
}
@media (max-width: calc(1400px - 1px)){
  [data-visible-from=xl]{
    display:none !important;
  }
}
@media (min-width: 1400px){
  [data-hidden-from=xl]{
    display:none !important;
  }
}
:root{
  --rs-heading-font-family:inherit;
  --rs-heading-font-weight:bolder;
  --rs-heading-color:inherit;
  --rs-heading-h1-font-size:var(--rs-font-size-5xl);
  --rs-heading-h2-font-size:var(--rs-font-size-4xl);
  --rs-heading-h3-font-size:var(--rs-font-size-3xl);
  --rs-heading-h4-font-size:var(--rs-font-size-2xl);
  --rs-heading-h5-font-size:var(--rs-font-size-xl);
  --rs-heading-h6-font-size:var(--rs-font-size-lg);
  --rs-heading-h1-line-height:var(--rs-text-line-height-5xl);
  --rs-heading-h2-line-height:var(--rs-text-line-height-4xl);
  --rs-heading-h3-line-height:var(--rs-text-line-height-3xl);
  --rs-heading-h4-line-height:var(--rs-text-line-height-2xl);
  --rs-heading-h5-line-height:var(--rs-text-line-height-xl);
  --rs-heading-h6-line-height:var(--rs-text-line-height-lg);
}

.rs-heading{
  font-family:var(--rs-heading-font-family);
  font-weight:var(--rs-heading-font-weight);
  color:var(--rs-heading-color);
  margin:0;
}
.rs-heading.h1{
  font-size:var(--rs-heading-h1-font-size);
  line-height:var(--rs-heading-h1-line-height);
}
.rs-heading.h2{
  font-size:var(--rs-heading-h2-font-size);
  line-height:var(--rs-heading-h2-line-height);
}
.rs-heading.h3{
  font-size:var(--rs-heading-h3-font-size);
  line-height:var(--rs-heading-h3-line-height);
}
.rs-heading.h4{
  font-size:var(--rs-heading-h4-font-size);
  line-height:var(--rs-heading-h4-line-height);
}
.rs-heading.h5{
  font-size:var(--rs-heading-h5-font-size);
  line-height:var(--rs-heading-h5-line-height);
}
.rs-heading.h6{
  font-size:var(--rs-heading-h6-font-size);
  line-height:var(--rs-heading-h6-line-height);
}

.rs-popover{
  --rs-popover-font-size:var(--rs-font-size-xs);
  --rs-popover-line-height:var(--rs-text-line-height-xs);
  --rs-popover-title-font-size:var(--rs-font-size-sm);
  --rs-popover-title-line-height:var(--rs-text-line-height-sm);
  --rs-popover-border-radius:var(--rs-radius-sm);
  --rs-popover-position-x:var(--rs-position-x);
  --rs-popover-position-y:var(--rs-position-y);
  --rs-popover-opacity:var(--rs-opacity, 0);
  --rs-popover-arrow-gap:4px;
  --rs-popover-arrow-width:6px;
  --rs-popover-arrow-outer-width:6px;
  --rs-popover-translate-distance:2px;
  position:absolute;
  top:var(--rs-popover-position-y);
  left:var(--rs-popover-position-x);
  z-index:var(--rs-zindex-popover);
  display:block;
  padding:12px;
  font-size:var(--rs-popover-font-size);
  background-color:var(--rs-bg-overlay);
  background-clip:padding-box;
  border-radius:var(--rs-popover-border-radius);
  opacity:var(--rs-popover-opacity);
  filter:drop-shadow(var(--rs-popover-shadow));
}
.rs-popover.rs-anim-fade{
  transition:opacity 0.1s linear, transform 0.1s ease-out;
}
.rs-popover.rs-anim-in{
  --rs-popover-opacity:1;
  transition:opacity 0.15s linear, transform 0.15s ease-in;
}
[data-theme=high-contrast] .rs-popover, .rs-theme-high-contrast .rs-popover{
  border:1px solid var(--rs-border-primary);
}
.rs-popover > .rs-popover-arrow{
  border-width:var(--rs-popover-arrow-outer-width);
}
.rs-popover > .rs-popover-arrow, .rs-popover > .rs-popover-arrow::before, .rs-popover > .rs-popover-arrow::after{
  position:absolute;
  display:block;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
}
.rs-popover > .rs-popover-arrow::before, .rs-popover > .rs-popover-arrow::after{
  border-width:var(--rs-popover-arrow-width);
  content:"";
}
.rs-popover > .rs-popover-arrow::before{
  display:none;
}
[data-theme=high-contrast] .rs-popover > .rs-popover-arrow::before, .rs-theme-high-contrast .rs-popover > .rs-popover-arrow::before{
  display:block;
}
.rs-popover-title{
  margin:0;
  font-size:var(--rs-popover-title-font-size);
  line-height:var(--rs-popover-title-line-height);
}
.rs-popover-content{
  font-size:var(--rs-popover-font-size);
  line-height:var(--rs-popover-line-height);
}
.rs-popover-title ~ .rs-popover-content{
  margin-top:8px;
}

.rs-popover:where([data-placement*=top]){
  margin-top:calc((var(--rs-popover-arrow-width) + 2px) * -1);
  transform:translate(0, 0);
}
.rs-popover:where([data-placement*=top]).rs-anim-in{
  transform:translate(0, calc(var(--rs-popover-translate-distance) * -1));
}
.rs-popover:where([data-placement*=top]) > .rs-popover-arrow{
  margin-inline-start:calc(var(--rs-popover-arrow-outer-width) * -1);
  bottom:calc(var(--rs-popover-arrow-outer-width) * -1);
}
.rs-popover:where([data-placement*=top]) > .rs-popover-arrow::after{
  bottom:-6px;
  margin-inline-start:-6px;
  border-width:6px 6px 0;
  border-top-color:var(--rs-bg-overlay);
}
[data-theme=high-contrast] .rs-popover:where([data-placement*=top]) > .rs-popover-arrow::before, .rs-theme-high-contrast .rs-popover:where([data-placement*=top]) > .rs-popover-arrow::before{
  bottom:-7px;
  margin-inline-start:-7px;
  border-width:7px 7px 0;
  border-top-color:var(--rs-border-primary);
}
.rs-popover:where([data-placement*=bottom]){
  margin-top:calc(var(--rs-popover-arrow-width) + 2px);
  transform:translate(0, 0);
}
.rs-popover:where([data-placement*=bottom]).rs-anim-in{
  transform:translate(0, var(--rs-popover-translate-distance));
}
.rs-popover:where([data-placement*=bottom]) > .rs-popover-arrow{
  margin-inline-start:calc(var(--rs-popover-arrow-outer-width) * -1);
  top:calc(var(--rs-popover-arrow-outer-width) * -1);
}
.rs-popover:where([data-placement*=bottom]) > .rs-popover-arrow::after{
  top:-6px;
  margin-inline-start:-6px;
  border-width:0 6px 6px;
  border-bottom-color:var(--rs-bg-overlay);
}
[data-theme=high-contrast] .rs-popover:where([data-placement*=bottom]) > .rs-popover-arrow::before, .rs-theme-high-contrast .rs-popover:where([data-placement*=bottom]) > .rs-popover-arrow::before{
  top:-7px;
  margin-inline-start:-7px;
  border-width:0 7px 7px;
  border-bottom-color:var(--rs-border-primary);
}
.rs-popover:where([data-placement=bottom], [data-placement=top]) > .rs-popover-arrow{
  left:50%;
}
.rs-popover:where([data-placement=bottom-end], [data-placement=top-end]) > .rs-popover-arrow{
  inset-inline-end:var(--rs-popover-arrow-gap);
}
.rs-popover:where([data-placement=left], [data-placement=right]) > .rs-popover-arrow{
  top:50%;
}
.rs-popover:where([data-placement=left-end], [data-placement=right-end]) > .rs-popover-arrow{
  bottom:var(--rs-popover-arrow-gap);
}

.rs-popover{
  --rs-popover-arrow-offset:calc(var(--rs-popover-arrow-outer-width) * -1);
}
.rs-popover:where([data-placement*=right]){
  margin-inline-start:calc(var(--rs-popover-arrow-width) + 2px);
  transform:translate(0, 0);
}
.rs-popover:where([data-placement*=right]).rs-anim-in{
  transform:translate(var(--rs-popover-translate-distance), 0);
}
.rs-popover:where([data-placement*=right]) > .rs-popover-arrow{
  inset-inline-start:var(--rs-popover-arrow-offset);
  margin-top:calc(var(--rs-popover-arrow-outer-width) * -1);
}
.rs-popover:where([data-placement*=right]) > .rs-popover-arrow::after{
  left:-6px;
  margin-top:-6px;
  border-width:6px 6px 6px 0;
  border-right-color:var(--rs-bg-overlay);
}
[data-theme=high-contrast] .rs-popover:where([data-placement*=right]) > .rs-popover-arrow::before, .rs-theme-high-contrast .rs-popover:where([data-placement*=right]) > .rs-popover-arrow::before{
  left:-7px;
  margin-top:-7px;
  border-width:7px 7px 7px 0;
  border-right-color:var(--rs-border-primary);
}
[dir=rtl] .rs-popover:where([data-placement*=right]){
  margin-inline-end:calc(var(--rs-popover-arrow-width) + 2px);
}
[dir=rtl] .rs-popover:where([data-placement*=right]) > .rs-popover-arrow{
  inset-inline-start:auto;
  inset-inline-end:var(--rs-popover-arrow-offset);
}
.rs-popover:where([data-placement*=left]){
  margin-inline-start:calc((var(--rs-popover-arrow-width) + 2px) * -1);
  transform:translate(0, 0);
}
.rs-popover:where([data-placement*=left]).rs-anim-in{
  transform:translate(calc(var(--rs-popover-translate-distance) * -1), 0);
}
.rs-popover:where([data-placement*=left]) > .rs-popover-arrow{
  inset-inline-end:var(--rs-popover-arrow-offset);
  margin-top:calc(var(--rs-popover-arrow-outer-width) * -1);
}
.rs-popover:where([data-placement*=left]) > .rs-popover-arrow::after{
  right:-6px;
  margin-top:-6px;
  border-width:6px 0 6px 6px;
  border-left-color:var(--rs-bg-overlay);
}
[data-theme=high-contrast] .rs-popover:where([data-placement*=left]) > .rs-popover-arrow::before, .rs-theme-high-contrast .rs-popover:where([data-placement*=left]) > .rs-popover-arrow::before{
  right:-7px;
  margin-top:-7px;
  border-width:7px 0 7px 7px;
  border-left-color:var(--rs-border-primary);
}
[dir=rtl] .rs-popover:where([data-placement*=left]){
  margin-inline-end:calc((var(--rs-popover-arrow-width) + 2px) * -1);
}
[dir=rtl] .rs-popover:where([data-placement*=left]) > .rs-popover-arrow{
  inset-inline-start:var(--rs-popover-arrow-offset);
  inset-inline-end:auto;
}

.rs-popover-full{
  padding:0;
}
.rs-popover-full .rs-popover-content{
  margin-top:0;
}
.rs-popover-full:where([data-placement=top-start], [data-placement=bottom-start]) > .rs-popover-arrow{
  margin-inline-start:var(--rs-popover-arrow-outer-width);
}
.rs-popover-full:where([data-placement=right-start], [data-placement=left-start]) > .rs-popover-arrow{
  margin-top:var(--rs-popover-arrow-outer-width);
}