m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

button component

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-07-10 16:05:52 +02:00
parent 323ab9b611
commit 5cab4011b9
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 68 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/atoms/Button.jsx Normal file
View 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
View 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);
}
}
}

5
src/components/molecules/ProjectLinks.jsx
View File

@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import Button from '../atoms/Button'
import Link from '../svg/Link'
import Download from '../svg/Download'
import Info from '../svg/Info'
@ -42,10 +43,10 @@ const ProjectLinks = ({ links }) => (
return (
<li key={title}>
<a href={url}>
<Button href={url}>
<LinkIcon title={title} className={icons.icon} />
{title}
</a>
</Button>
</li>
)
})}

43
src/components/molecules/ProjectLinks.module.scss
View File

@ -16,49 +16,6 @@
margin-left: $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 {

3
src/components/molecules/ProjectTechstack.module.scss
View File

@ -16,11 +16,12 @@
text-align: center;
background: rgba(#fff, .15);
border-radius: .25rem;
border: .05rem solid transparent;
color: $brand-grey-light;
margin-left: $spacer / 2;
margin-bottom: $spacer / 2;
flex: 0 0 calc(50% - #{$spacer / 2});
font-size: $font-size-base;
font-size: $font-size-small;
:global(.dark) & {
background: darken($body-background-color--dark, 1%);