Last active
March 13, 2019 19:14
-
-
Save theranbrig/dbf478ac4c961d6c8a193de582420ce1 to your computer and use it in GitHub Desktop.
Styled Components for calculator app.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// If you would like to use the same fonts you can import the following into your public/index.html file. | |
// <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" /> | |
import styled from 'styled-components'; | |
export const CalculatorStyles = styled.div` | |
background-color: #4abdac; | |
max-width: 100%; | |
height: 100vh; | |
display: grid; | |
justify-items: center; | |
grid-template-areas: | |
'display' | |
'numbers'; | |
button { | |
width: 100%; | |
height: 80px; | |
border-radius: 20px; | |
border: 3px solid white; | |
font-size: 2rem; | |
color: white; | |
font-family: 'Orbitron', serif; | |
background: #e17055; | |
&:focus { | |
outline: none; | |
} | |
} | |
.display { | |
font-family: 'Orbitron', serif; | |
font-weight: 700; | |
grid-area: display; | |
h1 { | |
font-size: 4rem; | |
color: white; | |
text-align: center; | |
margin: 40px 0; | |
} | |
} | |
.number-pad { | |
grid-area: numbers; | |
display: grid; | |
grid-gap: 10px; | |
grid-template-columns: repeat(4, 1fr); | |
padding: 0px 0px 30px; | |
width: 450px; | |
.button-div:focus { | |
outline: none; | |
} | |
} | |
.zero-button { | |
grid-column: 1/3; | |
} | |
`; | |
export const DisplayStyles = styled.div` | |
display: grid; | |
grid-template-rows: 90px 50px; | |
grid-template-columns: 1fr; | |
border: 4px solid white; | |
margin: 10px; | |
width: 700px; | |
align-items: center; | |
border-radius: 20px; | |
background: #e17055; | |
h2, | |
p { | |
text-align: center; | |
color: white; | |
} | |
h2 { | |
font-size: 3rem; | |
margin: 0; | |
text-align: right; | |
padding: 0px; | |
border-bottom: 4px solid white; | |
padding: 15px 20px; | |
} | |
p { | |
margin: 5px 0; | |
} | |
`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment