cortex 0.1.1

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

@@ -0,0 +1,7 @@
+.mdl-data-table {
+  white-space: normal;
+}
+
+.mdl-data-table th {
+  @extend .text-style-4;
+}

data/app/assets/stylesheets/cortex/components/tenant-switcher.scss

@@ -0,0 +1,209 @@
+.sub-tenant--toggle {
+  font-size: 30px;
+  transition: $sidebar-toggle-button-transition;
+  padding: 6px;
+}
+
+.tenant-active-icon {
+  color: $color-orange;
+}
+
+.tenant-item--wrap {
+  display: flex;
+  align-self: flex-start;
+}
+
+.tenant-parent-header {
+  text-transform: uppercase;
+  font-weight: 700;
+  display: flex;
+  padding: 0;
+  background-color: $color-orange;
+}
+
+.page-back-button {
+  height: auto;
+  margin: -6px;
+  margin-right: 0px;
+}
+
+.tenant-list-item {
+  display: flex;
+
+  button {
+    height: auto;
+    width: auto;
+    align-self: stretch;
+    border-radius: 0;
+    border-left: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+
+    i {
+      font-size: 30px;
+    }
+
+    &:hover {
+      background-color: #02a8f3;
+      color: #fbfbfb;
+    }
+  }
+
+  li {
+     flex-grow: 1;
+  }
+
+  &.active {
+    li {
+      background: #02a8f3;
+      color: white;
+    }
+  }
+}
+
+.sidebar-tenant-icon {
+  display: inline-block;
+  width: 45px;
+  position: absolute;
+  margin: -6px;
+
+  img {
+    height: 40px;
+  }
+}
+
+.tenant__list-nav-header {
+  background-color: $color-teal-dark;
+  color: white;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 11px;
+    text-transform: capitalize;
+  }
+
+  i {
+    font-size: 38px;
+  }
+
+  button {
+    margin: 0;
+    height: 40px;
+    width: 35px;
+    margin-right: 10px;
+    border-radius: 0;
+    color: white;
+
+    &:hover {
+      color: $color-teal-dark;
+      background: white;
+    }
+  }
+}
+
+.nav__item-name--footer {
+  margin-left: 40px;
+}
+
+.tenant__list_wrapper {
+  position: fixed;
+  bottom: 0;
+  width: $sidebar-width-tenant-display;
+  border-right: 1px solid $color-grey-dark;
+  box-sizing: border-box;
+  left: 0;
+  bottom: 80px;
+  background: #fff;
+  z-index: 9000;
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    border-bottom: 1px solid #eee;
+    color: #212121;
+    padding: 6px 20px 6px 6px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #02a8f3;
+      color: #fbfbfb;
+      border-bottom: 1px solid #02a8f3;
+    }
+  }
+
+  li.organization--label {
+    padding: 0;
+  }
+}
+
+// Collapsing
+
+@media only screen and (min-width: 1024px) {
+  .sidebar--tenant-display {
+    .layout__wrapper {
+      left: $sidebar-width-tenant-display;
+    }
+
+    .layout__sidebar {
+      width: $sidebar-width-tenant-display;
+      transition: $sidebar-collapse-transition;
+    }
+  }
+  .sidebar--collapsed {
+    .environment__full {
+      display: none;
+    }
+    .layout__wrapper {
+      left: $sidebar-width-collapsed;
+    }
+
+    .environment__abbreviated {
+      display: block;
+    }
+
+    .nav__item-name,
+    .tenant-toggle,
+    .sidebar__brand-name {
+      display: none;
+    }
+
+    .sidebar-tenant-icon {
+      position: relative;
+      display: block;
+    }
+
+    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
+      padding-left: 30px;
+    }
+
+    .nav__item .material-icons {
+      position: static;
+    }
+
+    .sidebar__toggle-button:after {
+      transform: rotate(-540deg);
+      transition: $sidebar-toggle-button-transition;
+    }
+
+    .layout__sidebar {
+      width: $sidebar-width-collapsed;
+      transition: $sidebar-collapse-transition;
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .layout__sidebar,
+  .sidebar__toggle-button {
+    display: none;
+  }
+
+  .layout__sidebar.is-visible {
+    display: flex;
+    min-width: $sidebar-width-expanded;
+  }
+}

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

@@ -0,0 +1,119 @@
+
+.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after, // Active tab
+.mdl-switch.is-checked .mdl-switch__thumb, // Toggle slider
+.mdl-textfield__label:after, // Active textfield
+.mdl-switch__ripple-container .mdl-ripple, // Button ripple effect
+.mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple, // Tab ripple effect
+.mdl-checkbox__ripple-container .mdl-ripple, // Checkbox ripple effect
+.mdl-checkbox.is-checked .mdl-checkbox__tick-outline { // Ticked checkbox
+  background-color: $employer-color;
+}
+
+.mdl-switch.is-checked .mdl-switch__track { // Toggle slider background
+  background-color: rgba($employer-color, 0.5);
+}
+
+.mdl-checkbox {
+  height: auto;
+}
+
+.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+  border-color: $employer-color-dark;
+}
+
+// Buttons
+
+.mdl-button,
+.mdl-button--cb {
+  @extend .text-style-4;
+  color: $employer-color-dark;
+  background-color: transparent;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $color-grey-lightest;
+  }
+}
+.mdl-button:disabled,
+.mdl-button--cb:disabled,
+.mdl-button[disabled][disabled],
+.mdl-button.mdl-button--disabled.mdl-button--disabled {
+  color: $color-anchor-blue-light;
+  background-color: transparent;
+}
+
+.mdl-button--success,
+.mdl-button--raised.mdl-button--colored {
+  color: $color-white;
+  background-color: $employer-color-dark;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $employer-color;
+  }
+}
+
+.mdl-button--success:disabled,
+.mdl-button--raised.mdl-button--colored:disabled,
+.mdl-button--raised[disabled][disabled],
+.mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
+  color: $color-anchor-blue-light;
+  background-color: $color-grey-lightest;
+}
+
+.mdl-button--fab.mdl-button--colored {
+  background-color: $color-orange;
+  border: solid 1px $color-orange-dark;
+
+  &:hover {
+    background-color: $color-orange;
+  }
+}
+
+// Date Time Picker
+
+.ui-datepicker {
+  background-color: $color-white;
+  border-radius: 3px;
+  padding: 5px;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+}
+
+.ui-datepicker td span,
+.ui-datepicker td a,
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+  color: $color-teal;
+}
+
+.ui-datepicker td span,
+.ui-datepicker td a {
+  text-align: center;
+}
+
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+  top: 7px;
+  width: auto;
+  height: auto;
+}
+
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+  position: static;
+  margin: 0;
+}
+
+.ui-datepicker .ui-icon {
+  text-indent: 0;
+}
+
+.ui-datepicker td[data-handler='selectDay']:hover {
+  background-color: $color-teal-dark;
+
+  a {
+    color: $color-white;
+  }
+}

data/app/assets/stylesheets/cortex/demo.scss

@@ -0,0 +1,140 @@
+//colors
+$black_54: rgba(0, 0, 0, 0.54);
+$white_56: rgba(255, 255, 255, 0.56);
+$color_robins_egg_blue_approx: #00bcd4;
+$color_limed_spruce_approx: #37474f;
+$color_inch_worm_approx: #acec00;
+$color_fuchsia_pink_approx: #ba65c9;
+$color_violet_red_approx: #ef3c79;
+$color_cerulean_approx: #00b9d8;
+$color_razzmatazz_approx: #d9006e;
+$white: white;
+$white_89: rgba(255, 255, 255, 0.89);
+
+.demo-avatar-dropdown {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.demo-navigation {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.demo-content {
+  max-width: 1080px;
+}
+
+.demo-charts {
+  align-items: center;
+}
+
+.demo-chart {
+  &:nth-child(1) {
+    color: $color_inch_worm_approx;
+  }
+  &:nth-child(2) {
+    color: $color_robins_egg_blue_approx;
+  }
+  &:nth-child(3) {
+    color: $color_fuchsia_pink_approx;
+  }
+  &:nth-child(4) {
+    color: $color_violet_red_approx;
+  }
+}
+
+.demo-graphs {
+  padding: 16px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:root {
+  .demo-graphs {
+    min-height: 664px;
+  }
+  .demo-graph {
+    max-height: 300px;
+  }
+}
+
+.demo-graph {
+  &:nth-child(1) {
+    color: $color_cerulean_approx;
+  }
+  &:nth-child(2) {
+    color: $color_razzmatazz_approx;
+  }
+}
+
+.demo-cards {
+  align-items: flex-start;
+  align-content: flex-start;
+  .demo-separator {
+    height: 32px;
+  }
+  ul {
+    padding: 0;
+  }
+  h3 {
+    font-size: 1em;
+  }
+  .mdl-card__title.mdl-card__title {
+    color: $white;
+    font-size: 24px;
+    font-weight: 400;
+  }
+  .mdl-card__actions a {
+    color: $color_robins_egg_blue_approx;
+    text-decoration: none;
+  }
+}
+
+.demo-options {
+  h3 {
+    margin: 0;
+  }
+  .mdl-checkbox__box-outline {
+    border-color: $white_89;
+  }
+  ul {
+    margin: 0;
+    list-style-type: none;
+  }
+  li {
+    margin: 4px 0;
+  }
+  .material-icons {
+    color: $white_89;
+  }
+  .mdl-card__actions {
+    height: 64px;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+  }
+}
+
+#view-source {
+  position: fixed;
+  display: block;
+  right: 0;
+  bottom: 0;
+  margin-right: 40px;
+  margin-bottom: 40px;
+  z-index: 900;
+}
+
+.mdl-layout__drawer .avatar {
+  margin-bottom: 16px;
+}
+
+_:-ms-input-placeholder {
+  min-height: 664px;
+  max-height: 300px;
+}