disco_app 0.8.9 → 0.9.0

data/app/assets/stylesheets/disco_app/admin/_nav.scss

@@ -0,0 +1,172 @@
+//
+// nav.scss
+// Styles for admin navigation.
+// --------------------------------------------------
+
+.next-nav {
+  z-index: 221;
+  width: 230px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+  overflow: hidden;
+}
+
+.next-nav__panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.next-nav__panel--primary {
+  z-index: 1;
+  width: 230px;
+  background-color: #31373d;
+  -webkit-transition: background-color 200ms ease;
+  transition: background-color 200ms ease;
+}
+
+.next-nav--is-expanded .next-nav__panel--primary {
+  background-color: #212529;
+}
+
+.next-nav__logo {
+  height: 56px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding-left: 20px;
+  background-color: #272c30;
+  -webkit-transition: background-color 200ms ease;
+  transition: background-color 200ms ease;
+  overflow: hidden;
+}
+
+.next-nav--is-expanded .next-nav__logo {
+  background-color: #212529;
+}
+
+.next-nav__logo--disco .next-nav__svg-logo {
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transform: translate3d(-5px, 0, 0);
+  transform: translate3d(-5px, 0, 0);
+}
+
+.next-nav__svg-logo {
+  width: 102px;
+  height: auto;
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+}
+
+.next-nav__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.next-nav__list--primary {
+  background-color: #31373d;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: absolute;
+  top: 56px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.next-nav__item {
+  display: block;
+  min-height: 40px;
+}
+
+.next-nav__link {
+  color: #c3cfd8;
+  padding: 0 10px 0 20px;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  font-size: 13px;
+  cursor: pointer;
+  line-height: normal;
+}
+
+.next-nav__link:hover, .next-nav__link:focus, .next-nav__link:active, .next-nav__link.next-nav__link--is-selected {
+  text-decoration: none;
+  color: #ffffff;
+}
+
+.next-nav__link--is-selected {
+  background-color: #454e57;
+}
+
+.next-nav__text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  color: #c3cfd8;
+  -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
+  transition: opacity 200ms ease, -webkit-transform 200ms ease;
+  transition: transform 200ms ease, opacity 200ms ease;
+  transition: transform 200ms ease, opacity 200ms ease, -webkit-transform 200ms ease;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0%;
+  -ms-flex-preferred-size: 0%;
+  flex-basis: 0%;
+  margin-left: 10px;
+}
+
+.next-nav__link:hover .next-nav__text, .next-nav__link:focus .next-nav__text, .next-nav__link:active .next-nav__text, .next-nav__link.next-nav__link--is-selected .next-nav__text {
+  color: #ffffff;
+}
+
+.next-nav__link .next-icon {
+  fill: #798c9c;
+  -webkit-transition: opacity 200ms ease;
+  transition: opacity 200ms ease;
+}
+
+.next-nav__link:hover .next-icon, .next-nav__link:focus .next-icon, .next-nav__link:active .next-icon, .next-nav__link.next-nav__link--is-selected .next-icon {
+  fill: #ffffff;
+}

data/app/assets/stylesheets/disco_app/admin.scss

@@ -0,0 +1,11 @@
+//
+// Styles for the Disco application admin.
+// --------------------------------------------------
+
+// Import the core.
+@import 'disco_app';
+
+// Admin-specific styling.
+@import 'admin/layout';
+@import 'admin/nav';
+@import 'admin/header';

data/app/assets/stylesheets/disco_app/disco_app.scss

@@ -2,15 +2,15 @@
 // Styles for Disco applications.
 // --------------------------------------------------
 
-@import 'bootstrap-sprockets';
-@import 'bootstrap/variables';
-@import 'bootstrap/custom';
-@import 'disco/mixins/flexbox';
-@import 'disco/grid';
-@import 'disco/type';
-@import 'disco/sections';
-@import 'disco/cards';
-@import 'disco/buttons';
-@import 'disco/forms';
-@import 'disco/tables';
-@import 'disco/tabs';
+// Mixins and utilities.
+@import 'mixins/flexbox';
+
+// UI Kit - Core and our addons.
+@import 'ui-kit/ui-kit';
+@import 'ui-kit/ui-type';
+@import 'ui-kit/ui-icons';
+@import 'ui-kit/ui-layout';
+@import 'ui-kit/ui-empty-state';
+@import 'ui-kit/ui-footer-help';
+@import 'ui-kit/ui-page-actions';
+@import 'ui-kit/ui-tabs';

data/app/assets/stylesheets/disco_app/{disco/mixins → mixins}/_flexbox.scss

@@ -1,3 +1,9 @@
+@charset "UTF-8";
+//
+// flexbox.scss
+// Flexbox mixins.
+// --------------------------------------------------
+
 // Flexbox Mixins
 // http://philipwalton.github.io/solved-by-flexbox/
 // https://github.com/philipwalton/solved-by-flexbox

data/app/assets/stylesheets/disco_app/ui-kit/_ui-empty-state.scss

@@ -0,0 +1,94 @@
+//
+// ui-empty-state.scss
+// Styles for empty states not provided by the
+// Channel SDK UI Kit.
+// --------------------------------------------------
+
+.ui-empty-state {
+  text-align: center;
+
+  .next-heading {
+    font-weight: 300;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.ui-empty-state__section {
+  padding: 60px 0;
+}
+
+.ui-empty-state__subsection {
+  @include flexbox();
+  @include flex-direction(column);
+  @include align-items(center);
+
+  max-width: 1000px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0 30px;
+
+  & > *+* {
+    margin-bottom: 20px;
+  }
+}
+
+.ui-empty-state__items {
+  @include flexbox();
+  @include flex-wrap(wrap);
+  @include justify-content(center);
+
+  margin-top: -30px;
+  margin-left: -30px;
+  max-width: calc(100% + 30px);
+  width: calc(100% + 30px);
+}
+
+.ui-empty-state__item {
+  @include flex(1 1 263.33333px);
+  margin-top: 30px;
+  margin-left: 30px;
+
+  &:only-of-type {
+    @include flex(0 1 454px);
+  }
+}
+
+.ui-empty-state__subitems {
+  @include flexbox();
+  @include flex-wrap(wrap);
+
+  margin-top: -20px;
+  margin-left: -20px;
+  max-width: calc(100% + 20px);
+  width: calc(100% + 20px);
+}
+
+.ui-empty-state__subitem {
+  margin-top: 20px;
+  margin-left: 20px;
+  position: relative;
+
+  &:first-child {
+    @include flex(1 1 150px);
+    height: 90px;
+    min-width: 0;
+  }
+
+  &:last-child {
+    @include flex(1 1 60%);
+  }
+
+
+  img {
+    margin: 0 auto;
+    max-height: 100%;
+    position: absolute;
+    bottom: 0;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    left: 50%;
+  }
+}

data/app/assets/stylesheets/disco_app/ui-kit/_ui-footer-help.scss

@@ -0,0 +1,25 @@
+//
+// ui-footer-help.scss
+// Styles for footer help not provided by the Channel
+// SDK UI Kit.
+// --------------------------------------------------
+
+.ui-footer-help {
+  margin: 40px 0;
+  text-align: center;
+  width: 100%;
+}
+
+.ui-footer-help__content {
+  @include inline-flex();
+  @include align-items(center);
+
+  border: 1px solid #d3dbe2;
+  border-radius: 3px;
+  color: #798c9c;
+
+  font-size: 13px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: left;
+}

data/app/assets/stylesheets/disco_app/ui-kit/_ui-icons.scss

@@ -0,0 +1,28 @@
+//
+// ui-icons.scss
+// Styles for icons not provided by the Channel SDK
+// UI Kit. Note that these are older icons, and will
+// probably be replaced soon.
+// --------------------------------------------------
+
+.ico {
+  display: inline-block;
+  line-height: 0;
+  vertical-align: top;
+  text-indent: 999em;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ico-delete {
+  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%20xmlns%3Asketch%3D"http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns"%20width%3D"12px"%20height%3D"12px"%20viewBox%3D"0%200%2012%2012"%20version%3D"1.1"><style%20type%3D"text%2Fcss">circle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23479ccf%20%21important%3B%20%7D<%2Fstyle><title>trash-can-small<%2Ftitle><desc>Created%20with%20Sketch.<%2Fdesc><defs%2F><g%20id%3D"Page-1"%20stroke%3D"none"%20stroke-width%3D"1"%20fill%3D"none"%20fill-rule%3D"evenodd"%20sketch%3Atype%3D"MSPage"><g%20id%3D"trash-can-small"%20sketch%3Atype%3D"MSLayerGroup"%20fill%3D"%23479CCF"><path%20d%3D"M7.63636364%2C1.09090909%20L7.63636364%2C0.818181818%20C7.63636364%2C0.366545455%207.26981818%2C0%206.81818182%2C0%20L5.18181818%2C0%20C4.73018182%2C0%204.36363636%2C0.366545455%204.36363636%2C0.818181818%20L4.36363636%2C1.09090909%20L0.825818182%2C1.09090909%20C0.369818182%2C1.09090909%200%2C1.45745455%200%2C1.90909091%20C0%2C2.36072727%200.369818182%2C3.02727272%200.825818182%2C3.02727272%20L11.1741818%2C3.02727272%20C11.6301818%2C3.02727272%2012%2C2.36072727%2012%2C1.90909091%20C12%2C1.45745455%2011.6301818%2C1.09090909%2011.1741818%2C1.09090909%20L7.63636364%2C1.09090909%20Z"%20id%3D"Fill-1"%20sketch%3Atype%3D"MSShapeGroup"%2F><path%20d%3D"M1.72272728%2C4.05%20C1.57218183%2C4.05%201.45000001%2C4.17218182%201.45000001%2C4.32272728%20L1.45000001%2C11.1136364%20C1.45000001%2C11.5652727%201.81654546%2C11.9318182%202.26818183%2C11.9318182%20L9.75%2C11.9318182%20C10.2016364%2C11.9318182%2010.5681818%2C11.5652727%2010.5681818%2C11.1136364%20L10.5681818%2C4.32272728%20C10.5681818%2C4.17218182%2010.446%2C4.05%2010.2954545%2C4.05%20L1.72272728%2C4.05%20Z%20M7.84090909%2C9.21%20C7.84090909%2C9.50836364%207.59927273%2C9.75%207.30090909%2C9.75%20L7.29%2C9.75%20C6.99163636%2C9.75%206.75%2C9.50836364%206.75%2C9.21%20L6.75%2C6.47181818%20C6.75%2C6.17345455%206.99163636%2C5.93181818%207.29%2C5.93181818%20L7.30090909%2C5.93181818%20C7.59927273%2C5.93181818%207.84090909%2C6.17345455%207.84090909%2C6.47181818%20L7.84090909%2C9.21%20L7.84090909%2C9.21%20Z%20M4.84090909%2C9.21%20C4.84090909%2C9.50836364%204.59927273%2C9.75%204.30090909%2C9.75%20L4.29%2C9.75%20C3.99163636%2C9.75%203.75%2C9.50836364%203.75%2C9.21%20L3.75%2C6.47181818%20C3.75%2C6.17345455%203.99163636%2C5.93181818%204.29%2C5.93181818%20L4.30090909%2C5.93181818%20C4.59927273%2C5.93181818%204.84090909%2C6.17345455%204.84090909%2C6.47181818%20L4.84090909%2C9.21%20L4.84090909%2C9.21%20Z"%20id%3D"Fill-2"%20sketch%3Atype%3D"MSShapeGroup"%2F><%2Fg><%2Fg><%2Fsvg>');
+  background-size: auto;
+}
+
+.ico-14-svg {
+  width: 14px;
+  height: 14px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}