mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-30 17:32:38 +00:00
yay for waindows pathing
This commit is contained in:
Scott Tolksdorf
361
shared/naturalcrit2/styles/animations.less
Normal file
361
shared/naturalcrit2/styles/animations.less
Normal file
@@ -0,0 +1,361 @@
|
||||
//Defaults
|
||||
@defaultDuration : 0.25s;
|
||||
@defaultEasing : ease;
|
||||
|
||||
//Animates all properties on an element
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: all @duration @easing;
|
||||
-moz-transition: all @duration @easing;
|
||||
-o-transition: all @duration @easing;
|
||||
transition: all @duration @easing;
|
||||
}
|
||||
//Animates Specific property
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: @prop @duration @easing;
|
||||
-moz-transition: @prop @duration @easing;
|
||||
-o-transition: @prop @duration @easing;
|
||||
transition: @prop @duration @easing;
|
||||
}
|
||||
|
||||
.animateMany(...){
|
||||
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
|
||||
-webkit-transition-property: @value;
|
||||
-moz-transition-property: @value;
|
||||
-o-transition-property: @value;
|
||||
transition-property: @value;
|
||||
|
||||
.animateDuration();
|
||||
.animateEasing();
|
||||
}
|
||||
|
||||
.animateDuration(@duration : @defaultDuration){
|
||||
-webkit-transition-duration: @duration;
|
||||
-moz-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
}
|
||||
|
||||
.animateEasing(@easing : @defaultEasing){
|
||||
-webkit-transition-timing-function: @easing;
|
||||
-moz-transition-timing-function: @easing;
|
||||
-o-transition-timing-function: @easing;
|
||||
transition-timing-function: @easing;
|
||||
}
|
||||
|
||||
|
||||
.transition (@prop, @duration: @defaultDuration) {
|
||||
-webkit-transition: @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition: @prop @duration, -moz-transform @duration;
|
||||
-o-transition: @prop @duration, -o-transform @duration;
|
||||
-ms-transition: @prop @duration, -ms-transform @duration;
|
||||
transition: @prop @duration, transform @duration;
|
||||
}
|
||||
.transform (@transform) {
|
||||
-webkit-transform: @transform;
|
||||
-moz-transform: @transform;
|
||||
-o-transform: @transform;
|
||||
-ms-transform: @transform;
|
||||
transform: @transform;
|
||||
}
|
||||
|
||||
|
||||
.delay(@delay){
|
||||
animation-delay:@delay;
|
||||
-webkit-animation-delay:@delay;
|
||||
transition-delay:@delay;
|
||||
-webkit-transition-delay:@delay;
|
||||
}
|
||||
.keep(){
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
-ms-animation-fill-mode:forwards;
|
||||
-o-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
}
|
||||
|
||||
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
|
||||
&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
|
||||
&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
|
||||
&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
|
||||
&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
|
||||
&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
|
||||
&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
|
||||
&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
|
||||
&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
|
||||
&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
|
||||
&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
|
||||
&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
|
||||
&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
|
||||
&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
|
||||
&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
|
||||
&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
|
||||
&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
|
||||
&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
|
||||
&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
|
||||
&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
|
||||
&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.createFrames(@name, @from, @to){
|
||||
@frames: {
|
||||
from { @from(); }
|
||||
to { @to(); }
|
||||
};
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
}
|
||||
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
animation-name: @name;
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
-webkit-animation-timing-function: @easing;
|
||||
-moz-animation-timing-function: @easing;
|
||||
-ms-animation-timing-function: @easing;
|
||||
animation-timing-function: @easing;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***************************
|
||||
Standard Animations
|
||||
****************************/
|
||||
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeIn; @duration; @easing);
|
||||
.createFrames(fadeIn,
|
||||
{ opacity : 0; },
|
||||
{ opacity : 1; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInDown; @duration; @easing);
|
||||
.createFrames(fadeInDown,
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInTop; @duration; @easing);
|
||||
.createFrames(fadeInTop,
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInLeft; @duration; @easing);
|
||||
.createFrames(fadeInLeft,
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInRight; @duration; @easing);
|
||||
.createFrames(fadeInRight,
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOut; @duration; @easing);
|
||||
.createFrames(fadeOut,
|
||||
{ opacity : 1; },
|
||||
{ opacity : 0; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutDown; @duration; @easing);
|
||||
.createFrames(fadeOutDown,
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutTop; @duration; @easing);
|
||||
.createFrames(fadeOutTop,
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutLeft; @duration; @easing);
|
||||
.createFrames(fadeOutLeft,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(-20px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutRight; @duration; @easing);
|
||||
.createFrames(fadeOutRight,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(20px));}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/***************************
|
||||
Fun Animations
|
||||
****************************/
|
||||
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(spin, @duration, @easing);
|
||||
.spinKeyFrames(){
|
||||
from { .transform(rotate(0deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
}
|
||||
@-webkit-keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
}
|
||||
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(bounce, @duration, @easing);
|
||||
.bounceKeyFrames(){
|
||||
0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
|
||||
40% { .transform(translateY(-30px));}
|
||||
60% { .transform(translateY(-15px));}
|
||||
}
|
||||
@-webkit-keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
}
|
||||
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(pulse, @duration, @easing);
|
||||
.pulseKeyFrames(){
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
}
|
||||
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(rubberBand, @duration, @easing);
|
||||
.rubberBandKeyFrames(){
|
||||
0% {.transform(scale(1));}
|
||||
30% {.transform(scaleX(1.25) scaleY(0.75));}
|
||||
40% {.transform(scaleX(0.75) scaleY(1.25));}
|
||||
60% {.transform(scaleX(1.15) scaleY(0.85));}
|
||||
100% {.transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
}
|
||||
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(shake, @duration, @easing);
|
||||
.shakeKeyFrames(){
|
||||
0%, 100% {.transform( translateX(0));}
|
||||
10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
|
||||
20%, 40%, 60%, 80% {.transform( translateX(10px));}
|
||||
}
|
||||
@-webkit-keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
}
|
||||
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: top center;
|
||||
-ms-transform-origin: top center;
|
||||
transform-origin: top center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
80% {.transform(rotate(-5deg));}
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
80% {.transform(rotate(-5deg));}
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(wobble, @duration, @easing);
|
||||
.wobbleKeyFrames(){
|
||||
0% {.transform(translateX(0%));}
|
||||
15% {.transform(translateX(-25%) rotate(-5deg));}
|
||||
30% {.transform(translateX(20%) rotate(3deg));}
|
||||
45% {.transform(translateX(-15%) rotate(-3deg));}
|
||||
60% {.transform(translateX(10%) rotate(2deg));}
|
||||
75% {.transform(translateX(-5%) rotate(-1deg));}
|
||||
100% {.transform(translateX(0%));}
|
||||
}
|
||||
@-webkit-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
}
|
||||
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(popIn, @duration, @easing);
|
||||
.popInKeyFrames(){
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
}
|
||||
23
shared/naturalcrit2/styles/colors.less
Normal file
23
shared/naturalcrit2/styles/colors.less
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
@copyGrey : #333333;
|
||||
|
||||
@tealLight : #1ABC9C;
|
||||
@teal : #16A085;
|
||||
@greenLight : #2ECC71;
|
||||
@green : #27AE60;
|
||||
@blueLight : #3498DB;
|
||||
@blue : #2980B9;
|
||||
@purpleLight : #9B59B6;
|
||||
@purple : #8E44AD;
|
||||
@steelLight : #34495E;
|
||||
@steel : #2C3E50;
|
||||
@yellowLight : #F1C40F;
|
||||
@yellow : #F39C12;
|
||||
@orangeLight : #E67E22;
|
||||
@orange : #D35400;
|
||||
@redLight : #E74C3C;
|
||||
@red : #C0392B;
|
||||
@silverLight : #ECF0F1;
|
||||
@silver : #BDC3C7;
|
||||
@greyLight : #95A5A6;
|
||||
@grey : #7F8C8D;
|
||||
86
shared/naturalcrit2/styles/elements.less
Normal file
86
shared/naturalcrit2/styles/elements.less
Normal file
@@ -0,0 +1,86 @@
|
||||
|
||||
@containerWidth : 1000px;
|
||||
|
||||
html, body{
|
||||
position : relative;
|
||||
height : 100%;
|
||||
min-height : 100%;
|
||||
background-color : #eee;
|
||||
font-family : 'Lato', sans-serif;
|
||||
color : @copyGrey;
|
||||
}
|
||||
.container{
|
||||
position : relative;
|
||||
max-width : @containerWidth;
|
||||
margin : 0 auto;
|
||||
padding-right : 20px;
|
||||
padding-left : 20px;
|
||||
}
|
||||
h1{
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 2em;
|
||||
}
|
||||
h2{
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 1.5em;
|
||||
font-weight : 900;
|
||||
}
|
||||
h3{
|
||||
margin-top : 5px;
|
||||
margin-bottom : 7px;
|
||||
font-size : 1em;
|
||||
font-weight : 900;
|
||||
}
|
||||
p{
|
||||
margin-bottom : 1em;
|
||||
font-size : 16px;
|
||||
color : @copyGrey;
|
||||
line-height : 1.5em;
|
||||
}
|
||||
code{
|
||||
background-color : #F8F8F8;
|
||||
font-family : 'Courier', mono;
|
||||
color : black;
|
||||
white-space : pre;
|
||||
}
|
||||
a{
|
||||
color : inherit;
|
||||
}
|
||||
strong{
|
||||
font-weight : bold;
|
||||
}
|
||||
button{
|
||||
.button();
|
||||
}
|
||||
.button(@backgroundColor : @green){
|
||||
.animate(background-color);
|
||||
display : inline-block;
|
||||
padding : 0.6em 1.2em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-family : "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size : 15px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
border : none;
|
||||
outline : none;
|
||||
&:hover{
|
||||
background-color : darken(@backgroundColor, 5%);
|
||||
}
|
||||
&:active{
|
||||
background-color : darken(@backgroundColor, 10%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color : @silver !important;
|
||||
}
|
||||
}
|
||||
.iconButton(@backgroundColor : @green){
|
||||
padding : 0.6em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-size : 14px;
|
||||
color : white;
|
||||
text-align : center;
|
||||
}
|
||||
1
shared/naturalcrit2/styles/reset.less
Normal file
1
shared/naturalcrit2/styles/reset.less
Normal file
@@ -0,0 +1 @@
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
|
||||
129
shared/naturalcrit2/styles/tooltip.less
Normal file
129
shared/naturalcrit2/styles/tooltip.less
Normal file
@@ -0,0 +1,129 @@
|
||||
@tooltipColor : #383838;
|
||||
@arrowSize : 6px;
|
||||
@arrowPosition : 18px;
|
||||
|
||||
[data-tooltip]{
|
||||
.tooltip(attr(data-tooltip));
|
||||
}
|
||||
[data-tooltip-top]{
|
||||
.tooltipTop(attr(data-tooltip-top));
|
||||
}
|
||||
[data-tooltip-bottom]{
|
||||
.tooltipBottom(attr(data-tooltip-bottom));
|
||||
}
|
||||
[data-tooltip-left]{
|
||||
.tooltipLeft(attr(data-tooltip-left));
|
||||
}
|
||||
[data-tooltip-right]{
|
||||
.tooltipRight(attr(data-tooltip-right));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tooltip(@content){
|
||||
.tooltipBottom(@content);
|
||||
}
|
||||
|
||||
.tooltipTop(@content){
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
margin-bottom: -@arrowSize * 2;
|
||||
border-top-color: @tooltipColor;
|
||||
}
|
||||
&:after{ margin-left: -18px; }
|
||||
&:before, &:after {
|
||||
bottom: 100%;
|
||||
left: 50%; }
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
.transform(translateY(-(@arrowSize + 2)));
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipBottom(@content){
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
margin-top: -@arrowSize * 2;
|
||||
border-bottom-color: @tooltipColor;
|
||||
}
|
||||
&:after{ margin-left: -18px; }
|
||||
&:before, &:after {
|
||||
top: 100%;
|
||||
left: 50%; }
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
.transform(translateY(@arrowSize + 2));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltipLeft(@content){
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
margin-right: -@arrowSize * 2;
|
||||
margin-bottom: -@arrowSize;
|
||||
border-left-color: @tooltipColor;
|
||||
|
||||
}
|
||||
&:after{ margin-bottom: -14px;}
|
||||
&:before, &:after {
|
||||
right: 100%;
|
||||
bottom: 50%; }
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
.transform(translateX(-(@arrowSize + 2)));
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipRight(@content){
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
margin-left: -@arrowSize * 2;
|
||||
margin-bottom: -@arrowSize;
|
||||
border-right-color: @tooltipColor;
|
||||
}
|
||||
&:after{ margin-bottom: -14px;}
|
||||
&:before, &:after {
|
||||
left: 100%;
|
||||
bottom: 50%; }
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
.transform(translateX(@arrowSize + 2));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltipShow(){
|
||||
|
||||
}
|
||||
|
||||
.tooltipBase(@content){
|
||||
position: relative;
|
||||
&:before, &:after{
|
||||
.animateAll();
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 1000000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
//Arrow
|
||||
&:before{
|
||||
content: '';
|
||||
background: transparent;
|
||||
border: @arrowSize solid transparent;
|
||||
z-index: 1000001;
|
||||
}
|
||||
|
||||
//Box
|
||||
&:after{
|
||||
content: @content;
|
||||
color: white;
|
||||
background: @tooltipColor;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover:before, &:hover:after {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user