API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 5th, 2018
91
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
SAS 41.55 KB | None | 0 0
raw download clone embed print report
  1. $padding: 2rem;
  2.   $bubblePadding:1.5rem;
  3.   $bubbleSize: 1rem;
  4.   $halfBubbleSize: $bubbleSize/2;
  5.   $paddingAndHalfBubbleSize: $padding + $halfBubbleSize;
  6.   //-------------- TOP ROW --------------
  7.   //TODO
  8.   &.anchor--topLeft,
  9.   &.anchor--leftTop {
  10.     top: -$bubblePadding;
  11.     left:$paddingAndHalfBubbleSize;
  12.     &.bubble--leftTop {
  13.       &:after {
  14.         content: '';
  15.         border-top: $halfBubbleSize solid transparent;
  16.         border-bottom: $halfBubbleSize solid transparent;
  17.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  18.         position: absolute;
  19.         left: -$halfBubbleSize;
  20.         top: $bubblePadding;
  21.       }
  22.     }
  23.     &.bubble--leftCenter {
  24.       transform: translateY(-50%) TranslateY($bubblePadding + $halfBubbleSize);
  25.       &:after {
  26.         content: '';
  27.         border-top: $halfBubbleSize solid transparent;
  28.         border-bottom: $halfBubbleSize solid transparent;
  29.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  30.         position: absolute;
  31.         left: -$halfBubbleSize;
  32.         transform: translateY(-$halfBubbleSize);
  33.         top: 50%;
  34.       }
  35.     }
  36.     &.bubble--leftBottom {
  37.       transform: translateY(-100%) translateY((2*$bubblePadding) + $bubbleSize);
  38.       &:after {
  39.         content: '';
  40.         border-top: $halfBubbleSize solid transparent;
  41.         border-bottom: $halfBubbleSize solid transparent;
  42.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  43.         position: absolute;
  44.         left: -$halfBubbleSize;
  45.         bottom: $bubblePadding;
  46.       }
  47.     }
  48.     &.bubble--rightTop {
  49.       transform: translateX(-100%) translateX(-(2 * $padding));
  50.       &:after {
  51.         content: '';
  52.         border-top: $halfBubbleSize solid transparent;
  53.         border-bottom: $halfBubbleSize solid transparent;
  54.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  55.         position: absolute;
  56.         right: -$halfBubbleSize;
  57.         top: $bubblePadding;
  58.       }
  59.     }
  60.     &.bubble--rightCenter {
  61.       transform: translateY(-100%,-50%) TranslateY($bubblePadding + $halfBubbleSize);
  62.       &:after {
  63.         content: '';
  64.         border-top: $halfBubbleSize solid transparent;
  65.         border-bottom: $halfBubbleSize solid transparent;
  66.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  67.         position: absolute;
  68.         right: -$halfBubbleSize;
  69.         transform: translateY(-$halfBubbleSize);
  70.         top: 50%;
  71.       }
  72.     }
  73.     &.bubble--rightBottom {
  74.       transform: translate(-100%,-100%) translateX(-(2 * $padding));
  75.       top: $halfBubbleSize;
  76.       &:after {
  77.         content: '';
  78.         border-top: $halfBubbleSize solid transparent;
  79.         border-bottom: $halfBubbleSize solid transparent;
  80.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  81.         position: absolute;
  82.         right: -$halfBubbleSize;
  83.         bottom: $bubblePadding;
  84.       }
  85.     }
  86.     &.bubble--topLeft {
  87.       transform: translateX(-2.5rem);
  88.       top: $padding;
  89.       &:after {
  90.         content: '';
  91.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  92.         border-left: $halfBubbleSize solid transparent;
  93.         border-right: $halfBubbleSize solid transparent;
  94.         position: absolute;
  95.         left: $paddingAndHalfBubbleSize;
  96.         top: -$halfBubbleSize;
  97.       }
  98.     }
  99.     &.bubble--topCenter {
  100.       transform: translateX(-50%) translateX(-$halfBubbleSize);
  101.       top: $padding;
  102.       &:after {
  103.         content: '';
  104.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  105.         border-left: $halfBubbleSize solid transparent;
  106.         border-right: $halfBubbleSize solid transparent;
  107.         position: absolute;
  108.         transform: translateX(-$halfBubbleSize);
  109.         left:50%;
  110.         top: -$halfBubbleSize;
  111.       }
  112.     }
  113.     &.bubble--topRight {
  114.       transform: translateX(-100%) translateX($paddingAndHalfBubbleSize);
  115.       top: $padding;
  116.       &:after {
  117.         content: '';
  118.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  119.         border-left: $halfBubbleSize solid transparent;
  120.         border-right: $halfBubbleSize solid transparent;
  121.         position: absolute;
  122.         right: $paddingAndHalfBubbleSize;
  123.         top: -$halfBubbleSize;
  124.       }
  125.     }
  126.     &.bubble--bottomLeft {
  127.       transform: translate(-2.5rem, -100%);
  128.       top: -$padding;
  129.       &:after {
  130.         content: '';
  131.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  132.         border-left: $halfBubbleSize solid transparent;
  133.         border-right: $halfBubbleSize solid transparent;
  134.         position: absolute;
  135.         left: $paddingAndHalfBubbleSize;
  136.         bottom: -$halfBubbleSize;
  137.       }
  138.     }
  139.     &.bubble--bottomCenter {
  140.       transform: translate(-50%, -100%) translateX(-$halfBubbleSize);
  141.       top: -$padding;
  142.       &:after {
  143.         content: '';
  144.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  145.         border-left: $halfBubbleSize solid transparent;
  146.         border-right: $halfBubbleSize solid transparent;
  147.         position: absolute;
  148.         transform: translateX(-$halfBubbleSize);
  149.         left: 50%;
  150.         bottom: -$halfBubbleSize;
  151.       }
  152.     }
  153.     &.bubble--bottomRight {
  154.       transform: translate(-100%, -100%) translateX($paddingAndHalfBubbleSize);
  155.       top: -$padding;
  156.       &:after {
  157.         content: '';
  158.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  159.         border-left: $halfBubbleSize solid transparent;
  160.         border-right: $halfBubbleSize solid transparent;
  161.         position: absolute;
  162.         right: $paddingAndHalfBubbleSize;
  163.         bottom: -$halfBubbleSize;
  164.       }
  165.     }
  166.   }
  167.  
  168.   //DONE, WORKS
  169.   &.anchor--topCenter {
  170.     top: -1rem;
  171.     left:50%;
  172.     &.bubble--leftTop {
  173.       transform: translateX(1rem);
  174.       &:after {
  175.         content: '';
  176.         border-top: $halfBubbleSize solid transparent;
  177.         border-bottom: $halfBubbleSize solid transparent;
  178.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  179.         position: absolute;
  180.         left: -$halfBubbleSize;
  181.         top: 1.5rem;
  182.       }
  183.     }
  184.     &.bubble--leftCenter {
  185.       transform: translate(1rem, -50%);
  186.       top: 0rem;
  187.       &:after {
  188.         content: '';
  189.         border-top: $halfBubbleSize solid transparent;
  190.         border-bottom: $halfBubbleSize solid transparent;
  191.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  192.         position: absolute;
  193.         left: -$halfBubbleSize;
  194.         transform: translateY(-$halfBubbleSize);
  195.         top: 50%;
  196.       }
  197.     }
  198.     &.bubble--leftBottom {
  199.       transform: translate(1rem, -100%);
  200.       top: 2.5rem;
  201.       &:after {
  202.         content: '';
  203.         border-top: $halfBubbleSize solid transparent;
  204.         border-bottom: $halfBubbleSize solid transparent;
  205.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  206.         position: absolute;
  207.         left: -$halfBubbleSize;
  208.         bottom: 1.5rem;
  209.       }
  210.     }
  211.     &.bubble--rightTop {
  212.       transform: translateX(-100%) translateX(-1rem);
  213.       top: -1.5rem;
  214.       &:after {
  215.         content: '';
  216.         border-top: $halfBubbleSize solid transparent;
  217.         border-bottom: $halfBubbleSize solid transparent;
  218.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  219.         position: absolute;
  220.         right: -$halfBubbleSize;
  221.         top: 1.5rem;
  222.       }
  223.     }
  224.     &.bubble--rightCenter {
  225.       transform: translate(-100%,-50%) translateX(-1rem);
  226.       top: 0rem;
  227.       &:after {
  228.         content: '';
  229.         border-top: $halfBubbleSize solid transparent;
  230.         border-bottom: $halfBubbleSize solid transparent;
  231.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  232.         position: absolute;
  233.         right: -$halfBubbleSize;
  234.         transform: translateY(-$halfBubbleSize);
  235.         top: 50%;
  236.       }
  237.     }
  238.     &.bubble--rightBottom {
  239.       transform: translate(-100%,-100%) translateX(-1rem);
  240.       top: 2.5rem;
  241.       &:after {
  242.         content: '';
  243.         border-top: $halfBubbleSize solid transparent;
  244.         border-bottom: $halfBubbleSize solid transparent;
  245.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  246.         position: absolute;
  247.         right: -$halfBubbleSize;
  248.         bottom: 1.5rem;
  249.       }
  250.     }
  251.     &.bubble--topLeft {
  252.       transform: translateX(-2rem);
  253.       top: 1.5rem;
  254.       &:after {
  255.         content: '';
  256.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  257.         border-left: $halfBubbleSize solid transparent;
  258.         border-right: $halfBubbleSize solid transparent;
  259.         position: absolute;
  260.         left: 1.5rem;
  261.         top: -$halfBubbleSize;
  262.       }
  263.     }
  264.     &.bubble--topCenter {
  265.       transform: translateX(-50%);
  266.       top: 1.5rem;
  267.       &:after {
  268.         content: '';
  269.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  270.         border-left: $halfBubbleSize solid transparent;
  271.         border-right: $halfBubbleSize solid transparent;
  272.         position: absolute;
  273.         transform: translateX(-$halfBubbleSize);
  274.         left:50%;
  275.         top: -$halfBubbleSize;
  276.       }
  277.     }
  278.     &.bubble--topRight {
  279.       transform: translateX(-100%) translateX(2rem);
  280.       top: 1.5rem;
  281.       &:after {
  282.         content: '';
  283.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  284.         border-left: $halfBubbleSize solid transparent;
  285.         border-right: $halfBubbleSize solid transparent;
  286.         position: absolute;
  287.         right: 1.5rem;
  288.         top: -$halfBubbleSize;
  289.       }
  290.     }
  291.     &.bubble--bottomLeft {
  292.       transform: translate(-2rem, -100%);
  293.       top: -1rem;
  294.       &:after {
  295.         content: '';
  296.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  297.         border-left: $halfBubbleSize solid transparent;
  298.         border-right: $halfBubbleSize solid transparent;
  299.         position: absolute;
  300.         left: 1.5rem;
  301.         bottom: -$halfBubbleSize;
  302.       }
  303.     }
  304.     &.bubble--bottomCenter {
  305.       transform: translate(-50%, -100%);
  306.       top: -1rem;
  307.       &:after {
  308.         content: '';
  309.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  310.         border-left: $halfBubbleSize solid transparent;
  311.         border-right: $halfBubbleSize solid transparent;
  312.         position: absolute;
  313.         transform: translateX(-$halfBubbleSize);
  314.         left: 50%;
  315.         bottom: -$halfBubbleSize;
  316.       }
  317.     }
  318.     &.bubble--bottomRight {
  319.       transform: translate(-100%, -100%) translateX(2rem);
  320.       top: -1rem;
  321.       &:after {
  322.         content: '';
  323.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  324.         border-left: $halfBubbleSize solid transparent;
  325.         border-right: $halfBubbleSize solid transparent;
  326.         position: absolute;
  327.         right: 1.5rem;
  328.         bottom: -$halfBubbleSize;
  329.       }
  330.     }
  331.   }
  332.  
  333.   // DONE, WORKS
  334.   &.anchor--topRight,
  335.   &.anchor--rightTop {
  336.     top: -1rem;
  337.     right: -1rem;
  338.     &.bubble--leftTop {
  339.       transform: translateX(100%);
  340.       &:after {
  341.         content: '';
  342.         border-top: $halfBubbleSize solid transparent;
  343.         border-bottom: $halfBubbleSize solid transparent;
  344.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  345.         position: absolute;
  346.         left: -$halfBubbleSize;
  347.         top: 1.5rem;
  348.       }
  349.     }
  350.     &.bubble--leftCenter {
  351.       transform: translate(100%, -50%);
  352.       top: 0rem;
  353.       &:after {
  354.         content: '';
  355.         border-top: $halfBubbleSize solid transparent;
  356.         border-bottom: $halfBubbleSize solid transparent;
  357.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  358.         position: absolute;
  359.         left: -$halfBubbleSize;
  360.         top: 50%;
  361.       }
  362.     }
  363.     &.bubble--leftBottom {
  364.       transform: translate(100%, -100%);
  365.       top: 2.5rem;
  366.       &:after {
  367.         content: '';
  368.         border-top: $halfBubbleSize solid transparent;
  369.         border-bottom: $halfBubbleSize solid transparent;
  370.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  371.         position: absolute;
  372.         left: -$halfBubbleSize;
  373.         bottom: 1.5rem;
  374.       }
  375.     }
  376.     &.bubble--rightTop {
  377.       // transform: translateX(-100%);
  378.       right: 1rem;
  379.       top: -1.5rem;
  380.       &:after {
  381.         content: '';
  382.         border-top: $halfBubbleSize solid transparent;
  383.         border-bottom: $halfBubbleSize solid transparent;
  384.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  385.         position: absolute;
  386.         right: -$halfBubbleSize;
  387.         top: 1.5rem;
  388.       }
  389.     }
  390.     &.bubble--rightCenter {
  391.       transform: translateY(-50%);
  392.       right: 1rem;
  393.       top: 0rem;
  394.       &:after {
  395.         content: '';
  396.         border-top: $halfBubbleSize solid transparent;
  397.         border-bottom: $halfBubbleSize solid transparent;
  398.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  399.         position: absolute;
  400.         right: -$halfBubbleSize;
  401.         top: 50%;
  402.       }
  403.     }
  404.     &.bubble--rightBottom {
  405.       transform: translateY(-100%);
  406.       right: 1rem;
  407.       top: 2.5rem;
  408.       &:after {
  409.         content: '';
  410.         border-top: $halfBubbleSize solid transparent;
  411.         border-bottom: $halfBubbleSize solid transparent;
  412.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  413.         position: absolute;
  414.         right: -$halfBubbleSize;
  415.         bottom: 1.5rem;
  416.       }
  417.     }
  418.     &.bubble--topLeft {
  419.       transform: translateX(100%);
  420.       right: 2.5rem;
  421.       top: 1.5rem;
  422.       &:after {
  423.         content: '';
  424.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  425.         border-left: $halfBubbleSize solid transparent;
  426.         border-right: $halfBubbleSize solid transparent;
  427.         position: absolute;
  428.         left: 1.5rem;
  429.         top: -$halfBubbleSize;
  430.       }
  431.     }
  432.     &.bubble--topCenter {
  433.       transform: translateX(50%);
  434.       right: 1rem;
  435.       top: 1.5rem;
  436.       &:after {
  437.         content: '';
  438.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  439.         border-left: $halfBubbleSize solid transparent;
  440.         border-right: $halfBubbleSize solid transparent;
  441.         position: absolute;
  442.         left: 50%;
  443.         top: -$halfBubbleSize;
  444.       }
  445.     }
  446.     &.bubble--topRight {
  447.       right: -1.5rem;
  448.       top: 1.5rem;
  449.       &:after {
  450.         content: '';
  451.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  452.         border-left: $halfBubbleSize solid transparent;
  453.         border-right: $halfBubbleSize solid transparent;
  454.         position: absolute;
  455.         right: 1.5rem;
  456.         top: -$halfBubbleSize;
  457.       }
  458.     }
  459.     &.bubble--bottomLeft {
  460.       transform: translate(100%, -100%);
  461.       right: 2rem;
  462.       top: -1rem;
  463.       &:after {
  464.         content: '';
  465.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  466.         border-left: $halfBubbleSize solid transparent;
  467.         border-right: $halfBubbleSize solid transparent;
  468.         position: absolute;
  469.         left: 1rem;
  470.         bottom: -$halfBubbleSize;
  471.       }
  472.     }
  473.     &.bubble--bottomCenter {
  474.       transform: translate(50%, -100%);
  475.       right: 1rem;
  476.       top: -1rem;
  477.       &:after {
  478.         content: '';
  479.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  480.         border-left: $halfBubbleSize solid transparent;
  481.         border-right: $halfBubbleSize solid transparent;
  482.         position: absolute;
  483.         left: 50%;
  484.         bottom: -$halfBubbleSize;
  485.       }
  486.     }
  487.     &.bubble--bottomRight {
  488.       transform: translate(0%, -100%);
  489.       right: -1.5rem;
  490.       top: -1rem;
  491.       &:after {
  492.         content: '';
  493.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  494.         border-left: $halfBubbleSize solid transparent;
  495.         border-right: $halfBubbleSize solid transparent;
  496.         position: absolute;
  497.         right: 1.5rem;
  498.         bottom: -$halfBubbleSize;
  499.       }
  500.     }
  501.   }
  502.  
  503.   //-------------- MIDDLE ROW --------------
  504.   //TODO
  505.   &.anchor--leftCenter {
  506.     top: -1rem;
  507.     left:50%;
  508.     &.bubble--leftTop {
  509.       transform: translateX(1rem);
  510.       &:after {
  511.         content: '';
  512.         border-top: $halfBubbleSize solid transparent;
  513.         border-bottom: $halfBubbleSize solid transparent;
  514.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  515.         position: absolute;
  516.         left: -$halfBubbleSize;
  517.         top: 1.5rem;
  518.       }
  519.     }
  520.     &.bubble--leftCenter {
  521.       transform: translate(1rem, -50%);
  522.       top: 0rem;
  523.       &:after {
  524.         content: '';
  525.         border-top: $halfBubbleSize solid transparent;
  526.         border-bottom: $halfBubbleSize solid transparent;
  527.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  528.         position: absolute;
  529.         left: -$halfBubbleSize;
  530.         transform: translateY(-$halfBubbleSize);
  531.         top: 50%;
  532.       }
  533.     }
  534.     &.bubble--leftBottom {
  535.       transform: translate(1rem, -100%);
  536.       top: 2.5rem;
  537.       &:after {
  538.         content: '';
  539.         border-top: $halfBubbleSize solid transparent;
  540.         border-bottom: $halfBubbleSize solid transparent;
  541.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  542.         position: absolute;
  543.         left: -$halfBubbleSize;
  544.         bottom: 1.5rem;
  545.       }
  546.     }
  547.     &.bubble--rightTop {
  548.       transform: translateX(-100%) translateX(-1rem);
  549.       top: -1.5rem;
  550.       &:after {
  551.         content: '';
  552.         border-top: $halfBubbleSize solid transparent;
  553.         border-bottom: $halfBubbleSize solid transparent;
  554.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  555.         position: absolute;
  556.         right: -$halfBubbleSize;
  557.         top: 1.5rem;
  558.       }
  559.     }
  560.     &.bubble--rightCenter {
  561.       transform: translate(-100%,-50%) translateX(-1rem);
  562.       top: 0rem;
  563.       &:after {
  564.         content: '';
  565.         border-top: $halfBubbleSize solid transparent;
  566.         border-bottom: $halfBubbleSize solid transparent;
  567.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  568.         position: absolute;
  569.         right: -$halfBubbleSize;
  570.         transform: translateY(-$halfBubbleSize);
  571.         top: 50%;
  572.       }
  573.     }
  574.     &.bubble--rightBottom {
  575.       transform: translate(-100%,-100%) translateX(-1rem);
  576.       top: 2.5rem;
  577.       &:after {
  578.         content: '';
  579.         border-top: $halfBubbleSize solid transparent;
  580.         border-bottom: $halfBubbleSize solid transparent;
  581.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  582.         position: absolute;
  583.         right: -$halfBubbleSize;
  584.         bottom: 1.5rem;
  585.       }
  586.     }
  587.     &.bubble--topLeft {
  588.       transform: translateX(-2rem);
  589.       top: 1.5rem;
  590.       &:after {
  591.         content: '';
  592.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  593.         border-left: $halfBubbleSize solid transparent;
  594.         border-right: $halfBubbleSize solid transparent;
  595.         position: absolute;
  596.         left: 1.5rem;
  597.         top: -$halfBubbleSize;
  598.       }
  599.     }
  600.     &.bubble--topCenter {
  601.       transform: translateX(-50%);
  602.       top: 1.5rem;
  603.       &:after {
  604.         content: '';
  605.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  606.         border-left: $halfBubbleSize solid transparent;
  607.         border-right: $halfBubbleSize solid transparent;
  608.         position: absolute;
  609.         transform: translateX(-$halfBubbleSize);
  610.         left:50%;
  611.         top: -$halfBubbleSize;
  612.       }
  613.     }
  614.     &.bubble--topRight {
  615.       transform: translateX(-100%) translateX(2rem);
  616.       top: 1.5rem;
  617.       &:after {
  618.         content: '';
  619.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  620.         border-left: $halfBubbleSize solid transparent;
  621.         border-right: $halfBubbleSize solid transparent;
  622.         position: absolute;
  623.         right: 1.5rem;
  624.         top: -$halfBubbleSize;
  625.       }
  626.     }
  627.     &.bubble--bottomLeft {
  628.       transform: translate(-2rem, -100%);
  629.       top: -1rem;
  630.       &:after {
  631.         content: '';
  632.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  633.         border-left: $halfBubbleSize solid transparent;
  634.         border-right: $halfBubbleSize solid transparent;
  635.         position: absolute;
  636.         left: 1.5rem;
  637.         bottom: -$halfBubbleSize;
  638.       }
  639.     }
  640.     &.bubble--bottomCenter {
  641.       transform: translate(-50%, -100%);
  642.       top: -1rem;
  643.       &:after {
  644.         content: '';
  645.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  646.         border-left: $halfBubbleSize solid transparent;
  647.         border-right: $halfBubbleSize solid transparent;
  648.         position: absolute;
  649.         transform: translateX(-$halfBubbleSize);
  650.         left: 50%;
  651.         bottom: -$halfBubbleSize;
  652.       }
  653.     }
  654.     &.bubble--bottomRight {
  655.       transform: translate(-100%, -100%) translateX(2rem);
  656.       top: -1rem;
  657.       &:after {
  658.         content: '';
  659.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  660.         border-left: $halfBubbleSize solid transparent;
  661.         border-right: $halfBubbleSize solid transparent;
  662.         position: absolute;
  663.         right: 1.5rem;
  664.         bottom: -$halfBubbleSize;
  665.       }
  666.     }
  667.   }
  668.  
  669.   //TODO
  670.   &.anchor--rightCenter {
  671.     top: -1rem;
  672.     left:50%;
  673.     &.bubble--leftTop {
  674.       transform: translateX(1rem);
  675.       &:after {
  676.         content: '';
  677.         border-top: $halfBubbleSize solid transparent;
  678.         border-bottom: $halfBubbleSize solid transparent;
  679.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  680.         position: absolute;
  681.         left: -$halfBubbleSize;
  682.         top: 1.5rem;
  683.       }
  684.     }
  685.     &.bubble--leftCenter {
  686.       transform: translate(1rem, -50%);
  687.       top: 0rem;
  688.       &:after {
  689.         content: '';
  690.         border-top: $halfBubbleSize solid transparent;
  691.         border-bottom: $halfBubbleSize solid transparent;
  692.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  693.         position: absolute;
  694.         left: -$halfBubbleSize;
  695.         transform: translateY(-$halfBubbleSize);
  696.         top: 50%;
  697.       }
  698.     }
  699.     &.bubble--leftBottom {
  700.       transform: translate(1rem, -100%);
  701.       top: 2.5rem;
  702.       &:after {
  703.         content: '';
  704.         border-top: $halfBubbleSize solid transparent;
  705.         border-bottom: $halfBubbleSize solid transparent;
  706.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  707.         position: absolute;
  708.         left: -$halfBubbleSize;
  709.         bottom: 1.5rem;
  710.       }
  711.     }
  712.     &.bubble--rightTop {
  713.       transform: translateX(-100%) translateX(-1rem);
  714.       top: -1.5rem;
  715.       &:after {
  716.         content: '';
  717.         border-top: $halfBubbleSize solid transparent;
  718.         border-bottom: $halfBubbleSize solid transparent;
  719.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  720.         position: absolute;
  721.         right: -$halfBubbleSize;
  722.         top: 1.5rem;
  723.       }
  724.     }
  725.     &.bubble--rightCenter {
  726.       transform: translate(-100%,-50%) translateX(-1rem);
  727.       top: 0rem;
  728.       &:after {
  729.         content: '';
  730.         border-top: $halfBubbleSize solid transparent;
  731.         border-bottom: $halfBubbleSize solid transparent;
  732.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  733.         position: absolute;
  734.         right: -$halfBubbleSize;
  735.         transform: translateY(-$halfBubbleSize);
  736.         top: 50%;
  737.       }
  738.     }
  739.     &.bubble--rightBottom {
  740.       transform: translate(-100%,-100%) translateX(-1rem);
  741.       top: 2.5rem;
  742.       &:after {
  743.         content: '';
  744.         border-top: $halfBubbleSize solid transparent;
  745.         border-bottom: $halfBubbleSize solid transparent;
  746.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  747.         position: absolute;
  748.         right: -$halfBubbleSize;
  749.         bottom: 1.5rem;
  750.       }
  751.     }
  752.     &.bubble--topLeft {
  753.       transform: translateX(-2rem);
  754.       top: 1.5rem;
  755.       &:after {
  756.         content: '';
  757.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  758.         border-left: $halfBubbleSize solid transparent;
  759.         border-right: $halfBubbleSize solid transparent;
  760.         position: absolute;
  761.         left: 1.5rem;
  762.         top: -$halfBubbleSize;
  763.       }
  764.     }
  765.     &.bubble--topCenter {
  766.       transform: translateX(-50%);
  767.       top: 1.5rem;
  768.       &:after {
  769.         content: '';
  770.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  771.         border-left: $halfBubbleSize solid transparent;
  772.         border-right: $halfBubbleSize solid transparent;
  773.         position: absolute;
  774.         transform: translateX(-$halfBubbleSize);
  775.         left:50%;
  776.         top: -$halfBubbleSize;
  777.       }
  778.     }
  779.     &.bubble--topRight {
  780.       transform: translateX(-100%) translateX(2rem);
  781.       top: 1.5rem;
  782.       &:after {
  783.         content: '';
  784.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  785.         border-left: $halfBubbleSize solid transparent;
  786.         border-right: $halfBubbleSize solid transparent;
  787.         position: absolute;
  788.         right: 1.5rem;
  789.         top: -$halfBubbleSize;
  790.       }
  791.     }
  792.     &.bubble--bottomLeft {
  793.       transform: translate(-2rem, -100%);
  794.       top: -1rem;
  795.       &:after {
  796.         content: '';
  797.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  798.         border-left: $halfBubbleSize solid transparent;
  799.         border-right: $halfBubbleSize solid transparent;
  800.         position: absolute;
  801.         left: 1.5rem;
  802.         bottom: -$halfBubbleSize;
  803.       }
  804.     }
  805.     &.bubble--bottomCenter {
  806.       transform: translate(-50%, -100%);
  807.       top: -1rem;
  808.       &:after {
  809.         content: '';
  810.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  811.         border-left: $halfBubbleSize solid transparent;
  812.         border-right: $halfBubbleSize solid transparent;
  813.         position: absolute;
  814.         transform: translateX(-$halfBubbleSize);
  815.         left: 50%;
  816.         bottom: -$halfBubbleSize;
  817.       }
  818.     }
  819.     &.bubble--bottomRight {
  820.       transform: translate(-100%, -100%) translateX(2rem);
  821.       top: -1rem;
  822.       &:after {
  823.         content: '';
  824.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  825.         border-left: $halfBubbleSize solid transparent;
  826.         border-right: $halfBubbleSize solid transparent;
  827.         position: absolute;
  828.         right: 1.5rem;
  829.         bottom: -$halfBubbleSize;
  830.       }
  831.     }
  832.   }
  833.  
  834.   //-------------- BOTTOM ROW --------------
  835.   //TODO
  836.   &.anchor--bottomLeft,
  837.   &.anchor--leftBottom {
  838.     top: -1rem;
  839.     left:50%;
  840.     &.bubble--leftTop {
  841.       transform: translateX(1rem);
  842.       &:after {
  843.         content: '';
  844.         border-top: $halfBubbleSize solid transparent;
  845.         border-bottom: $halfBubbleSize solid transparent;
  846.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  847.         position: absolute;
  848.         left: -$halfBubbleSize;
  849.         top: 1.5rem;
  850.       }
  851.     }
  852.     &.bubble--leftCenter {
  853.       transform: translate(1rem, -50%);
  854.       top: 0rem;
  855.       &:after {
  856.         content: '';
  857.         border-top: $halfBubbleSize solid transparent;
  858.         border-bottom: $halfBubbleSize solid transparent;
  859.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  860.         position: absolute;
  861.         left: -$halfBubbleSize;
  862.         transform: translateY(-$halfBubbleSize);
  863.         top: 50%;
  864.       }
  865.     }
  866.     &.bubble--leftBottom {
  867.       transform: translate(1rem, -100%);
  868.       top: 2.5rem;
  869.       &:after {
  870.         content: '';
  871.         border-top: $halfBubbleSize solid transparent;
  872.         border-bottom: $halfBubbleSize solid transparent;
  873.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  874.         position: absolute;
  875.         left: -$halfBubbleSize;
  876.         bottom: 1.5rem;
  877.       }
  878.     }
  879.     &.bubble--rightTop {
  880.       transform: translateX(-100%) translateX(-1rem);
  881.       top: -1.5rem;
  882.       &:after {
  883.         content: '';
  884.         border-top: $halfBubbleSize solid transparent;
  885.         border-bottom: $halfBubbleSize solid transparent;
  886.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  887.         position: absolute;
  888.         right: -$halfBubbleSize;
  889.         top: 1.5rem;
  890.       }
  891.     }
  892.     &.bubble--rightCenter {
  893.       transform: translate(-100%,-50%) translateX(-1rem);
  894.       top: 0rem;
  895.       &:after {
  896.         content: '';
  897.         border-top: $halfBubbleSize solid transparent;
  898.         border-bottom: $halfBubbleSize solid transparent;
  899.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  900.         position: absolute;
  901.         right: -$halfBubbleSize;
  902.         transform: translateY(-$halfBubbleSize);
  903.         top: 50%;
  904.       }
  905.     }
  906.     &.bubble--rightBottom {
  907.       transform: translate(-100%,-100%) translateX(-1rem);
  908.       top: 2.5rem;
  909.       &:after {
  910.         content: '';
  911.         border-top: $halfBubbleSize solid transparent;
  912.         border-bottom: $halfBubbleSize solid transparent;
  913.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  914.         position: absolute;
  915.         right: -$halfBubbleSize;
  916.         bottom: 1.5rem;
  917.       }
  918.     }
  919.     &.bubble--topLeft {
  920.       transform: translateX(-2rem);
  921.       top: 1.5rem;
  922.       &:after {
  923.         content: '';
  924.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  925.         border-left: $halfBubbleSize solid transparent;
  926.         border-right: $halfBubbleSize solid transparent;
  927.         position: absolute;
  928.         left: 1.5rem;
  929.         top: -$halfBubbleSize;
  930.       }
  931.     }
  932.     &.bubble--topCenter {
  933.       transform: translateX(-50%);
  934.       top: 1.5rem;
  935.       &:after {
  936.         content: '';
  937.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  938.         border-left: $halfBubbleSize solid transparent;
  939.         border-right: $halfBubbleSize solid transparent;
  940.         position: absolute;
  941.         transform: translateX(-$halfBubbleSize);
  942.         left:50%;
  943.         top: -$halfBubbleSize;
  944.       }
  945.     }
  946.     &.bubble--topRight {
  947.       transform: translateX(-100%) translateX(2rem);
  948.       top: 1.5rem;
  949.       &:after {
  950.         content: '';
  951.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  952.         border-left: $halfBubbleSize solid transparent;
  953.         border-right: $halfBubbleSize solid transparent;
  954.         position: absolute;
  955.         right: 1.5rem;
  956.         top: -$halfBubbleSize;
  957.       }
  958.     }
  959.     &.bubble--bottomLeft {
  960.       transform: translate(-2rem, -100%);
  961.       top: -1rem;
  962.       &:after {
  963.         content: '';
  964.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  965.         border-left: $halfBubbleSize solid transparent;
  966.         border-right: $halfBubbleSize solid transparent;
  967.         position: absolute;
  968.         left: 1.5rem;
  969.         bottom: -$halfBubbleSize;
  970.       }
  971.     }
  972.     &.bubble--bottomCenter {
  973.       transform: translate(-50%, -100%);
  974.       top: -1rem;
  975.       &:after {
  976.         content: '';
  977.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  978.         border-left: $halfBubbleSize solid transparent;
  979.         border-right: $halfBubbleSize solid transparent;
  980.         position: absolute;
  981.         transform: translateX(-$halfBubbleSize);
  982.         left: 50%;
  983.         bottom: -$halfBubbleSize;
  984.       }
  985.     }
  986.     &.bubble--bottomRight {
  987.       transform: translate(-100%, -100%) translateX(2rem);
  988.       top: -1rem;
  989.       &:after {
  990.         content: '';
  991.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  992.         border-left: $halfBubbleSize solid transparent;
  993.         border-right: $halfBubbleSize solid transparent;
  994.         position: absolute;
  995.         right: 1.5rem;
  996.         bottom: -$halfBubbleSize;
  997.       }
  998.     }
  999.   }
  1000.  
  1001.   //TODO
  1002.   &.anchor--bottomCenter {
  1003.     top: -1rem;
  1004.     left:50%;
  1005.     &.bubble--leftTop {
  1006.       transform: translateX(1rem);
  1007.       &:after {
  1008.         content: '';
  1009.         border-top: $halfBubbleSize solid transparent;
  1010.         border-bottom: $halfBubbleSize solid transparent;
  1011.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  1012.         position: absolute;
  1013.         left: -$halfBubbleSize;
  1014.         top: 1.5rem;
  1015.       }
  1016.     }
  1017.     &.bubble--leftCenter {
  1018.       transform: translate(1rem, -50%);
  1019.       top: 0rem;
  1020.       &:after {
  1021.         content: '';
  1022.         border-top: $halfBubbleSize solid transparent;
  1023.         border-bottom: $halfBubbleSize solid transparent;
  1024.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  1025.         position: absolute;
  1026.         left: -$halfBubbleSize;
  1027.         transform: translateY(-$halfBubbleSize);
  1028.         top: 50%;
  1029.       }
  1030.     }
  1031.     &.bubble--leftBottom {
  1032.       transform: translate(1rem, -100%);
  1033.       top: 2.5rem;
  1034.       &:after {
  1035.         content: '';
  1036.         border-top: $halfBubbleSize solid transparent;
  1037.         border-bottom: $halfBubbleSize solid transparent;
  1038.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  1039.         position: absolute;
  1040.         left: -$halfBubbleSize;
  1041.         bottom: 1.5rem;
  1042.       }
  1043.     }
  1044.     &.bubble--rightTop {
  1045.       transform: translateX(-100%) translateX(-1rem);
  1046.       top: -1.5rem;
  1047.       &:after {
  1048.         content: '';
  1049.         border-top: $halfBubbleSize solid transparent;
  1050.         border-bottom: $halfBubbleSize solid transparent;
  1051.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  1052.         position: absolute;
  1053.         right: -$halfBubbleSize;
  1054.         top: 1.5rem;
  1055.       }
  1056.     }
  1057.     &.bubble--rightCenter {
  1058.       transform: translate(-100%,-50%) translateX(-1rem);
  1059.       top: 0rem;
  1060.       &:after {
  1061.         content: '';
  1062.         border-top: $halfBubbleSize solid transparent;
  1063.         border-bottom: $halfBubbleSize solid transparent;
  1064.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  1065.         position: absolute;
  1066.         right: -$halfBubbleSize;
  1067.         transform: translateY(-$halfBubbleSize);
  1068.         top: 50%;
  1069.       }
  1070.     }
  1071.     &.bubble--rightBottom {
  1072.       transform: translate(-100%,-100%) translateX(-1rem);
  1073.       top: 2.5rem;
  1074.       &:after {
  1075.         content: '';
  1076.         border-top: $halfBubbleSize solid transparent;
  1077.         border-bottom: $halfBubbleSize solid transparent;
  1078.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  1079.         position: absolute;
  1080.         right: -$halfBubbleSize;
  1081.         bottom: 1.5rem;
  1082.       }
  1083.     }
  1084.     &.bubble--topLeft {
  1085.       transform: translateX(-2rem);
  1086.       top: 1.5rem;
  1087.       &:after {
  1088.         content: '';
  1089.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  1090.         border-left: $halfBubbleSize solid transparent;
  1091.         border-right: $halfBubbleSize solid transparent;
  1092.         position: absolute;
  1093.         left: 1.5rem;
  1094.         top: -$halfBubbleSize;
  1095.       }
  1096.     }
  1097.     &.bubble--topCenter {
  1098.       transform: translateX(-50%);
  1099.       top: 1.5rem;
  1100.       &:after {
  1101.         content: '';
  1102.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  1103.         border-left: $halfBubbleSize solid transparent;
  1104.         border-right: $halfBubbleSize solid transparent;
  1105.         position: absolute;
  1106.         transform: translateX(-$halfBubbleSize);
  1107.         left:50%;
  1108.         top: -$halfBubbleSize;
  1109.       }
  1110.     }
  1111.     &.bubble--topRight {
  1112.       transform: translateX(-100%) translateX(2rem);
  1113.       top: 1.5rem;
  1114.       &:after {
  1115.         content: '';
  1116.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  1117.         border-left: $halfBubbleSize solid transparent;
  1118.         border-right: $halfBubbleSize solid transparent;
  1119.         position: absolute;
  1120.         right: 1.5rem;
  1121.         top: -$halfBubbleSize;
  1122.       }
  1123.     }
  1124.     &.bubble--bottomLeft {
  1125.       transform: translate(-2rem, -100%);
  1126.       top: -1rem;
  1127.       &:after {
  1128.         content: '';
  1129.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  1130.         border-left: $halfBubbleSize solid transparent;
  1131.         border-right: $halfBubbleSize solid transparent;
  1132.         position: absolute;
  1133.         left: 1.5rem;
  1134.         bottom: -$halfBubbleSize;
  1135.       }
  1136.     }
  1137.     &.bubble--bottomCenter {
  1138.       transform: translate(-50%, -100%);
  1139.       top: -1rem;
  1140.       &:after {
  1141.         content: '';
  1142.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  1143.         border-left: $halfBubbleSize solid transparent;
  1144.         border-right: $halfBubbleSize solid transparent;
  1145.         position: absolute;
  1146.         transform: translateX(-$halfBubbleSize);
  1147.         left: 50%;
  1148.         bottom: -$halfBubbleSize;
  1149.       }
  1150.     }
  1151.     &.bubble--bottomRight {
  1152.       transform: translate(-100%, -100%) translateX(2rem);
  1153.       top: -1rem;
  1154.       &:after {
  1155.         content: '';
  1156.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  1157.         border-left: $halfBubbleSize solid transparent;
  1158.         border-right: $halfBubbleSize solid transparent;
  1159.         position: absolute;
  1160.         right: 1.5rem;
  1161.         bottom: -$halfBubbleSize;
  1162.       }
  1163.     }
  1164.   }
  1165.  
  1166.   // TODO
  1167.   &.anchor--bottomRight,
  1168.   &.anchor--rightbottom {
  1169.     top: -1rem;
  1170.     left:50%;
  1171.     &.bubble--leftTop {
  1172.       transform: translateX(1rem);
  1173.       &:after {
  1174.         content: '';
  1175.         border-top: $halfBubbleSize solid transparent;
  1176.         border-bottom: $halfBubbleSize solid transparent;
  1177.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  1178.         position: absolute;
  1179.         left: -$halfBubbleSize;
  1180.         top: 1.5rem;
  1181.       }
  1182.     }
  1183.     &.bubble--leftCenter {
  1184.       transform: translate(1rem, -50%);
  1185.       top: 0rem;
  1186.       &:after {
  1187.         content: '';
  1188.         border-top: $halfBubbleSize solid transparent;
  1189.         border-bottom: $halfBubbleSize solid transparent;
  1190.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  1191.         position: absolute;
  1192.         left: -$halfBubbleSize;
  1193.         transform: translateY(-$halfBubbleSize);
  1194.         top: 50%;
  1195.       }
  1196.     }
  1197.     &.bubble--leftBottom {
  1198.       transform: translate(1rem, -100%);
  1199.       top: 2.5rem;
  1200.       &:after {
  1201.         content: '';
  1202.         border-top: $halfBubbleSize solid transparent;
  1203.         border-bottom: $halfBubbleSize solid transparent;
  1204.         border-right: $halfBubbleSize solid $popover-help-bgcolor;
  1205.         position: absolute;
  1206.         left: -$halfBubbleSize;
  1207.         bottom: 1.5rem;
  1208.       }
  1209.     }
  1210.     &.bubble--rightTop {
  1211.       transform: translateX(-100%) translateX(-1rem);
  1212.       top: -1.5rem;
  1213.       &:after {
  1214.         content: '';
  1215.         border-top: $halfBubbleSize solid transparent;
  1216.         border-bottom: $halfBubbleSize solid transparent;
  1217.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  1218.         position: absolute;
  1219.         right: -$halfBubbleSize;
  1220.         top: 1.5rem;
  1221.       }
  1222.     }
  1223.     &.bubble--rightCenter {
  1224.       transform: translate(-100%,-50%) translateX(-1rem);
  1225.       top: 0rem;
  1226.       &:after {
  1227.         content: '';
  1228.         border-top: $halfBubbleSize solid transparent;
  1229.         border-bottom: $halfBubbleSize solid transparent;
  1230.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  1231.         position: absolute;
  1232.         right: -$halfBubbleSize;
  1233.         transform: translateY(-$halfBubbleSize);
  1234.         top: 50%;
  1235.       }
  1236.     }
  1237.     &.bubble--rightBottom {
  1238.       transform: translate(-100%,-100%) translateX(-1rem);
  1239.       top: 2.5rem;
  1240.       &:after {
  1241.         content: '';
  1242.         border-top: $halfBubbleSize solid transparent;
  1243.         border-bottom: $halfBubbleSize solid transparent;
  1244.         border-left: $halfBubbleSize solid $popover-help-bgcolor;
  1245.         position: absolute;
  1246.         right: -$halfBubbleSize;
  1247.         bottom: 1.5rem;
  1248.       }
  1249.     }
  1250.     &.bubble--topLeft {
  1251.       transform: translateX(-2rem);
  1252.       top: 1.5rem;
  1253.       &:after {
  1254.         content: '';
  1255.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  1256.         border-left: $halfBubbleSize solid transparent;
  1257.         border-right: $halfBubbleSize solid transparent;
  1258.         position: absolute;
  1259.         left: 1.5rem;
  1260.         top: -$halfBubbleSize;
  1261.       }
  1262.     }
  1263.     &.bubble--topCenter {
  1264.       transform: translateX(-50%);
  1265.       top: 1.5rem;
  1266.       &:after {
  1267.         content: '';
  1268.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  1269.         border-left: $halfBubbleSize solid transparent;
  1270.         border-right: $halfBubbleSize solid transparent;
  1271.         position: absolute;
  1272.         transform: translateX(-$halfBubbleSize);
  1273.         left:50%;
  1274.         top: -$halfBubbleSize;
  1275.       }
  1276.     }
  1277.     &.bubble--topRight {
  1278.       transform: translateX(-100%) translateX(2rem);
  1279.       top: 1.5rem;
  1280.       &:after {
  1281.         content: '';
  1282.         border-bottom: $halfBubbleSize solid $popover-help-bgcolor;
  1283.         border-left: $halfBubbleSize solid transparent;
  1284.         border-right: $halfBubbleSize solid transparent;
  1285.         position: absolute;
  1286.         right: 1.5rem;
  1287.         top: -$halfBubbleSize;
  1288.       }
  1289.     }
  1290.     &.bubble--bottomLeft {
  1291.       transform: translate(-2rem, -100%);
  1292.       top: -1rem;
  1293.       &:after {
  1294.         content: '';
  1295.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  1296.         border-left: $halfBubbleSize solid transparent;
  1297.         border-right: $halfBubbleSize solid transparent;
  1298.         position: absolute;
  1299.         left: 1.5rem;
  1300.         bottom: -$halfBubbleSize;
  1301.       }
  1302.     }
  1303.     &.bubble--bottomCenter {
  1304.       transform: translate(-50%, -100%);
  1305.       top: -1rem;
  1306.       &:after {
  1307.         content: '';
  1308.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  1309.         border-left: $halfBubbleSize solid transparent;
  1310.         border-right: $halfBubbleSize solid transparent;
  1311.         position: absolute;
  1312.         transform: translateX(-$halfBubbleSize);
  1313.         left: 50%;
  1314.         bottom: -$halfBubbleSize;
  1315.       }
  1316.     }
  1317.     &.bubble--bottomRight {
  1318.       transform: translate(-100%, -100%) translateX(2rem);
  1319.       top: -1rem;
  1320.       &:after {
  1321.         content: '';
  1322.         border-top: $halfBubbleSize solid $popover-help-bgcolor;
  1323.         border-left: $halfBubbleSize solid transparent;
  1324.         border-right: $halfBubbleSize solid transparent;
  1325.         position: absolute;
  1326.         right: 1.5rem;
  1327.         bottom: -$halfBubbleSize;
  1328.       }
  1329.     }
  1330.   }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!