refactor viewer sections list, share, subscribe, subscription form

1 files changed, 69 insertions, 0 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/subscribe.css b/animism-align/frontend/app/views/viewer/sections/subscribe.css
new file mode 100644
index 0000000..9c27614
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/subscribe.css
@@ -0,0 +1,69 @@
+/* subscription form */
+
+.nav-subscribe {
+  position: absolute;
+  bottom: 0;
+  left: -1px;
+  width: 35rem;
+  transform: translateY(30rem) translateZ(0);
+  transition: opacity 0.01s, transform 0.2s;
+  padding: 0.5rem 0.75rem 0 0.75rem;
+  background: black;
+  border-top: 1px solid white;
+  border-right: 1px solid white;
+  border-left: 1px solid white;
+  color: white;
+  font-size: 18px;
+}
+.checklist-open .nav-subscribe {
+  top: 0rem;
+  z-index: 21;
+  transform: translateY(-30rem) translateZ(0);
+  border-top: 0;
+  border-bottom: 1px solid white;
+  bottom: auto;
+}
+.subscribe-open .nav-subscribe {
+  transform: translateY(0) translateZ(0);
+  opacity: 1;
+  z-index: 10;
+}
+
+/* subscription form */
+
+.nav-subscribe .subscription-form {
+  width: 100%;
+  white-space: normal;
+  position: relative;
+}
+.nav-subscribe .subscription-form input {
+  font-size: 18px;
+  background: transparent;
+  border: 0;
+  padding: 5px 0;
+  width: 100%;
+  color: #fff;
+}
+.nav-subscribe .subscription-form input::placeholder {
+  color: #888;
+}
+.nav-subscribe .subscription-form input:focus,
+.nav-subscribe .subscription-form input:focus:invalid {
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: #fff;
+}
+.nav-subscribe .subscription-form .arrow {
+  position: absolute;
+  bottom: -0.25rem;
+  right: -1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.nav-subscribe .subscription-form svg polygon {
+  fill: #666;
+}
+.nav-subscribe .subscription-callout {
+  width: 30rem;
+}
\ No newline at end of file