From 554a99c96d223eacc4bb6e10e3f6ad1712397f3a Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Mon, 12 Jul 2021 11:42:47 +0530 Subject: fixed transition only happening on hover in --- package.json | 1 + src/components/Form/Form.scss | 1 + src/components/Menu/Menu.scss | 12 +----------- src/components/Print/Print.scss | 13 +++++++++++++ src/components/Print/PrintableDoc.tsx | 1 + src/styles/_theme.scss | 3 +++ src/styles/global.scss | 2 +- yarn.lock | 2 +- 8 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 src/components/Print/Print.scss diff --git a/package.json b/package.json index b0de6e7..ca463d7 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "@react-pdf/renderer": "^2.0.16", + "@testing-library/dom": ">=7.21.4", "@testing-library/jest-dom": "^5.11.10", "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.1.9", diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 7642f75..31a15b1 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -57,6 +57,7 @@ input { margin-right: 0.5rem; font-size: $fontSize1 + 0.5; margin-bottom: -0.25rem; + transition: color $defTransition; } .icon:hover { diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss index 93d6c5e..bc3fbb3 100644 --- a/src/components/Menu/Menu.scss +++ b/src/components/Menu/Menu.scss @@ -14,6 +14,7 @@ text-decoration: none; font-size: $fontSize2; color: $defFG; + transition: color $defTransition; } .HomePageMenu .menuItem:hover { @@ -23,14 +24,3 @@ .InvoiceInfoMenu { width: 60%; } - -.PDFViewer { - height: 95%; - width: 95%; - - position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; - margin: auto; - z-index: 3; -} diff --git a/src/components/Print/Print.scss b/src/components/Print/Print.scss new file mode 100644 index 0000000..bae5f76 --- /dev/null +++ b/src/components/Print/Print.scss @@ -0,0 +1,13 @@ +@import "../../styles/theme"; + +.PDFViewer { + height: 95%; + width: 95%; + border: 2px solid $border0; + + position: fixed; + top: 0; bottom: 0; + left: 0; right: 0; + margin: auto; + z-index: 3; +} diff --git a/src/components/Print/PrintableDoc.tsx b/src/components/Print/PrintableDoc.tsx index bcabcbc..67c8580 100644 --- a/src/components/Print/PrintableDoc.tsx +++ b/src/components/Print/PrintableDoc.tsx @@ -7,6 +7,7 @@ */ import React, { /*useState,*/ } from "react"; +import "./Print.scss"; import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer'; const styles = StyleSheet.create({ diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss index 09c90d5..74ed2f2 100644 --- a/src/styles/_theme.scss +++ b/src/styles/_theme.scss @@ -62,6 +62,7 @@ $link2: $foreground2; $defFG: $foreground1; $altFG: $foreground2; +$border0: gray; $border1: pink; $border2: lightgreen; @@ -72,3 +73,5 @@ $underline3: $warningColor; $defBigShadow: 0px 2px 4px $shadowColor; $floatingShadow: 6px 6px 6px $shadowColor; + +$defTransition: 0.3s; diff --git a/src/styles/global.scss b/src/styles/global.scss index ef3d11d..3d077f6 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -17,9 +17,9 @@ ::-webkit-scrollbar { width: 1vw; } + * { scrollbar-width: 1vw; /* Firefox */ - transition: 0.3s; } body { diff --git a/yarn.lock b/yarn.lock index 7ee24d2..15e2454 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1845,7 +1845,7 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" -"@testing-library/dom@^8.0.0": +"@testing-library/dom@>=7.21.4", "@testing-library/dom@^8.0.0": version "8.1.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.1.0.tgz#f8358b1883844ea569ba76b7e94582168df5370d" integrity sha512-kmW9alndr19qd6DABzQ978zKQ+J65gU2Rzkl8hriIetPnwpesRaK4//jEQyYh8fEALmGhomD/LBQqt+o+DL95Q== -- cgit v1.2.3