iTop/css/backoffice/utils/helpers/_text-decoration.scss

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

/* SCSS variables */
$ibo-has-description--content: $common-has-description--content !default;
$ibo-has-description--padding-left: $common-has-description--padding-left !default;
$ibo-has-description--color: $common-has-description--color !default;
$ibo-has-description--font-size: $common-has-description--font-size !default; /* Font size is em on purpose as we want it to be proportional to its context */

$ibo-is-code--background-color: $common-is-code--background-color !default;
$ibo-is-code--padding: $common-is-code--padding !default;

$ibo-hyperlink-color: $common-hyperlink-color !default;
$ibo-hyperlink-text-decoration: $common-hyperlink-text-decoration !default;
$ibo-hyperlink-color--on-hover: $common-hyperlink-color--on-hover !default;
$ibo-hyperlink-text-decoration--on-hover: $common-hyperlink-text-decoration--on-hover !default;
$ibo-hyperlink-color--on-active: $common-hyperlink-color--on-active !default;
$ibo-hyperlink-text-decoration--on-active: $common-hyperlink-text-decoration--on-active !default;

$ibo-figure--spacing-x: $common-figure--spacing-x !default; /* Mind that this matches Bulma rule for figure */
$ibo-figure--spacing-y: $common-figure--spacing-y !default;

/* CSS variables */
:root{
  --ibo-hyperlink-color: #{$ibo-hyperlink-color};
  --ibo-hyperlink-text-decoration: #{$ibo-hyperlink-text-decoration};
  --ibo-hyperlink-color--on-hover: #{$ibo-hyperlink-color--on-hover};
  --ibo-hyperlink-text-decoration--on-hover: #{$ibo-hyperlink-text-decoration--on-hover};
  --ibo-hyperlink-color--on-active: #{$ibo-hyperlink-color--on-active};
  --ibo-hyperlink-text-decoration--on-active: #{$ibo-hyperlink-text-decoration--on-active};
}

/* Rules */
%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;
  }
}
/* 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-forced-colors {
  color: $ibo-hyperlink-color;
  text-decoration: $ibo-hyperlink-text-decoration;

  &:hover {
    color: $ibo-hyperlink-color--on-hover;
    text-decoration: $ibo-hyperlink-text-decoration--on-hover;
  }
  &:active {
    color: $ibo-hyperlink-color--on-active;
    text-decoration: $ibo-hyperlink-text-decoration--on-active;
  }
}

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

.ibo-is-disabled {
  cursor: not-allowed !important; /* Note: !important is necessary as it needs to overload any standard rules */
}

/* Class to display a hint on elements that have a tooltip for further description */
.ibo-has-description {
  &::after {
    content: $ibo-has-description--content;
    padding-left: $ibo-has-description--padding-left;
    vertical-align: top;

    cursor: pointer;
    color: $ibo-has-description--color;

    /* We don't use a %ibo-font-ral-xxx-yyy as we need a specific size */
    @extend %ibo-font-weight-700;
    font-size: $ibo-has-description--font-size;
  }
}

.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; /* Bulma styles */
  @extend .ck-content; /* CKEditor styles */

  /* For table to render like in CKEditor, works with bulma lib. overload see:
   * - ../../vendors/_bulma-variables-overload.scss)
   * - ../../_shame.scss
   */
  table {
    border-collapse: separate;
    border-spacing: 2px;
  }

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

  p {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
  }

  figure {
    display: inline-block; /* So the figure doesn't take all width and can be aligned on the left */
    margin-left: $ibo-figure--spacing-x !important; /* !important to overload the CKE inline style */
    margin-right: $ibo-figure--spacing-x !important; /* !important to overload the CKE inline style */

    &:not(:last-child) {
      margin-bottom: $ibo-figure--spacing-y !important; /* !important to overload the CKE inline style */
    }
    &:not(:first-child) {
      margin-top: $ibo-figure--spacing-y !important; /* !important to overload the CKE inline style */
    }
  }
}