SCSS

1 files changed, 107 insertions, 0 deletions

diff --git a/assets/css/app.scss b/assets/css/app.scss
new file mode 100644
index 0000000..8b221d0
--- /dev/null
+++ b/assets/css/app.scss
@@ -0,0 +1,107 @@
+/* This file is for your main application css. */
+
+@import "./milligram.css";
+
+:root {
+  --color-1: #df7861;
+  --color-2: #ecb390;
+  --color-3: #ecdfc8;
+  --color-4: #fcf8e8;
+  --color-5: #ffffff;
+}
+
+body {
+  color: #222;
+  background-color: var(--color-3);
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 90.0rem;
+  padding: 0 1.0rem;
+  position: relative;
+  width: 100%;
+}
+
+.parties {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 5px;
+  background-color: var(--color-4);
+}
+.party-peek {
+  flex: 0 0 50%;
+  text-align: center;
+  padding: 16px 40px 12px 40px;
+}
+.party-peek figure {
+  margin: 0;
+}
+
+.avatar {
+  border-radius: 50%;
+}
+.avatar--big {
+  max-height: 140px;
+}
+.avatar--tiny {
+  max-height: 42px;
+}
+
+.row {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: row; /* Milligram only does this in mid-big screens */
+}
+.row--padded {
+  margin-top: 10px;
+}
+.row-center {
+  justify-content: center
+}
+.row-left {
+  flex-direction: row;
+}
+.row-right {
+  flex-direction: row-reverse;
+}
+
+.middle-box {
+  background-color: var(--color-1);
+  color: white;
+  padding: 4px 12px 4px 12px;
+  border-radius: 12px;
+  box-shadow: 1px 1px 2px grey;
+}
+
+.white-box {
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 1px 1px 2px grey;
+}
+
+/* Message box */
+.message {
+  padding: 0px !important;
+  margin: 0 10px 0 10px;
+  max-width: 65%;
+  background-color: var(--color-5);
+}
+
+.message-photo {
+  border-radius: 5px 5px 0 0;
+  max-height: 600px;
+}
+
+.message-box {
+  padding: 0 10px 0 10px;
+  margin-top: 5px;
+  overflow-wrap: break-word;
+}
+
+.message-date {
+  text-align: right;
+  color: grey;
+  font-size: 12px;
+}