Add misc CSS

This commit is contained in:
André Wahlberg 2020-11-27 17:23:11 +01:00
parent 66dbc66ec4
commit a1b078f418
6 changed files with 41 additions and 9 deletions

View File

@ -1,5 +1,8 @@
import React, { Component } from 'react';
import './css/Button.css';
class Button extends Component {
// Multiple onClick functions
onClick = () => {
@ -21,7 +24,7 @@ class Button extends Component {
render() {
return (
<button onClick={this.onClick}>
<button className={this.props.className} onClick={this.onClick}>
{this.props.children}
</button>
);

View File

@ -1,10 +1,11 @@
import React, { Component } from 'react';
import './css/NavigationDrawer.css';
import DisruptionButton from "./DisruptionButton.js";
import Popup from './Popup.js';
import Button from './Button.js';
import './css/NavigationDrawer.css';
import userIcon from '../img/user.svg';

View File

@ -0,0 +1,3 @@
button:active {
background: rgba(0, 0, 0, 0.1);
}

View File

@ -66,11 +66,6 @@
transition: .15s;
}
.hidden {
opacity: 0;
pointer-events: none;
}
#navDrawer hr {
width: 90%;
margin: 0 10px 5px 0;

View File

@ -5,8 +5,9 @@
transform: translate(-50%, -50%) scale(0);
transform-origin: center;
background: white;
width: 65vw;
height: 45vh;
width: 55vw;
height: 39vh;
padding: 3vh 5vw;
box-shadow: var(--boxShadow);
border-radius: var(--borderRadius);
transition: .35s;
@ -17,3 +18,27 @@
pointer-events: all;
transform: translate(-50%, -50%) scale(1);
}
.popup h3 {
margin-bottom: 20px;
}
.popup ul {
list-style: none;
}
.popup li button {
width: 100%;
padding: 8% 0;
font-size: 16px;
}
.popupClose {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 11;
}

View File

@ -28,3 +28,8 @@ button {
background: none;
border: none;
}
.hidden {
opacity: 0;
pointer-events: none;
}