diff --git a/css/backoffice/blocks-integrations/input/_input-with-label.scss b/css/backoffice/blocks-integrations/input/_input-with-label.scss index 6ff833abd..9776925b5 100644 --- a/css/backoffice/blocks-integrations/input/_input-with-label.scss +++ b/css/backoffice/blocks-integrations/input/_input-with-label.scss @@ -12,17 +12,3 @@ select + label, label + select, label > select, input + label, label + input, label > input { margin-left: $ibo-input--spacing-left--with-label; } - -.ibo-input-with-label--label { - &.ibo-has-description { - &::after { - content: $ibo-field--label--description--content; - padding-left: $ibo-field--label--description--padding-left; - vertical-align: top; - - cursor: pointer; - color: $ibo-field--label--description--color; - @extend %ibo-font-ral-bol-50; - } - } -} \ No newline at end of file diff --git a/css/backoffice/components/_field.scss b/css/backoffice/components/_field.scss index 736a756b3..1635a74f1 100644 --- a/css/backoffice/components/_field.scss +++ b/css/backoffice/components/_field.scss @@ -6,10 +6,6 @@ /* SCSS variables */ $ibo-field--value--color: $ibo-color-grey-800 !default; -$ibo-field--label--description--content: "?" !default; -$ibo-field--label--description--padding-left: $ibo-spacing-200 !default; -$ibo-field--label--description--color: $ibo-color-grey-600 !default; - $ibo-field--background-color--is-fullscreen: $ibo-color-white-100 !default; $ibo-field--label--width--is-fullscreen: 100% !default; @@ -162,18 +158,6 @@ $ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default; width: 30%; word-break: break-word; /* We want labels to wrap if it is very long if it has no spaces */ @extend %ibo-font-weight-600; - - > .ibo-has-description { - &::after { - content: $ibo-field--label--description--content; - padding-left: $ibo-field--label--description--padding-left; - vertical-align: top; - - cursor: pointer; - color: $ibo-field--label--description--color; - @extend %ibo-font-ral-bol-50; - } - } } .ibo-field--label-small .ibo-field--label{ width: 20em; diff --git a/css/backoffice/utils/helpers/_text-decoration.scss b/css/backoffice/utils/helpers/_text-decoration.scss index 8e14f50a3..538c26468 100644 --- a/css/backoffice/utils/helpers/_text-decoration.scss +++ b/css/backoffice/utils/helpers/_text-decoration.scss @@ -4,6 +4,11 @@ */ /* SCSS variables */ +$ibo-has-description--content: "?" !default; +$ibo-has-description--padding-left: $ibo-spacing-200 !default; +$ibo-has-description--color: $ibo-color-grey-600 !default; +$ibo-has-description--font-size: 0.7em !default; /* Font size is em on purpose as we want it to be proportional to its context */ + $ibo-is-code--background-color: $ibo-color-white-200 !default; $ibo-is-code--padding: 1.25rem 1.5rem !default; @@ -33,6 +38,22 @@ $ibo-is-code--padding: 1.25rem 1.5rem !default; cursor: help; } +/* 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;