@openneuro/app 4.33.4 → 4.34.0

package/src/scripts/components/scss/_variables.scss

@@ -0,0 +1,245 @@
+$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%);
+
+$nih-theme: rgb(34, 133, 148);
+$nih-hover: adjust-color($nih-theme, $lightness: 10%);
+$nih-dark: rgba(32, 85, 138, 1);
+$nih-secondary: adjust-color($nih-theme, $lightness: 15%);
+$nih-light: rgba(155, 211, 221, 1);
+
+$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%);
+
+
+$nirs-theme: rgb(166 21 40);
+$nirs-hover: adjust-color($nirs-theme, $lightness: 10%);
+$nirs-dark: darken($nirs-theme, 25%);
+$nirs-secondary: adjust-color($nirs-theme, $lightness: 15%);
+$nirs-light: adjust-color($nirs-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};
+  --nirs-theme: #{$nirs-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;
+}
+
+.nih-theme  {
+  background: $nih-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-nih,
+.dataset-page-nih{
+  --current-theme-primary: #{$nih-theme};
+  --current-theme-primary-hover: #{$nih-hover};
+  --current-theme-primary-dark: #{$nih-dark};
+  --current-theme-secondary: #{$nih-secondary};
+  --current-theme-primary-light: #{$nih-light};
+  --current-theme-header: #{$nih-theme};
+  --current-theme-header-dark: #{$nih-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};
+}
+
+.search-page-nirs,
+.dataset-page-nirs {
+  --current-theme-primary: #{$nirs-theme};
+  --current-theme-primary-hover: #{$nirs-hover};
+  --current-theme-primary-dark: #{$nirs-dark};
+  --current-theme-secondary: #{$nirs-secondary};
+  --current-theme-primary-light: #{$nirs-light};
+  --current-theme-header: #{$nirs-theme};
+  --current-theme-header-dark: #{$nirs-dark};
+}

package/src/scripts/components/scss/global.scss

@@ -0,0 +1,124 @@
+.sb-show-main.sb-main-padded {
+  padding: 0 !important;
+}
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+body {
+  font-family: $font-sans;
+  min-height: 100vh;
+  padding: 0;
+}
+
+a,
+a:link {
+  color: var(--current-theme-primary);
+  transition: color 0.3s;
+  cursor: pointer;
+  &:hover {
+    color: var(--current-theme-primary-hover);
+  }
+}
+.container {
+  max-width: calc(100vw - 80px);
+  width: 1690px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 3;
+  @media (max-width: 767px) {
+    max-width: calc(100vw - 50px);
+  }
+}
+
+div,
+span,
+input,
+textarea {
+  box-sizing: border-box;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.3em;
+  box-sizing: border-box;
+}
+
+blockquote {
+  font-style: italic;
+  color: #454545;
+  margin: 20px 60px;
+  border-left: 10px solid #e2e2e2;
+  display: block;
+  padding: 0 0 0 30px;
+  @media (max-width: 480px) {
+    margin: 20px 10px;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  padding: 0;
+}
+
+.sticky-content {
+  min-height: calc(100vh - 30px);
+  padding: 0;
+}
+.sticky-footer {
+  height: 30px;
+}
+
+pre {
+  border: 1px solid #eee;
+  padding: 5px;
+  background: #f4f4f4;
+  overflow-y: scroll;
+  pre {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    background: transparent;
+  }
+}
+
+.return-link {
+  text-transform: uppercase;
+  color: #333;
+  font-weight: 600;
+  text-decoration: none;
+  margin-left: 40px;
+  font-size: 14px;
+  &:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 480px) {
+    display: block !important;
+    margin: 30px 0 20px !important;
+  }
+}

package/src/scripts/components/scss/toasts.scss

@@ -0,0 +1,33 @@
+// Toasts
+
+.Toastify__toast {
+  text-align: center;
+  background: #fff;
+  color: #000;
+  padding: 1em;
+  .Toastify__close-button--error {
+    color: #000;
+  }
+  .Toastify__progress-bar {
+    background: #eee;
+  }
+}
+
+.Toastify__toast--default {
+  border-top: 4px solid #333;
+  .Toastify__progress-bar {
+    background: var(--current-theme-primary);
+  }
+}
+
+.Toastify__toast--success {
+  border-top: 4px solid $on-light-green;
+}
+
+.Toastify__toast--warning {
+  border-top: 4px solid $on-light-orange;
+}
+
+.Toastify__toast--error {
+  border-top: 4px solid $on-light-red;
+}