mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
button component
This commit is contained in:
parent
323ab9b611
commit
5cab4011b9
15
src/components/atoms/Button.jsx
Normal file
15
src/components/atoms/Button.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import styles from './Button.module.scss'
|
||||||
|
|
||||||
|
const Button = props => (
|
||||||
|
<a className={styles.button} {...props}>
|
||||||
|
{props.children}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
|
||||||
|
Button.propTypes = {
|
||||||
|
children: PropTypes.node
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Button
|
48
src/components/atoms/Button.module.scss
Normal file
48
src/components/atoms/Button.module.scss
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
color: $brand-cyan;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: .25rem;
|
||||||
|
padding: $spacer / 4 $spacer / 2;
|
||||||
|
transition-property: all;
|
||||||
|
background: rgba(#fff, .15);
|
||||||
|
border: .05rem solid rgba($brand-cyan, .75);
|
||||||
|
font-size: $font-size-small;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $brand-grey-light;
|
||||||
|
margin-right: $spacer / 3;
|
||||||
|
transition: .2s ease-out;
|
||||||
|
margin-bottom: -.1rem;
|
||||||
|
width: $font-size-small;
|
||||||
|
height: $font-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: lighten($brand-cyan, 10%);
|
||||||
|
border-color: rgba(lighten($brand-cyan, 10%), .75);
|
||||||
|
transform: translate3d(0, -.1rem, 0);
|
||||||
|
box-shadow: 0 6px 10px rgba($brand-main, .1),
|
||||||
|
0 10px 25px rgba($brand-main, .05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transition: none;
|
||||||
|
background: rgba(#fff, .15);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.dark) & {
|
||||||
|
background: darken($body-background-color--dark, 1%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
|
||||||
|
0 10px 25px rgba(darken($brand-main, 20%), .2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,6 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
|
import Button from '../atoms/Button'
|
||||||
import Link from '../svg/Link'
|
import Link from '../svg/Link'
|
||||||
import Download from '../svg/Download'
|
import Download from '../svg/Download'
|
||||||
import Info from '../svg/Info'
|
import Info from '../svg/Info'
|
||||||
@ -42,10 +43,10 @@ const ProjectLinks = ({ links }) => (
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<li key={title}>
|
<li key={title}>
|
||||||
<a href={url}>
|
<Button href={url}>
|
||||||
<LinkIcon title={title} className={icons.icon} />
|
<LinkIcon title={title} className={icons.icon} />
|
||||||
{title}
|
{title}
|
||||||
</a>
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
@ -16,49 +16,6 @@
|
|||||||
margin-left: $spacer / 2;
|
margin-left: $spacer / 2;
|
||||||
margin-bottom: $spacer / 2;
|
margin-bottom: $spacer / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
|
||||||
margin-right: $spacer / 3;
|
|
||||||
transition: .2s ease-out;
|
|
||||||
margin-bottom: -.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
color: $brand-cyan;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: .25rem;
|
|
||||||
padding: $spacer / 4 $spacer / 2;
|
|
||||||
transition-property: all;
|
|
||||||
background: rgba(#fff, .15);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $brand-grey-light;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
transform: translate3d(0, -.1rem, 0);
|
|
||||||
box-shadow: 0 6px 10px rgba($brand-main, .1),
|
|
||||||
0 10px 25px rgba($brand-main, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transition: none;
|
|
||||||
background: rgba(#fff, .15);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.dark) & {
|
|
||||||
background: darken($body-background-color--dark, 1%);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
|
|
||||||
0 10px 25px rgba(darken($brand-main, 20%), .1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -16,11 +16,12 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
background: rgba(#fff, .15);
|
background: rgba(#fff, .15);
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
|
border: .05rem solid transparent;
|
||||||
color: $brand-grey-light;
|
color: $brand-grey-light;
|
||||||
margin-left: $spacer / 2;
|
margin-left: $spacer / 2;
|
||||||
margin-bottom: $spacer / 2;
|
margin-bottom: $spacer / 2;
|
||||||
flex: 0 0 calc(50% - #{$spacer / 2});
|
flex: 0 0 calc(50% - #{$spacer / 2});
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-small;
|
||||||
|
|
||||||
:global(.dark) & {
|
:global(.dark) & {
|
||||||
background: darken($body-background-color--dark, 1%);
|
background: darken($body-background-color--dark, 1%);
|
||||||
|
Loading…
Reference in New Issue
Block a user