🔥

src/components/RsvpCard/RsvpCard.css

@@ -0,0 +1,98 @@
+@import '../variables.css';
+
+.root {
+  display: flex;
+  flex-flow: row wrap;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+  padding: 20px;
+}
+
+@media (--sm-viewport) {
+  .root {
+    width: 50%;
+  }
+}
+
+.formGroup {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.label {
+  display: inline-block;
+  margin-bottom: 5px;
+  max-width: 100%;
+  font-weight: 700;
+}
+
+.input {
+  display: block;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  width: 100%;
+  height: 46px;
+  outline: 0;
+  border: 1px solid var(--colour-grey);
+  border-radius: 0;
+  background-color: #fff;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #616161;
+  font-size: 18px;
+  line-height: 1.3333333;
+  transition: border-color ease-in-out 0.15s,
+              box-shadow ease-in-out 0.15s,
+              background-color ease-in-out 0.15s;
+}
+
+.input:focus {
+  border-color: var(--colour-tertiary);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
+}
+
+.inputSuccess {
+  background-color: var(--colour-green);
+}
+
+.inputError {
+  background-color: var(--colour-red);
+}
+
+.rsvpDetails {
+  display: none;
+}
+
+.rsvpDetailsVisible {
+  display: block;
+}
+
+.iconContainer {
+  display: inline-block;
+  position: absolute;
+  top: 35px;
+  right: 15px;
+}
+
+.rsvpSummary {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  padding: 10px;
+  text-align: center;
+  opacity: 0;
+  border-radius: 0;
+  background-color: #fff;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #616161;
+  font-size: 18px;
+  pointer-events: none;
+  transition: opacity ease-in-out .4s;
+}
+
+.rsvpSummarySuccess {
+  opacity: 1;
+  background-color: var(--colour-green);
+}
+