1140, delete hint.css source files
This commit is contained in:
Ahmed Ejaz
parent
4eef7f5007
commit
6bd31e626e
|
|
@ -1,46 +0,0 @@
|
|||
/**
|
||||
* source: hint-always.scss
|
||||
*
|
||||
* Defines a persisted tooltip which shows always.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--always
|
||||
*
|
||||
*/
|
||||
|
||||
.#{$hintPrefix}always {
|
||||
&:after, &:before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.#{$hintPrefix}top {
|
||||
@include set-margin('translateY', -1, -50%);
|
||||
|
||||
&-left {
|
||||
@include set-margin('translateY', -1, -100%);
|
||||
}
|
||||
&-right {
|
||||
@include set-margin('translateY', -1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$hintPrefix}bottom {
|
||||
@include set-margin('translateY', 1, -50%);
|
||||
&-left {
|
||||
@include set-margin('translateY', 1, -100%);
|
||||
}
|
||||
&-right {
|
||||
@include set-margin('translateY', 1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$hintPrefix}left {
|
||||
@include set-margin('translateX', -1);
|
||||
}
|
||||
|
||||
&.#{$hintPrefix}right {
|
||||
@include set-margin('translateX', 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
* source: hint-color-types.scss
|
||||
*
|
||||
* Contains tooltips of various types based on color differences.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--error
|
||||
* 2) hint--warning
|
||||
* 3) hint--info
|
||||
* 4) hint--success
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// mixin to generate different color style tooltips
|
||||
@mixin hint-type($color) {
|
||||
&:after {
|
||||
background-color: $color;
|
||||
text-shadow: 0 -1px 0px darken($color, $hintTextShadowDarkenAmount);
|
||||
}
|
||||
|
||||
// generate arrow color style
|
||||
@include arrow-border-color($color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Error
|
||||
*/
|
||||
.#{$hintPrefix}error {
|
||||
@include hint-type($hintErrorColor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Warning
|
||||
*/
|
||||
.#{$hintPrefix}warning {
|
||||
@include hint-type($hintWarningColor)
|
||||
}
|
||||
|
||||
/**
|
||||
* Info
|
||||
*/
|
||||
.#{$hintPrefix}info {
|
||||
@include hint-type($hintInfoColor)
|
||||
}
|
||||
|
||||
/**
|
||||
* Success
|
||||
*/
|
||||
.#{$hintPrefix}success {
|
||||
@include hint-type($hintSuccessColor)
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
/**
|
||||
* source: hint-core.scss
|
||||
*
|
||||
* Defines the basic styling for the tooltip.
|
||||
* Each tooltip is made of 2 parts:
|
||||
* 1) body (:after)
|
||||
* 2) arrow (:before)
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint
|
||||
*/
|
||||
|
||||
[class*="#{$hintPrefix}"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
|
||||
// HACK: Trigger hardware accelerated rendering, otherwise transform was not
|
||||
// working on a hidden element
|
||||
@include vendor('transform', translate3d(0, 0, 0));
|
||||
|
||||
// HACK: visibility is set to hidden because IE & Opera don't support
|
||||
// pointer-events on HTML content yet because of which hovering a hidden tooltip
|
||||
// shows the tooltip.
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: $hintZIndex;
|
||||
// shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
|
||||
pointer-events: none;
|
||||
|
||||
@include vendor('transition', $hintTransitionDuration ease);
|
||||
@include vendor('transition-delay', $hintHideDelay);
|
||||
}
|
||||
|
||||
&:hover:before, &:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover:before, &:hover:after {
|
||||
// $hintShowDelay will apply as soon as element is hovered.
|
||||
@include vendor('transition-delay', $hintShowDelay);
|
||||
}
|
||||
|
||||
/**
|
||||
* tooltip arrow
|
||||
*/
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: $hintArrowBorderWidth solid transparent;
|
||||
// move z-index 1 up than :after so that it shows over box-shadow
|
||||
z-index: $hintZIndex + 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* tooltip body
|
||||
*/
|
||||
&:after {
|
||||
background: $hintDefaultColor;
|
||||
color: white;
|
||||
padding: $hintVerticalPadding $hintHorizontalPadding;
|
||||
font-size: $hintFontSize;
|
||||
font-family: $hintFontFamily;
|
||||
line-height: $hintFontSize; // Vertical centering.
|
||||
white-space: nowrap; // Prevent breaking to new line.
|
||||
}
|
||||
// Always get content from aria-label attribute.
|
||||
&[aria-label]:after {
|
||||
content: attr(aria-label); // The magic!
|
||||
}
|
||||
// If the `data-hint` attribute is present, use it.
|
||||
// This might be deprecated in future in support of a11y.
|
||||
&[data-hint]:after {
|
||||
content: attr(data-hint); // The magic!
|
||||
}
|
||||
}
|
||||
|
||||
// Hide tooltips if any of the supported attributes is empty.
|
||||
[aria-label=''],
|
||||
[data-hint=''] {
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
* source: hint-effects.scss
|
||||
*
|
||||
* Defines various transition effects for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--no-animate
|
||||
* 2) hint--bounce
|
||||
*
|
||||
*/
|
||||
|
||||
// Remove animation from tooltips.
|
||||
.#{$hintPrefix}no-animate {
|
||||
&:before, &:after {
|
||||
@include vendor('transition-duration', 0ms);
|
||||
}
|
||||
}
|
||||
|
||||
// Bounce effect in tooltips.
|
||||
.#{$hintPrefix}bounce {
|
||||
&:before, &:after {
|
||||
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
|
||||
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove shadows from tooltips.
|
||||
.#{$hintPrefix}no-shadow {
|
||||
&:before, &:after {
|
||||
text-shadow: initial;
|
||||
box-shadow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove shadows from tooltips.
|
||||
.#{$hintPrefix}no-arrow {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
// hint-mixins.scss
|
||||
//
|
||||
// Place to store common mixins.
|
||||
|
||||
// Vendor prefixer mixin.
|
||||
@mixin vendor($property, $value) {
|
||||
-webkit-#{$property}: $value;
|
||||
-moz-#{$property}: $value;
|
||||
#{$property}: $value;
|
||||
}
|
||||
|
||||
// Generates border-color rules for all possible positions
|
||||
@mixin arrow-border-color($color) {
|
||||
@each $position in top, bottom, left, right {
|
||||
@if $position == top or $position == bottom {
|
||||
// Loop further for classes like .top-left, bottom-right etc
|
||||
@each $xDir in left, right {
|
||||
#{if(&, "&", "")}.#{$hintPrefix}#{$position}-#{$xDir}:before {
|
||||
border-#{$position}-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
#{if(&, "&", "")}.#{$hintPrefix}#{$position}:before {
|
||||
border-#{$position}-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// mixin to set margin on tooltip using translate transform
|
||||
// $property
|
||||
@mixin set-margin($property, $transitionDirection, $translateX: 0) {
|
||||
$value: unquote("#{$property}(#{$hintTransitionDistance * $transitionDirection})");
|
||||
&:before {
|
||||
@include vendor('transform', $value);
|
||||
}
|
||||
&:after {
|
||||
@if $translateX != 0 {
|
||||
// For vertical tooltips, we need to animate in y-direction
|
||||
// retaining its x-transform.
|
||||
@include vendor('transform', translateX($translateX) $value);
|
||||
}
|
||||
@else {
|
||||
@include vendor('transform', $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
/**
|
||||
* source: hint-position.scss
|
||||
*
|
||||
* Defines the positoning logic for the tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--top
|
||||
* 2) hint--bottom
|
||||
* 3) hint--left
|
||||
* 4) hint--right
|
||||
*/
|
||||
|
||||
@mixin vertical-positioned-tooltip($propertyY, $transitionDirection, $xDirection:0) {
|
||||
&:before {
|
||||
// bring arrow inside so that it animates to normal position when shown.
|
||||
// HACK: +1px to avoid the 1 px white space between arrow and body during transition.
|
||||
margin-#{$propertyY}: -2 * $hintArrowBorderWidth + 1px;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
#{$propertyY}: 100%;
|
||||
left: 50%; // get top-left corner in center
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: calc(50% - #{$hintArrowBorderWidth}); // get arrow center aligned with content
|
||||
}
|
||||
|
||||
$translateX: -50%;
|
||||
@if $xDirection == -1 {
|
||||
$translateX: -100%;
|
||||
} @else if $xDirection == 1 {
|
||||
$translateX: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include vendor('transform', translateX($translateX));
|
||||
}
|
||||
|
||||
&:after {
|
||||
@if $xDirection != 0 {
|
||||
// bring back the tooltip by some offset so that arrow doesn't stick at end
|
||||
margin-left: -$xDirection * $hintArrowOffsetX;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include set-margin('translateY', $transitionDirection, $translateX);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin horizontal-positioned-tooltip($propertyX, $transitionDirection) {
|
||||
&:before {
|
||||
// bring arrow inside so that it animates to normal position when shown
|
||||
// HACK: +1px to avoid the 1 px white space between arrow and body during transition.
|
||||
margin-#{$propertyX}: -2 * $hintArrowBorderWidth + 1px;
|
||||
// bring back to center vertically
|
||||
margin-bottom: -1 * $hintArrowBorderWidth;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// bring back to center
|
||||
margin-bottom: -1 * floor($hintTooltipHeight / 2);
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
#{$propertyX}: 100%;
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include set-margin('translateX', $transitionDirection);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* set default color for tooltip arrows
|
||||
*/
|
||||
@include arrow-border-color($hintDefaultColor);
|
||||
|
||||
/**
|
||||
* top tooltip
|
||||
*/
|
||||
.#{$hintPrefix}top {
|
||||
@include vertical-positioned-tooltip('bottom', -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* bottom tooltip
|
||||
*/
|
||||
.#{$hintPrefix}bottom {
|
||||
@include vertical-positioned-tooltip('top', 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* right tooltip
|
||||
*/
|
||||
.#{$hintPrefix}right {
|
||||
@include horizontal-positioned-tooltip('left', 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* left tooltip
|
||||
*/
|
||||
.#{$hintPrefix}left {
|
||||
@include horizontal-positioned-tooltip('right', -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* top-left tooltip
|
||||
*/
|
||||
.#{$hintPrefix}top-left {
|
||||
@include vertical-positioned-tooltip('bottom', -1, -1);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* top-right tooltip
|
||||
*/
|
||||
.#{$hintPrefix}top-right {
|
||||
@include vertical-positioned-tooltip('bottom', -1, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* bottom-left tooltip
|
||||
*/
|
||||
.#{$hintPrefix}bottom-left {
|
||||
@include vertical-positioned-tooltip('top', 1, -1);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* bottom-right tooltip
|
||||
*/
|
||||
.#{$hintPrefix}bottom-right {
|
||||
@include vertical-positioned-tooltip('top', 1, 1);
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* source: hint-rounded.scss
|
||||
*
|
||||
* Defines rounded corner tooltips.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--rounded
|
||||
*
|
||||
*/
|
||||
|
||||
.#{$hintPrefix}rounded {
|
||||
&:after {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* source: hint-sizes.scss
|
||||
*
|
||||
* Defines width restricted tooltips that can span
|
||||
* across multiple lines.
|
||||
*
|
||||
* Classes added:
|
||||
* 1) hint--small
|
||||
* 2) hint--medium
|
||||
* 3) hint--large
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
.#{$hintPrefix}small,
|
||||
.#{$hintPrefix}medium,
|
||||
.#{$hintPrefix}large {
|
||||
&:after {
|
||||
white-space: normal;
|
||||
line-height: 1.4em;
|
||||
word-wrap: break-word; // Ensure long words do not overflow.
|
||||
}
|
||||
}
|
||||
|
||||
.#{$hintPrefix}small {
|
||||
&:after {
|
||||
width: $hintSizeSmall;
|
||||
}
|
||||
}
|
||||
.#{$hintPrefix}medium {
|
||||
&:after {
|
||||
width: $hintSizeMedium;
|
||||
}
|
||||
}
|
||||
.#{$hintPrefix}large {
|
||||
&:after {
|
||||
width: $hintSizeLarge;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/**
|
||||
* source: hint-theme.scss
|
||||
*
|
||||
* Defines basic theme for tooltips.
|
||||
*
|
||||
*/
|
||||
|
||||
[class*="#{$hintPrefix}"] {
|
||||
/**
|
||||
* tooltip body
|
||||
*/
|
||||
&:after {
|
||||
text-shadow: 0 -1px 0px darken($hintDefaultColor, $hintTextShadowDarkenAmount);
|
||||
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// hint-variables.scss
|
||||
//
|
||||
// Declares some variables used within the library.
|
||||
|
||||
// Prefix for all classes. By default, BEM naming convention is used
|
||||
$hintPrefix: 'hint--' !default;
|
||||
|
||||
// font size
|
||||
$hintFontSize: 12px !default;
|
||||
|
||||
// default font family
|
||||
$hintFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
|
||||
|
||||
// paddings
|
||||
$hintVerticalPadding: 8px !default;
|
||||
$hintHorizontalPadding: 10px !default;
|
||||
|
||||
// default tooltip height
|
||||
$hintTooltipHeight: $hintFontSize + 2 * $hintVerticalPadding !default;
|
||||
|
||||
// border-width for tooltip arrow
|
||||
$hintArrowBorderWidth: 6px !default;
|
||||
|
||||
// horizontal arrow offset
|
||||
$hintArrowOffsetX: 2 * $hintArrowBorderWidth !default;
|
||||
|
||||
// text-shadow darken percentage
|
||||
$hintTextShadowDarkenAmount: 25% !default;
|
||||
|
||||
// transition distance
|
||||
$hintTransitionDistance: 8px !default;
|
||||
|
||||
// Transition Duration
|
||||
$hintTransitionDuration: 0.3s !default;
|
||||
|
||||
// Delay in showing the tooltips.
|
||||
$hintShowDelay: 100ms !default;
|
||||
|
||||
// Delay in hiding the tooltips.
|
||||
$hintHideDelay: 0ms !default;
|
||||
|
||||
// z-index for tooltips
|
||||
$hintZIndex: 1000000 !default;
|
||||
|
||||
// Size options
|
||||
$hintSizeSmall: 80px !default;
|
||||
$hintSizeMedium: 150px !default;
|
||||
$hintSizeLarge: 300px !default;
|
||||
|
||||
// Various colors
|
||||
// Default color is blackish
|
||||
$hintDefaultColor: hsl(0, 0%, 22%) !default;
|
||||
|
||||
// Error color
|
||||
$hintErrorColor: hsl(1, 40%, 50%) !default;
|
||||
|
||||
// Warning color
|
||||
$hintWarningColor: hsl(38, 46%, 54%) !default;
|
||||
|
||||
// Info Color
|
||||
$hintInfoColor: hsl(200, 50%, 45%) !default;
|
||||
|
||||
// Success Color
|
||||
$hintSuccessColor: hsl(121, 32%, 40%) !default;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// hint.base.scss
|
||||
//
|
||||
// Aggregates all other sass files to create a basic functional tooltip.
|
||||
// This doesn't have any of the cosmetic features of the library.
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
|
||||
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
*
|
||||
* Source: https://github.com/chinchang/hint.css
|
||||
* Demo: http://kushagragour.in/lab/hint/
|
||||
*
|
||||
*/
|
||||
|
||||
@import "hint-variables";
|
||||
@import "hint-mixins";
|
||||
@import "hint-core";
|
||||
@import "hint-position";
|
||||
@import "hint-sizes";
|
||||
@import "hint-always";
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// hint.scss
|
||||
//
|
||||
// Aggregates all other sass files.
|
||||
|
||||
/*-------------------------------------*\
|
||||
HINT.css - A CSS tooltip library
|
||||
\*-------------------------------------*/
|
||||
|
||||
|
||||
/**
|
||||
* HINT.css is a tooltip library made in pure CSS.
|
||||
*
|
||||
* Source: https://github.com/chinchang/hint.css
|
||||
* Demo: http://kushagragour.in/lab/hint/
|
||||
*
|
||||
*/
|
||||
|
||||
@import "hint-variables";
|
||||
@import "hint-mixins";
|
||||
@import "hint-core";
|
||||
@import "hint-position";
|
||||
@import "hint-sizes";
|
||||
@import "hint-theme";
|
||||
@import "hint-color-types";
|
||||
@import "hint-always";
|
||||
@import "hint-rounded";
|
||||
@import "hint-effects";
|
||||
Loading…
Reference in New Issue