itmo2019 · airosso · May 3, 2019 · May 3, 2019 · May 3, 2019 · May 3, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/blocks/finder.css b/blocks/finder.css
@@ -0,0 +1,5 @@
+.finder {
+  width: 100%;
+  height: 36px;
+  padding: 14px 0;
+}
diff --git a/blocks/finder__button-close.css b/blocks/finder__button-close.css
@@ -0,0 +1,19 @@
+.finder__button-close {
+  position: relative;
+
+  width: 10px;
+  padding-left: 0;
+  margin: auto auto auto -25px;
+
+  border: none;
+  background-color: inherit;
+  border-radius: 3px;
+  color: #bcbcbc;
+  font-size: 16px;
+  text-align: start;
+}
+
+.finder__button-close:hover {
+  color: #dadada;
+  cursor: pointer;
+}
diff --git a/blocks/finder__input.css b/blocks/finder__input.css
@@ -0,0 +1,14 @@
+.finder__input {
+  position: relative;
+
+  width: 40%;
+  height: 32px;
+  padding-right: 20px;
+  padding-left: 4px;
+  margin-left: 30%;
+  background-color: #ffffff;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  color: #a5a5a5;
+  font-size: 16px;
+  opacity: 0.5;
+}
diff --git a/blocks/hamburger.css b/blocks/hamburger.css
@@ -0,0 +1,6 @@
+.hamburger {
+  width: 20px;
+  height: 30px;
+  padding-top: 8px;
+  float: left;
+}
diff --git a/blocks/hamburger__slice.css b/blocks/hamburger__slice.css
@@ -0,0 +1,7 @@
+.hamburger__slice {
+  width: 20px;
+  height: 2px;
+  min-height: 2px;
+  margin-bottom: 5px;
+  background-color: #000;
+}
diff --git a/blocks/inbox.css b/blocks/inbox.css
@@ -0,0 +1,11 @@
+.inbox {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-bottom: 30px;
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34);
+}
diff --git a/blocks/inbox__close-story-button.css b/blocks/inbox__close-story-button.css
@@ -0,0 +1,12 @@
+.inbox__close-story-button {
+  margin-right: 10px;
+
+  border: none;
+  background: white;
+  float: right;
+  font-size: 28px;
+}
+
+.inbox__close-story-button:hover {
+  cursor: pointer;
+}
diff --git a/blocks/inbox__footer-link.css b/blocks/inbox__footer-link.css
@@ -0,0 +1,17 @@
+.inbox__footer-link {
+  display: block;
+  margin-top: 9px;
+  margin-right: 20px;
+
+  border: none;
+  background: unset;
+  color: #ccc;
+  float: right;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.inbox__footer-link:hover {
+  color: #000;
+  cursor: pointer;
+}
diff --git a/blocks/inbox__footer.css b/blocks/inbox__footer.css
@@ -0,0 +1,12 @@
+.inbox__footer {
+  position: absolute;
+  bottom: 0;
+
+  overflow: hidden;
+  width: 100%;
+  height: 30px;
+  margin-top: 2px;
+
+  border-top: solid 1px #e2e2e2;
+  font-size: 12px;
+}
diff --git a/blocks/inbox__header-button.css b/blocks/inbox__header-button.css
@@ -0,0 +1,16 @@
+.inbox__header-button {
+  margin-top: 7px;
+  margin-left: 20px;
+
+  border: none;
+  background: unset;
+  color: #ccc;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.inbox__header-button:hover {
+  color: #000;
+  cursor: pointer;
+}
diff --git a/blocks/inbox__header-checkbox.css b/blocks/inbox__header-checkbox.css
@@ -0,0 +1,11 @@
+.inbox__header-checkbox {
+  width: 16px;
+  height: 16px;
+  margin-top: 7px;
+  margin-left: 10px;
+
+  border: solid 1px rgba(0, 0, 0, 0.15);
+  background-color: #fff;
+  border-radius: 3px;
+  float: left;
+}
diff --git a/blocks/inbox__header.css b/blocks/inbox__header.css
@@ -0,0 +1,8 @@
+.inbox__header {
+  display: block;
+  height: 40px;
+  box-sizing: border-box;
+  padding: 5px 0;
+
+  border-bottom: solid 1px #e2e2e2;
+}
diff --git a/blocks/inbox__story-circle-picture.css b/blocks/inbox__story-circle-picture.css
@@ -0,0 +1,6 @@
+.inbox__story-circle-picture {
+  width: 150px;
+  clip-path: circle(40%);
+  float: right;
+  shape-outside: circle(40%);
+}
diff --git a/blocks/inbox__wrapper.css b/blocks/inbox__wrapper.css
@@ -0,0 +1,5 @@
+.inbox__wrapper {
+  height: calc(100% - 40px);
+  overflow-x: hidden;
+  overflow-y: overlay;
+}
diff --git a/blocks/letter.css b/blocks/letter.css
@@ -0,0 +1,57 @@
+.letter {
+  position: relative;
+
+  display: block;
+  height: 40px;
+  box-sizing: border-box;
+
+  border-bottom: solid 1px #e2e2e2;
+  font-size: 13px;
+}
+
+.letter:hover {
+  cursor: pointer;
+}
+
+.letter__new {
+  background-color: #61a2e7;
+}
+
+.letter_unread {
+  font-weight: bold;
+}
+
+.letter-enter {
+  height: 40px;
+  background-color: #61a2e7;
+}
+
+.letter-enter-done {
+  height: 40px;
+  background-color: #fff !important;
+}
+
+.letter-enter.letter-enter-active {
+  background-color: #fff;
+  transition: background-color 2s ease-in;
+}
+
+.letter-exit {
+  height: 40px;
+  background-color: #fff;
+}
+
+.letter-exit.letter-exit-active {
+  overflow: hidden;
+  height: 0;
+
+  border: unset;
+  transition: height 0.5s ease-in;
+}
+
+.letter-exit-done {
+  overflow: hidden;
+  height: 0;
+
+  border: unset;
+}
diff --git a/blocks/letter__author.css b/blocks/letter__author.css
@@ -0,0 +1,7 @@
+.letter__author {
+  position: absolute;
+
+  height: 16px;
+  padding-top: 12px;
+  margin-left: 80px;
+}
diff --git a/blocks/letter__avatar.css b/blocks/letter__avatar.css
@@ -0,0 +1,5 @@
+.letter__avatar {
+  width: 100%;
+  height: 100%;
+  clip-path: circle();
+}
diff --git a/blocks/letter__checkbox.css b/blocks/letter__checkbox.css
@@ -0,0 +1,11 @@
+.letter__checkbox {
+  width: 16px;
+  height: 16px;
+  margin-top: 12px;
+  margin-left: 10px;
+
+  border: solid 1px rgba(0, 0, 0, 0.15);
+  background-color: #fff;
+  border-radius: 3px;
+  float: left;
+}
diff --git a/blocks/letter__date.css b/blocks/letter__date.css
@@ -0,0 +1,11 @@
+.letter__date {
+  position: relative;
+
+  width: 50px;
+  padding-top: 12px;
+  padding-left: 5px;
+  margin-right: 20px;
+  margin-left: auto;
+  color: #9b9b9b;
+  font-weight: normal;
+}
diff --git a/blocks/letter__icon.css b/blocks/letter__icon.css
@@ -0,0 +1,14 @@
+.letter__icon {
+  width: 30px;
+  height: 30px;
+  margin-top: 5px;
+  margin-left: 10px;
+  background-color: #ff3333;
+  border-radius: 50%;
+  color: white;
+  float: left;
+  font-size: 22px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+}
diff --git a/blocks/letter__special-letter.css b/blocks/letter__special-letter.css
@@ -0,0 +1,7 @@
+.letter__special-letter {
+  font-weight: bold;
+}
+
+.letter__special-letter:hover {
+  cursor: pointer;
+}
diff --git a/blocks/letter__title.css b/blocks/letter__title.css
@@ -0,0 +1,10 @@
+.letter__title {
+  position: absolute;
+
+  overflow: hidden;
+  max-width: calc(100% - 370px);
+  padding-top: 12px;
+  margin-left: 280px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/blocks/letter__unread-indicator.css b/blocks/letter__unread-indicator.css
@@ -0,0 +1,13 @@
+.letter__unread-indicator {
+  position: absolute;
+  top: calc(50% - 5px);
+
+  width: 10px;
+  height: 10px;
+  margin-left: 260px;
+  border-radius: 50%;
+}
+
+.letter__unread-indicator_active {
+  background-color: #6287bd;
+}
diff --git a/blocks/logo.css b/blocks/logo.css
@@ -0,0 +1,3 @@
+.logo {
+  margin-left: 30px;
+}
diff --git a/blocks/logo__picture.css b/blocks/logo__picture.css
@@ -0,0 +1,4 @@
+.logo__picture {
+  width: 152px;
+  height: 30px;
+}
diff --git a/blocks/mail-list.css b/blocks/mail-list.css
@@ -0,0 +1,8 @@
+.mail-list {
+  overflow: hidden;
+  min-height: calc(100% - 40px);
+  max-height: calc(40px * 30);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
diff --git a/blocks/main.css b/blocks/main.css
@@ -0,0 +1,4 @@
+.main {
+  height: 100vh;
+  margin: 0 10px 0 190px;
+}
diff --git a/blocks/main__inbox-container.css b/blocks/main__inbox-container.css
@@ -0,0 +1,5 @@
+.main__inbox-container {
+  height: calc(100% - 90px);
+  min-height: calc(100% - 90px);
+  padding-bottom: 20px;
+}
diff --git a/blocks/menu.css b/blocks/menu.css
@@ -0,0 +1,7 @@
+.menu {
+  position: absolute;
+
+  width: 150px;
+  height: 100%;
+  margin: 0 10px 0 20px;
+}
diff --git a/blocks/menu__button-current.css b/blocks/menu__button-current.css
@@ -0,0 +1,17 @@
+.menu__button-current {
+  width: 100%;
+  height: 22px;
+  margin-bottom: 3px;
+
+  border: none;
+  background-color: #cdd6e4;
+  border-radius: 3px;
+  color: #555555;
+  font-family: HelveticaNeue-Bold, sans-serif;
+  font-size: 11px;
+  text-align: start;
+}
+
+.menu__button-current:hover {
+  cursor: pointer;
+}
diff --git a/blocks/menu__button-special.css b/blocks/menu__button-special.css
@@ -0,0 +1,23 @@
+.menu__button-special {
+  width: 100%;
+  height: 32px;
+  margin-bottom: 8px;
+
+  border: none;
+  background-color: #6287bd;
+  border-radius: 3px;
+  color: #ffffff;
+  font-family: HelveticaNeue-Medium, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.menu__button-special:hover {
+  cursor: pointer;
+}
+
+.menu__button-special:active {
+  border-top: solid 2px #50709d;
+  border-left: solid 2px #50709d;
+  cursor: pointer;
+}