polaris_view_helpers 0.0.3 → 0.0.4

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles.scss

@@ -0,0 +1,4 @@
+@import 'styles/foundation';
+@import 'styles/shared';
+@import 'styles/global';
+@import 'styles/components';

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components.scss

@@ -0,0 +1,51 @@
+@import 'components/AccountConnection';
+@import 'components/ActionList';
+@import 'components/Avatar';
+@import 'components/Badge';
+@import 'components/Banner';
+@import 'components/Breadcrumbs';
+@import 'components/Button';
+@import 'components/ButtonGroup';
+@import 'components/CalloutCard';
+@import 'components/Caption';
+@import 'components/Card';
+@import 'components/Checkbox';
+@import 'components/Choice';
+@import 'components/ChoiceList';
+@import 'components/Collapsible';
+@import 'components/ColorPicker';
+@import 'components/Connected';
+@import 'components/DatePicker';
+@import 'components/DescriptionList';
+@import 'components/DisplayText';
+@import 'components/EmptyState';
+@import 'components/FooterHelp';
+@import 'components/FormLayout';
+@import 'components/Heading';
+@import 'components/Icon';
+@import 'components/KeyboardKey';
+@import 'components/Label';
+@import 'components/Labelled';
+@import 'components/Layout';
+@import 'components/Link';
+@import 'components/List';
+@import 'components/Page';
+@import 'components/PageActions';
+@import 'components/Pagination';
+@import 'components/Popover';
+@import 'components/PositionedOverlay';
+@import 'components/RadioButton';
+@import 'components/ResourceList';
+@import 'components/Scrollable';
+@import 'components/Select';
+@import 'components/SettingAction';
+@import 'components/Stack';
+@import 'components/Subheading';
+@import 'components/Tabs';
+@import 'components/Tag';
+@import 'components/TextContainer';
+@import 'components/TextField';
+@import 'components/TextStyle';
+@import 'components/Thumbnail';
+@import 'components/Tooltip';
+@import 'components/VisuallyHidden';

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/AccountConnection.scss

@@ -0,0 +1,9 @@
+.Polaris-AccountConnection__TermsOfService {
+  margin-top: spacing(loose);
+}
+
+.Polaris-AccountConnection__Content {
+  > * + * {
+    margin-top: spacing(tight);
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ActionList.scss

@@ -0,0 +1,75 @@
+$image-size: rem(24px);
+$item-min-height: rem(40px);
+$item-vertical-padding: ($item-min-height - line-height(body)) / 2;
+
+.Polaris-ActionList {
+  list-style: none;
+  margin: 0;
+  padding: spacing(tight) 0;
+
+  + .Polaris-ActionList {
+    border-top: border();
+  }
+}
+
+.Polaris-ActionList__Actions {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.Polaris-ActionList__Title {
+  @include text-style-subheading;
+  padding: (spacing(tight) * 1.5) spacing();
+  border-bottom: border();
+  font-weight: 400;
+}
+
+.Polaris-ActionList__Item {
+  @include unstyled-button;
+  @include unstyled-link;
+  display: block;
+  width: 100%;
+  min-height: $item-min-height;
+  padding: $item-vertical-padding spacing();
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: color(indigo);
+    outline: none;
+    color: color(white);
+
+    .Polaris-ActionList__Image {
+      @include recolor-icon(color(sky));
+    }
+  }
+}
+
+.Polaris-ActionList__Content {
+  display: flex;
+  align-items: center;
+}
+
+.Polaris-ActionList__Image {
+  @include recolor-icon(color(ink, lightest));
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
+  height: $image-size;
+  width: $image-size;
+
+  // We need the negative margin to ensure that the image does not set
+  // the minimum height of the action item.
+  margin: (-0.5 * $image-size) spacing() (-0.5 * $image-size) 0;
+  background-size: cover;
+  background-position: center center;
+}
+
+.Polaris-ActionList__Text {
+  @include layout-flex-fix;
+  flex: 1 0 auto;
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Avatar.scss

@@ -0,0 +1,70 @@
+$small-size: rem(32px);
+$medium-size: rem(40px);
+$large-size: rem(60px);
+
+.Polaris-Avatar {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  background: color(teal);
+  border-radius: 50%;
+  user-select: none;
+}
+
+.Polaris-Avatar--sizeSmall {
+  height: $small-size;
+  width: $small-size;
+  font-size: rem(14px);
+}
+
+.Polaris-Avatar--sizeMedium {
+  height: $medium-size;
+  width: $medium-size;
+  font-size: rem(18px);
+}
+
+.Polaris-Avatar--sizeLarge {
+  height: $large-size;
+  width: $large-size;
+  font-size: rem(26px);
+}
+
+.Polaris-Avatar--styleOne {
+  background: color(teal);
+}
+
+.Polaris-Avatar--styleTwo {
+  background: color(red);
+}
+
+.Polaris-Avatar--styleThree {
+  background: color(orange);
+}
+
+.Polaris-Avatar--styleFour {
+  background: color(green);
+}
+
+.Polaris-Avatar--styleFive {
+  background: color(blue);
+}
+
+.Polaris-Avatar--styleSix {
+  background: color(purple);
+}
+
+.Polaris-Avatar--hasImage {
+  background: transparent;
+}
+
+.Polaris-Avatar__Image {
+  width: 100%;
+}
+
+.Polaris-Avatar__Initials {
+  line-height: 0;
+  color: color(white);
+  text-transform: uppercase;
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Badge.scss

@@ -0,0 +1,68 @@
+$height: rem(20px);
+$horizontal-padding: ($height / 2);
+
+$pip-size: rem(10px);
+$pip-spacing: ($height - $pip-size) / 2;
+
+@mixin pip-color($color) {
+  .Polaris-Badge__Pip {
+    color: $color;
+  }
+}
+
+.Polaris-Badge {
+  @include pip-color(color(ink, lightest));
+  display: inline-flex;
+  align-items: center;
+  padding: 0 $horizontal-padding;
+  background-color: color(sky);
+  border: 2px solid color(white);
+  border-radius: $height;
+  font-size: rem(13px);
+  line-height: $height;
+  color: color(ink, light);
+}
+
+.Polaris-Badge--statusSuccess {
+  @include pip-color(color(green, dark));
+  background-color: color(green, light);
+  color: color(green, text);
+}
+
+.Polaris-Badge--statusInfo {
+  @include pip-color(color(blue, dark));
+  background-color: color(blue, light);
+  color: color(blue, text);
+}
+
+.Polaris-Badge--statusAttention {
+  @include pip-color(color(yellow, dark));
+  background-color: color(yellow, light);
+  color: color(yellow, text);
+}
+
+.Polaris-Badge--statusWarning {
+  @include pip-color(color(orange, dark));
+  background-color: color(orange, light);
+  color: color(orange, text);
+}
+
+.Polaris-Badge--progressIncomplete .Polaris-Badge__Pip {
+  background: transparent;
+}
+
+.Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip {
+  background: linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent);
+}
+
+.Polaris-Badge--progressComplete .Polaris-Badge__Pip {
+  background: currentColor;
+}
+
+.Polaris-Badge__Pip {
+  height: $pip-size;
+  width: $pip-size;
+  margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding);
+  border: rem(2px) solid currentColor;
+  border-radius: 50%;
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Banner.scss

@@ -0,0 +1,140 @@
+$accent-height: 3px;
+$dismiss-size: rem(16px);
+$ribbon-flex-basis: rem(32px);
+$secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body));
+$secondary-action-horizontal-padding: 1.5 * spacing(tight);
+
+@mixin banner-colors($highlight, $background) {
+  background-color: $background;
+  box-shadow:
+    inset 0 $accent-height 0 0 $highlight,
+    inset shadow(transparent),
+    shadow();
+
+  &:focus {
+    box-shadow:
+      inset 0 $accent-height 0 0 $highlight,
+      inset 0 0 0 $accent-height $highlight,
+      shadow();
+  }
+}
+
+.Polaris-Banner {
+  @include banner-colors(color(ink, lighter), color(sky, light));
+  position: relative;
+  display: flex;
+  padding: spacing();
+  border-radius: 0 0 border-radius() border-radius();
+  transition: box-shadow duration() easing();
+
+  + .Polaris-Banner {
+    margin-top: spacing(loose);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.Polaris-Banner--hasDismiss {
+  padding-right: $dismiss-size + (2 * spacing());
+}
+
+.Polaris-Banner--statusSuccess {
+  @include banner-colors(color(green), color(green, lighter));
+}
+
+.Polaris-Banner--statusInfo {
+  @include banner-colors(color(teal), color(teal, lighter));
+}
+
+.Polaris-Banner--statusWarning {
+  @include banner-colors(color(yellow), color(yellow, lighter));
+}
+
+.Polaris-Banner--statusCritical {
+  @include banner-colors(color(red), color(red, lighter));
+}
+
+.Polaris-Banner__Ribbon {
+  flex: 0 0 $ribbon-flex-basis;
+  margin-right: spacing();
+}
+
+.Polaris-Banner__Heading {
+  margin-top: spacing(extra-tight);
+}
+
+.Polaris-Banner__Actions {
+  margin-top: spacing();
+}
+
+.Polaris-Banner__Content {
+  margin: spacing(tight) 0;
+}
+
+// We need pretty high specificity to do the descendant selectors
+// onto the text, which needs to be the relative positioned wrapper
+// so that the borders/ backgrounds do not extend outside of it.
+// stylelint-disable selector-max-specificity
+
+.Polaris-Banner__SecondaryAction {
+  @include unstyled-button;
+  @include unstyled-link;
+  margin: (-1 * $secondary-action-vertical-padding) (-0.5 * $secondary-action-horizontal-padding);
+  padding: $secondary-action-vertical-padding $secondary-action-horizontal-padding;
+  color: color(ink);
+
+  &:hover > .Polaris-Banner__Text::after {
+    opacity: 0.75;
+  }
+
+  &:active > .Polaris-Banner__Text::after {
+    opacity: 0;
+  }
+
+  &:focus > .Polaris-Banner__Text {
+    &::before {
+      opacity: 1;
+    }
+
+    &::after {
+      opacity: 0;
+    }
+  }
+}
+
+// stylelint-enable selector-max-specificity
+
+.Polaris-Banner__Text {
+  position: relative;
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+  }
+
+  &::before {
+    @include plain-button-backdrop;
+    opacity: 0;
+  }
+
+  &::after {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: block;
+    border: 1px solid currentColor;
+    opacity: 0.25;
+    will-change: opacity;
+    transition: opacity duration() easing();
+  }
+}
+
+.Polaris-Banner__Dismiss {
+  position: absolute;
+  top: $accent-height;
+  right: 0;
+  padding: (spacing(tight) * 1.5);
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Breadcrumbs.scss

@@ -0,0 +1,45 @@
+$vertical-padding: (control-height() - line-height(body)) / 2;
+$horizontal-padding: rem(10px);
+$icon-size: rem(20px);
+
+// The inset bounding box of the icon causes it not to be lined up with
+// the side of the container. This fixes that issue.
+$icon-horizontal-adjustment: rem(-3px);
+
+.Polaris-Breadcrumbs__Breadcrumb {
+  @include text-style-body;
+  @include text-emphasis-subdued;
+  display: inline-flex;
+  align-items: center;
+  min-height: control-height();
+  margin: 0 (-1 * $horizontal-padding);
+  padding: $vertical-padding $horizontal-padding;
+  border-radius: border-radius();
+  color: color(ink, lighter);
+  text-decoration: none;
+  will-change: background;
+  transition: background duration() easing();
+
+  &:hover,
+  &:active {
+    color: color(ink);
+
+    .Polaris-Breadcrumbs__Icon {
+      @include recolor-icon(color(ink));
+    }
+  }
+
+  &:focus {
+    background: plain-button-background();
+    outline: none;
+  }
+}
+
+.Polaris-Breadcrumbs__Icon {
+  @include recolor-icon(color(ink, lighter));
+  height: $icon-size;
+  width: $icon-size;
+
+  // We set negative top/ bottom margin so the icon never sets the height of the content.
+  margin: (-0.5 * $icon-size) spacing(extra-tight) (-0.5 * $icon-size) $icon-horizontal-adjustment;
+}