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 "../base";
@import "../mixins";
@import "./config"; @import "./config";
@import "../tooltip/config";
%button { %button {
position: relative; position: relative;
@ -21,9 +23,7 @@
align-content: center; align-content: center;
justify-content: center; justify-content: center;
&:hover > [data-react-toolbox='tooltip'] { @include show-tooltip($tooltip-animation-duration)
transform: scale(1);
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
} }

3
components/tooltip/style.scss
View File

@ -18,11 +18,12 @@
border-radius: $tooltip-border-radius; border-radius: $tooltip-border-radius;
transform: scale(0); transform: scale(0);
transform-origin: top center; transform-origin: top center;
transition: transform $tooltip-animation-duration $animation-curve-default; // transition: transform $tooltip-animation-duration $animation-curve-default;
&.active { &.active {
transform: scale(1); transform: scale(1);
} }
&.large { &.large {
font-size: $font-size-small; font-size: $font-size-small;
padding: 2 * $tooltip-padding;
} }
} }

6
spec/components/button.jsx
View File

@ -5,10 +5,10 @@ const ButtonTest = () => (
<section> <section>
<h5>Buttons</h5> <h5>Buttons</h5>
<p>lorem ipsum...</p> <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='flat' accent label='Inbox' icon='inbox' />
<Button kind='floating' primary icon='add' /> <Button kind='floating' primary icon='add' tooltip='Floating Tooltip' />
<Button kind='floating' primary disabled icon='add' /> <Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
<Button kind='floating' accent mini icon='add' /> <Button kind='floating' accent mini icon='add' />
<Button kind='flat' primary icon='add' label='Add this' /> <Button kind='flat' primary icon='add' label='Add this' />
<Button kind='raised' primary label='Bookmark' icon='bookmark' loading /> <Button kind='raised' primary label='Bookmark' icon='bookmark' loading />