Skip to content

Commit

Permalink
Remove Sass
Browse files Browse the repository at this point in the history
  • Loading branch information
@brendannee
brendannee committed Oct 7, 2020
1 parent 06e9f26 commit 5a62b21
Show file tree
Hide file tree
Showing 8 changed files with 444 additions and 1,326 deletions.
14 changes: 0 additions & 14 deletions .babelrc
View file

This file was deleted.

197 changes: 95 additions & 102 deletions components/dashboard.js
View file
Expand Up @@ -103,120 +103,113 @@ export default class Dashboard extends React.Component {
text-align: center;
margin-right: -15px;
margin-left: -15px;
}
.dashboard-titles {
width: 246px;
display: inline-block;
.dashboard .dashboard-titles {
width: 246px;
display: inline-block;
}
.dashboard-title {
font-weight: bold;
font-size: 13px;
margin: 0;
.dashboard .dashboard-titles .dashboard-title {
font-weight: bold;
font-size: 13px;
margin: 0;
}
&.dashboard-title-benefit {
margin-left: 3px;
float: left;
}
.dashboard .dashboard-titles .dashboard-title.dashboard-title-benefit {
margin-left: 3px;
float: left;
}
&.dashboard-title-cost {
float: right;
}
}
}
.dashboard .dashboard-titles .dashboard-title.dashboard-title-cost {
float: right;
}
.dashboard-meters {
padding-bottom: 8px;
.dashboard-container {
width: 60px;
margin: 0 1px;
display: inline-block;
vertical-align: top;
.dashboard-meter {
position: relative;
background: ${colors.dashboardMeterBackground};
border-radius: 2px;
width: 60px;
height: 50px;
margin: 5px 0;
overflow: hidden;
&.cost .dashboard-meter-bar {
background: ${colors.dashboardMeterCost};
}
&.over-budget .dashboard-meter-bar {
background: ${colors.dashboardMeterOverCost};
}
.dashboard-meter-bar {
background: ${colors.dashboardMeter};
width: 60px;
height: 0;
position: absolute;
bottom: 0;
transition: height 500ms ease;
}
.dashboard-meter-value {
color: ${colors.dashboardMeterTextDark};
text-align: center;
padding-top: 17px;
position: relative;
font-weight: bold;
}
&.half-full .dashboard-meter-value {
color: ${colors.dashboardMeterTextLight};
text-shadow: 0px 0px 2px ${colors.dashboardMeterTextLightShadow};
}
}
.dashboard-meter-title {
font-size: 10px;
text-align: center;
}
}
}
.dashboard .dashboard-meters {
padding-bottom: 8px;
}
.dashboard .dashboard-meters .dashboard-container {
width: 60px;
margin: 0 1px;
display: inline-block;
vertical-align: top;
}
.dashboard .dashboard-meters .dashboard-meter {
position: relative;
background: ${colors.dashboardMeterBackground};
border-radius: 2px;
width: 60px;
height: 50px;
margin: 5px 0;
overflow: hidden;
}
.dashboard .dashboard-meters .dashboard-meter.cost .dashboard-meter-bar {
background: ${colors.dashboardMeterCost};
}
.dashboard .dashboard-meters .dashboard-meter.over-budget .dashboard-meter-bar {
background: ${colors.dashboardMeterOverCost};
}
.dashboard .dashboard-meters .dashboard-meter-bar {
background: ${colors.dashboardMeter};
width: 60px;
height: 0;
position: absolute;
bottom: 0;
transition: height 500ms ease;
}
.dashboard .dashboard-meters .dashboard-meter-value {
color: ${colors.dashboardMeterTextDark};
text-align: center;
padding-top: 17px;
position: relative;
font-weight: bold;
}
.dashboard .dashboard-meters .dashboard-meter.half-full .dashboard-meter-value {
color: ${colors.dashboardMeterTextLight};
text-shadow: 0px 0px 2px ${colors.dashboardMeterTextLightShadow};
}
.dashboard .dashboard-meters .dashboard-meter-title {
font-size: 10px;
text-align: center;
}
@media (min-width: 345px) {
.dashboard {
.dashboard-titles {
width: 268px;
}
.dashboard-meters {
.dashboard-container {
margin: 0 4px;
}
}
.dashboard .dashboard-titles {
width: 268px;
}
.dashboard .dashboard-meters .dashboard-container {
margin: 0 4px;
}
}
@media (min-width: 375px) {
.dashboard {
.dashboard-titles {
width: 290px;
.dashboard-title.dashboard-title-benefit {
margin-left: 6px;
}
}
.dashboard-meters {
.dashboard-container {
margin: 0 7px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
.dashboard .dashboard-titles {
width: 290px;
}
.dashboard .dashboard-titles .dashboard-title.dashboard-title-benefit {
margin-left: 6px;
}
.dashboard .dashboard-meters .dashboard-container {
margin: 0 7px;
}
.dashboard .dashboard-meters .dashboard-container:first-child {
margin-left: 0;
}
.dashboard .dashboard-meters .dashboard-container:last-child {
margin-right: 0;
}
}
`}</style>
Expand Down
20 changes: 10 additions & 10 deletions components/footer.js
View file
Expand Up @@ -5,28 +5,28 @@ const Footer =({ language = 'en' }) => (
<>
<footer className="row mt-3">
<div
className="col-md-9"
className="col-md-6"
dangerouslySetInnerHTML={{ __html: settings.text[language].footerAbout }}
/>
<div
className="col-md-3 text-right"
className="col-md-3 offset-md-3 text-right"
dangerouslySetInnerHTML={{ __html: settings.text[language].footerCopyright }}
/>
</footer>

<style jsx>{`
<style jsx global>{`
footer {
padding: 10px;
color: ${colors.footerText};
background-color: ${colors.footerBackground};
}
:global(a) {
color: ${colors.footerText};
&:hover {
color: ${colors.footerTextHover};
}
}
footer a {
color: ${colors.footerText};
}
footer a:hover {
color: ${colors.footerTextHover};
}
@media (min-width: ${breakpoints.large}) {
Expand Down
83 changes: 40 additions & 43 deletions components/header.js
View file
Expand Up @@ -47,24 +47,24 @@ const Header = ({ language = 'en' }) => (
<style jsx>{`
.header {
padding: 0 15px 10px;
}
.logo {
float: left;
width: 50px;
height: 50px;
margin: 5px 0;
}
.logo {
float: left;
width: 50px;
height: 50px;
margin: 5px 0;
}
.title {
margin: 0;
padding: 8px 0 0 60px;
font-size: 22px;
.subtitle {
font-size: 17px;
display: block;
}
}
.title {
margin: 0;
padding: 8px 0 0 60px;
font-size: 22px;
}
.subtitle {
font-size: 17px;
display: block;
}
.stripe {
Expand All @@ -73,50 +73,47 @@ const Header = ({ language = 'en' }) => (
background: ${colors.headerStripe};
}
.benefits-list {
dt {
font-size: 15px;
margin-top: 8px;
}
.benefits-list dt {
font-size: 15px;
margin-top: 8px;
}
dd {
font-size: 13px;
margin-left: 15px;
}
.benefits-list dd {
font-size: 13px;
margin-left: 15px;
}
@media (min-width: 375px) {
header .title {
.title {
padding-top: 5px;
.subtitle {
font-size: inherit;
display: inline;
}
}
.subtitle {
font-size: inherit;
display: inline;
}
}
@media (min-width: 550px) {
header {
.title {
padding: 19px 0 0 69px;
}
.title {
padding: 19px 0 0 69px;
}
}
@media (min-width: ${breakpoints.large}) {
.header {
padding: 0;
}
.logo {
width: 90px;
height: 90px;
}
.logo {
width: 90px;
height: 90px;
}
.title {
padding: 29px 0 0 120px;
font-size: 36px;
float: none;
}
.title {
padding: 29px 0 0 120px;
font-size: 36px;
float: none;
}
}
`}</style>
Expand Down

0 comments on commit 5a62b21

Please sign in to comment.