iTop/css/backoffice/utils/helpers/_misc.scss

/*
 * @copyright   Copyright (C) 2010-2021 Combodo SARL
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

/* SCSS variables */
$ibo-is-code--background-color: $ibo-color-white-200 !default;
$ibo-is-code--padding: 1.25rem 1.5rem !default;

$ibo-sticky-sentinel--left: 0 !default;
$ibo-sticky-sentinel--right: 0 !default;
$ibo-sticky-sentinel--height: 0 !default;
$ibo-sticky-sentinel-top--top: 0 !default;
$ibo-sticky-sentinel-top--height: $ibo-sticky-sentinel--height !default;
$ibo-sticky-sentinel-bottom--bottom: 0 !default;
$ibo-sticky-sentinel-bottom--height: $ibo-sticky-sentinel--height !default;

/**************/
/* Visibility */
/**************/
.ibo-is-visible {
  display: inherit !important; /* Note: !important is necessary as it needs to overload any standard rules */
  visibility: visible !important;
}

.ibo-is-hidden {
  display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */
}

.ibo-is-transparent {
  opacity: 0 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}

.ibo-is-opaque {
  opacity: 1 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}

/****************************/
/* Disposition / alignement */
/****************************/
.ibo-is-fullwidth {
  width: 100%;
}

%ibo-fully-centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

%ibo-vertically-centered-content {
  display: flex;
  align-items: center;
}

/* Typically to align icons and text as it is a good practice to align them on the baseline and not the "middle" */
%ibo-baseline-centered-content {
  display: flex;
  align-items: baseline;
}

/* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
%ibo-full-height-content {
  display: flex;
  align-items: stretch;
}

/**************/
/* Fullscreen */
/**************/
/* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
html.ibo-has-fullscreen-descendant {
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
}

body.ibo-has-fullscreen-descendant {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.ibo-has-fullscreen-descendant {
  position: static !important;
  overflow: visible !important;
  z-index: 1050 !important;
}

/* Used on a fullscreen element (see .ibo-has-fullscreen-descendant) */
.ibo-is-fullscreen {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 1050;
}

/****************/
/* Text helpers */
/****************/
%ibo-text-truncated-with-ellipsis {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.ibo-text-truncated-with-ellipsis {
  @extend %ibo-text-truncated-with-ellipsis;
}

/* Use this when you want the hyperlink to be of the color of its container's text instead of the global hyperlink color */
%ibo-hyperlink-inherited-colors {
  color: inherit;

  &:hover,
  &:active {
    color: inherit;
  }
}

.ibo-is-broken-hyperlink {
  text-decoration: line-through;
  cursor: help;
}

.ibo-is-code {
  background-color: $ibo-is-code--background-color;
  padding: $ibo-is-code--padding;
  @extend %ibo-font-code-150;
}

/*
 * A single class to handle WYSIWYG generated content, where only HTML tags are available
 * See https://bulma.io/documentation/elements/content/
 */
.ibo-is-html-content {
  @extend .content;

  /* Force user-generated tables to fit within the container as they often have an hard-coded width */
  table {
    width: unset !important;
    max-width: max-content;
  }

  /* Preserve original text color in code blocks, except for the Highlight.js blocks which have their own colors */
  & > code,
  :not(pre.hljs) code {
    color: inherit;
  }
}


/***********************************************************************/
/* Sticky headers                                                      */
/*                                                                     */
/* Used as a trigger to make an element stick to another during scroll */
/***********************************************************************/

.ibo-sticky-sentinel {
  position: absolute;
  left: $ibo-sticky-sentinel--left;
  right: $ibo-sticky-sentinel--right;
  visibility: hidden;
}
.ibo-sticky-sentinel-top {
  top: $ibo-sticky-sentinel-top--top;
  height: $ibo-sticky-sentinel-top--height; /* To be overloaded by use cases */
}
.ibo-sticky-sentinel-bottom {
  bottom: $ibo-sticky-sentinel-bottom--bottom;
  height: $ibo-sticky-sentinel-bottom--height; /* To be overloaded by use cases */
}


%ibo-medallion {
  position: relative;
  border-radius: var(--ibo-border-radius-full);
  border: 2px solid var(--ibo-color-grey-300);
  overflow: hidden;
  @extend %ibo-fully-centered-content;

  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-color: var(--ibo-color-grey-500);
  }
}