WebSVN – Moodle – Diff – /theme/boost/scss/bootstrap/_tooltip.scss

 // Base class
 .tooltip {
+  // scss-docs-start tooltip-css-vars
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-color: #{$tooltip-color};
-  position: absolute;
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  // scss-docs-end tooltip-css-vars
-  z-index: $zindex-tooltip;
+  z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
-  margin: $tooltip-margin;
+  margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  @include font-size($tooltip-font-size);
+  @include font-size(var(--#{$prefix}tooltip-font-size));
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
-  &.show { opacity: $tooltip-opacity; }
+  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
   .arrow {
-    position: absolute;
+  .tooltip-arrow {
     display: block;
-    width: $tooltip-arrow-width;
+    width: var(--#{$prefix}tooltip-arrow-width);
-    height: $tooltip-arrow-height;
+    height: var(--#{$prefix}tooltip-arrow-height);
     &::before {
       position: absolute;
       content: "";
       border-color: transparent;
       border-style: solid;
     }
   }
-}
-.bs-tooltip-top {
-  padding: $tooltip-arrow-height 0;
+}
-  .arrow {
+.bs-tooltip-top .tooltip-arrow {
-    bottom: 0;
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
     &::before {
-      top: 0;
+  &::before {
+    top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+    border-top-color: var(--#{$prefix}tooltip-bg);
-      border-top-color: $tooltip-arrow-color;
+  }
+}
-    }
-  }
-}
-.bs-tooltip-right {
-  padding: 0 $tooltip-arrow-height;
+/* rtl:begin:ignore */
-  .arrow {
+.bs-tooltip-end .tooltip-arrow {
-    left: 0;
+  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
+  width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
-    &::before {
-      right: 0;
-      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
+  &::before {
-      border-right-color: $tooltip-arrow-color;
+    right: -1px;
-    }
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
-  }
+    border-right-color: var(--#{$prefix}tooltip-bg);
-}
+  }
+}
-.bs-tooltip-bottom {
   padding: $tooltip-arrow-height 0;
 /* rtl:end:ignore */
-  .arrow {
-    top: 0;
+.bs-tooltip-bottom .tooltip-arrow {
-    &::before {
-      bottom: 0;
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
-      border-bottom-color: $tooltip-arrow-color;
+  &::before {
-    }
+    bottom: -1px;
-  }
+    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-}
+    border-bottom-color: var(--#{$prefix}tooltip-bg);
+  }
-.bs-tooltip-left {
   padding: 0 $tooltip-arrow-height;
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow {
-  .arrow {
+  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
-    right: 0;
+  width: var(--#{$prefix}tooltip-arrow-height);
-    width: $tooltip-arrow-height;
+  height: var(--#{$prefix}tooltip-arrow-width);
     height: $tooltip-arrow-width;
+  &::before {
-    &::before {
+    left: -1px;
-      left: 0;
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
-      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
+    border-left-color: var(--#{$prefix}tooltip-bg);
       border-left-color: $tooltip-arrow-color;
+}
-  }
-}
+/* rtl:end:ignore */
 .bs-tooltip-auto {
-  &[x-placement^="top"] {
+  &[data-popper-placement^="top"] {
     @extend .bs-tooltip-top;
   }
-  &[x-placement^="right"] {
+  &[data-popper-placement^="right"] {
-    @extend .bs-tooltip-right;
+    @extend .bs-tooltip-end;
+  }
-  &[x-placement^="bottom"] {
+  &[data-popper-placement^="bottom"] {
     @extend .bs-tooltip-bottom;
+  }

Proyectos de Subversion Moodle

(root)/theme/boost/scss/bootstrap/_tooltip.scss – Rev 1 → 1441