Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Extend css with scss

  • Loading branch information...
brtjkzl committed Jan 9, 2019
1 parent 7f8332e commit fb789096e7da5ff7dabf494f5536cf9489ce05d1
Showing with 39 additions and 62 deletions.
  1. +4 −0 .flowconfig
  2. +1 −1 app/client/App.js
  3. +7 −5 app/client/{global.css → global.scss}
  4. +0 −3 app/client/packs/{env.css → env.scss}
  5. +0 −2 app/client/ui/components/Avatar/{avatar.css → avatar.scss}
  6. +1 −1 app/client/ui/components/Avatar/index.js
  7. +0 −3 app/client/ui/components/Button/{button.css → button.scss}
  8. +1 −1 app/client/ui/components/Button/index.js
  9. +1 −1 app/client/ui/components/Card/CollectionCard.js
  10. +1 −1 app/client/ui/components/Card/SearchCard.js
  11. +0 −3 app/client/ui/components/Card/{card.css → card.scss}
  12. +1 −1 app/client/ui/components/Card/index.js
  13. +0 −2 app/client/ui/components/Container/{container.css → container.scss}
  14. +1 −1 app/client/ui/components/Container/index.js
  15. +0 −5 app/client/ui/components/Dropdown/{dropdown.css → dropdown.scss}
  16. +1 −1 app/client/ui/components/Dropdown/index.js
  17. +0 −2 app/client/ui/components/Footer/{footer.css → footer.scss}
  18. +1 −1 app/client/ui/components/Footer/index.js
  19. +0 −2 app/client/ui/components/Grid/{grid.css → grid.scss}
  20. +1 −1 app/client/ui/components/Grid/index.js
  21. +1 −1 app/client/ui/components/Navbar/index.js
  22. 0 app/client/ui/components/Navbar/{navbar.css → navbar.scss}
  23. +1 −1 app/client/ui/components/Rating/index.js
  24. +2 −2 app/client/ui/components/Rating/{rating.css → rating.scss}
  25. +1 −1 app/client/ui/components/Score/index.js
  26. +2 −2 app/client/ui/components/Score/{score.css → score.scss}
  27. +2 −2 app/client/ui/components/SearchBar/index.js
  28. +1 −3 app/client/ui/components/SearchBar/{search-bar.css → search-bar.scss}
  29. +1 −1 app/client/ui/components/Stack/index.js
  30. 0 app/client/ui/components/Stack/{stack.css → stack.scss}
  31. +1 −1 app/client/ui/components/StaticPage/index.js
  32. +0 −2 app/client/ui/components/StaticPage/{static-page.css → static-page.scss}
  33. +1 −1 app/client/ui/components/StickyFooter/index.js
  34. 0 app/client/ui/components/StickyFooter/{sticky-footer.css → sticky-footer.scss}
  35. +1 −1 app/client/ui/components/Tabs/index.js
  36. +0 −3 app/client/ui/components/Tabs/{tabs.css → tabs.scss}
  37. 0 app/client/ui/styles/{color.css → _color.scss}
  38. 0 app/client/ui/styles/{cursor.css → _cursor.scss}
  39. +1 −1 app/client/ui/styles/{icon.css → _icon.scss}
  40. +1 −1 app/client/ui/styles/{padding.css → _padding.scss}
  41. +1 −1 app/client/ui/styles/{typography.css → _typography.scss}
  42. 0 app/client/ui/styles/{unit.css → _unit.scss}
  43. 0 app/client/ui/styles/{z-index.css → _z-index.scss}
  44. +1 −1 config/webpacker.yml
@@ -9,5 +9,9 @@
[options]
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=app/client
module.file_ext=.js
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss

[strict]
@@ -5,7 +5,7 @@ import { ROOT_PATH, PRiVACY_POLICY_PATH } from "routes/paths";
import HomePage from "ui/pages/HomePage";
import PrivacyPolicyPage from "ui/pages/PrivacyPolicyPage";
import Layout from "ui/components/Layout";
import "./global.css";
import "./global.scss";

const App = () => (
<Layout>
@@ -1,9 +1,11 @@
@import "modern-normalize";
@import "./ui/styles/color.css";
@import "./ui/styles/cursor.css";
@import "./ui/styles/icon.css";
@import "./ui/styles/padding.css";
@import "./ui/styles/typography.css";
@import "./ui/styles/color";
@import "./ui/styles/cursor";
@import "./ui/styles/icon";
@import "./ui/styles/padding";
@import "./ui/styles/typography";
@import "./ui/styles/unit";
@import "./ui/styles/z-index";

*,
*::after,
@@ -1,6 +1,3 @@
@import "../ui/styles/color.css";
@import "../ui/styles/unit.css";

.env {
position: fixed;
top: 0;
@@ -1,5 +1,3 @@
@import "../../styles/unit.css";

.avatar {
width: calc(var(--unit-small) * 6);
border-radius: 50%;
@@ -3,7 +3,7 @@ import * as React from "react";
import { connect } from "react-redux";
import cx from "classnames";
import { url } from "gravatar";
import "./avatar.css";
import "./avatar.scss";

const mapStateToProps = ({ Auth }) => ({
currentUserEmail: Auth.currentUser.email
@@ -1,6 +1,3 @@
@import "../../styles/unit.css";
@import "../../styles/color.css";

/* TODO refactor to button props */

.button {
@@ -1,5 +1,5 @@
// @flow
import "./button.css";
import "./button.scss";

export { default as FacebookButton } from "./FacebookButton";
export { default as SmallButton } from "./SmallButton";
@@ -9,7 +9,7 @@ import {
} from "../Dropdown";
import formatTestId from "ui/utils/formatTestId";
import type { Game } from "types";
import "./card.css";
import "./card";

type Props = {
game: Game
@@ -9,7 +9,7 @@ import { SmallButton, SmallInactiveButton } from "../Button";
import { RatingDropdown, CollectionDropdown } from "../Dropdown";
import formatTestId from "ui/utils/formatTestId";
import type { Game, Platform } from "types";
import "./card.css";
import "./card";

const mapDispatchToProps = {
setGamePlatforms
@@ -1,6 +1,3 @@
@import "../../styles/color.css";
@import "../../styles/unit.css";

:root {
--card-border-radius: calc(var(--unit-small) * 1.5);
--card-search-cover-height: calc(var(--unit-base) * 21);
@@ -1,5 +1,5 @@
// @flow
import "./card.css";
import "./card.scss";

export { default as SearchCard } from "./SearchCard";
export { default as CollectionCard } from "./CollectionCard";
@@ -1,5 +1,3 @@
@import "../../styles/unit.css";

.container {
box-sizing: content-box;
max-width: calc(var(--unit-base) * 74);
@@ -1,6 +1,6 @@
// @flow
import * as React from "react";
import "./container.css";
import "./container.scss";

type Props = {
children: React.Node
@@ -1,8 +1,3 @@
@import "../../styles/unit.css";
@import "../../styles/color.css";
@import "../../styles/z-index.css";
@import "../Card/card.css";

/* TODO refactor to dropdown menu props */
.dropdown {
position: relative;
@@ -1,5 +1,5 @@
// @flow
import "./dropdown.css";
import "./dropdown.scss";

export { default as CollectionDropdown } from "./CollectionDropdown";
export {
@@ -1,5 +1,3 @@
@import "../../styles/unit.css";

.footer {
display: flex;
justify-content: center;
@@ -2,7 +2,7 @@
import * as React from "react";
import { Link } from "react-router-dom";
import { PRiVACY_POLICY_PATH } from "routes/paths";
import "./footer.css";
import "./footer.scss";

const Footer = () => (
<ul className="footer text-small" data-cy="footer">
@@ -1,5 +1,3 @@
@import "../../styles/unit.css";

.grid {
display: flex;
flex-wrap: wrap;
@@ -1,7 +1,7 @@
// @flow
import * as React from "react";
import cx from "classnames";
import "./grid.css";
import "./grid";
import ordinalWord from "ui/utils/ordinalWord";

type GridItem = {
@@ -10,7 +10,7 @@ import SearchBar from "../SearchBar";
import { UserDropdown } from "../Dropdown";
import { FacebookButton } from "../Button";
import Stack from "../Stack";
import "./navbar.css";
import "./navbar.scss";

const mapStateToProps = ({ Auth }) => ({
userSignedIn: Auth.userSignedIn
@@ -2,7 +2,7 @@
import * as React from "react";
import Stack from "../Stack";
import StarIcon from "ui/styles/icon/star.svg";
import "./rating.css";
import "./rating.scss";

type Props = {
value: number
@@ -1,5 +1,5 @@
@import "../../styles/color.css";
@import "../../styles/unit.css";
@import "../../styles/color";
@import "../../styles/unit";

.rating {
height: 27px;
@@ -3,7 +3,7 @@ import * as React from "react";
import Stack from "../Stack";
import StarIcon from "ui/styles/icon/star.svg";
import UserIcon from "ui/styles/icon/user.svg";
import "./score.css";
import "./score.scss";

type Props = {
value?: number,
@@ -1,5 +1,5 @@
@import "../../styles/color.css";
@import "../../styles/unit.css";
@import "../../styles/color";
@import "../../styles/unit";

.score {
display: flex;
@@ -10,7 +10,7 @@ import {
} from "state/search/actions";
import CancelIcon from "ui/styles/icon/cancel.svg";
import SearchIcon from "ui/styles/icon/search.svg";
import "./search-bar.css";
import "./search-bar.scss";

const mapStateToProps = ({ Search }) => ({
haveSearchResults: !!Search.results.length,
@@ -64,7 +64,7 @@ class SearchBar extends React.Component<Props> {
className="search-bar-input text-large"
/>

<div className="search-bar-submit cursor-pointer">
<div className="search-bar-submit">
{haveSearchResults ? (
<CancelIcon onClick={clearSearchResults} />
) : (
@@ -1,6 +1,3 @@
@import "../../styles/unit.css";
@import "../../styles/color.css";

.search-bar {
position: relative;
}
@@ -24,6 +21,7 @@
top: 50%;
transform: translateY(-50%);
right: var(--unit-base);
cursor: pointer;
}

.search-bar-submit {
@@ -1,7 +1,7 @@
// @flow
import * as React from "react";
import cx from "classnames";
import "./stack.css";
import "./stack.scss";

type Props = {
direction?: "row" | "column",
@@ -1,6 +1,6 @@
// @flow
import * as React from "react";
import "./static-page.css";
import "./static-page.scss";

type Props = {
children: React.Node
@@ -1,5 +1,3 @@
@import "../../styles/unit.css";

.static-page {
padding-left: var(--unit-base);
padding-right: var(--unit-base);
@@ -1,4 +1,4 @@
import "./sticky-footer.css";
import "./sticky-footer.scss";

export { default as StickyFooter } from "./StickyFooter";
export { default as StickyFooterWrapper } from "./StickyFooterWrapper";
@@ -2,7 +2,7 @@
import * as React from "react";
import cx from "classnames";
import formatTestId from "ui/utils/formatTestId";
import "./tabs.css";
import "./tabs.scss";

type Props = {
children: Function,
@@ -1,6 +1,3 @@
@import "../../styles/unit.css";
@import "../../styles/color.css";

.tabs {
display: flex;
justify-content: center;
@@ -1,4 +1,4 @@
@import "./color.css";
@import "./color";

.icon-primary {
fill: var(--color-primary);
@@ -1,4 +1,4 @@
@import "./unit.css";
@import "./unit";

.padding-base {
padding: var(--unit-base);
@@ -1,4 +1,4 @@
@import "./color.css";
@import "./color";

:root {
--font-stack: "Lato", sans-serif;
@@ -16,7 +16,7 @@ default: &default
cache_manifest: false

# Extract and emit a css file
extract_css: false
extract_css: true

static_assets_extensions:
- .jpg

0 comments on commit fb78909

Please sign in to comment.
You can’t perform that action at this time.