vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Show tooltip is in a mixin (for reuse in another components)... it's necessary be a stateless behavior.

old
@soyjavi 2015-11-05 07:18:46 +07:00
parent 2afd343b4d
commit 68055ca358
4 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/_mixins.scss
View File

@ -275,3 +275,10 @@
}
}
}
@mixin show-tooltip($duration) {
&:hover > [data-react-toolbox='tooltip'] {
transition: transform $duration $animation-curve-default;
transform: scale(1);
}
}

6
components/button/style.scss
View File

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

3
components/tooltip/style.scss
View File

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

6
spec/components/button.jsx
View File

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