cortex 0.1.1

data/app/assets/stylesheets/cortex/components/flash.scss

@@ -0,0 +1,60 @@
+.flash--invert {
+  .mdl-snackbar {
+    background-color: $color-white;
+    border: 1px solid $color-grey-dark;
+    border-bottom: none;
+  }
+
+  .mdl-snackbar__text {
+    color: $color-grey-dark;
+  }
+}
+
+.flash--warning {
+  background-color: $flash-error-background;
+}
+
+.flash--success {
+  background-color: $flash-success-background;
+
+  img {
+    display: inline;
+    vertical-align: top;
+  }
+}
+
+.mdl-snackbar__text {
+  display: none;
+  font-size: 0.9285rem;
+}
+
+.flash--header__text {
+  font-size: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+.mdl-snackbar__close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  color: $color-white;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-grey;
+  }
+}
+
+.mdl-snackbar--active {
+  font-family: $cortex-font-stack;
+
+  .mdl-snackbar__text {
+    display: block;
+  }
+
+  i.material-icons {
+    vertical-align: bottom;
+    font-size: 	1.25rem;
+  }
+}

data/app/assets/stylesheets/cortex/components/form.scss

@@ -0,0 +1,45 @@
+footer .mdl-button {
+  margin: 0 3px;
+}
+
+// Overrides
+
+.mdl-textfield {
+  width: auto;
+  display: block;
+
+  .tooltip-icon {
+    position: absolute;
+    right: 0;
+    top: 8%;
+  }
+}
+
+.mdl-textfield__label {
+  font-size: $base-font-size !important;
+}
+
+.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
+.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
+  color: $color-black !important;
+}
+
+form {
+  .mdl-button {
+    float: right;
+  }
+}
+
+.mdl-textfield__input {
+  @extend .text-style-6;
+
+  &:placeholder {
+    @extend .text-style-5;
+  }
+}
+
+// Extras
+.tooltip-icon {
+  color: $color-grey;
+  font-size: $base-font-size * 1.25;
+}

data/app/assets/stylesheets/cortex/components/header.scss

@@ -0,0 +1,53 @@
+.mdl-layout__header {
+  box-shadow: none;
+  background-color: $color-white;
+  color: $color-grey-dark;
+}
+
+.mdl-layout__header-row {
+  @media only screen and (min-width: 1024px) {
+    padding: 0 40px 0 48px;
+  }
+}
+
+.user-block {
+  display: flex;
+  justify-content: space-between;
+}
+
+.user-block__text {
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.user-block__greeting {
+  font-size: 85%;
+}
+
+.user-block__logout {
+  font-size: 75%;
+
+  a {
+    color: $color-orange;
+  }
+}
+
+.user-block__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-left: 20px;
+}
+
+// Overrides
+
+.mdl-textfield--expandable .mdl-button--icon {
+  top: initial;
+}
+
+.mdl-layout-title,
+.mdl-layout-title a {
+  @extend .text-style-1;
+}

data/app/assets/stylesheets/cortex/components/index.scss

@@ -0,0 +1,28 @@
+.index {
+  width: 100%;
+}
+
+.content_item-link {
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    display: inline-table;
+    height: 100%;
+    width: 100%;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    span.circular {
+      line-height: 50px;
+      vertical-align: middle;
+    }
+  }
+}
+

data/app/assets/stylesheets/cortex/components/jumbo-button.scss

@@ -0,0 +1,41 @@
+.jumbo-button {
+  @include aspect-ratio(16, 9);
+
+  border: $data-table-dividers;
+  border-bottom: 4px solid $color-teal;
+
+  &:hover {
+    background-color: $jumbo-button-hover-background;
+  }
+
+  &:active {
+    background-color: $jumbo-button-active-background;
+  }
+}
+
+.jumbo-button__content {
+  @include transform(translate(-50%, -50%));
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.jumbo-button__content__icon {
+  margin-bottom: 32px;
+
+  img {
+    height: 128px;
+  }
+}
+
+.jumbo-button__content__add {
+  margin-bottom: 32px;
+  display: none;
+
+  img {
+    height: 128px;
+  }
+}

data/app/assets/stylesheets/cortex/components/loaders.scss

@@ -0,0 +1,76 @@
+.loader-spinner-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background: white;
+  padding: 10% 0;
+}
+
+.loader-spinner {
+  font-size: 10px;
+  margin: 50px auto;
+  text-indent: -9999em;
+  width: 11em;
+  height: 11em;
+  border-radius: 50%;
+  background: $color-teal;
+  background: -moz-linear-gradient(left, $color-teal 10%, rgba(0,255,255, 0) 42%);
+  background: -webkit-linear-gradient(left, $color-teal 10%, rgba(0,255,255, 0) 42%);
+  background: -o-linear-gradient(left, $color-teal 10%, rgba(0,255,255, 0) 42%);
+  background: -ms-linear-gradient(left, $color-teal 10%, rgba(0,255,255, 0) 42%);
+  background: linear-gradient(to right, $color-teal 10%, rgba(0,255,255, 0) 42%);
+  position: relative;
+  -webkit-animation: load3 1.4s infinite linear;
+  animation: load3 1.4s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.loader-spinner:before {
+  width: 50%;
+  height: 50%;
+  background: $color-teal;
+  border-radius: 100% 0 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+}
+
+.loader-spinner:after {
+  background: white;
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  content: '';
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+@-webkit-keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

data/app/assets/stylesheets/cortex/components/notes.scss

@@ -0,0 +1,26 @@
+.notes {
+  width: 100%;
+
+  th {
+    font-size: 13px;
+    color: $color-slate-grey;
+  }
+
+  td {
+    p {
+      margin-bottom: 0;
+      font-weight: lighter;
+      font-size: 13px;
+    }
+  }
+
+  .mdl-chip__text {
+    text-transform: uppercase;
+    font-size: 11px;
+    font-family: $cortex-font-stack;
+  }
+}
+
+.notes__header {
+  text-transform: uppercase;
+}

data/app/assets/stylesheets/cortex/components/sidebar.scss

@@ -0,0 +1,120 @@
+$sidebar-width-expanded: 230px;
+$sidebar-width-collapsed: 85px;
+$sidebar-width-tenant-display: 350px;
+$sidebar-link-width: $sidebar-width-expanded - 60px; // link padding = 60px
+$sidebar-collapse-transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+$sidebar-toggle-button-transition: transform 500ms linear;
+
+.nav__item {
+  position: relative;
+}
+
+.nav__item .material-icons {
+  position: absolute;
+  right: 10px;
+}
+
+.layout__sidebar { // Styles copied from .mdl-layout__drawer with some clean up
+  width: $sidebar-width-expanded;
+  transition: $sidebar-collapse-transition;
+  position: relative;
+  overflow-x: hidden;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  box-shadow: 1px 0px 5px 1px rgba(0, 0, 0, .5);
+  overflow-y: hidden;
+}
+
+.sidebar__header {
+  padding: 24px 10px;
+  min-width: $sidebar-width-expanded;
+}
+
+.sidebar__root-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.sidebar__brand-logo {
+  max-height: 60px;
+  max-width: 60px;
+}
+
+.sidebar__brand-name {
+  @include display-text;
+  color: $color-white;
+  margin: 0 15px;
+  text-decoration: none;
+}
+
+// Overrides
+
+.mdl-layout__drawer {
+  background-color: $color-grey-dark;
+  border-right: none;
+  box-shadow: none;
+}
+
+.mdl-layout__drawer .mdl-navigation {
+  padding-top: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+  @extend %sidebar-nav;
+  min-width: $sidebar-link-width;
+  padding-left: 20px;
+  transition: padding-left 0.25s ease;
+
+  .material-icons {
+    margin-right: 10px;
+    font-size: 24px;
+    color: inherit;
+  }
+
+  .tenant-toggle {
+    font-size: 40px;
+    margin-right: 0;
+    top: 4px;
+    line-height: 50px;
+  }
+}
+
+.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
+  background-color: $employer-color;
+  color: $color-grey-dark;
+}
+
+.mdl-layout__drawer .mdl-navigation .mdl-navigation__link.nav__item {
+  background-color: $employer-color;
+  color: $color-white;
+}
+
+.sidebar__toggle-button {
+  height: 1em;
+  color: $color-teal-light;
+  background-color: $color-teal-dark;
+  padding: 0.25em 0.5em;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
+
+  &:after {
+    content: '\e5cb';
+    font-family: 'Material Icons';
+    transform: rotate(0deg);
+    transition: $sidebar-toggle-button-transition;
+  }
+}
+
+.environment {
+  background-color: $flash-error-background !important;
+}
+
+.environment__abbreviated {
+  display: none;
+}