From 2e426cce0f3649cbcc21717e79b18434a8a66f35 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Mar 2018 19:10:31 +0100 Subject: Migrate HelpBox style --- src/client/react/components/container/HelpBox.js | 4 +++- src/client/react/components/container/HelpBox.scss | 23 ++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/client/react/components/container/HelpBox.scss 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 ( -
+
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; + } +} -- cgit v1.1