@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/components/selectors/themes/_theme_builder.scss

@@ -0,0 +1,93 @@
+@mixin generate-selector-theme-variables(
+  $Selector__Label____line-height: var(--line-height--copy),
+  $Selector__Label____top-offset: -.12em,
+  $Selector__Label____padding-left: 1em,
+
+  $Radio--unchecked____bg-color: transparent,
+  $Radio--checked____bg-color: var(--color--dscout),
+
+  $Radio--unchecked____border-color: rgba(var(--color--main-rgb), .2),
+  $Radio--checked____border-color: var(--color--dscout),
+
+  $Radio--unchecked____border-width: 1px,
+  $Radio--checked____border-width: 1px,
+
+  $Radio--unchecked____padding: .375em,
+  $Radio--checked____padding: .1875em,
+
+  $Radio____radius: var(--radius--circle),
+  $Radio____size: 1.25em,
+  $Radio____transition-duration: var(--timing--hover),
+
+  $Radio--unchecked__Icon____color: transparent,
+  $Radio--checked__Icon____color: transparent,
+
+  $Checkbox--unchecked____bg-color: transparent,
+  $Checkbox--checked____bg-color: var(--color--dscout),
+
+  $Checkbox--unchecked____border-color: rgba(var(--color--main-rgb), .2),
+  $Checkbox--checked____border-color: var(--color--dscout),
+
+  $Checkbox--unchecked____border-width: 1px,
+  $Checkbox--checked____border-width: 1px,
+
+  $Checkbox--unchecked____padding: .375em,
+  $Checkbox--checked____padding: 0,
+
+  $Checkbox____radius: var(--radius--tiny),
+  $Checkbox____size: 1.25em,
+  $Checkbox____transition-duration: var(--timing--hover),
+
+  $Checkbox--unchecked__Icon____color: transparent,
+  $Checkbox--checked__Icon____color: var(--color--invert),
+  $Checkbox--readonly--unchecked__Icon____color: var(--color--gray-3),
+  $Checkbox--readonly--checked__Icon____color: $Checkbox--checked____bg-color
+) {
+  --Selector__Label____line-height: #{$Selector__Label____line-height};
+  --Selector__Label____padding-left: #{$Selector__Label____padding-left};
+  --Selector__Label____top-offset: #{$Selector__Label____top-offset};
+
+  --Radio--unchecked____bg-color: #{$Radio--unchecked____bg-color};
+  --Radio--checked____bg-color: #{$Radio--checked____bg-color};
+
+  --Radio--unchecked____border-color: #{$Radio--unchecked____border-color};
+  --Radio--checked____border-color: #{$Radio--checked____border-color};
+
+  --Radio--unchecked____border-width: #{$Radio--unchecked____border-width};
+  --Radio--checked____border-width: #{$Radio--checked____border-width};
+
+  --Radio--unchecked____padding: #{$Radio--unchecked____padding};
+  --Radio--checked____padding: #{$Radio--checked____padding};
+
+  --Radio____radius: #{$Radio____radius};
+
+  --Radio____size: #{$Radio____size};
+
+  --Radio____transition-duration: #{$Radio____transition-duration};
+
+  --Radio--unchecked__Icon____color: #{$Radio--unchecked__Icon____color};
+  --Radio--checked__Icon____color: #{$Radio--checked__Icon____color};
+
+  --Checkbox--unchecked____bg-color: #{$Checkbox--unchecked____bg-color};
+  --Checkbox--checked____bg-color: #{$Checkbox--checked____bg-color};
+
+  --Checkbox--unchecked____border-color: #{$Checkbox--unchecked____border-color};
+  --Checkbox--checked____border-color: #{$Checkbox--checked____border-color};
+
+  --Checkbox--unchecked____border-width: #{$Checkbox--unchecked____border-width};
+  --Checkbox--checked____border-width: #{$Checkbox--checked____border-width};
+
+  --Checkbox--unchecked____padding: #{$Checkbox--unchecked____padding};
+  --Checkbox--checked____padding: #{$Checkbox--checked____padding};
+
+  --Checkbox____radius: #{$Checkbox____radius};
+
+  --Checkbox____size: #{$Checkbox____size};
+
+  --Checkbox____transition-duration: #{$Checkbox____transition-duration};
+  
+  --Checkbox--unchecked__Icon____color: #{$Checkbox--unchecked__Icon____color};
+  --Checkbox--checked__Icon____color: #{$Checkbox--checked__Icon____color};
+  --Checkbox--readonly--unchecked__Icon____color: #{$Checkbox--readonly--unchecked__Icon____color};
+  --Checkbox--readonly--checked__Icon____color: #{$Checkbox--readonly--checked__Icon____color};
+}

package/styles/components/separator/_base.scss

@@ -0,0 +1,11 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Separator--vertical {
+  display: inline-block;
+  height: 2em;
+  margin-left: 2em;
+  margin-right: 2em;
+  vertical-align: middle;
+  width: 1px;
+}

package/styles/components/separator/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-separator-theme-variables();
+}

package/styles/components/separator/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-separator-theme-variables();
+}

package/styles/components/separator/themes/_theme_builder.scss

@@ -0,0 +1 @@
+@mixin generate-separator-theme-variables() {}

package/styles/components/speech_bubble/_base.scss

@@ -0,0 +1,34 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Speech-Bubble {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.Speech-Bubble__Tail {
+  border-style: solid;
+  border-left-color: transparent;
+  border-right-color: transparent;  
+  border-width: 0.5em;
+  border-bottom-width: 0;
+  display: inline-block;
+  position: absolute;
+
+  &--left {
+    left: 1em;
+  }
+
+  &--right {
+    right: 1em;
+  }
+}
+  
+.Speech-Bubble__Text {
+  border-radius: var(--radius--med);
+  margin-bottom: 0;
+  padding: 1em;
+  white-space: pre-wrap;
+}
+

package/styles/components/speech_bubble/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-speech-bubble-theme-variables();
+}

package/styles/components/speech_bubble/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-speech-bubble-theme-variables();
+}

package/styles/components/speech_bubble/themes/_theme_builder.scss

@@ -0,0 +1 @@
+@mixin generate-speech-bubble-theme-variables() {}

package/styles/components/swappable/_base.scss

@@ -0,0 +1,41 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Swappable-Content {
+  position: relative;
+  /* This timing value needs to stay in sync with the duration defined in the
+     SwappableContent component */
+  transition: height var(--timing--fade);
+
+  &--transitioning {
+    overflow: hidden;
+  }
+
+  .Swappable-Content__A,
+  .Swappable-Content__B {
+    margin-bottom: 0;
+    opacity: 1;
+    transition-duration: var(--timing--hover);
+    transition-property: opacity, position, top, visibility;
+  }
+
+  &--show-B {
+    .Swappable-Content__A {
+      @include container-hidden;
+    }
+
+    .Swappable-Content__B {
+      transition-delay: var(--timing--hover);
+    }
+  }
+
+  &--show-A {
+    .Swappable-Content__A {
+      transition-delay: var(--timing--hover);
+    }
+
+    .Swappable-Content__B {
+      @include container-hidden;
+    }
+  }
+}

package/styles/components/swappable/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-swappable-theme-variables();
+}

package/styles/components/swappable/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-swappable-theme-variables();
+}

package/styles/components/swappable/themes/_theme_builder.scss

@@ -0,0 +1 @@
+@mixin generate-swappable-theme-variables() {}

package/styles/components/tags/_base.scss

@@ -0,0 +1,27 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Tags-Input__Container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: .25em;
+  overflow: auto;
+}
+
+.Tags-Input__Tag {
+  margin: .25em;
+}
+
+.Tags-Input__Input {
+  align-self: center;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  flex-grow: 1;
+  outline: none;
+  margin: .25em;
+  padding: 0;
+  width: auto;
+}

package/styles/components/tags/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-tags-theme-variables();
+}

package/styles/components/tags/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-tags-theme-variables();
+}

package/styles/components/tags/themes/_theme_builder.scss

@@ -0,0 +1 @@
+@mixin generate-tags-theme-variables() {}

package/styles/components/thumbnail/_base.scss

@@ -0,0 +1,32 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Card__Thumbnail--wrapper {
+  margin: 0;
+  padding-bottom: 100%;
+  position: relative;
+
+  &.Card__Thumbnail--wrapper-circular {
+    + .CardBody {
+      padding-top: 0;
+    }
+  }
+}
+
+.Card__Thumbnail {
+  background-position: center;
+  background-size: cover;
+  border-radius: var(--Card__Thumbnail__border-radius);
+  height: 100%;
+  position: absolute;
+  width: 100%;
+
+  &.Card__Thumbnail--circular {
+    border-radius: 50%;
+    left: 50%;
+    height: 5em;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    width: 5em;
+  }
+}

package/styles/components/thumbnail/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-toggle-theme-variables();
+}

package/styles/components/thumbnail/themes/_researcher.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  @include generate-toggle-theme-variables();
+}

package/styles/components/thumbnail/themes/_theme_builder.scss

@@ -0,0 +1,5 @@
+@mixin generate-toggle-theme-variables(
+  $Card__Thumbnail__border-radius: var(--radius--med) var(--radius--med) 0 0
+) {
+  --Card__Thumbnail__border-radius: #{$Card__Thumbnail__border-radius};
+}

package/styles/components/toggle/_base.scss

@@ -0,0 +1,83 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Toggle {
+  display: inline-block;
+  height: var(--Toggle__Switch____width);
+  margin: 0;
+  position: relative;
+  vertical-align: top;
+  width: auto;
+}
+
+.Toggle__Track {
+  // Track outline
+  border-radius: var(--Toggle__Track____radius);
+  box-shadow: var(--Toggle__Track____shadow);
+  display: inline-block;
+  height: var(--Toggle__Track____height);
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-indent: -5000px;
+  width: var(--Toggle__Track____width);
+
+  // Track fill
+  &::before {
+    background-color: var(--Toggle--unchecked__Track____bg-color);
+    border-radius: var(--Toggle__Track____radius);
+    content: '';
+    display: block;
+    height: var(--Toggle__Track____height);
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition: var(--Toggle__Track____transition-duration) ease-in-out;
+    width: var(--Toggle--unchecked__Track____fill-width);
+  }
+
+  // Switch
+  &::after {
+    background-color: var(--Toggle--unchecked__Switch____bg-color);
+    border-radius: var(--Toggle__Switch____radius);
+    box-shadow: var(--Toggle--unchecked__Switch____shadow);
+    content: '';
+    display: block;
+    height: var(--Toggle__Switch____height);
+    left: var(--Toggle__Switch____left);
+    position: absolute;
+    top: var(--Toggle__Switch____top);
+    transition: var(--Toggle__Switch____transition-duration) ease-in-out;
+    width: var(--Toggle__Switch____width);
+  }
+}
+
+.Toggle__Checkbox {
+  appearance: none;
+  left: -1000em;
+  font-size: inherit;
+  position: absolute;
+
+  &:checked + .Toggle__Track {
+    // Track fill
+    &::before {
+      background-color: var(--Toggle--checked__Track____bg-color);
+      width: var(--Toggle--checked__Track____fill-width);
+    }
+
+    // Switch
+    &::after {
+      background-color: var(--Toggle--checked__Switch____bg-color);
+      box-shadow: var(--Toggle--checked__Switch____shadow);
+      left: calc(var(--Toggle__Track____width) - var(--Toggle__Switch____width) - var(--Toggle__Switch____left));
+    }
+  }
+
+  &:disabled + .Toggle__Track {
+    opacity: .3;
+  }
+
+  &:focus + .Toggle__Track {
+    outline: var(--color--dscout) auto 5px;
+  }
+}

package/styles/components/toggle/themes/_bandit.scss

@@ -0,0 +1,26 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-toggle-theme-variables(
+    $Toggle__Switch____height: 1em,
+    $Toggle__Switch____width: 1em,
+    $Toggle__Switch____radius: var(--radius--pill),
+    $Toggle--unchecked__Switch____shadow: none,
+    $Toggle--checked__Switch____shadow: none,
+    $Toggle--unchecked__Switch____bg-color: var(--color--invert),
+    $Toggle--checked__Switch____bg-color: var(--color--invert),
+    $Toggle__Switch____transition-duration: var(--timing--click),
+    $Toggle__Switch____top: calc((var(--Toggle__Track____height) - var(--Toggle__Switch____height)) / 2),
+    $Toggle__Switch____left: var(--Toggle__Switch____top),
+
+    $Toggle__Track____height: 1.375em,
+    $Toggle__Track____width: 2em,
+    $Toggle__Track____radius: var(--radius--pill),
+    $Toggle__Track____shadow: none,
+    $Toggle--unchecked__Track____bg-color: var(--color--gray-3),
+    $Toggle--checked__Track____bg-color: var(--color--dscout),
+    $Toggle--unchecked__Track____fill-width: var(--Toggle__Track____width),
+    $Toggle--checked__Track____fill-width: var(--Toggle__Track____width),
+    $Toggle__Track____transition-duration: var(--timing--click),
+  );
+}

package/styles/components/toggle/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-toggle-theme-variables();
+}

package/styles/components/toggle/themes/_theme_builder.scss

@@ -0,0 +1,51 @@
+@mixin generate-toggle-theme-variables(
+  $Toggle__Switch____height: 1.5em,
+  $Toggle__Switch____width: 1.5em,
+  $Toggle__Switch____radius: var(--radius--pill),
+  $Toggle__Switch____transition-duration: var(--timing--click),
+  $Toggle__Switch____top: calc((var(--Toggle__Track____height) - var(--Toggle__Switch____height)) / 2),
+  $Toggle__Switch____left: var(--Toggle__Switch____top),
+
+  $Toggle--unchecked__Switch____shadow: (inset 0 0 0 1px rgba(var(--color--main-rgb), 0.2), 0 2px 4px rgba(var(--color--main-rgb), 0.15)),
+  $Toggle--unchecked__Switch____bg-color: var(--color--invert),
+
+  $Toggle--checked__Switch____shadow: (inset 0 0 0 1px var(--color--dscout), 0 2px 4px rgba(var(--color--main-rgb), 0.2)),
+  $Toggle--checked__Switch____bg-color: var(--color--invert),
+
+  $Toggle__Track____height: 1.5em,
+  $Toggle__Track____width: 2.5em,
+  $Toggle__Track____radius: var(--radius--pill),
+  $Toggle__Track____shadow: inset 0 0 0px 1px rgba(var(--color--main-rgb), 0.2),
+  $Toggle__Track____transition-duration: var(--timing--click),
+
+  $Toggle--unchecked__Track____bg-color: rgba(var(--color--dscout-rgb), 0),
+  $Toggle--unchecked__Track____fill-width: var(--Toggle__Switch____height),
+  
+  $Toggle--checked__Track____bg-color: rgba(var(--color--dscout-rgb), 1),
+  $Toggle--checked__Track____fill-width: var(--Toggle__Track____width),
+) {
+  --Toggle__Switch____height: #{$Toggle__Switch____height};
+  --Toggle__Switch____width: #{$Toggle__Switch____width};
+  --Toggle__Switch____radius: #{$Toggle__Switch____radius};
+  --Toggle__Switch____transition-duration: #{$Toggle__Switch____transition-duration};
+  --Toggle__Switch____top: #{$Toggle__Switch____top};
+  --Toggle__Switch____left: #{$Toggle__Switch____left};
+
+  --Toggle--unchecked__Switch____shadow: #{$Toggle--unchecked__Switch____shadow};
+  --Toggle--unchecked__Switch____bg-color: #{$Toggle--unchecked__Switch____bg-color};
+
+  --Toggle--checked__Switch____shadow: #{$Toggle--checked__Switch____shadow};
+  --Toggle--checked__Switch____bg-color: #{$Toggle--checked__Switch____bg-color};
+
+  --Toggle__Track____height: #{$Toggle__Track____height};
+  --Toggle__Track____width: #{$Toggle__Track____width};
+  --Toggle__Track____radius: #{$Toggle__Track____radius};
+  --Toggle__Track____shadow: #{$Toggle__Track____shadow};
+  --Toggle__Track____transition-duration: #{$Toggle__Track____transition-duration};
+
+  --Toggle--unchecked__Track____bg-color: #{$Toggle--unchecked__Track____bg-color};
+  --Toggle--checked__Track____bg-color: #{$Toggle--checked__Track____bg-color};
+  
+  --Toggle--unchecked__Track____fill-width: #{$Toggle--unchecked__Track____fill-width};
+  --Toggle--checked__Track____fill-width: #{$Toggle--checked__Track____fill-width};
+}

package/styles/components/tooltip/_base.scss

@@ -0,0 +1,127 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Tooltip__Container {
+  outline: none;
+  position: relative;
+}
+  
+.Tooltip {
+  display: block;
+  opacity: 0;
+  position: absolute;
+  transition-property: visibility, opacity;
+  transition-duration: .3s, .3s;
+  visibility: hidden;
+  z-index: 1;
+
+  &:after {
+    content: "";
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+  
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &--fixed-position {
+    position: fixed;
+  }    
+}
+  
+.Tooltip__Content {
+  background-color: var(--color--main);
+  border-radius: var(--radius--small);
+  color: var(--color--invert);
+  display: block;
+
+  &--invert {
+    background-color: var(--color--invert);
+    color: var(--color--main);
+  }
+}
+  
+  // === Placement === //
+  
+.Tooltip--bottom {
+  left: 50%;
+  padding-top: .75em;
+  top: 100%;
+  transform: translateX(-50%);
+
+  &.Tooltip--invert:after {
+    border-bottom-color: var(--color--invert);
+  }
+
+  &:after {
+    border-left: 0.5em solid transparent;
+    border-right: 0.5em solid transparent;
+    border-bottom: 0.5em solid var(--color--main);
+    bottom: calc(100% - .75em);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+  
+.Tooltip--left {
+  right: 100%;
+  padding-right: .75em;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &.Tooltip--invert:after {
+    border-left-color: var(--color--invert);
+  }
+
+  &:after {
+    border-bottom: 0.5em solid transparent;
+    border-left: 0.5em solid var(--color--main);
+    border-top: 0.5em solid transparent;
+    left: calc(100% - .75em);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+  
+.Tooltip--right {
+  left: 100%;
+  padding-left: .75em;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &.Tooltip--invert:after {
+    border-right-color: var(--color--invert);
+  }
+
+  &:after {
+    border-bottom: 0.5em solid transparent;
+    border-right: 0.5em solid var(--color--main);
+    border-top: 0.5em solid transparent;
+    top: 50%;
+    right: calc(100% - .75em);
+    transform: translateY(-50%);
+  }
+}
+  
+.Tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  padding-bottom: .75em;
+  transform: translateX(-50%);
+  
+  &.Tooltip--invert:after {
+    border-top-color: var(--color--invert);
+  }
+  
+  &:after {
+    border-left: 0.5em solid transparent;
+    border-right: 0.5em solid transparent;
+    border-top: 0.5em solid var(--color--main);
+    left: 50%;
+    top: calc(100% - .75em);
+    transform: translateX(-50%);
+  }
+}

package/styles/components/tooltip/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-tooltip-theme-variables();
+}

package/styles/components/tooltip/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-tooltip-theme-variables();
+}

package/styles/components/tooltip/themes/_theme_builder.scss

@@ -0,0 +1 @@
+@mixin generate-tooltip-theme-variables() {}