@gravity-ui/uikit/build/esm/components/Sheet/Sheet.css

Gravity UI base styling and components

.g-sheet {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
}
.g-sheet__veil {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 100%;
  background-color: var(--g-color-sfx-veil);
  opacity: 0;
  will-change: opacity;
}
.g-sheet__veil_with-transition {
  transition: opacity 0.3s ease;
}
.g-sheet__sheet {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  width: 100%;
  max-height: 90%;
  will-change: transform;
}
.g-sheet__sheet_with-transition {
  transition: transform 0.3s ease;
}
.g-sheet__sheet-swipe-area {
  position: absolute;
  inset-block-start: -20px;
  inset-inline-start: 0;
  width: 100%;
  height: 40px;
  z-index: 1;
}
.g-sheet__sheet-top {
  position: relative;
  height: 20px;
  border-start-start-radius: 20px;
  border-start-end-radius: 20px;
  background-color: var(--g-sheet-background-color, var(--g-color-base-float));
}
.g-sheet__sheet-top-resizer {
  --_--translate-x: calc(-50% * var(--g-flow-direction));
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translateX(var(--_--translate-x)) translateY(-50%);
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background-color: var(--g-color-line-generic);
}
.g-sheet__sheet-scroll-container {
  box-sizing: border-box;
  max-height: calc(90% - 20px);
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  background-color: var(--g-sheet-background-color, var(--g-color-base-float));
  transition: height 0.3s ease;
}
.g-sheet__sheet-scroll-container_without-scroll {
  overflow: hidden;
}
.g-sheet__sheet-content-box {
  border: 1px solid transparent;
}
.g-sheet__sheet-content-box-border-compensation {
  margin: -1px;
}
.g-sheet__sheet-content {
  box-sizing: border-box;
  width: 100%;
  padding: var(--g-sheet-content-padding, 0 10px);
}
.g-sheet__sheet-content-title {
  padding-block-end: 8px;
  font-size: var(--g-text-body-2-font-size);
  line-height: 28px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}