@openneuro/app 4.33.3 → 4.34.0-alpha.0

package/src/scripts/components/read-more/read-more.scss

@@ -0,0 +1,79 @@
+@import '../scss/variables';
+.has-read-more {
+  position: relative;
+
+  section {
+    height: auto;
+    min-height: 300px;
+    max-height: 300px;
+    transition: max-height 0.4s;
+    overflow: hidden;
+    padding-bottom: 20px;
+  }
+  &.readmore-file-tree {
+    margin-bottom: 80px;
+    section {
+      min-height: 975px;
+      max-height: 975px;
+    }
+  }
+  label.expand-collapse {
+    position: absolute;
+    bottom: -15px;
+    width: 100%;
+    text-align: center;
+    cursor: pointer;
+    margin: 0;
+    background-image: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.4),
+      rgba(255, 255, 255, 1)
+    );
+    padding-bottom: 50px;
+    display: block;
+    span {
+      font-size: 14px;
+      text-transform: uppercase;
+      font-weight: bold;
+      color: var(--current-theme-primary);
+      display: block;
+      position: relative;
+      top: 38px;
+      &:hover {
+        color: var(--current-theme-primary-hover);
+      }
+    }
+    span:first-child {
+      display: inline;
+    }
+    span:last-child {
+      display: none;
+    }
+  }
+  input.show-more {
+    display: none;
+  }
+
+  input.show-more[type='checkbox']:checked + section {
+    max-height: 9000px;
+
+    label.expand-collapse {
+      background: none;
+      span:last-child {
+        display: inline;
+      }
+      span:first-child {
+        display: none;
+      }
+    }
+  }
+  &.readmore-file-tree {
+    input.show-more[type='checkbox']:checked + section {
+      max-height: 40000px;
+    }
+  }
+
+  .filetree-wrapper.on-accordion-wrapper .accordion-item {
+    max-height: 40000px;
+  }
+}

package/src/scripts/components/scss/_flex-grid.scss

@@ -0,0 +1,216 @@
+@use 'sass:math';
+
+////////////////////////
+//The Flex Grid
+////////////////////////
+.grid {
+  box-sizing: border-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  -webkit-box-flex: 0;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 0;
+  //Use this modifier to remove gutters
+  &.grid-nogutter {
+    margin: 0;
+    & > .col {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+  &.align-center {
+    align-items: center;
+  }
+  &.grid-column {
+    flex-direction: column;
+  }
+}
+
+.col {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  -webkit-flex-basis: 0;
+  flex-basis: 0;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0 $base-unit 0 $base-unit;
+}
+
+////////////////////////
+//Column Modifiers
+////////////////////////
+
+//Column Vertical Alignment Classes
+.col-align-top {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
+.col-align-bottom {
+  align-self: flex-end;
+}
+
+.col-align-middle {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+//Column Content Alignment Classes
+.col-top {
+  justify-content: flex-start !important;
+  flex-direction: column;
+  display: flex;
+}
+
+.col-bottom {
+  justify-content: flex-end !important;
+  flex-direction: column;
+  display: flex;
+}
+
+.col-middle {
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+}
+
+//Horizontal Grid Alignment
+.grid-start {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.grid-center {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.grid-end {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.grid-column {
+  &.grid-start {
+    align-items: flex-start;
+  }
+
+  &.grid-center {
+    align-items: center;
+  }
+
+  &.grid-end {
+    align-items: flex-end;
+  }
+}
+
+//Column Distribution
+.grid-around {
+  justify-content: space-around;
+}
+
+.grid-between {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+//Reordering Columns
+.col-first {
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.col-last {
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+.grid-reverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+
+////////////////////////
+//Column Sizing Classes
+////////////////////////
+
+//Fixed Column Class
+.col-fixed {
+  flex: initial;
+}
+
+//Grow Based Columns
+@for $i from 2 through 11 {
+  .col-grow-#{$i} {
+    flex-grow: $i;
+  }
+}
+
+//Percent Based Columns
+@for $i from 1 through 12 {
+  .col-#{$i} {
+    -ms-flex-preferred-size: math.div(100%, 12) * $i;
+    -webkit-flex-basis: math.div(100%, 12) * $i;
+    flex-basis: math.div(100%, 12) * $i;
+    max-width: math.div(100%, 12) * $i;
+  }
+}
+
+//////////////////
+//Media Queries
+//////////////////
+@media only screen and (max-width: $screen-sm) {
+  // .grid-sm {
+  .col-sm {
+    flex: 100%;
+    max-width: 100%;
+  }
+  // }
+}
+
+@media only screen and (max-width: $screen-md) {
+  // .grid-md {
+  .col-md {
+    flex: 100%;
+    max-width: 100%;
+  }
+  // }
+}
+
+@media only screen and (max-width: $screen-lg) {
+  // .grid-lg {
+  .col-lg {
+    flex: 100%;
+    max-width: 100%;
+  }
+  // }
+}

package/src/scripts/components/scss/_helper-classes.scss

@@ -0,0 +1,162 @@
+.full--width {
+  width: 100%;
+}
+
+/**
+ * Add/remove floats
+ */
+.float--right {
+  float: right !important;
+}
+.float--left {
+  float: left !important;
+}
+.float--none {
+  float: none !important;
+}
+
+/*  Textual
+\*----------------------------------------------------------------------------*/
+
+/**
+ * Text alignment
+ */
+.text--left {
+  text-align: left !important;
+}
+.text--center {
+  text-align: center !important;
+}
+.text--right {
+  text-align: right !important;
+}
+
+/**
+ * Font weight
+ *
+ * ^deprecated: `.weight--x`
+ */
+.text--light,
+.weight--light {
+  font-weight: 300 !important;
+}
+.text--normal,
+.weight--normal {
+  font-weight: 400 !important;
+}
+.text--semibold,
+.weight--semibold {
+  font-weight: 600 !important;
+}
+
+/**
+ * Capitals/lowercase
+ *
+ * ^deprecated: non prefixed with `text--`
+ */
+.text--caps,
+.caps {
+  text-transform: uppercase !important;
+}
+.text--lowercase,
+.lowercase {
+  text-transform: lowercase !important;
+}
+.text--firstcap,
+.firstcap {
+  text-transform: capitalize !important;
+}
+
+/*  Misc
+\*----------------------------------------------------------------------------*/
+
+/**
+ * Hide from screanreaders & browsers
+ */
+.hidden {
+  display: none !important;
+  visibility: hidden;
+}
+
+/**
+ * Hide visually and from screenreaders, but maintain layout
+ */
+.invisible {
+  visibility: hidden;
+}
+
+/**
+ * Hide only visually, but have it available for screenreaders
+ * as per: h5bp.com/v
+ */
+@mixin visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.visuallyhidden {
+  @include visuallyhidden;
+}
+
+/*
+This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
+It will generate several classes such as:
+.m-r-10 which gives margin-right 10 pixels.
+.m-r-15 gives MARGIN to the RIGHT 15 pixels.
+.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
+.p-b-5 gives PADDING to the BOTTOM of 5 pixels
+.p-l-40 gives PADDING to the LEFT of 40 pixels
+The first letter is "m" or "p" for MARGIN or PADDING
+Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
+Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
+*/
+
+$spaceamounts: (
+  5,
+  10,
+  15,
+  20,
+  25,
+  30,
+  35,
+  40,
+  45,
+  50,
+  75,
+  100
+); // Adjust this to include the pixel amounts you need.
+$sides: (top, bottom, left, right); // Leave this variable alone
+
+@each $space in $spaceamounts {
+  @each $side in $sides {
+    .m-#{str-slice($side, 0, 1)}-#{$space} {
+      margin-#{$side}: #{$space}px !important;
+    }
+
+    .p-#{str-slice($side, 0, 1)}-#{$space} {
+      padding-#{$side}: #{$space}px !important;
+    }
+  }
+}
+
+.m-l-0 {
+  margin-left: 0 !important;
+}
+
+.m-r-0 {
+  margin-right: 0 !important;
+}
+
+.m-t-0 {
+  margin-top: 0 !important;
+}
+
+.m-b-0 {
+  margin-bottom: 0 !important;
+}