vault/ui/app/styles/helper-classes/layout.scss

@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

/* This helper includes styles relating to: display, width, height, float, visibility, position, alignment. */

// display
.is-block {
  display: block !important;
}

.is-hidden {
  display: none !important;
}

.is-inline {
  display: inline !important;
}

.is-inline-block {
  display: inline-block !important;
}

// position
.top-right-absolute {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
}

.is-in-bottom-right {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 10;
}

.is-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.top-xxs {
  top: size_variables.$spacing-4;
}

// visibility
.is-invisible {
  visibility: hidden;
}

// overflow
.overflow-auto {
  overflow: auto;
}

.is-overflow-hidden {
  overflow: hidden;
}

.is-overflow-y-auto {
  overflow-y: auto;
}

// width and height
.is-fullwidth {
  width: 100%;
}

.three-fourths-width {
  width: 75%;
}

.one-fourth-width {
  width: 25%;
}

.one-half-width {
  width: 50%;
}

.two-thirds-width {
  width: 66%;
}

.is-auto-width {
  width: auto;
}

.is-min-width-0 {
  min-width: 0;
}

.is-medium-width {
  width: calc(size_variables.$desktop / 2.5);
}

.is-medium-height {
  height: 125px;
}

.is-calc-large-height {
  height: calc(size_variables.$desktop * 0.66);
}

.is-max-drawer-height {
  max-height: size_variables.$drawer-height;
}

// float
.is-pulled-left {
  float: left !important;
}

.is-pulled-right {
  float: right !important;
}

// alignment
.align-self-baseline {
  align-self: baseline;
}

.is-v-centered {
  vertical-align: middle;
}

// responsive css
@media screen and (min-width: 769px), print {
  .is-hidden-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .is-hidden-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 1215px) {
  .is-widescreen:not(.is-max-desktop) {
    max-width: 1152px;
  }
}

.has-margin-top-auto {
  margin-top: auto;
}