Initial commit

lib/assets/javascripts/new-dashboard/styles/layout/_cells.scss

@@ -0,0 +1,49 @@
+.cell {
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  padding: 0 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cell--main {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 200px;
+}
+
+.cell--privacy {
+  display: flex;
+  align-items: center;
+}
+
+.cell--xlarge {
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 280px;
+}
+
+.cell--large {
+  width: 150px;
+}
+
+.cell--medium {
+  width: 120px;
+}
+
+.cell--small {
+  width: 90px;
+}
+
+.cell--xsmall {
+  width: 70px;
+}
+
+.cell--first {
+  padding-left: 0;
+}
+
+.cell--last {
+  padding-right: 0;
+}

lib/assets/javascripts/new-dashboard/styles/layout/_dialogs.scss

@@ -0,0 +1,11 @@
+@import 'assets/stylesheets/editor-3/_forms.scss';
+
+// Map Metadata Edit Dialog
+@import 'assets/stylesheets/editor-3/_metadata-form.scss';
+@import 'assets/stylesheets/editor-3/_form-tags.scss';
+
+// Create new map/dataset Dialog
+@import 'assets/stylesheets/editor-3/modals.scss';
+
+// Share Dialog
+@import 'assets/stylesheets/editor-3/_share.scss';

lib/assets/javascripts/new-dashboard/styles/layout/_grid.scss

@@ -0,0 +1,212 @@
+.container {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+@mixin grid($value) {
+  flex: 0 0 $value;
+  max-width: $value;
+}
+
+.grid {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+
+  &.grid--no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  &.grid--align-center {
+    align-items: center;
+  }
+
+  &.grid--justify-end {
+    justify-content: flex-end;
+  }
+
+  &.grid--space {
+    justify-content: space-between;
+  }
+
+  &.grid--evenly {
+    justify-content: space-evenly;
+  }
+
+  &.grid--out {
+    margin-right: -10px;
+    margin-left: -10px;
+  }
+
+  &.grid--column {
+    flex-direction: column;
+  }
+}
+
+.grid__head--sticky {
+  position: sticky;
+  z-index: $z-index__sticky;
+  top: 0;
+}
+
+header.has-user-notification + section .grid__head--sticky {
+  top: 124px;
+}
+
+.grid-cell {
+  padding-right: 10px;
+  padding-left: 10px;
+
+  &.grid-cell--noMargin {
+    margin-bottom: 0;
+  }
+}
+
+.grid-cell--col1 {
+  @include grid(8.3334%);
+}
+
+.grid-cell--col2 {
+  @include grid(16.6667%);
+}
+
+.grid-cell--col3 {
+  @include grid(25%);
+}
+
+.grid-cell--col4 {
+  @include grid(33.3334%);
+}
+
+.grid-cell--col5 {
+  @include grid(41.6665%);
+}
+
+.grid-cell--col6 {
+  @include grid(50%);
+}
+
+.grid-cell--col7 {
+  @include grid(58.3331%);
+}
+
+.grid-cell--col8 {
+  @include grid(66.6666%);
+}
+
+.grid-cell--col9 {
+  @include grid(75%);
+}
+
+.grid-cell--col10 {
+  @include grid(83.333%);
+}
+
+.grid-cell--col11 {
+  @include grid(91.6666%);
+}
+
+.grid-cell--col12 {
+  @include grid(100%);
+}
+
+@media (max-width: $layout-tablet) {
+  .grid-cell--col1--tablet {
+    @include grid(8.3334%);
+  }
+
+  .grid-cell--col2--tablet {
+    @include grid(16.6667%);
+  }
+
+  .grid-cell--col3--tablet {
+    @include grid(25%);
+  }
+
+  .grid-cell--col4--tablet {
+    @include grid(33.3334%);
+  }
+
+  .grid-cell--col5--tablet {
+    @include grid(41.6665%);
+  }
+
+  .grid-cell--col6--tablet {
+    @include grid(50%);
+  }
+
+  .grid-cell--col7--tablet {
+    @include grid(58.3331%);
+  }
+
+  .grid-cell--col8--tablet {
+    @include grid(66.6666%);
+  }
+
+  .grid-cell--col9--tablet {
+    @include grid(75%);
+  }
+
+  .grid-cell--col10--tablet {
+    @include grid(83.333%);
+  }
+
+  .grid-cell--col11--tablet {
+    @include grid(91.6666%);
+  }
+
+  .grid-cell--col12--tablet {
+    @include grid(100%);
+  }
+}
+
+@media (max-width: $layout-mobile) {
+  .grid-cell--col1--mobile {
+    @include grid(8.3334%);
+  }
+
+  .grid-cell--col2--mobile {
+    @include grid(16.6667%);
+  }
+
+  .grid-cell--col3--mobile {
+    @include grid(25%);
+  }
+
+  .grid-cell--col4--mobile {
+    @include grid(33.3334%);
+  }
+
+  .grid-cell--col5--mobile {
+    @include grid(41.6665%);
+  }
+
+  .grid-cell--col6--mobile {
+    @include grid(50%);
+  }
+
+  .grid-cell--col7--mobile {
+    @include grid(58.3331%);
+  }
+
+  .grid-cell--col8--mobile {
+    @include grid(66.6666%);
+  }
+
+  .grid-cell--col9--mobile {
+    @include grid(75%);
+  }
+
+  .grid-cell--col10--mobile {
+    @include grid(83.333%);
+  }
+
+  .grid-cell--col11--mobile {
+    @include grid(91.6666%);
+  }
+
+  .grid-cell--col12--mobile {
+    @include grid(100%);
+  }
+}

lib/assets/javascripts/new-dashboard/styles/layout/_page.scss

@@ -0,0 +1,5 @@
+.page {
+  min-height: calc(100vh - 392px);
+  padding: 128px 0 120px;
+  border-bottom: 1px solid $border-color;
+}

lib/assets/javascripts/new-dashboard/styles/layout/_section.scss

@@ -0,0 +1,12 @@
+.section {
+  padding: 64px 0 128px;
+  border-bottom: 1px solid $border-color;
+
+  &.section--borderTop {
+    border-top: 1px solid $border-color;
+  }
+
+  &.section--noBorder {
+    border-bottom: none;
+  }
+}