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

 .popover {
-  position: absolute;
+  // scss-docs-start popover-css-vars
+  --#{$prefix}popover-zindex: #{$zindex-popover};
+  --#{$prefix}popover-max-width: #{$popover-max-width};
+  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
-  top: 0;
+  --#{$prefix}popover-bg: #{$popover-bg};
+  --#{$prefix}popover-border-width: #{$popover-border-width};
+  --#{$prefix}popover-border-color: #{$popover-border-color};
+  --#{$prefix}popover-border-radius: #{$popover-border-radius};
+  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+  --#{$prefix}popover-header-color: #{$popover-header-color};
+  --#{$prefix}popover-header-bg: #{$popover-header-bg};
+  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+  --#{$prefix}popover-body-color: #{$popover-body-color};
+  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-  // left: 0;
+  // scss-docs-end popover-css-vars
-  z-index: $zindex-popover;
+  z-index: var(--#{$prefix}popover-zindex);
   display: block;
-  max-width: $popover-max-width;
+  max-width: var(--#{$prefix}popover-max-width);
   // 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($popover-font-size);
+  @include font-size(var(--#{$prefix}popover-font-size));
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
-  background-color: $popover-bg;
+  background-color: var(--#{$prefix}popover-bg);
   background-clip: padding-box;
-  border: $popover-border-width solid $popover-border-color;
+  border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-  @include border-radius($popover-border-radius);
+  @include border-radius(var(--#{$prefix}popover-border-radius));
-  @include box-shadow($popover-box-shadow);
+  @include box-shadow(var(--#{$prefix}popover-box-shadow));
-  .arrow {
-    position: absolute;
+  .popover-arrow {
     display: block;
-    width: $popover-arrow-width;
+    width: var(--#{$prefix}popover-arrow-width);
-    height: $popover-arrow-height;
-    margin: 0 $popover-border-radius;
+    height: var(--#{$prefix}popover-arrow-height);
     &::before,
     &::after {
       position: absolute;
       display: block;
       content: "";
+      border-color: transparent;
-      border-color: transparent;
+      border-style: solid;
-      border-style: solid;
+      border-width: 0;
+    }
+  }
 }
+.bs-popover-top {
+  > .popover-arrow {
-.bs-popover-top {
+    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: $popover-arrow-height;
+    &::before,
     &::after {
-  > .arrow {
-    bottom: subtract(-$popover-arrow-height, $popover-border-width);
+      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+    }
     &::before {
-      bottom: 0;
+    &::before {
-      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-top-color: $popover-arrow-outer-color;
+      bottom: 0;
       border-top-color: var(--#{$prefix}popover-arrow-border);
+    }
     &::after {
+    &::after {
-      bottom: $popover-border-width;
+      bottom: var(--#{$prefix}popover-border-width);
+      border-top-color: var(--#{$prefix}popover-bg);
+    }
-      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
+  }
+}
-      border-top-color: $popover-arrow-color;
-    }
-  }
-}
+/* rtl:begin:ignore */
+.bs-popover-end {
+  > .popover-arrow {
-.bs-popover-right {
+    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
-  margin-left: $popover-arrow-height;
+    width: var(--#{$prefix}popover-arrow-height);
-  > .arrow {
+    height: var(--#{$prefix}popover-arrow-width);
     left: subtract(-$popover-arrow-height, $popover-border-width);
-    width: $popover-arrow-height;
+    &::before,
-    height: $popover-arrow-width;
+    &::after {
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
     &::before {
       left: 0;
-      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
+    &::before {
+      left: 0;
+      border-right-color: var(--#{$prefix}popover-arrow-border);
       border-right-color: $popover-arrow-outer-color;
-    }
+    &::after {
+      left: var(--#{$prefix}popover-border-width);
+      border-right-color: var(--#{$prefix}popover-bg);
-    &::after {
+    }
+  }
       left: $popover-border-width;
       border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-right-color: $popover-arrow-color;
-    }
+/* rtl:end:ignore */
 .bs-popover-bottom {
+  > .popover-arrow {
-.bs-popover-bottom {
-  margin-top: $popover-arrow-height;
+    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
-  > .arrow {
+    &::before,
-    top: subtract(-$popover-arrow-height, $popover-border-width);
+    &::after {
       border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
     &::before {
       top: 0;
-      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
+    &::before {
-      border-bottom-color: $popover-arrow-outer-color;
+      top: 0;
-    }
+      border-bottom-color: var(--#{$prefix}popover-arrow-border);
+    }
     &::after {
-      top: $popover-border-width;
+    &::after {
-      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
+      top: var(--#{$prefix}popover-border-width);
-      border-bottom-color: $popover-arrow-color;
+      border-bottom-color: var(--#{$prefix}popover-bg);
+    }
-    }
+  }
+  // This will remove the popover-header's border just below the arrow
-  }
+  .popover-header::before {
+    position: absolute;
+    top: 0;
-  // This will remove the popover-header's border just below the arrow
-  .popover-header::before {
-    position: absolute;
+    left: 50%;
-    top: 0;
+    display: block;
+    width: var(--#{$prefix}popover-arrow-width);
-    left: 50%;
+    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
-    display: block;
+    content: "";
-    width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width * .5;
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
-  }
-}
+/* rtl:begin:ignore */
-.bs-popover-left {
+.bs-popover-start {
-  margin-right: $popover-arrow-height;
+  > .popover-arrow {
     right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    width: var(--#{$prefix}popover-arrow-height);
+    height: var(--#{$prefix}popover-arrow-width);
   > .arrow {
-    right: subtract(-$popover-arrow-height, $popover-border-width);
+    &::before,
-    width: $popover-arrow-height;
+    &::after {
-    height: $popover-arrow-width;
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+    }
     &::before {
       right: 0;
-      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
+      border-left-color: var(--#{$prefix}popover-arrow-border);
       border-left-color: $popover-arrow-outer-color;
-    }
+    &::after {
-    &::after {
+      right: var(--#{$prefix}popover-border-width);
-      right: $popover-border-width;
+      border-left-color: var(--#{$prefix}popover-bg);
-      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
       border-left-color: $popover-arrow-color;
+  }
-  }
+}
+/* rtl:end:ignore */
-.bs-popover-auto {
-  &[x-placement^="top"] {
+.bs-popover-auto {
-    @extend .bs-popover-top;
+  &[data-popper-placement^="top"] {
-  }
+    @extend .bs-popover-top;
   &[x-placement^="right"] {
-    @extend .bs-popover-right;
+  &[data-popper-placement^="right"] {
     @extend .bs-popover-end;
   &[x-placement^="bottom"] {
-    @extend .bs-popover-bottom;
+  &[data-popper-placement^="bottom"] {
-  }
+    @extend .bs-popover-bottom;
-  &[x-placement^="left"] {
+  }
-    @extend .bs-popover-left;
+  &[data-popper-placement^="left"] {

Proyectos de Subversion Moodle

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