Show tooltip is in a mixin (for reuse in another components)... it's necessary be a stateless behavior.
parent
2afd343b4d
commit
68055ca358
|
@ -275,3 +275,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin show-tooltip($duration) {
|
||||
&:hover > [data-react-toolbox='tooltip'] {
|
||||
transition: transform $duration $animation-curve-default;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
@import "../base";
|
||||
@import "../mixins";
|
||||
@import "./config";
|
||||
@import "../tooltip/config";
|
||||
|
||||
%button {
|
||||
position: relative;
|
||||
|
@ -21,9 +23,7 @@
|
|||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover > [data-react-toolbox='tooltip'] {
|
||||
transform: scale(1);
|
||||
}
|
||||
@include show-tooltip($tooltip-animation-duration)
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
@ -18,11 +18,12 @@
|
|||
border-radius: $tooltip-border-radius;
|
||||
transform: scale(0);
|
||||
transform-origin: top center;
|
||||
transition: transform $tooltip-animation-duration $animation-curve-default;
|
||||
// transition: transform $tooltip-animation-duration $animation-curve-default;
|
||||
&.active {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.large {
|
||||
font-size: $font-size-small;
|
||||
padding: 2 * $tooltip-padding;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,10 +5,10 @@ const ButtonTest = () => (
|
|||
<section>
|
||||
<h5>Buttons</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='testing' />
|
||||
<Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
|
||||
<Button kind='flat' accent label='Inbox' icon='inbox' />
|
||||
<Button kind='floating' primary icon='add' />
|
||||
<Button kind='floating' primary disabled icon='add' />
|
||||
<Button kind='floating' primary icon='add' tooltip='Floating Tooltip' />
|
||||
<Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
|
||||
<Button kind='floating' accent mini icon='add' />
|
||||
<Button kind='flat' primary icon='add' label='Add this' />
|
||||
<Button kind='raised' primary label='Bookmark' icon='bookmark' loading />
|
||||
|
|
Loading…
Reference in New Issue