/*------------------------------------*\ #TOOLTIPSTER-WORKAREA-ADMIN \*------------------------------------*/ /** * This is the `tooltipster-workarea-admin` theme, which overrides the default * 'sideTip' theme packaged with Tooltipster. For more theme examples see: * https://github.com/iamceege/tooltipster/tree/4.1.2/src/css/plugins/tooltipster/sideTip/themes */ $tooltipster-bg-color: $white !default; $tooltipster-arrow-color: $light-gray !default; $tooltipster-arrow-height: 8px !default; /** * 1. Important because z-index is dynamically * added as an inline style via JavaScript. */ .tooltipster-sidetip.tooltipster-workarea-admin { z-index: index($components, tooltipster) !important; /* [1] */ /** * Tooltip container */ .tooltipster-box { @include global-box-shadow; background: $tooltipster-bg-color; border: 0; border-radius: $global-border-radius; } /** * Content container */ .tooltipster-content { padding: $spacing-unit; color: $font-color; border-radius: $global-border-radius; } /** * Container gutters. These make room for the arrow. */ &.tooltipster-top .tooltipster-box { margin-top: $tooltipster-arrow-height; } &.tooltipster-right .tooltipster-box { margin-right: $tooltipster-arrow-height; } &.tooltipster-bottom .tooltipster-box { margin-bottom: $tooltipster-arrow-height; } &.tooltipster-left .tooltipster-box { margin-left: $tooltipster-arrow-height; } /** * Arrow * * 1. styles for top and bottom arrows are default * 2. then override the default for left and right arrows */ .tooltipster-arrow { /* [1] */ margin: 0 0 0 ($tooltipster-arrow-height * -1); width: ($tooltipster-arrow-height * 2); height: $tooltipster-arrow-height; } &.tooltipster-right .tooltipster-arrow, &.tooltipster-left .tooltipster-arrow { /* [2] */ margin: ($tooltipster-arrow-height * -1) 0 0; width: $tooltipster-arrow-height; height: ($tooltipster-arrow-height * 2); } .tooltipster-arrow-background { display: none; } .tooltipster-arrow-border { border-width: $tooltipster-arrow-height; } &.tooltipster-top .tooltipster-arrow-border { border-top-color: $tooltipster-arrow-color; } &.tooltipster-right .tooltipster-arrow-border { border-right-color: $tooltipster-arrow-color; } &.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: $tooltipster-arrow-color; } &.tooltipster-left .tooltipster-arrow-border { border-left-color: $tooltipster-arrow-color; } .tooltipster-arrow-uncropped {} &.tooltipster-right .tooltipster-arrow-uncropped { left: $tooltipster-arrow-height * -1; } &.tooltipster-bottom .tooltipster-arrow-uncropped { top: $tooltipster-arrow-height * -1; } }