aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/container/HelpBox.js4
-rw-r--r--src/client/react/components/container/HelpBox.scss23
2 files changed, 26 insertions, 1 deletions
diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js
index 31624db..8b53382 100644
--- a/src/client/react/components/container/HelpBox.js
+++ b/src/client/react/components/container/HelpBox.js
@@ -22,6 +22,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
+import './HelpBox.scss';
+
class HelpBox extends React.Component {
static propTypes = {
// redux
@@ -35,7 +37,7 @@ class HelpBox extends React.Component {
}
return (
- <div className="help-box">
+ <div className="HelpBox">
<div className="arrow" />
<div className="bubble">
Voer hier een docentafkorting, klas, leerlingnummer of lokaalnummer in.
diff --git a/src/client/react/components/container/HelpBox.scss b/src/client/react/components/container/HelpBox.scss
new file mode 100644
index 0000000..f91eb77
--- /dev/null
+++ b/src/client/react/components/container/HelpBox.scss
@@ -0,0 +1,23 @@
+.HelpBox {
+ position: relative;
+ margin-top: 32px;
+
+ .arrow {
+ position: absolute;
+ background-color: white;
+ width: 32px;
+ height: 32px;
+ top: -16px;
+ left: 48px;
+ transform: rotate(45deg);
+ }
+
+ .bubble {
+ position: relative;
+ background-color: white;
+ font-weight: bold;
+ margin: 16px;
+ padding: 16px;
+ border-radius: 4px;
+ }
+}