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/Form/AddNewItemForm.js | 2 +- src/components/Form/Form.css | 136 -------------------------------- src/components/Form/MetaInfoForm.js | 2 +- src/components/Form/RegisterItemForm.js | 2 +- 4 files changed, 3 insertions(+), 139 deletions(-) delete mode 100644 src/components/Form/Form.css (limited to 'src/components/Form') 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) => { -- cgit v1.2.3