@openneuro/app 4.20.6-alpha.8 → 4.21.0-alpha.1

package/src/scripts/scss/dataset/validation.scss

@@ -0,0 +1,392 @@
+$white: #fff;
+$black: #000;
+$mine-shaft: #222;
+$stanford-red: #8c1515;
+$coral: #eb472c;
+$salmon: #ec7764;
+
+$rock: #5f574f;
+$stone: #928b81;
+$driftwood: #b6b1a9;
+$misty: #dad7cb;
+
+$fuchsia: #9169a7;
+
+$ocean: #00505c;
+$algae: #175e54;
+$sky: rgb(0, 124, 146);
+$turquoise: #009b76;
+$persian-green: #00b489;
+$night: #012a30;
+$jungle-mist: #b5cbd3;
+$dodger-blue: #5890ff;
+
+$yellow: #ffd820;
+$honey: #fffcee;
+
+$success: #04ab3f;
+$info: #24c8c8;
+$warning: #f7ba4b;
+$danger: #c82424;
+
+$notification-green: #77e6a3;
+
+$warning-orange-cream: #ffefdb;
+$warning-orange: #df7600;
+
+.validation-wrap.on-accordion-wrapper {
+  margin-bottom: 0;
+  margin: 0;
+
+  .accordion {
+    background: #f4f4f4;
+    z-index: 1200;
+    position: relative;
+
+    .accordion-content {
+      padding: 0;
+      border-top: 0;
+    }
+  }
+
+  .warning-wrap,
+  .error-wrap {
+    margin: 0;
+    position: relative;
+    box-shadow: none;
+    border: 0;
+    background: none;
+    border-radius: 0;
+
+    > .accordion-title {
+      z-index: 1400;
+      margin-top: 0;
+      border: 0;
+      padding: 0;
+      padding: 10px;
+      display: block;
+      background: lighten($salmon, 25%);
+      color: $danger;
+      text-align: center;
+      text-transform: uppercase;
+      font-weight: 700;
+      margin: 0;
+
+      // &::after {
+      //   font-family: FontAwesome;
+      //   font-size: 10px;
+      //   margin-left: 10px;
+      //   content: '\f077';
+      //   position: relative;
+      //   top: -2px;
+      // }
+
+      // &.collapsed::after {
+      //   content: '\f078';
+      // }
+    }
+
+    .accordion-content {
+      border-top: 0;
+    }
+    .accordion {
+      margin-bottom: 0;
+    }
+  }
+
+  .warning-wrap {
+    .accordion-title {
+      background: $warning-orange-cream;
+      color: $warning-orange;
+      a {
+        background: $warning-orange-cream;
+        color: $warning-orange;
+      }
+    }
+  }
+}
+
+//Error body and meta
+.validation-error {
+  border-radius: 0;
+  margin: 0;
+  border: 0;
+
+  .accordion-title {
+    padding: 0;
+    &::after {
+      display: none;
+    }
+    > span {
+      display: block;
+      padding: 10px;
+      font-size: 12px;
+      background-color: #eee;
+      color: #333;
+      border-bottom: 1px solid #bbb;
+      border-top: 1px solid transparent;
+      text-decoration: none;
+      text-align: left;
+      text-transform: initial;
+      width: 100%;
+      &::after {
+        content: '';
+      }
+
+      h4 {
+        color: $coral;
+        margin-top: 0;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .file-issue-count {
+        font-size: 10px;
+        text-transform: uppercase;
+        margin-top: 3px;
+        color: #333;
+
+        &::before {
+          color: $coral;
+          content: 'View\00a0';
+          margin-right: 0;
+          position: relative;
+        }
+      }
+
+      &:hover {
+        text-decoration: none;
+        background-color: #eee;
+
+        h4 {
+          color: darken($coral, 10%);
+        }
+
+        .pull-right::before {
+          color: darken($coral, 10%);
+        }
+
+        i::after {
+          color: $coral;
+        }
+      }
+    }
+    &.open > span {
+      background-color: #f4f4f4;
+      .file-issue-count {
+        //color:  $coral;
+        &::before {
+          content: 'Hide\00a0';
+        }
+      }
+    }
+  }
+  .accordion-content {
+    border: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #bbb;
+    background-color: #f4f4f4;
+    .em-head {
+      display: block;
+      margin: 0;
+      padding: 10px 10px 0;
+
+      .em-header {
+        font-size: 12px;
+        text-transform: uppercase;
+        font-weight: 700;
+        color: $rock;
+        margin-bottom: 2px;
+      }
+
+      .e-meta {
+        color: $rock;
+        font-size: 10px;
+        word-break: break-word;
+        display: block;
+      }
+    }
+
+    // .file-path {
+    //   border-bottom: 1px solid #ddd;
+    //   margin: 0;
+    //   padding: 0 10px 10px;
+    //   color: $rock;
+    //   font-size: 10px;
+    //   word-break: break-word;
+    //   display: block;
+    // }
+
+    .em-body {
+      border-bottom: 1px solid #ddd;
+      margin: 0;
+      padding: 10px;
+
+      .em-header {
+        color: #333;
+        margin: 0;
+        padding: 3px 0 5px;
+        font-size: 14px;
+        font-weight: 600;
+
+        .pull-right {
+          font-weight: 400;
+          font-size: 10px;
+        }
+      }
+
+      .e-meta {
+        label {
+          color: #000;
+          font-size: 12px;
+          text-transform: uppercase;
+          font-weight: 600;
+        }
+
+        p {
+          color: #333;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .em-body:last-child {
+      border: 0;
+    }
+  }
+}
+
+.validation-wrap {
+  padding: 0;
+  background: none;
+
+  .message {
+    text-align: center;
+    width: 100%;
+    font-size: 15px;
+    font-weight: 600;
+    color: $rock;
+    max-width: 430px;
+    margin: 0 auto;
+    display: block;
+    padding: 20px;
+
+    &.error strong {
+      color: $coral;
+    }
+  }
+
+  > span > .accordion-title,
+  > article > .accordion-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    &:after {
+      position: absolute;
+      left: 180px;
+      @media (max-width: 480px) {
+        left: auto;
+        right: 10px;
+        top: 10px;
+      }
+    }
+    &.valid {
+      cursor: default;
+      &:after {
+        display: none;
+      }
+    }
+    > div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-grow: 1;
+      flex-wrap: wrap;
+
+      @media (max-width: 480px) {
+        flex-direction: column;
+      }
+
+      h3 {
+        margin: 0;
+        flex-grow: 1;
+        padding: 9px 11px;
+      }
+      .dataset-status {
+        min-height: 100%;
+        background: none;
+        color: #333;
+        padding: 9px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        i {
+          margin-right: 10px;
+          font-size: 20px;
+        }
+
+        &.ds-success {
+          color: $success;
+        }
+
+        &.ds-info {
+          color: $info;
+        }
+
+        &.ds-warning {
+          color: $warning;
+        }
+
+        &.ds-danger {
+          color: $danger;
+        }
+      }
+
+      .label {
+        text-transform: uppercase;
+        margin: 0 20px;
+        font-size: 14px;
+
+        &.text-warning {
+          color: darken($warning, 10%);
+        }
+      }
+    }
+
+    strong {
+      color: #666;
+    }
+
+    .meta,
+    .badge {
+      background: none;
+      color: #c9c9c9;
+      font-size: 12px;
+    }
+
+    .meta label {
+      text-transform: none;
+    }
+
+    &.super-valid {
+      a {
+        cursor: default;
+      }
+    }
+  }
+
+  > span > .accordion-item > .accordion-content {
+    border: 1px solid #ddd;
+    border-top: 0;
+  }
+
+  .finished .badge {
+    color: $success;
+  }
+
+  .ds-validation-pending-message {
+    padding: 0 20px;
+  }
+}

package/src/scripts/scss/dataset/version-dropdown.scss

@@ -0,0 +1,121 @@
+@import '../variables.scss';
+
+.version-dropdown {
+  .toggle {
+    .fas {
+      margin-left: 5px;
+    }
+    .fa-chevron-up {
+      display: none;
+    }
+    .fa-chevron-down {
+      display: inline;
+    }
+    &.active {
+      .fa-chevron-up {
+        display: inline;
+      }
+      .fa-chevron-down {
+        display: none;
+      }
+    }
+  }
+}
+.version-list-dropdown {
+  ul {
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    li a {
+      padding: 5px 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid $newspaper;
+      text-decoration: none;
+      &.selected {
+        background-color: #f4f4f4;
+      }
+      span {
+        .active {
+          color: $on-light-green;
+          margin-left: 5px;
+        }
+        .deprecated {
+          color: $on-light-red;
+          font-weight: 300;
+          padding-left: 15px;
+        }
+      }
+    }
+  }
+  .label {
+    font-weight: 600;
+  }
+}
+
+.version-block {
+  display: flex;
+  justify-content: space-between;
+  background-color: #eaeaea;
+  padding: 20px;
+  border-radius: $border-radius-default;
+  border: 1px solid $newspaper;
+  flex-wrap: wrap;
+  .active-version {
+    font-size: 14px;
+    @media (max-width: 320px) {
+      max-width: 100%;
+      margin-bottom: 10px;
+    }
+    div {
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+  .dataset-tool {
+    font-weight: 600;
+    font-size: 14px;
+    margin: 0;
+    color: var(--current-theme-primary);
+    &:hover {
+      color: var(--current-theme-primary-hover);
+    }
+  }
+
+  .version-dropdown {
+    position: relative;
+    .menu .version-list-dropdown {
+      min-width: 290px;
+      border: 1px solid $newspaper;
+      border-radius: $border-radius-default;
+      @media (max-width: 350px) {
+        min-width: 100px;
+      }
+    }
+    .version-list-label {
+      font-size: 14px;
+      margin: 0 0 10px;
+      color: var(--current-theme-primary);
+      &:hover {
+        color: var(--current-theme-primary-hover);
+      }
+    }
+    @media (max-width: 435px) {
+      &.dropdown-wrapper .menu {
+        right: 0;
+        left: auto;
+      }
+    }
+    @media (max-width: 350px) {
+      &.dropdown-wrapper .menu {
+        width: 220px;
+      }
+      &.dropdown-wrapper {
+        width: 100%;
+        text-align: right;
+      }
+    }
+  }
+}

package/src/scripts/scss/index.scss

@@ -0,0 +1,6 @@
+@import './dataset/comments.scss';
+@import './dataset/dataset-page.scss';
+@import './dataset/dataset-tool.scss';
+@import './dataset/dropdown.scss';
+@import './dataset/validation.scss';
+@import './dataset/version-dropdown.scss';

package/src/scripts/scss/variables.scss

@@ -0,0 +1,205 @@
+$font-sans: 'Open Sans', sans-serif;
+
+//old vars
+$white: #fff;
+$black: #000;
+$mine-shaft: #222;
+$stanford-red: #8c1515;
+$coral: #eb472c;
+$salmon: #ec7764;
+
+$rock: #5f574f;
+$stone: #928b81;
+$driftwood: #b6b1a9;
+$misty: #dad7cb;
+
+$fuchsia: #9169a7;
+
+$ocean: #00505c;
+$algae: #175e54;
+$sky: rgb(0, 124, 146);
+$turquoise: #009b76;
+$persian-green: #00b489;
+$night: #012a30;
+$jungle-mist: #b5cbd3;
+$dodger-blue: #5890ff;
+
+$yellow: #ffd820;
+$honey: #fffcee;
+
+$success: #24c85e;
+$info: #24c8c8;
+$warning: #f7ba4b;
+$danger: #c82424;
+
+$notification-green: #77e6a3;
+
+$warning-orange-cream: #ffefdb;
+$warning-orange: #df7600;
+
+//end old vars
+
+$charcoal: #333;
+$newspaper: #dfdfdf;
+
+/* SCSS RGB */
+$on-light-aqua: rgb(55, 188, 210);
+$on-dark-aqua: rgba(32, 78, 90, 1);
+$on-secondary: #196583;
+$on-dark-aqua-light: #e5f4f7;
+
+$mri-theme: rgba(79, 51, 130, 1);
+$mri-hover: adjust-color($mri-theme, $lightness: 10%);
+$mri-dark: darken($mri-theme, 25%);
+$mri-secondary: adjust-color($mri-theme, $lightness: 15%);
+$mri-light: adjust-color($mri-theme, $lightness: 45%);
+
+$eeg-theme: rgba(134, 31, 55, 1);
+$eeg-hover: adjust-color($eeg-theme, $lightness: 10%);
+$eeg-dark: darken($eeg-theme, 25%);
+$eeg-secondary: adjust-color($eeg-theme, $lightness: 15%);
+$eeg-light: adjust-color($eeg-theme, $lightness: 45%);
+
+$pet-theme: rgba(0, 105, 192, 1);
+$pet-hover: adjust-color($pet-theme, $lightness: 10%);
+$pet-dark: darken($pet-theme, 25%);
+$pet-secondary: adjust-color($pet-theme, $lightness: 15%);
+$pet-light: adjust-color($pet-theme, $lightness: 45%);
+
+$ieeg-theme: rgba(18, 109, 62, 1);
+$ieeg-hover: adjust-color($ieeg-theme, $lightness: 10%);
+$ieeg-dark: darken($ieeg-theme, 25%);
+$ieeg-secondary: adjust-color($ieeg-theme, $lightness: 15%);
+$ieeg-light: rgb(200, 212, 153);
+
+$meg-theme: rgba(156, 57, 0, 1);
+$meg-hover: adjust-color($meg-theme, $lightness: 10%);
+$meg-dark: darken($meg-theme, 25%);
+$meg-secondary: adjust-color($meg-theme, $lightness: 15%);
+$meg-light: adjust-color($meg-theme, $lightness: 45%);
+
+$on-light-green: #00eeb5;
+$on-light-red: #c00342;
+$on-light-orange: rgb(255, 110, 43);
+
+$primary: $on-dark-aqua;
+
+$chiclet-color: #a2059e;
+
+/* CSS HEX */
+:root {
+  --mri-theme: #{$mri-theme};
+  --eeg-theme: #{$eeg-theme};
+  --pet-theme: #{$pet-theme};
+  --ieeg-theme: #{$ieeg-theme};
+  --meg-theme: #{$meg-theme};
+
+  --on-light-aqua: #{$on-light-aqua};
+  --on-dark-aqua: #{$on-dark-aqua};
+  --on-light-green: #{on-light-green};
+
+  --current-theme-primary: #{$on-dark-aqua};
+  --current-theme-primary-hover: #{$on-light-aqua};
+  --current-theme-secondary: #{$on-secondary};
+  --current-theme-primary-dark: #{$on-dark-aqua};
+  --current-theme-primary-light: #{$on-dark-aqua-light};
+  --current-theme-header: #333;
+  --current-theme-header-dark: #333;
+}
+
+.mri-theme {
+  background-color: $mri-theme;
+}
+.eeg-theme {
+  background-color: $eeg-theme;
+}
+
+.pet-theme {
+  background-color: $pet-theme;
+}
+.ieeg-theme {
+  background-color: $ieeg-theme;
+}
+
+.on-light-aqua {
+  background-color: $on-light-aqua;
+}
+.on-light-green {
+  background-color: $on-light-green;
+}
+.on-dark-aqua {
+  background-color: $on-dark-aqua;
+}
+
+.meg-theme {
+  background-color: $meg-theme;
+}
+
+.gray-bg {
+  background: #f3f3f3;
+}
+
+//Base unit used for spacing gutters
+$base-unit: 20px;
+
+//Screen Sizes
+$screen-sm: 480px;
+$screen-md: 767px;
+$screen-lg: 989px;
+
+$border-radius-default: 4px;
+
+.search-page-mri,
+.dataset-page-mri {
+  --current-theme-primary: #{$mri-theme};
+  --current-theme-primary-hover: #{$mri-hover};
+  --current-theme-primary-dark: #{$mri-dark};
+  --current-theme-secondary: #{$mri-secondary};
+  --current-theme-primary-light: #{$mri-light};
+  --current-theme-header: #{$mri-theme};
+  --current-theme-header-dark: #{$mri-dark};
+}
+
+.search-page-eeg,
+.dataset-page-eeg {
+  --current-theme-primary: #{$eeg-theme};
+  --current-theme-primary-hover: #{$eeg-hover};
+  --current-theme-primary-dark: #{$eeg-dark};
+  --current-theme-secondary: #{$eeg-secondary};
+  --current-theme-primary-light: #{$eeg-light};
+  --current-theme-header: #{$eeg-theme};
+  --current-theme-header-dark: #{$eeg-dark};
+}
+
+.search-page-pet,
+.dataset-page-pet {
+  --current-theme-primary: #{$pet-theme};
+  --current-theme-primary-hover: #{$pet-hover};
+  --current-theme-primary-dark: #{$pet-dark};
+  --current-theme-secondary: #{$pet-secondary};
+  --current-theme-primary-light: #{$pet-light};
+  --current-theme-header: #{$pet-theme};
+  --current-theme-header-dark: #{$pet-dark};
+}
+
+.search-page-ieeg,
+.dataset-page-ieeg {
+  --current-theme-primary: #{$ieeg-theme};
+  --current-theme-primary-hover: #{$ieeg-hover};
+  --current-theme-primary-dark: #{$ieeg-dark};
+  --current-theme-secondary: #{$ieeg-secondary};
+  --current-theme-primary-light: #{$ieeg-light};
+  --current-theme-header: #{$ieeg-theme};
+  --current-theme-header-dark: #{$ieeg-dark};
+}
+
+.search-page-meg,
+.dataset-page-meg {
+  --current-theme-primary: #{$meg-theme};
+  --current-theme-primary-hover: #{$meg-hover};
+  --current-theme-primary-dark: #{$meg-dark};
+  --current-theme-secondary: #{$meg-secondary};
+  --current-theme-primary-light: #{$meg-light};
+  --current-theme-header: #{$meg-theme};
+  --current-theme-header-dark: #{$meg-dark};
+}