@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/components/_card.scss

@@ -1,113 +0,0 @@
-@import '../mixins';
-@import '../variables';
-
-.cards {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -1em;
-}
-
-.card {
-  background: $color--invert;
-  border-radius: $radius--med;
-  box-shadow: $shadow--s;
-  display: flex;
-  min-height: 5rem * 4;
-  flex-direction: column;
-  flex-shrink: 0;
-  margin: $space--m;
-  transition: box-shadow $timing--hover;
-  width: 3rem * 4;
-}
-
-a.card {
-  &:hover {
-    box-shadow: $shadow--l;
-  }
-  &:not(.card--bordered) {
-    border-bottom: none; // overwrite default link styling
-
-    &:hover {
-      border-bottom: none; // overwrite default link styling
-    }
-  }
-}
-
-.card.card--bordered {
-  border-width: $radius--med;
-  border-bottom-style: none;
-
-  &--all {
-    border-style: solid;
-
-    .card-thumbnail {
-      border-radius: 0;
-    }
-  }
-  &--bottom {
-    border-bottom-style: solid;
-  }
-  &--left {
-    border-left-style: solid;
-
-    .card-thumbnail {
-      border-top-left-radius: 0;
-    }
-  }
-  &--right {
-    border-right-style: solid;
-
-    .card-thumbnail {
-      border-top-right-radius: 0;
-    }
-  }
-  &--top {
-    border-top-style: solid;
-
-    .card-thumbnail {
-      border-radius: 0;
-    }
-  }
-}
-
-.card-thumbnail--wrapper {
-  margin: 0;
-  padding-bottom: 100%;
-  position: relative;
-
-  &.circular {
-    + .card-body {
-      padding-top: 0;
-    }
-  }
-}
-
-.card-thumbnail {
-  background-position: center;
-  background-size: cover;
-  border-radius: $radius--med $radius--med 0 0;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-
-  &.circular {
-    border-radius: 50%;
-    left: 50%;
-    height: 5em;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    width: 5em;
-  }
-}
-
-.card-body {
-  flex-grow: 1;
-  margin: 0;
-  padding: $space--s;
-}
-
-.card-footer {
-  border-top: 1px solid $color--faint;
-  margin: auto $space--s 0 $space--s;
-  padding: $space--s 0;
-}

package/styles/components/_collapsible.scss

@@ -1,30 +0,0 @@
-.collapsible--wrapper {
-  max-height: auto;
-  opacity: 1;
-  overflow: visible;
-  /* This timing value needs to stay in sync with the duration defined in the
-     CollapsibleContent component */
-  transition-duration: $timing--hover;
-  transition-property: max-height, opacity;
-  transition-delay: 0s, $timing--click;
-
-  > .collapsible--content {
-    transition: visibility $timing--hover;
-    visibility: visible;
-  }
-
-  &.collapsed {
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    transition-delay: $timing--click, 0s;
-
-    > .collapsible--content {
-      visibility: hidden;
-    }
-  }
-
-  &.transitioning {
-    overflow: hidden;
-  }
-}

package/styles/components/_container.scss

@@ -1,62 +0,0 @@
-@import '../variables';
-@import '../mixins';
-
-$timing--long: .4s;
-$timing--short: .15s;
-
-$shadow--uneditable     : $shadow--s;
-$shadow--editable       : $shadow--m;
-$shadow--editable-hover : $shadow--l;
-$shadow--editing        : $shadow--xl;
-
-.container {
-  background-color: $color--invert;
-  border-radius:  $radius--med;
-  box-shadow: $shadow--uneditable;
-  margin: $space--m 0;
-  transition: box-shadow $timing--short, margin $timing--long, opacity $timing--long;
-
-  &.edit-state {
-    box-shadow: $shadow--editing;
-    
-    .container-header {
-      border-bottom: solid 1px $color--line;
-      transition-delay: $timing--short, 0s, 0s;
-      transition-duration: $timing--short;
-    }
-  }
-
-  &.view-state {
-    .container-header {
-      padding-bottom: 0;
-    }
-  }
-
-  &.editable {
-    box-shadow: $shadow--editable;
-
-    &:focus,
-    &:hover {
-      box-shadow: $shadow--editable-hover;
-    }
-  }
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.container-header {
-  border-bottom: solid 1px $color--none;
-  margin-bottom: 0;
-  opacity: 1;
-  padding: $space--base;
-  transition-delay: 0s;
-  transition-duration: 0s, $timing--short, $timing--short;
-  transition-property: border, opacity, padding;
-}
-
-.container--inner {
-  margin: 0;
-  padding: $space--base;
-}

package/styles/components/_drag_and_drop.scss

@@ -1,42 +0,0 @@
-.drag-and-drop {
-  align-items: center;
-  background-color: $color--edit-state;
-  border: dashed 1px;
-  border-radius: $radius--small;
-  color: $color--dem;
-  position: relative;
-
-  .file-input {
-    cursor: pointer;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    position: absolute;
-    width: 100%;
-  }
-
-  &.dragged-over {
-    background-color: $color--faint;
-  }
-
-  &.success {
-    background-color: rgba($color--dscout, .05);
-    border-style: solid;
-    color: $color--dscout;
-  }
-
-  &.error {
-    color: $color--alert;
-    background-color: rgba($color--alert, .05);
-  }
-
-  &.disabled {
-    color: $color--disabled;
-    opacity: 1;
-
-    .file-input {
-      cursor: unset;
-    }
-  }
-}

package/styles/components/_dropdown-input.scss

@@ -1,45 +0,0 @@
-@import '../variables';
-
-.dropdown-toggle {
-  cursor: default;
-  position: relative;
-  text-align: left;
-
-  .dropdown-toggle--inner {
-    margin: 0;
-    width: calc(100% - #{grid-units(5)});
-  }
-
-  .dropdown-toggle--icon {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    pointer-events: none;
-    position: absolute;
-    right: grid-units(2);
-    top: 0;
-  }
-
-  &.mini,
-  .mini + {
-    .dropdown-toggle--icon {
-      right: grid-units(1);
-    }
-  }
-
-  &.readonly {
-    pointer-events: none;
-  }
-
-  .input-element {
-    margin: 0;
-  }
-
-  select.input-element {
-    padding-right: 2em;
-
-    &[disabled] + .dropdown-toggle--icon {
-      opacity: 0.3;
-    }
-  }
-}

package/styles/components/_dropdown.scss

@@ -1,31 +0,0 @@
-@import '../variables';
-
-.dropdown {
-  position: relative;
-
-  .content-wrapper {
-    background-color: $color--invert;
-    border-radius:  $radius--med;
-    box-shadow: $shadow--xl;
-    margin-top: grid-units(2);
-    margin-bottom: grid-units(2);
-    opacity: 0;
-    overflow: auto;
-    position: absolute;
-    transition-duration: $timing--fade;
-    transition-property: opacity, visibility;
-    visibility: hidden;
-    z-index: 2;
-
-    .list {
-      cursor: default;
-    }
-  }
-
-  &.is-open {
-    .content-wrapper {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}

package/styles/components/_file-input.scss

@@ -1,11 +0,0 @@
-.input--file {
-  appearance: none;
-  left: -1000em;
-  position: absolute;
-
-  &:focus {
-    + label {
-      outline: $color--dscout auto 5px;
-    }
-  }
-}

package/styles/components/_flex.scss

@@ -1,130 +0,0 @@
-.flex {
-  display: flex;
-
-  &--inline {
-    display: inline-flex;
-  }
-}
-
-.flex,
-.flex--inline, {
-  align-items: center;
-
-  > * {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
-  &.align-content--around {
-    align-content: space-around;
-  }
-  &.align-content--between {
-    align-content: space-between;
-  }
-  &.align-content--end,
-  &.align-content--bottom {
-    align-content: flex-end;
-  }
-  &.align-content--center {
-    align-content: center;
-  }
-  &.align-content--start,
-  &.align-content--top {
-    align-content: flex-start;
-  }
-
-  &.align-items--baseline {
-    align-items: baseline;
-  }
-  &.align-items--center {
-    align-items: center;
-  }
-  &.align-items--end,
-  &.align-items--bottom {
-    align-items: flex-end;
-  }
-  &.align-items--stretch {
-    align-items: stretch;
-  }
-  &.align-items--start,
-  &.align-items--top {
-    align-items: flex-start;
-  }
-
-  &.direction--column {
-    flex-direction: column;
-  }
-  &.direction--column-reverse {
-    flex-direction: column-reverse;
-  }
-  &.direction--row {
-    flex-direction: row;
-  }
-  &.direction--row-reverse {
-    flex-direction: row-reverse;
-  }
-
-  &.justify--start,
-  &.justify--left {
-    justify-content: flex-start;
-  }
-  &.justify--around {
-    justify-content: space-around;
-  }
-  &.justify--between {
-    justify-content: space-between;
-  }
-  &.justify--center {
-    justify-content: center;
-  }
-  &.justify--end,
-  &.justify--right {
-    justify-content: flex-end;
-  }
-
-  &.wrap {
-    flex-wrap: wrap;
-  }
-  &.wrap--reverse {
-    flex-wrap: wrap-reverse;
-  }
-}
-
-.flex--0 {
-  flex: 0;
-}
-.flex--1 {
-  flex: 1;
-}
-.flex--2 {
-  flex: 2;
-}
-.flex--3 {
-  flex: 3;
-}
-
-.flex-shrink--0 {
-  flex-shrink: 0;
-}
-.flex-shrink--1 {
-  flex-shrink: 1;
-}
-.flex-shrink--2 {
-  flex-shrink: 2;
-}
-.flex-shrink--3 {
-  flex-shrink: 3;
-}
-
-.flex-grow--0 {
-  flex-grow: 0;
-}
-.flex-grow--1 {
-  flex-grow: 1;
-}
-.flex-grow--2 {
-  flex-grow: 2;
-}
-.flex-grow--3 {
-  flex-grow: 3;
-}

package/styles/components/_footnote.scss

@@ -1,15 +0,0 @@
-@import '../mixins';
-@import '../variables';
-
-aside,
-.aside {
-  @include border-l(2px, $color--note);
-  color: $color--main-light;
-  padding: $space--xs;
-  padding-left: $space--s;
-  font-size: $font-size--s;
-
-  * {
-    margin-bottom: $space--none;
-  }
-}