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

/*!
 * Copyright (C) 2013-2021 Combodo SARL
 *
 * This file is part of iTop.
 *
 * iTop is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * iTop is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 */

/* 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: 9000 !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: 9000;
}

/****************/
/* 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-code {
  background-color: $ibo-is-code--background-color;
  padding: $ibo-is-code--padding;
  @extend %ibo-font-code-150;
}

/***********************************************************************/
/* 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);
  }
}