disco_app 0.7.0

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

@@ -0,0 +1,31 @@
+//
+// Replicate the styles for Shopify Admin buttons.
+// --------------------------------------------------
+
+.btn {
+  line-height: 1;
+  padding: 8.5px 15px;
+}
+
+.btn-default {
+  &:hover, &:focus, &:active, &.active {
+    border-color: #d3dbe2;
+    background-color: #f5f6f7;
+  }
+}
+
+.btn-primary {
+  &:hover, &:focus, &:active, &.active {
+    border-color: #4293c2;
+    background-color: #4293c2;
+  }
+}
+
+.btn-disabled {
+  &, &:hover, &:focus, &:active {
+    cursor: default;
+    background: #fafbfc;
+    color: #c3cfd8;
+    border: 1px solid #d3dbe2;
+  }
+}

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

@@ -0,0 +1,51 @@
+//
+// Replicate the styles for Shopify Admin cards.
+// --------------------------------------------------
+
+.next-card {
+  background-color: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.next-card ~ .next-card {
+  margin-top: 20px;
+}
+
+.next-card__header {
+  padding: 20px 20px 0;
+
+  h1, h2, h3 {
+    margin-bottom: 0;
+    font-size: 18px;
+    line-height: 1.2em;
+  }
+}
+
+.next-card__footer {
+  padding: 0 20px 20px;
+}
+
+.next-card__section {
+  padding: 20px;
+}
+
+.next-card__section ~ .next-card__section {
+  border-top: 1px solid #ebeef0;
+}
+
+.next-card__section--no-bottom-padding {
+  padding-bottom: 0;
+}
+
+.next-card--aside,
+.next-card--disabled {
+  background-color: #f5f6f7;
+}
+
+.next-card--disabled {
+  .next-card__header,
+  .next-card__section {
+    color: #777777;
+  }
+}

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

@@ -0,0 +1,23 @@
+//
+// Replicate the styles for Shopify Admin forms.
+// --------------------------------------------------
+
+.form-control {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+
+  font-size: 15px;
+  line-height: 20px;
+
+  &:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}
+
+.help-block {
+  font-style: italic;
+  font-size: 13px;
+  color: #95a7b7;
+  margin-top: 5px;
+}

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

@@ -0,0 +1,58 @@
+//
+// Replicate the styles for Shopify Admin grid.
+// --------------------------------------------------
+
+.next-grid {
+  display: flex;
+  width: calc(100% - 20px);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding-top: 10px;
+
+  &:last-of-type {
+    padding-bottom: 10px;
+  }
+}
+
+.next-grid--no-padding {
+  width: 100%;
+
+  &:first-of-type, &:last-of-type {
+    padding: 0;
+  }
+
+  > .next-grid__cell {
+    padding: 0;
+  }
+}
+
+.next-grid--center-aligned, .next-grid--center-both {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.next-grid--right-aligned {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.next-grid__cell {
+  @include flex(1, 1, 0%);
+  padding: 10px;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.next-grid__cell--third {
+  @include flex(0, 0, 33.333%);
+  max-width: 33.333%;
+}
+
+.next-grid__cell--no-flex {
+  @include flex(0 0 auto);
+}

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

@@ -0,0 +1,61 @@
+//
+// Replicate the styles for Shopify Admin sections
+// and flexbox layout.
+// --------------------------------------------------
+
+
+//== Layout
+//
+//## Simple Flexbox layout utilities.
+
+.layout-content {
+  display: flex;
+}
+
+.layout-content__sidebar {
+  padding: 20px;
+  @include flex(1, 1, 25%);
+  max-width: 25%
+}
+
+.layout-content__main {
+  padding: 20px;
+  @include flex(1, 1, 0%);
+}
+
+.layout-content__first {
+  padding-right: 0;
+}
+
+
+//== Section
+//
+//## Simple Flexbox layout utilities.
+
+//** Main section wrapper.
+.section {
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+//** Section "summary" to the left of the section.
+.section-summary {
+  padding: 20px 20px 20px 30px;
+
+  h1, h2 {
+    line-height: 1.325;
+    margin-top: -4px;
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  p {
+    color: #798c9c;
+    margin-bottom: 15px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+//
+// Replicate the styles for Shopify Admin tables.
+// --------------------------------------------------
+
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  &.expanded td {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+th {
+  font-weight: 400;
+  text-align: left;
+  color: #31373d;
+  padding: 8px 10px;
+  border-bottom: 1px solid #ebeef0;
+
+  &.is-sortable {
+    cursor: pointer;
+
+    &:hover {
+      background: #eff9fd;
+      color: #479ccf;
+    }
+  }
+}
+
+td {
+  border-bottom: 1px solid #ebeef0;
+  padding: 6px 10px;
+  background: transparent;
+}
+
+th, td {
+  &.right-aligned {
+    text-align: right;
+  }
+
+  &.center-aligned {
+    text-align: center;
+  }
+}
+
+tr:last-child > td {
+  border-bottom: none;
+}
+
+.table-hover {
+  tr:hover td {
+    background: #eff9fd;
+  }
+}

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

@@ -0,0 +1,61 @@
+//
+// Replicate the styles for Shopify Admin tabs.
+// --------------------------------------------------
+
+.next-tab__list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background-color: #f5f6f7;
+  overflow: visible;
+  border-radius: 3px 3px 0 0;
+
+  flex-wrap: nowrap;
+  display: flex;
+  align-items: stretch;
+
+  > li {
+    position: relative;
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: stretch;
+
+    &:first-child .next-tab {
+      border-top-left-radius: 3px;
+    }
+  }
+}
+
+.next-tab {
+  padding: 15px 20px;
+  text-decoration: none;
+  color: #798c9c;
+  border-right: 1px solid #ebeef0;
+  border-bottom: 1px solid #ebeef0;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  position: relative;
+  font-size: 13px;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:focus,
+  &:hover {
+    outline: none;
+    background-color: #fafbfc;
+    color: #479ccf;
+    text-decoration: none;
+  }
+
+  &.next-tab--is-active {
+    background-color: #ffffff;
+    color: #31373d;
+    border-bottom-color: #ffffff;
+    cursor: default;
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,39 @@
+//
+// Replicate the styles for Shopify Admin typography.
+// --------------------------------------------------
+
+
+//== Headings
+//
+//## Heading styles.
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin: 0 0 20px 0;
+}
+
+p {
+  margin: 0;
+}
+
+
+//== Type
+//
+//## Type modifiers.
+
+.type--subdued {
+  color: #798c9c;
+}
+
+a.type--subdued {
+  color: inherit;
+  text-decoration: underline;
+
+  &:hover {
+    color: #272c30;
+  }
+}