Skip to content

Instantly share code, notes, and snippets.

@KFoxder

KFoxder/_tooltip.scss

Created June 5, 2018 16:27
Show Gist options
  • Save KFoxder/c1bad8f6ea6460540a25988df12743f7 to your computer and use it in GitHub Desktop.
Save KFoxder/c1bad8f6ea6460540a25988df12743f7 to your computer and use it in GitHub Desktop.
Download ZIP
New SCSS
Raw
_tooltip.scss
/*
* angular-tooltips
* 1.2.2
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Tue Jun 20 2017
*/
@-webkit-keyframes animate-tooltip {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
60% {
opacity: .8;
}
70% {
opacity: .9;
}
90% {
opacity: 1;
}
}
@-moz-keyframes animate-tooltip {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
60% {
opacity: .8;
}
70% {
opacity: .9;
}
90% {
opacity: 1;
}
}
@-ms-keyframes animate-tooltip {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
60% {
opacity: .8;
}
70% {
opacity: .9;
}
90% {
opacity: 1;
}
}
@keyframes animate-tooltip {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
60% {
opacity: .8;
}
70% {
opacity: .9;
}
90% {
opacity: 1;
}
}
._exradicated-tooltip {
display: block;
opacity: 1;
position: absolute;
z-index: 999;
}
tooltip {
display: inline-block;
position: relative;
&._multiline {
display: block;
}
&._slow._ready tip {
animation: animate-tooltip 0.65s;
}
&._fast._ready tip {
animation: animate-tooltip 0.15s;
}
&._steady._ready tip {
animation: animate-tooltip 0.35s;
}
tip {
background-color:$tooltip-bg;
color:$tooltip-color;
display: none;
line-height: normal;
max-width:$tooltip-max-width;
min-width:$tooltip-min-width;
opacity: 0;
padding:2px 0 3px 0!important;
position: absolute;
text-align: center;
will-change:unset !important;
word-wrap: break-word;
white-space: nowrap;
margin: $tooltip-margin;
&._hidden {
display: block;
visibility: hidden;
}
}
&.active:not(._force-hidden) tip {
display: block;
opacity: 1;
z-index: $zindex-tooltip;
}
tip-tip {
// 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 textLabel();
}
&._top:not(._left):not(._right) tip {
left: 50%;
top: -9px;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0;
}
}
&._bottom:not(._left):not(._right) tip {
right: 50%;
top: 100%;
-webkit-transform: translateX(50%) translateY(9px);
transform: translateX(50%) translateY(9px);
tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
width: 0;
}
}
&._right:not(._top):not(._bottom) tip {
left: 100%;
top: 50%;
-webkit-transform: translateX(9px) translateY(-50%);
transform: translateX(9px) translateY(-50%);
tip-arrow {
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
content: '';
height: 0;
margin-top: -6px;
position: absolute;
right: 100%;
top: 50%;
width: 0;
}
}
&._left:not(._top):not(._bottom) tip {
left: -9px;
top: 50%;
-webkit-transform: translateX(-100%) translateY(-50%);
transform: translateX(-100%) translateY(-50%);
tip-arrow {
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
content: '';
height: 0;
left: 100%;
margin-top: -6px;
position: absolute;
top: 50%;
width: 0;
}
}
&._top {
&._left tip {
left: -9px;
top: -9px;
-webkit-transform: translateX(-100%) translateY(-100%);
transform: translateX(-100%) translateY(-100%);
tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 90%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0;
}
}
&._right tip {
left: 100%;
top: -9px;
-webkit-transform: translateX(9px) translateY(-100%);
transform: translateX(9px) translateY(-100%);
tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 10%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0;
}
}
}
&._bottom {
&._left tip {
left: -9px;
top: 100%;
-webkit-transform: translateX(-100%) translateY(9px);
transform: translateX(-100%) translateY(9px);
tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 90%;
margin-left: -6px;
position: absolute;
width: 0;
}
}
&._right tip {
left: 100%;
top: 100%;
-webkit-transform: translateX(9px) translateY(9px);
transform: translateX(9px) translateY(9px);
tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 10%;
margin-left: -6px;
position: absolute;
width: 0;
}
}
}
}
tip-tip .close-button {
cursor: pointer;
float: right;
left: 8%;
margin-top: -7%;
padding: 3px;
position: relative;
}
Raw
_variables.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
$font-family-base : 'Roboto Condensed', sans-serif;
$font-size-base : 15px;
$font-size-desktop: $font-size-base - 2;
$font-weight-base : 400;
$line-height-base : 1.466;
$line-height-desktop : 1.429;
// Colors
$gray-base : #000;
$gray-base-10 : lighten($gray-base, 10%); // #191919
$gray-base-20 : lighten($gray-base, 20%); // #333333
$gray-base-30 : lighten($gray-base, 30%); // #4c4c4c
$gray-base-40 : lighten($gray-base, 40%); // #666666
$gray-base-45 : lighten($gray-base, 45%); // #777777
$gray-base-50 : lighten($gray-base, 50%); // #7f7f7f
$gray-base-60 : lighten($gray-base, 60%); // #999999
$gray-base-70 : lighten($gray-base, 70%); // #b2b2b2
$gray-base-75 : lighten($gray-base, 75%); // #c1c1c1
$gray-base-80 : lighten($gray-base, 80%); // #cccccc
$gray-base-90 : lighten($gray-base, 90%); // #e5e5e5
$gray-base-95 : lighten($gray-base, 95%); // #f2f2f2
$white : #fff;
$black : #000;
$yc-blue : #0282e8;
$yc-blue-dark : #0263b3;
$yc-blue-25 : #41a1ed;
$yc-blue-50 : #80c0f3;
$yc-blue-75 : #c0dff9;
$yc-blue-90 : #e5f2fc;
$yc-blue-95 : #f2f8fd;
$colors: (
green : #00a200,
red : #d2222a,
purple : #6833c9,
purple-light : #b59ae4,
purple-extralight : #f1ecfa ,
purple-tint : #e4daf5,
orange : #ffa86f,
blue : #568cd8,
lime : #9bcc4f,
fuscia : #dd1baa,
tan : #bf9375,
forest : #28753a,
red-orange : #e85b35,
light-blue : #a9c4eb,
plum : #56284f,
light-pink : #ffb8ee
);
$body-color : $gray-base-10;
$body-bg : #fff;
$link-color : $body-color;
$link-hover-color : $yc-blue;
$panel-background : #f7f8f8;
// Grid breakpoints
$grid-breakpoints: (
xs: 0,
sm: 700px,
md: 960px,
lg: 1025px,
xl: 1440px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
$container-max-widths: (
sm: 700px,
md: 960px,
lg: 1024px,
xl: 1440px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
$grid-columns: 12 !default;
$grid-gutter-width: 20px;
$base-height: 40px;
$base-height-desktop: 30px;
// Header
$header-height: 48px;
$header-height-mobile: $header-height; // was 60px;
// Panel
$panel-margin: 16px;
$panel-margin-lg: 10px;
// Z-index master list
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// Arrows
$arrow-width: 8px;
$arrow-width-lg: 8px;
// Dropdowns
$caret-width: 8px;
$caret-width-lg: 8px;
// Forms
$form-row-margin-vertical: .933em;
$form-row-margin-vertical-desktop: .923em;
$custom-checkbox-indicator-size: 12px;
$custom-checkbox-indicator-size-desktop: 10px;
$custom-radio-indicator-size: 16px;
$custom-radio-indicator-size-desktop: 14px;
// Modals
$modal-dialog-margin: $grid-gutter-width;
$modal-content-bg: $white;
$modal-backdrop-bg: $gray-base-70;
$modal-backdrop-opacity: .5;
$modal-header-padding: $grid-gutter-width;
$modal-md: 624px;
$modal-sm: 488px;
$modal-lg: 1000px; // Temp
// Tooltips
$tooltip-max-width: 200px !default;
$tooltip-min-width: 100px !default;
$tooltip-color: $white !default;
$tooltip-bg: $gray-base-10;
$tooltip-opacity: .9 !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Tables
$table-border: 1px solid $gray-base-90;
// Quad table
$quad-table-height: 500px;
$quad-table-cell-width: 80px;
$quad-table-sidebar-width: 120px;
$quad-table-cell-name-width: 310px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment