Merge pull request #43 from csalmeida/inbox-theme

Inbox theme

5 files changed, 393 insertions, 0 deletions

diff --git a/README.md b/README.md
index 3343ac3..52417cd 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,9 @@ Check out some of the available themes you can choose from.
 ![Screenshot of Gruvbox theme.](screenshots/gruvbox.png)
 
 ![Screenshot of Gruvbox theme.](screenshots/gruvbox_full.png)
+
+#### [Inbox](themes/inbox)
+![Screenshot of Inbox theme.](screenshots/inbox.png)
 </details>
 
 ### Do these themes compromise security?
diff --git a/screenshots/inbox.png b/screenshots/inbox.png
new file mode 100644
index 0000000..1b66b05
--- /dev/null
+++ b/screenshots/inbox.png
diff --git a/templates/inbox/_override.scss b/templates/inbox/_override.scss
new file mode 100644
index 0000000..08967b9
--- /dev/null
+++ b/templates/inbox/_override.scss
@@ -0,0 +1,114 @@
+// Compose button
+.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
+  color: $compose_text;
+  background-color: $compose;
+  border: 1px solid $compose;
+}
+
+.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
+  color: $compose_text;
+  box-shadow: 0 0 .35714em 0 rgba(0,0,0,.2);
+  background: darken($compose, 10%);
+  border: 1px solid darken($compose, 10%);
+}
+
+.header, .logo-container {
+  background-color: $highlight;
+}
+
+.toolbar {
+  background-color: darken($highlight, 10%);
+}
+
+.aside {
+  background-color: darken($text_color, 5%);
+  box-shadow: 1px 0px 3px rgba(0,0,0,.3);
+
+  .navigation__icon, .navigation__link:focus .navigation__icon, .navigation__link:hover .navigation__icon, .fill-global-light {
+    fill: $text_color;
+  }
+}
+
+.aside-link, .aside-link:active, .aside-link:focus, .aside-link[aria-current="true"] {
+  background: darken($highlight, 25%);
+}
+
+.aside-link:hover {
+  background: $compose;
+}
+
+
+.sidebarApp-item {
+  [aria-current="page"].navigation__link {
+    background: lighten($navigation, 60%);
+  }
+}
+
+.content-wrapper {
+  height: calc(100vh - 9.5rem);
+  max-height: calc(100vh - 9.5rem);
+  margin-top: 1.5rem;
+}
+
+.navigation__icon,
+.navigation__link:focus .navigation__icon, .navigation__link:hover .navigation__icon,
+.fill-global-light {
+  fill: $highlight;
+}
+
+.navigationUser-button,
+.topnav-list,
+.topnav-link,
+.topnav-link:active, .topnav-link:focus,
+.topnav-link:hover,
+.topnav-link[aria-current="true"] {
+  color: $text_color;
+}
+
+.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, .topnav-link:hover > .topnav-icon, .topnav-link[aria-current="true"] > .topnav-icon {
+  fill: $text_color;
+}
+
+.dropDown-logout-button {
+  color: $text_color; 
+}
+
+.dropDown-logout-initials {
+  border-color: darken($highlight, 10%);
+}
+
+.conversation.marked::before {
+  background: $compose;
+}
+
+.conversation.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
+  background: $base;
+  border-left: 1px solid $navigation;
+}
+
+.item-container, .item-container-row {
+  background: $text_color;
+}
+
+.link, a, .pm-button--link {
+  color: $highlight;
+}
+
+.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover, .pm-button--link:hover {
+  color: $compose;
+}
+
+#pm_composer .composer .composerHeader-container {
+  background-color: $highlight;
+}
+
+.storageProgress-dropdown {
+  .circle-chart__info .circle-chart__percent {
+    fill: $highlight;
+  }
+
+  span {
+    color: $highlight;
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/templates/inbox/inbox.scss b/templates/inbox/inbox.scss
new file mode 100644
index 0000000..795b1c0
--- /dev/null
+++ b/templates/inbox/inbox.scss
@@ -0,0 +1,24 @@
+/*! =========================================== *
+ * INBOX
+ * Version: 4.0.0
+ * Author: Cristiano Almeida
+ * Website: https://www.csalmeida.com
+ * Twitter: @_csalmeida
+ * =========================================== */
+
+ $base: #F2F2F2;
+ $search: #7297C4;
+ $highlight: #4285F4;
+ $navigation: #616161;
+ $compose: #D23F31;
+ $compose_text: #FFF;
+ 
+ $text_color: #fff;
+ $extra_color: #0d0d0d;
+ $danger_color: #d62646;
+ $warning_color: #ffaa00;
+ $info_color: #1b68c6;
+ 
+ @import "../@theme-base/styles";
+ @import 'override';
+ 
\ No newline at end of file
diff --git a/themes/inbox/inbox.css b/themes/inbox/inbox.css
new file mode 100644
index 0000000..9276ff5
--- /dev/null
+++ b/themes/inbox/inbox.css
@@ -0,0 +1,252 @@
+/*! =========================================== *
+ * INBOX
+ * Version: 4.0.0
+ * Author: Cristiano Almeida
+ * Website: https://www.csalmeida.com
+ * Twitter: @_csalmeida
+ * =========================================== */
+:root {
+  --main-bg-color: #F2F2F2;
+  --secondary-bg-color: #e5e5e5;
+  --bgcolor-searchbox-field: #7297C4;
+  --bgcolor-spacebar: rgba(255, 255, 255, 0.1);
+  --bgcolor-aside-link: rgba(0, 0, 0, 0.3);
+  --bgcolor-toolbar: white;
+  --fillcolor-logo: #f6f7fa;
+  --fillcolor-icons: #fff;
+  --color-nav-link: #616161;
+  --color-nav-active: #4285F4;
+  --color-standard-text: #fff;
+  --boxshadow-main: none; }
+
+.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
+  color: #fff;
+  background-color: #4285F4;
+  border: 1px solid #4285F4;
+  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; }
+
+.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
+  color: #616161;
+  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
+  background: #2a75f3;
+  border: 1px solid #2a75f3; }
+
+.aside-link {
+  background: #e5e5e5; }
+
+.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon {
+  fill: #e5e5e5;
+  background: none; }
+
+.circle-chart__circle {
+  stroke: #4285F4; }
+
+#global_search.searchbox-field[type="search"] {
+  background-color: #7297C4;
+  color: #fff; }
+
+.topnav-link, .topnav-link > .topnav-icon {
+  color: #616161;
+  transition: color .2s ease-in-out; }
+
+.topnav-link:active, .topnav-link:focus,
+.topnav-link:hover, .topnav-link[aria-current="true"] {
+  color: #4285F4; }
+
+.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon,
+.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon {
+  color: #4285F4; }
+
+.conversation.marked::before {
+  background: #4285F4; }
+
+.conversation.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
+  background: #fff; }
+
+.conversation.item-container.active, .conversation.item-is-selected {
+  background: rgba(66, 133, 244, 0.1); }
+
+.conversation .item-checkbox:checked + .item-icon {
+  background-color: #4285F4;
+  border-color: #4285F4; }
+
+.conversation .item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
+  fill: #4285F4; }
+
+.conversation .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {
+  fill: #616161; }
+
+.conversation .selectBoxElement-container:hover .item-icon {
+  background-color: transparent;
+  border: 1px solid #2a75f3; }
+  .conversation .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon {
+    fill: #2a75f3; }
+
+.conversation .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
+  background-color: #2a75f3;
+  border-color: #2a75f3; }
+
+.starbutton {
+  fill: #4285F4 !important;
+  opacity: 0.7; }
+
+.starbutton:focus, .starbutton:hover {
+  fill: #4285F4; }
+
+.color-pm-blue {
+  color: #4285F4; }
+
+.pm-radio:checked + .pm-radio-fakeradio::before {
+  background: #4285F4; }
+
+.block-info-standard {
+  border-color: #1b68c6; }
+
+.block-info-standard-warning {
+  border-color: #ffaa00; }
+
+.block-info-standard-error {
+  border-color: #d62646; }
+
+.link, a, .pm-button--link {
+  color: #F2F2F2;
+  transition: color .2s ease-in-out; }
+
+.link:active, .link:focus, .link:hover,
+a:active, a:focus, a:hover,
+.pm-button--link:hover {
+  color: #1266f1; }
+
+.pm-button--primary {
+  background-color: #4285F4;
+  border-color: #4285F4; }
+
+.pm-button--link, .pm-button.pm-button--link {
+  color: #4285F4; }
+
+.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue {
+  background-color: #4285F4;
+  border-color: #4285F4; }
+
+.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover {
+  background: #2a75f3;
+  border: 1px solid #2a75f3; }
+
+.pm-toggle-checkbox:checked + .pm-toggle-label:before {
+  background: #4285F4;
+  border-color: #4285F4; }
+
+.fill-pm-blue,
+.message-attachmentIcon .file-outer-icon.is-embedded {
+  fill: #4285F4; }
+
+.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) {
+  border-color: #4285F4;
+  color: #4285F4; }
+  .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before {
+    background-color: #4285F4; }
+
+.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2),
+.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2),
+.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) {
+  border-color: #4285F4; }
+
+.pm-simple-table-row-th .fill-primary {
+  fill: #4285F4; }
+
+.progress-contact {
+  color: #4285F4; }
+  .progress-contact::-moz-progress-bar {
+    background: #4285F4; }
+
+.calendar-grid-heading[aria-pressed="true"]
+.calendar-grid-heading-number,
+.minicalendar-day[aria-pressed="true"],
+.minicalendar-day[aria-current="date"]::before,
+.calendar-monthgrid-day[aria-pressed="true"] .calendar-monthgrid-day-number {
+  background: #0a47ac; }
+
+.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue {
+  color: #FFF;
+  background-color: #D23F31;
+  border: 1px solid #D23F31; }
+
+.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover {
+  color: #FFF;
+  box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2);
+  background: #ab3125;
+  border: 1px solid #ab3125; }
+
+.header, .logo-container {
+  background-color: #4285F4; }
+
+.toolbar {
+  background-color: #1266f1; }
+
+.aside {
+  background-color: #f2f2f2;
+  box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.3); }
+  .aside .navigation__icon, .aside .navigation__link:focus .navigation__icon, .aside .navigation__link:hover .navigation__icon, .aside .fill-global-light {
+    fill: #fff; }
+
+.aside-link, .aside-link:active, .aside-link:focus, .aside-link[aria-current="true"] {
+  background: #0a47ac; }
+
+.aside-link:hover {
+  background: #D23F31; }
+
+.sidebarApp-item [aria-current="page"].navigation__link {
+  background: #fafafa; }
+
+.content-wrapper {
+  height: calc(100vh - 9.5rem);
+  max-height: calc(100vh - 9.5rem);
+  margin-top: 1.5rem; }
+
+.navigation__icon,
+.navigation__link:focus .navigation__icon, .navigation__link:hover .navigation__icon,
+.fill-global-light {
+  fill: #4285F4; }
+
+.navigationUser-button,
+.topnav-list,
+.topnav-link,
+.topnav-link:active, .topnav-link:focus,
+.topnav-link:hover,
+.topnav-link[aria-current="true"] {
+  color: #fff; }
+
+.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, .topnav-link:hover > .topnav-icon, .topnav-link[aria-current="true"] > .topnav-icon {
+  fill: #fff; }
+
+.dropDown-logout-button {
+  color: #fff; }
+
+.dropDown-logout-initials {
+  border-color: #1266f1; }
+
+.conversation.marked::before {
+  background: #D23F31; }
+
+.conversation.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
+  background: #F2F2F2;
+  border-left: 1px solid #616161; }
+
+.item-container, .item-container-row {
+  background: #fff; }
+
+.link, a, .pm-button--link {
+  color: #4285F4; }
+
+.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover, .pm-button--link:hover {
+  color: #D23F31; }
+
+#pm_composer .composer .composerHeader-container {
+  background-color: #4285F4; }
+
+.storageProgress-dropdown .circle-chart__info .circle-chart__percent {
+  fill: #4285F4; }
+
+.storageProgress-dropdown span {
+  color: #4285F4;
+  opacity: 1; }