@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/components/modal/base.scss

@@ -0,0 +1,69 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Modal__Wrapper {
+  align-items: center;
+  background-color: var(--Modal__Wrapper____bg-color);
+  bottom: 0;
+  content: '';
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  margin: 0;
+  outline: none;
+  opacity: 1;
+  overflow-y: auto;
+  padding: var(--Modal__Wrapper____padding);
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition-duration: var(--timing--fade);
+  transition-property: background-color, opacity;
+  visibility: visible;
+  width: 100%;
+
+  &--hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition-property: opacity, visibility;
+  }
+
+  &--backdrop--coachmark {
+    background-color: rgba(var(--color--coachmark-rgb), .9);
+  }
+
+  &--backdrop--default {
+    background-color: var(--Modal__Wrapper____bg-color);
+  }
+
+  &--backdrop--dscout {
+    background-color: rgba(var(--color--dscout-rgb), 0.9);
+  }
+
+  &--backdrop--main {
+    background-color: rgba(var(--color--main-rgb), .7);
+  }
+
+  &--backdrop--success {
+    background-color: rgba(var(--color--success-rgb), .9);
+  }
+}
+
+.Modal {
+  box-shadow: var(--shadow--xl);
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+  max-width: var(--Modal____max-width);
+  width: 100%;
+
+  &--animation {
+    transform: translateY(0);
+    transition: transform var(--timing--rotate);
+  }
+  
+  &--hidden {
+    transform: translateY(-1.428em);
+  }
+}
+

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

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

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

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

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

@@ -0,0 +1,9 @@
+@mixin generate-modal-theme-variables(
+  $Modal__Wrapper____bg-color: rgba(var(--color--gray-5-rgb), 0.9),
+  $Modal__Wrapper____padding: 2em,
+  $Modal____max-width: 40em
+){
+  --Modal__Wrapper____bg-color: #{$Modal__Wrapper____bg-color};
+  --Modal__Wrapper____padding: #{$Modal__Wrapper____padding};
+  --Modal____max-width: #{$Modal____max-width};
+}

package/styles/components/pill/_base.scss

@@ -0,0 +1,42 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Pill {
+  background-color: var(--Pill____background-color);
+  border: 1px solid var(--Pill____border-color);
+  color: var(--Pill____color);
+  display: inline-block;
+  font-size: var(--font-size--base);
+  padding: 0.5em 1em;
+  position: relative;
+
+  @for $num from 0 through 9 {
+    &--part-#{$num} {
+      border-right-color: nth($part-colors, $num + 1);
+      border-right-width: var(--radius--med);
+    }
+  }
+
+  button {
+    &:first-child {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
+
+    + * {
+      margin-left: 1.5em;
+    }
+  }
+  
+  &:first-child {
+    border-bottom-left-radius: var(--Pill____border-radius);
+    border-top-left-radius: var(--Pill____border-radius);
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--Pill____border-radius);
+    border-top-right-radius: var(--Pill____border-radius);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,11 @@
+@mixin generate-pill-theme-variables(
+    $Pill____background-color: var(--color--invert),
+    $Pill____border-color: var(--color--gray-3),
+    $Pill____border-radius: var(--radius--small),
+    $Pill____color: var(--color--gray-1)
+) {
+    --Pill____background-color: #{$Pill____background-color};
+    --Pill____border-color: #{$Pill____border-color};
+    --Pill____border-radius: #{$Pill____border-radius};
+    --Pill____color: #{$Pill____color};
+}

package/styles/components/range/_base.scss

@@ -0,0 +1,85 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+// For cross-browser compatibility, selectors for vender-specific
+// range pseudo elements can't be combined. We're using mixins to avoid
+// repeating the CSS properties.
+
+@mixin Range__Track() {
+  background-color: var(--Range__Track____bg-color);
+  border-radius: var(--Range__Track____radius);
+  cursor: pointer;
+  height: var(--Range__Track____height);
+  width: 100%;
+}
+
+@mixin Range__Thumb() {
+  appearance: none;
+  border: var(--Range__Thumb____border);
+  background-color: var(--Range__Thumb____bg-color);
+  border-radius: var(--Range__Thumb____radius);
+  box-shadow: var(--Range__Thumb____shadow);
+  cursor: pointer;
+  height: var(--Range__Thumb____height);
+  width: var(--Range__Thumb____width);
+}
+
+@mixin Range--disabled__Thumb() {
+  background: var(--Range--disabled__Thumb____bg-color);
+  border: var(--Range--disabled__Thumb____border);
+}
+
+@mixin Range--disabled__Track() {
+  background: var(--Range--disabled__Track____bg-color);
+}
+
+.Range {
+  align-items: center;
+  appearance: none;
+  display: flex;
+  font-family: inherit;
+  font-size: inherit;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus::-webkit-slider-thumb {
+    outline: var(--color--dscout) auto 5px;
+  }
+}
+
+.Range::-webkit-slider-thumb {
+  @include Range__Thumb();
+
+  transform: translateY(calc(-50% + var(--Range__Track____height) / 2));
+}
+
+.Range::-moz-range-thumb {
+  @include Range__Thumb();
+}
+
+.Range::-webkit-slider-runnable-track {
+  @include Range__Track();
+}
+
+.Range::-moz-range-track {
+  @include Range__Track();
+}
+
+.Range:disabled::-webkit-slider-thumb {
+  @include Range--disabled__Thumb();
+}
+
+.Range:disabled::-moz-range-thumb {
+  @include Range--disabled__Thumb();
+}
+
+.Range:disabled::-webkit-slider-runnable-track {
+  @include Range--disabled__Track();
+}
+
+.Range:disabled::-moz-range-track {
+  @include Range--disabled__Track();
+}

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

@@ -0,0 +1,15 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  // The Bandit theme uses the default variables
+  @include generate-range-theme-variables(
+    $Range__Thumb____border: .375em solid var(--color--dscout),
+    $Range--disabled__Thumb____border: .375em solid var(--color--gray-2),
+    $Range__Thumb____height: 1.375em,
+    $Range__Thumb____width: 1.375em,
+    $Range__Thumb____shadow: none,
+
+    $Range__Track____bg-color: var(--color--dscout-outline),
+    $Range__Track____height: .375em
+  )
+}

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

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

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

@@ -0,0 +1,35 @@
+@mixin generate-range-theme-variables(
+  $Range__Thumb____bg-color: var(--color--invert),
+  $Range--disabled__Thumb____bg-color: var(--color--invert),
+
+  $Range__Thumb____border: 1px solid var(--color--gray-4),
+  $Range--disabled__Thumb____border: 1px solid var(--color--gray-4),
+
+  $Range__Thumb____radius: var(--radius--circle),
+  $Range__Thumb____shadow: 0 2px 4px rgba(var(--color--main-rgb), 0.08),
+  $Range__Thumb____height: 1.5625em,
+  $Range__Thumb____width: 1.5625em,
+
+  $Range__Track____bg-color: rgba(var(--color--dscout-rgb), .5),
+  $Range--disabled__Track____bg-color: var(--color--gray-3),
+  
+  $Range__Track____height: .25em,
+  $Range__Track____radius: var(--radius--pill),
+) {
+  --Range__Thumb____bg-color: #{$Range__Thumb____bg-color};
+  --Range--disabled__Thumb____bg-color: #{$Range--disabled__Thumb____bg-color};
+
+  --Range__Thumb____border: #{$Range__Thumb____border};
+  --Range--disabled__Thumb____border: #{$Range--disabled__Thumb____border};
+
+  --Range__Thumb____radius: #{$Range__Thumb____radius};
+  --Range__Thumb____shadow: #{$Range__Thumb____shadow};
+  --Range__Thumb____height: #{$Range__Thumb____height};
+  --Range__Thumb____width: #{$Range__Thumb____width};
+
+  --Range__Track____bg-color: #{$Range__Track____bg-color};
+  --Range--disabled__Track____bg-color: #{$Range--disabled__Track____bg-color};
+
+  --Range__Track____height: #{$Range__Track____height};
+  --Range__Track____radius: #{$Range__Track____radius};
+}

package/styles/components/segmented_controls/_base.scss

@@ -0,0 +1,71 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Segmented-Controls {
+  align-items: stretch;
+  background-color: var(--color--invert);
+  border-radius: var(--radius--med);
+  box-shadow: var(--shadow--s);
+  display: flex;
+  justify-content: center;
+}
+
+.Button__Control {
+  background-color: var(--color--invert);
+  border-radius: 0;
+  border-right: 1px solid var(--color--gray-5);
+  color: var(--color--gray-2);
+  flex: 1 0 0;
+  font-weight: var(--font-weight--7);
+  margin: 0;
+  padding: .75em 0;
+  text-align: center;
+  transition-property: background, color;
+  transition-duration: var(--timing--fade);
+  width: 100%;
+
+  &:hover {
+    background-color: var(--color--invert);
+    color: var(--color--main);
+  }
+  
+  &--active,
+  &--active:hover {
+    background-color: var(--color--main);
+    color: var(--color--invert);
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--radius--med);
+    border-bottom-left-radius: var(--radius--med);
+  }
+
+  &:last-child {
+    border-right: 0;
+    border-top-right-radius: var(--radius--med);
+    border-bottom-right-radius: var(--radius--med);
+  }
+}
+
+// This is a fallback for when the ButtonControl elements
+// are wrapped in another element, such as a TooltipContainer
+.Segmented-Controls {
+  *:first-child {
+    .Button__Control {
+      border-top-left-radius: var(--radius--med);
+      border-bottom-left-radius: var(--radius--med);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  
+  *:last-child {
+    .Button__Control {
+      border-right: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: var(--radius--med);
+      border-bottom-right-radius: var(--radius--med);
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  // The Bandit theme uses the default variables
+  @include generate-segmented-controls-theme-variables();
+}

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

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

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

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

package/styles/components/selectors/_base.scss

@@ -0,0 +1,153 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Selector {
+  position: relative;
+
+  &--with-label {
+    display: flex;
+  }
+}
+
+.Selector__Checkbox,
+.Selector__Radio {
+  appearance: none;
+  left: -1000em;
+  font-size: inherit;
+  position: absolute;
+
+  & ~ .Selector__Field {
+    background-clip: content-box;
+    display: block;
+    flex-shrink: 0;
+    margin-bottom: 0;
+  }
+
+  & ~ .Selector__Label {
+    display: block;
+    line-height: var(--Selector__Label____line-height);
+    margin-bottom: 0;
+    padding-left: var(--Selector__Label____padding-left);
+    position: relative;
+    // The label text needs to be bumped up slightly to optically align with
+    // the input. The exact amount depends on the input height and the label's
+    // line height.
+    top: var(--Selector__Label____top-offset);
+  }
+
+  ~ .Selector__Icon {
+    display: none;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    vertical-align: middle;
+  }
+
+  &:checked,
+  &:indeterminate {
+    ~ .Selector__Icon {
+      display: inherit;
+    }
+  }
+
+  &:disabled ~ .Selector__Label,
+  &:disabled ~ .Selector__Field {
+    cursor: default;
+    opacity: .3;
+  }
+
+  &:focus {
+    outline: none;
+
+    & + .Selector__Field {
+      outline: var(--color--dscout) auto 5px;
+    }
+  }
+}
+
+.Selector__Radio {
+  ~ .Selector__Field {
+    background-color: var(--Radio--unchecked____bg-color);
+    border: solid var(--Radio--unchecked____border-width) var(--Radio--unchecked____border-color);
+    border-radius: var(--Radio____radius);
+    height: var(--Radio____size);
+    padding: var(--Radio--unchecked____padding);
+    transition: border var(--Radio____transition-duration), padding var(--Radio____transition-duration);
+    width: var(--Radio____size);
+  }
+
+  ~ .Selector__Icon {
+    color: var(--Radio--unchecked__Icon____color);
+    height: var(--Radio____size);
+    width: var(--Radio____size);
+  }
+
+  &:checked {
+    ~ .Selector__Field {
+      background-color: var(--Radio--checked____bg-color);
+      border-color: var(--Radio--checked____border-color);
+      border-width: var(--Radio--checked____border-width);
+      padding: var(--Radio--checked____padding);
+    }
+
+    ~ .Selector__Icon {
+      color: var(--Radio--checked__Icon____color);
+    }
+  }
+}
+
+.Selector__Checkbox {
+  ~ .Selector__Field {
+    background-color: var(--Checkbox--unchecked____bg-color);
+    border: solid var(--Checkbox--unchecked____border-width) var(--Checkbox--unchecked____border-color);
+    border-radius: var(--Checkbox____radius);
+    height: var(--Checkbox____size);
+    padding: var(--Checkbox--unchecked____padding);
+    transition: border var(--Checkbox____transition-duration), padding var(--Checkbox____transition-duration);
+    width: var(--Checkbox____size);
+  }
+
+  ~ .Selector__Icon {
+    color: var(--Checkbox--unchecked__Icon____color);
+    height: var(--Checkbox____size);
+    width: var(--Checkbox____size);
+  }
+
+  &:checked, &:indeterminate {
+    ~ .Selector__Field {
+      background-color: var(--Checkbox--checked____bg-color);
+      border-color: var(--Checkbox--checked____border-color);
+      border-width: var(--Checkbox--checked____border-width);
+      padding: var(--Checkbox--checked____padding);
+    }
+
+    ~ .Selector__Icon {
+      color: var(--Checkbox--checked__Icon____color);
+    }
+  }
+
+  &[readonly] {
+    ~ .Selector__Label {
+      opacity: 1;
+    }
+
+    ~ .Selector__Icon {
+      color: var(--Checkbox--readonly--unchecked__Icon____color);
+      display: inherit;
+    }
+
+    ~ .Selector__Field,
+    &:checked ~ .Selector__Field,
+    &:indeterminate ~ .Selector__Field {
+      background-color: inherit;
+      border: none;
+    }
+
+    &:checked, &:indeterminate {
+      ~ .Selector__Icon {
+        color: var(--Checkbox--readonly--checked__Icon____color);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-selector-theme-variables(
+    $Selector__Label____top-offset: -.05em,
+
+    $Radio--unchecked____bg-color: transparent,
+    $Radio--checked____bg-color: var(--color--dscout),
+
+    $Radio--unchecked____border-color: var(--color--gray-3),
+    $Radio--checked____border-color: var(--color--dscout),
+
+    $Radio--unchecked____border-width: 2px,
+    $Radio--checked____border-width: 2px,
+
+    $Radio--unchecked____padding: .375em,
+    $Radio--checked____padding: 0,
+
+    $Radio____radius: var(--radius--circle),
+
+    $Radio____size: 1.375em,
+
+    $Radio____transition-duration: var(--timing--hover),
+
+    $Radio--unchecked__Icon____color: transparent,
+    $Radio--checked__Icon____color: var(--color--invert),
+
+    $Checkbox--unchecked____bg-color: transparent,
+    $Checkbox--checked____bg-color: var(--color--dscout),
+
+    $Checkbox--unchecked____border-color: var(--color--gray-3),
+    $Checkbox--checked____border-color: var(--color--dscout),
+
+    $Checkbox--unchecked____border-width: 2px,
+    $Checkbox--checked____border-width: 2px,
+
+    $Checkbox--unchecked____padding: .375em,
+    $Checkbox--checked____padding: 0,
+
+    $Checkbox____radius: .375em,
+
+    $Checkbox____size: 1.375em,
+
+    $Checkbox____transition-duration: var(--timing--hover),
+
+    $Checkbox--unchecked__Icon____color: transparent,
+    $Checkbox--checked__Icon____color: var(--color--invert)
+  );
+}

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

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