@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/components/_forms.scss

@@ -1,474 +0,0 @@
-@import '../variables';
-@import '../mixins';
-
-// reset
-
-input[type="email"],
-input[type="number"],
-input[type="password"],
-input[type="tel"],
-input[type="text"],
-input[type="url"],
-input[type="search"],
-input[type="range"],
-textarea,
-.input-element {
-  background-color: inherit;
-  border: initial;
-  color: inherit;
-  display: block;
-  font-family: inherit;
-  font-size: inherit;
-  width: 100%;
-  appearance: none;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-
-    
-input::-webkit-inner-spin-button {
-  opacity: 1;  // visible number controls in chrome
-}
-
-// range control
-
-input[type=range] {
-  align-items: center;
-  display: flex;
-
-  &:focus::-webkit-slider-thumb {
-    outline: $color--dscout auto 5px;
-  }
-}
-
-input[type=range]::-webkit-slider-thumb {
-  @include border;
-  background: $color--invert;
-  border-radius: $radius--circle;
-  box-shadow: 0 2px 4px rgba($color--main, 0.08);
-  cursor: pointer;
-  height: $space--icon-1x;
-  margin-top: $space--icon-1x * -0.5;
-  position: relative;
-  top: $space--xs * 0.5;
-  width: $space--icon-1x;
-  -webkit-appearance: none;
-}
-
-input[type=range]::-moz-range-thumb {
-  @include border;
-  background: $color--invert;
-  border-radius: $radius--circle;
-  box-shadow: 0 2px 4px rgba($color--main, 0.08);
-  cursor: pointer;
-  height: $space--icon-1x;
-  margin-top: $space--icon-1x * -0.5;
-  position: relative;
-  top: $space--xs * 0.5;
-  width: $space--icon-1x;
-  -webkit-appearance: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-  background: rgba($color--dscout, .5);
-  border-radius: $radius--pill;
-  cursor: pointer;
-  height: $space--xs;
-  width: 100%;
-}
-
-input[type=range]::-moz-range-track {
-  background: rgba($color--dscout, .5);
-  border-radius: $radius--pill;
-  cursor: pointer;
-  height: $space--xs;
-  width: 100%;
-}
-
-input[type=range]:disabled::-webkit-slider-thumb {
-  background:$color--disabled-s; 
-}
-
-input[type=range]:disabled::-moz-range-thumb {
-  background:$color--disabled-s; 
-}
-
-input[type=range]:disabled::-webkit-slider-runnable-track {
-  background:$color--disabled; 
-}
-
-input[type=range]:disabled::-moz-range-track {
-  background:$color--disabled; 
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  font-size: inherit;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.field {
-  margin: 0;
-}
-
-.disabled {
-  opacity: .3;
-
-  .toggle {
-    opacity: 1 !important;
-  }
-}
-
-fieldset {
-  border: none;
-  margin: 0;
-  margin-bottom: $space--base;
-  padding: 0;
-  transition: opacity $timing--fade, height $timing--fade;
-
-  &:disabled {
-    opacity: 0.3;
-
-    *:disabled {
-      opacity: 1 !important;
-    }
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.fieldset {
-  margin-bottom: $space--base;
-}
-
-label,
-select {
-  display: inline-block;
-}
-
-textarea {
-  height: $space--4;
-}
-
-// form buildup
-
-input[type="email"],
-input[type="number"],
-input[type="password"],
-input[type="tel"],
-input[type="text"],
-input[type="url"],
-input[type="search"],
-textarea,
-.input-element {
-  background-color: $color--field-bg;
-  border: 1px solid $color--field-b;
-  border-radius: $radius--tiny;
-  color: $color--field-text-filled;
-  line-height: $line-height--copy;
-  padding: $space--s;
-  transition: border $timing--hover, color $timing--hover;
-
-  &:disabled,
-  .disabled {
-    opacity: .3;
-    pointer-events: none;
-  }
-
-  &:focus,
-  &.focus {
-    background-color: $color--field-bg-focus;
-    border: 1px solid $color--field-b-focus;
-
-    &::placeholder {
-      color: $color--field-text-focus;
-      transition: color $timing--hover;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
-
-  &.filled {
-    background-color: $color--field-bg-filled;
-    border: 1px solid $color--field-b-filled;
-    color: $color--field-text-filled;
-
-    &:focus,
-    &.focus {
-      border: 1px solid $color--field-b-focus;
-    }
-  }
-
-  &.mini {
-    @include mini;
-  }
-
-  &::placeholder {
-    color: $color--field-text;
-    -webkit-font-smoothing: antialiased;
-  }
-}
-
-input[type="search"] {
-  appearance: textfield;
-  border-radius: $radius--pill;
-}
-
-input[type="search"]::-webkit-search-decoration {
-  appearance: none;
-}
-
-fieldset,
-.field {
-  position: relative;
-}
-
-.invalid {
-  input,
-  textarea,
-  .input-element,
-  .filled {
-    &:not(:focus) {
-      background-color: $color--field-bg-invalid;
-      border-color: $color--field-b-invalid;
-    }
-
-    &:focus + .message {
-      display: none;
-    }
-  }
-
-  .message {
-    color: $color--alert;
-    font-size: $font-size--s;
-    padding-left: $space--s;
-    padding-right: $space--s;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  &.inline .message {
-    right: auto;
-    top: 1em;
-  }
-}
-
-input[type=radio],
-input[type=checkbox] {
-  $checkbox-size: 1.250em;
-
-  appearance: none;
-  left: -1000em;
-  position: absolute;
-
-  & ~ .input-field {
-    background-clip: content-box;
-    border: 1px $color--field-b-radio solid;
-    display: block;
-    flex-shrink: 0;
-    height: $checkbox-size;
-    margin-bottom: 0;
-    padding: .375em;
-    transition: border $timing--hover, padding $timing--hover;
-    width: $checkbox-size;
-  }
-
-  & ~ .input-label {
-    display: block;
-    margin-bottom: 0;
-    padding-left: $space--m;
-    position: relative;
-    top: -.12em;
-  }
-
-  &:disabled ~ label {
-    cursor: default;
-    opacity: .3;
-  }
-
-  &:focus + label {
-    outline: $color--dscout auto 5px;
-  }
-}
-
-input[type=radio] {
-  & ~ .input-field {
-    border-radius: $radius--circle;
-  }
-
-  &:checked ~ .input-field {
-    background-color: $color--dscout;
-    border-color: $color--dscout;
-    padding: .188rem;
-  }
-}
-
-input[type=checkbox] {
-  & ~ .input-field {
-    border-radius: $radius--tiny;
-  }
-
-  &:checked ~ .input-field,
-  &:indeterminate ~ .input-field {
-    background-color: $color--dscout;
-    border-color: $color--dscout;
-    padding: 0;
-  }
-}
-
-input[type=checkbox] ~ svg {
-  display: none;
-}
-
-input[type=checkbox]:checked,
-input[type=checkbox]:indeterminate {
-  ~ svg {
-    display: inherit;
-  }
-}
-
-input[type=checkbox][readonly] {
-  ~ label {
-    opacity: 1;
-  }
-
-  ~ svg {
-    color: $color--disabled;
-    display: inherit;
-  }
-
-  & ~ .input-field,
-  &:checked ~ .input-field,
-  &:indeterminate ~ .input-field {
-    background-color: inherit;
-    border: none;
-  }
-
-  &:checked ~ svg,
-  &:indeterminate ~ svg {
-    color: $color--dscout;
-  }
-}
-
-.field-select {
-  position: relative;
-
-  &.with-label {
-    display: flex;
-  }
-
-  svg {
-    color: $color--invert;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-  }
-}
-
-form .buttons {
-  margin-top: $space--xl;
-}
-
-// inline fieldset
-
-fieldset.inline {
-  display: inline-block;
-
-  label {
-    padding-bottom: $space--s;
-    padding-right: $space--s;
-    padding-top: $space--s;
-  }
-
-  .field {
-    display: inline-block;
-
-    .message {
-      left: 100%;
-      top: 1em;
-      width: 100%;
-    }
-  }
-}
-
-// toggle
-
-.toggle {
-  $switch-diameter: 1.5em;
-  $track-width: 2.5em;
-
-  display: inline-block;
-  height: $switch-diameter;
-  margin: 0;
-  position: relative;
-  vertical-align: top;
-  width: auto;
-
-  input[type=checkbox] {
-    & + label {
-      border-radius: $radius--pill;
-      box-shadow: inset 0 0 0px 1px rgba($color--main, 0.2);
-      display: inline-block;
-      height: $switch-diameter;
-      margin: 0;
-      padding: 0;
-      position: relative;
-      text-indent: -5000px;
-      width: $track-width;
-
-      &::before {
-        background: rgba($color--dscout, 0);
-        border-radius: $radius--pill;
-        content: '';
-        display: block;
-        height: $switch-diameter;
-        left: 0;
-        position: absolute;
-        top: 0;
-        transition: $timing--click ease-in-out;
-        width: $switch-diameter;
-      }
-
-      &::after {
-        background: white;
-        border-radius: $radius--pill;
-        box-shadow: inset 0 0 0 1px rgba($color--main,0.2),
-                          0 2px 4px rgba($color--main, 0.15);
-        content: '';
-        display: block;
-        height: $switch-diameter;
-        left: 0px;
-        position: absolute;
-        top: 0;
-        transition: $timing--click ease-in-out;
-        width: $switch-diameter;
-      }
-    }
-
-    &:checked + label {
-      &::before {
-        background: $color--dscout;
-        width: $track-width;
-      }
-
-      &::after {
-        box-shadow: inset 0 0 0 1px $color--dscout,
-                    0 2px 4px rgba($color--main, 0.2);
-        left: $track-width - $switch-diameter;
-      }
-    }
-
-    &:focus + label {
-      outline: $color--dscout auto 5px;
-    }
-  }
-}

package/styles/components/_grid.scss

@@ -1,90 +0,0 @@
-@import '../variables';
-@import '../mixins';
-
-.gutter--s {
-  .row {
-    @media (min-width: 30em) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: -$space--s;
-      margin-right: -$space--s;
-    }
-
-    [class^="column"] {
-      @media (min-width: 30em) {
-        padding-left: $space--s;
-        padding-right: $space--s;
-      }
-    }
-  }
-}
-
-.gutter--xs {
-  .row {
-    @media (min-width: 30em) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: -$space--xs;
-      margin-right: -$space--xs;
-    }
-
-    [class^="column"] {
-      @media (min-width: 30em) {
-        padding-left: $space--xs;
-        padding-right: $space--xs;
-      }
-    }
-  }
-}
-
-.gutter--none {
-  .row {
-    @media (min-width: 30em) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: -$space--none;
-      margin-right: -$space--none;
-    }
-
-    [class^="column"] {
-      @media (min-width: 30em) {
-        padding-left: $space--none;
-        padding-right: $space--none;
-      }
-    }
-  }
-}
-
-.gutter--custom {
-  @include gutter(0.1em);
-}
-
-.row {
-  @media (min-width: 30em) {
-    display: flex;
-    flex-wrap: wrap;
-    margin-left: -$space--m;
-    margin-right: -$space--m;
-  }
-
-  > [class^="column"] {
-
-    @media (min-width: 30em) {
-      flex: 1;
-      padding-left: $space--m;
-      padding-right: $space--m;
-      margin-bottom: 0;
-    }
-  }
-
-  @media (min-width: 30em) {
-    @for $num from 1 through 10 {
-      @for $dem from $num through 10 {
-        > .column-#{$num}of#{$dem} {
-          flex-grow: 0;
-          flex-basis: percentage($num / $dem);
-        }
-      }
-    }
-  }
-}

package/styles/components/_menu.scss

@@ -1,183 +0,0 @@
-.menu {
-  ul,
-  li {
-    margin-bottom: 0;
-  }
-
-  .menu--divider {
-    border-top: 1px solid $color--line-s;
-    margin: $space--xs 0;
-    padding: 0;
-  }
-
-  &.contained {
-    background-color: $color--invert;
-    border-radius: $radius--med;
-    box-shadow: $shadow--s;
-    padding: $space--xs 0;
-  }
-}
-
-.menu--section {
-  margin-bottom: 0;
-}
-
-.menu--title {
-  font-size: $font-size--base;
-  font-weight: $font-weight--7;
-  margin: 0;
-}
-
-.menu--sub-title {
-  background-color: $color--min;
-  color: $color--dem;
-  font-size: $font-size--s;
-  font-weight: $font-weight--6;
-  letter-spacing: $tracked--looser;
-  margin: $space--xs 0;
-  padding: $space--m;
-  text-transform: uppercase;
-}
-
-.menu--item {
-  @include a--no-style;
-
-  color: inherit;
-  cursor: pointer;
-  display: block;
-  margin-bottom: 0;
-  position: relative;
-  transition: background $timing--hover;
-
-  &:hover {
-    background-color: $color--hover-bg;
-  }
-
-  &.menu--active:before {
-    background-color: $color--dscout;
-    content: '';
-    display: block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0px;
-    width: 2px;
-  }
-
-  &.menu--selected {
-    background-color: $color--hover-bg;
-  }
-
-  // Menu components do not at this time directly apply the .menu--dragging and
-  // .menu--ghost classes, as Particle does not provide sorting or drag-n-drop
-  // functionality. These classes exist for 3rd party sorting libraries to apply.
-
-  &.menu--dragging {
-    background-color: $color--invert;
-    box-shadow: $shadow;
-    // Opacity may be applied with inline styles, so we need to use !important
-    // to control the opacity of dragging menu items ourselves.
-    opacity: 1 !important;
-  }
-  
-  &.menu--ghost {
-    opacity: 0.3;
-    z-index: 1;
-  }
-}
-
-.menu--toggle {
-  color: inherit;
-  cursor: pointer;
-}
-
-// These styles normalize some default properties on buttons, but to keep the
-// specificity as low as possible, `button` is left out of the selector.
-.menu--item,
-.menu--toggle {
-  appearance: none;
-  background-color: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: $line-height--copy;
-  position: relative;
-  text-align: left;
-  width: 100%;
-
-  &:active {
-    color: inherit;
-  }
-
-  &[disabled],
-  &.disabled {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-}
-
-.menu--tight {
-  .menu--item,
-  .menu--title,
-  .menu--toggle,
-  .menu--sub-title {
-    padding: $space--s $space--m;
-  }
-
-  .menu-list--icon-first {
-    .menu--divider {
-      margin-left: grid-units(19)
-    }
-  }
-}
-
-.menu--loose {
-  .menu--item,
-  .menu--title,
-  .menu--toggle,
-  .menu--sub-title {
-    padding: $space--m $space--base;
-  }
-
-  .menu-list--icon-first {
-    .menu--divider {
-      margin-left: grid-units(22)
-    }
-  }
-}
-
-.menu-list--icon-first {
-  .menu--item {
-    align-items: center;
-    display: flex;
-
-    > .icon {
-      margin-right: $space--base;
-    }
-  }
-}
-
-.menu-list--striped {
-  .menu--item {
-    border-bottom: 1px solid $color--line-s;
-  }
-
-  li:last-child {
-    &.menu--item,
-    .menu--item {
-      border-bottom: none;
-    }
-  }
-}
-
-.menu--toggle {
-  .toggle--icon {
-    color: $color--dem;
-    transition: color $timing--hover;
-  }
-
-  &:hover {
-    .toggle--icon {
-      color: $color--dscout;
-    }
-  }
-}