From 2d54f8c7a6ee92bc51dd26244517d18ee7958490 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Mar 2018 15:32:21 +0100 Subject: Add scss back into the mix --- .../react/components/container/WeekSelector.css | 40 ---------------------- .../react/components/container/WeekSelector.js | 2 +- .../react/components/container/WeekSelector.scss | 40 ++++++++++++++++++++++ 3 files changed, 41 insertions(+), 41 deletions(-) delete mode 100644 src/client/react/components/container/WeekSelector.css create mode 100644 src/client/react/components/container/WeekSelector.scss (limited to 'src/client/react/components') diff --git a/src/client/react/components/container/WeekSelector.css b/src/client/react/components/container/WeekSelector.css deleted file mode 100644 index 2ca5a0f..0000000 --- a/src/client/react/components/container/WeekSelector.css +++ /dev/null @@ -1,40 +0,0 @@ -.WeekSelector { - display: flex; - padding: 8px; - padding-bottom: 0; - background-color: #F44336; - color: white; - align-items: center; -} - -.text { - flex-grow: 1; - text-align: center; -} - -.WeekSelector button { - background-color: initial; - border: initial; - color: inherit; - padding: 8px; - border-radius: 4px; -} - -.WeekSelector svg { - font-size: 2em; -} - -.WeekSelector button:focus { - background-color: #D32F2F; - outline: none; -} - -.WeekSelector button:active { - background-color: #B81111; - outline: none; - } - -.WeekSelector button::-moz-focus-inner { - /* Remove the dotted line outline from Firefox */ - border: 0; -} diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js index 828fb6f..f0da1b2 100644 --- a/src/client/react/components/container/WeekSelector.js +++ b/src/client/react/components/container/WeekSelector.js @@ -29,7 +29,7 @@ import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward'; import purifyWeek from '../../lib/purifyWeek'; import { setWeek, weekFromLocation } from '../../lib/url'; -import styles from './WeekSelector.css'; +import styles from './WeekSelector.scss'; class WeekSelector extends React.Component { static propTypes = { diff --git a/src/client/react/components/container/WeekSelector.scss b/src/client/react/components/container/WeekSelector.scss new file mode 100644 index 0000000..dd71fea --- /dev/null +++ b/src/client/react/components/container/WeekSelector.scss @@ -0,0 +1,40 @@ +.WeekSelector { + display: flex; + padding: 8px; + padding-bottom: 0; + background-color: #F44336; + color: white; + align-items: center; + + .text { + flex-grow: 1; + text-align: center; + } + + button { + background-color: initial; + border: initial; + color: inherit; + padding: 8px; + border-radius: 4px; + + svg { + font-size: 2em; + } + + &:focus { + background-color: #D32F2F; + outline: none; + } + + &:active { + background-color: #B81111; + outline: none; + } + + &::-moz-focus-inner { + /* Remove the dotted line outline from Firefox */ + border: 0; + } + } +} -- cgit v1.1