From 4b6c8dbe1469447f2c51ac345bca4b363b8c71ed Mon Sep 17 00:00:00 2001 From: YuanmingLeee Date: Fri, 8 Feb 2019 22:53:35 +0800 Subject: [PATCH] add styled scrollbar --- .gitignore | 12 ++++++++---- public/index.html | 4 +++- src/components/A/index.jsx | 16 ++++++++-------- src/layout/SideBar/index.jsx | 3 +-- src/styles/index.js | 31 +++++++++++++++++++++++++++++-- 5 files changed, 49 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 4d29575..fa8480f 100755 --- a/.gitignore +++ b/.gitignore @@ -1,17 +1,21 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# dependencies +### JetBrains ### +/.idea/ + +### dependencies ### /node_modules /.pnp .pnp.js -# testing +### testing ### /coverage -# production +### production ### /build +/package-lock.json -# misc +### misc ### .DS_Store .env.local .env.development.local diff --git a/public/index.html b/public/index.html index 9828354..8429492 100755 --- a/public/index.html +++ b/public/index.html @@ -2,17 +2,19 @@ + + Iceberx NTUOSS -
+
diff --git a/src/components/A/index.jsx b/src/components/A/index.jsx index d94b379..4bf4f27 100644 --- a/src/components/A/index.jsx +++ b/src/components/A/index.jsx @@ -1,14 +1,14 @@ import styled from 'styled-components'; const A = styled.a` - &, - &:hover, - &:focus, - &:visited { - color: ${props => props.theme.primaryColor}; - background: inherit; - box-shadow: inherit; - } + &, + &:hover, + &:focus, + &:visited { + color: ${props => props.theme.primaryColor}; + background: inherit; + box-shadow: inherit; + } `; export default A; diff --git a/src/layout/SideBar/index.jsx b/src/layout/SideBar/index.jsx index 8eb17e5..5afb6a5 100644 --- a/src/layout/SideBar/index.jsx +++ b/src/layout/SideBar/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import * as PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; import { Icon } from '@material-ui/core'; @@ -8,7 +8,6 @@ import Logo from 'components/Logo'; import { Drawer, SideBarHeader, - BreakLine, List, NavLink, ListItem, diff --git a/src/styles/index.js b/src/styles/index.js index 303f709..14fddbc 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import * as PropTypes from 'prop-types'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; const GlobalStyle = createGlobalStyle` @@ -7,12 +7,39 @@ const GlobalStyle = createGlobalStyle` font-size:1vw; color: ${props => props.theme.primaryColor}; background: ${props => props.theme.backgroundColor}; - overflow: hidden; + } + html, body { height: 100%; + margin:0; + overflow: hidden; } a { text-decoration: none; } + /* only apply in webkit */ + @media screen and (-webkit-min-device-pixel-ratio:0) { + .iceberx-app-container { + color: rgba(0,0,0,0); + text-shadow: 0 0 black; + box-shadow: 0 1px 6px black; + transition: color .8s; + } + .iceberx-app-container:hover { + color: rgba(0,0,0,0.3); + } + *::-webkit-scrollbar { + width: 6px; + height: 8px; + } + *::-webkit-scrollbar-track { + display: none; + } + *::-webkit-scrollbar-thumb { + border-radius: 3px; + box-shadow: inset 0 0 0 3px; + background-color: inherit; + } + } `; const theme = {