1
0
mirror of https://github.com/github/choosealicense.com synced 2024-12-22 04:40:09 +01:00

1140, delete hint.css source files

This commit is contained in:
Ahmed Ejaz 2023-09-01 02:10:33 +05:00
parent 4eef7f5007
commit 6bd31e626e
12 changed files with 0 additions and 597 deletions

View File

@ -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);
}
}

View File

@ -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)
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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);
}
}
}

View File

@ -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);
}

View File

@ -1,15 +0,0 @@
/**
* source: hint-rounded.scss
*
* Defines rounded corner tooltips.
*
* Classes added:
* 1) hint--rounded
*
*/
.#{$hintPrefix}rounded {
&:after {
border-radius: 4px;
}
}

View File

@ -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;
}
}

View File

@ -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);
}
}

View File

@ -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;

View File

@ -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";

View File

@ -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";