From 4b975629983d8742e3129f7b3f13d246ad903d40 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sat, 1 May 2021 10:00:01 +0530 Subject: using node-sass directly instead of using sassc --- src/components/Display/Display.css | 65 --------------- src/components/Display/DisplayItem.js | 2 +- src/components/Display/ItemsDisplay.js | 2 +- src/components/Display/SummaryDisplay.js | 2 +- src/components/Form/AddNewItemForm.js | 2 +- src/components/Form/Form.css | 136 ------------------------------- src/components/Form/MetaInfoForm.js | 2 +- src/components/Form/RegisterItemForm.js | 2 +- src/components/Header/Header.css | 45 ---------- src/components/Header/Header.js | 3 +- src/index.js | 2 +- src/styles/Form.css | 0 src/styles/global.css | 40 --------- 13 files changed, 8 insertions(+), 295 deletions(-) delete mode 100644 src/components/Display/Display.css delete mode 100644 src/components/Form/Form.css delete mode 100644 src/components/Header/Header.css delete mode 100644 src/styles/Form.css delete mode 100644 src/styles/global.css diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css deleted file mode 100644 index c5917e3..0000000 --- a/src/components/Display/Display.css +++ /dev/null @@ -1,65 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); -/* Experimental color scheme */ -/* light theme */ -/* -$defBG: #FFFFFF; -$altBG: lightgray; -$defFG: #000000; -$altFG: #232627; -$defLink: brown; -$altLink: brown; - -$defShadow: 0px 0px 4px #232627; -*/ -/* Inspired by Dracula */ -.ItemsDisplay, -.ItemsDisplay table { - width: 100%; } - -.ItemsDisplay { - margin: 3rem auto; } - -.ItemsDisplay .legend { - background-color: #383A59; } - -.ItemsDisplay th { - font-size: 1.2rem; } - -.ItemsDisplay td { - text-align: center; - border-bottom: 1px solid lightblue; - font-size: 1.5rem; } - -.ItemsDisplay .disabledBorder { - border-bottom: 1px solid gray; } - -.ItemsDisplay .warningBorder { - border-bottom: 1px solid red; } - -.ItemsDisplay .leftAlign { - text-align: left; } - -.SummaryDisplayTR td { - color: #FF79C6; - font-size: 1.7rem; } - -.SummaryDisplay { - width: 30%; - padding: 0.5rem 2rem; } - -.SummaryDisplay h1 { - font-size: 3rem; - margin: 0.5rem -1.5rem; - border-bottom: 1px dotted lightblue; } - -.SummaryDisplay table { - width: 100%; - margin: auto; } - -.SummaryDisplay td { - font-size: 1.25rem; - padding: 0.2rem 0; } - -.SummaryDisplay .grandTotal td { - font-size: 2rem; - color: #FF79C6; } diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js index 8fe6d9a..04a7d8b 100644 --- a/src/components/Display/DisplayItem.js +++ b/src/components/Display/DisplayItem.js @@ -7,7 +7,7 @@ */ import React from "react"; -import "./Display.css"; +import "./Display.scss"; const DisplayItem = (props) => { const itemNumber = props.itemNumber; diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js index c8aeb76..0a349f2 100644 --- a/src/components/Display/ItemsDisplay.js +++ b/src/components/Display/ItemsDisplay.js @@ -7,7 +7,7 @@ */ import React from "react"; -import "./Display.css"; +import "./Display.scss"; import DisplayItem from "./DisplayItem"; import {SummaryDisplayTR} from "./SummaryDisplay"; diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js index 5cdcc93..a44e036 100644 --- a/src/components/Display/SummaryDisplay.js +++ b/src/components/Display/SummaryDisplay.js @@ -7,7 +7,7 @@ */ import React from "react"; -import "./Display.css"; +import "./Display.scss"; const getBasicSummary = (items) => { let totalRawPrice = 0; diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js index 95145b1..3fc4c46 100644 --- a/src/components/Form/AddNewItemForm.js +++ b/src/components/Form/AddNewItemForm.js @@ -7,7 +7,7 @@ */ import React, { useState } from "react"; -import "./Form.css"; +import "./Form.scss"; const AddNewItemForm = (props) => { diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css deleted file mode 100644 index 1340151..0000000 --- a/src/components/Form/Form.css +++ /dev/null @@ -1,136 +0,0 @@ -/* - * OpenBills - Self hosted browser app to generate and keep track of simple invoices - * Version - 0 - * Licensed under the MIT license - https://opensource.org/licenses/MIT - * - * Copyright (c) 2021 Vidhu Kant Sharma -*/ -@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); -/* Experimental color scheme */ -/* light theme */ -/* -$defBG: #FFFFFF; -$altBG: lightgray; -$defFG: #000000; -$altFG: #232627; -$defLink: brown; -$altLink: brown; - -$defShadow: 0px 0px 4px #232627; -*/ -/* Inspired by Dracula */ -/* hide arrows in numericInputs */ -/* Chrome, Safari, Edge, Opera */ -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; } - -/* Firefox */ -input[type=number] { - -moz-appearance: textfield; } - -.formContainer { - /*border: 1px solid pink;*/ - /*padding: 2rem;*/ - height: 50vh; - border-radius: 1rem; - padding: 1.5rem 0; } - -.addNewItemForm .textInputs, -.addNewItemForm .numericInputs -label { - font-size: 1.5rem; } - -.addNewItemForm { - display: flex; - flex-direction: row; - justify-content: space-between; - height: 100%; } - -.addNewItemForm .textInputs, -.addNewItemForm .numericInputs { - border: 1px solid pink; - width: 30%; - justify-content: space-around; } - -.addNewItemForm .numericInputs input { - width: 5.5rem; } - -.addNewItemForm .menuButtons { - border: 1px solid pink; - width: 15%; - justify-content: space-around; } - -.addNewItemForm .menuButtons * { - width: 100%; } - -.addNewItemForm div { - display: flex; - flex-direction: column; - /*border-radius: 1rem;*/ - padding: 1.5rem; - overflow: scroll; } - -/* hide scrollbars */ -.addNewItemForm div::-webkit-scrollbar { - display: none; - /* Chrome/Safari/Opera */ } - -.addNewItemForm div { - -ms-overflow-style: none; - /* IE and Edge */ - scrollbar-width: none; - /* Firefox */ } - -.addNewItemForm label { - display: flex; - justify-content: space-between; - padding: 0.8rem 0; - border-bottom: 1px dotted lightblue; } - -.RegisterItemFormContainer { - /*display: none;*/ - position: fixed; - width: 95%; - height: 70vh; - left: 0; - right: 0; - margin: auto; - top: 15vh; - background-color: #383A59; } - -.RegisterItemForm .textInputs, -.RegisterItemForm .numericInputs { - width: 40%; } - -.RegisterItemForm { - width: 95%; - height: 60vh; - margin: 1rem auto; - justify-content: space-around; } - -.RegisterItemFormContainer .menu { - position: absolute; - right: 1rem; - bottom: 0.25rem; } - -.RegisterItemFormContainer input[type=submit], -.RegisterItemFormContainer input[type=button] { - margin: 1rem; } - -.MetaInfoForm { - width: 60%; } - -@media only screen and (max-device-width: 480px) { - .formContainer { - padding: 0.5rem; - height: auto; } - .addNewItemForm { - flex-direction: column; } - .addNewItemForm .textInputs, - .addNewItemForm .numericInputs, - .addNewItemForm .menuButtons { - width: 90%; - padding: 1rem; - margin: 1rem auto; } } diff --git a/src/components/Form/MetaInfoForm.js b/src/components/Form/MetaInfoForm.js index 96287bb..5d9e3c3 100644 --- a/src/components/Form/MetaInfoForm.js +++ b/src/components/Form/MetaInfoForm.js @@ -7,7 +7,7 @@ */ import React /*, { useState }*/ from "react"; -import "./Form.css"; +import "./Form.scss"; const MetaInfoForm = () => { return ( diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js index 1e2f32d..ca4d991 100644 --- a/src/components/Form/RegisterItemForm.js +++ b/src/components/Form/RegisterItemForm.js @@ -13,7 +13,7 @@ import React, { useState } from "react"; import axios from "axios"; -import "./Form.css"; +import "./Form.scss"; const RegisterItemForm = (props) => { diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css deleted file mode 100644 index 5dc483d..0000000 --- a/src/components/Header/Header.css +++ /dev/null @@ -1,45 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); -/* Experimental color scheme */ -/* light theme */ -/* -$defBG: #FFFFFF; -$altBG: lightgray; -$defFG: #000000; -$altFG: #232627; -$defLink: brown; -$altLink: brown; - -$defShadow: 0px 0px 4px #232627; -*/ -/* Inspired by Dracula */ -.header { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: space-between; - position: static; - margin: 0 0 1.5rem 0; - padding: none; - width: 100%; - height: 5rem; - background-color: #383A59; - box-shadow: 0px 4px 4px #383A59; } - -.header div { - margin: auto 1rem; } - -nav a { - text-decoration: none; - padding: 0.3rem; - color: #F2F2F2; } - -.placeholder { - width: 5rem; - height: 3rem; } - -.inlineBlock { - display: inline-block; } - -p, h1, h2, h3, h4, h5, h6 { - color: #F2F2F2; } diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index ad8d59a..14edb76 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -7,8 +7,7 @@ */ import React from "react"; -import "./Header.css"; -// import React, { useState } from "react"; +import "./Header.scss"; const Header = () => { // const [activeLink, updateActiveLink] = useState("home") diff --git a/src/index.js b/src/index.js index f618682..0d1a5dc 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ // import React from 'react'; import ReactDOM from 'react-dom'; -import "./styles/global.css" +import "./styles/global.scss" import App from "./components/App"; ReactDOM.render(App(), document.getElementById("root")) diff --git a/src/styles/Form.css b/src/styles/Form.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index 30fc9e5..0000000 --- a/src/styles/global.css +++ /dev/null @@ -1,40 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); -/* Experimental color scheme */ -/* light theme */ -/* -$defBG: #FFFFFF; -$altBG: lightgray; -$defFG: #000000; -$altFG: #232627; -$defLink: brown; -$altLink: brown; - -$defShadow: 0px 0px 4px #232627; -*/ -/* Inspired by Dracula */ -* { - font-family: "Quicksand", sans-serif; } - -body { - background-color: #282A36; - color: #F2F2F2; - margin: 0; } - -.root-content { - width: 95%; - margin: auto; - margin-bottom: 3rem; } - -.BillingPageFlex { - display: flex; - flex-direction: row; - justify-content: space-between; - height: 70vh; } - -.BillingPageFlex div { - box-sizing: border-box; - border: 1px solid pink; } - -@media only screen and (max-device-width: 480px) { - .root-content { - width: 95%; } } -- cgit v1.2.3