aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components/container
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-03-21 19:10:31 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-03-21 19:10:31 +0100
commit2e426cce0f3649cbcc21717e79b18434a8a66f35 (patch)
tree196cfb4591be8299f134bccff48b0e6b38710bf2 /src/client/react/components/container
parente42733e75189e908159b749b1e1d81391bb66419 (diff)
Migrate HelpBox style
Diffstat (limited to 'src/client/react/components/container')
-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;
+ }
+}