polaris_view_helpers 0.0.3 → 0.0.4

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

@@ -0,0 +1,228 @@
+$min-height: control-height();
+$vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2;
+$slim-min-height: rem(30px);
+$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
+$large-min-height: rem(44px);
+$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) / 2;
+
+.Polaris-Button {
+  @include recolor-icon(color(ink, lighter));
+  position: relative;
+  display: inline-block;
+  min-height: $min-height;
+  min-width: $min-height;
+  margin: 0;
+  padding: $vertical-padding spacing();
+  background: linear-gradient(to bottom, color(white), color(sky, lighter));
+  border: border(dark);
+  box-shadow: shadow(faint);
+  border-radius: border-radius();
+  line-height: 1;
+  color: color(ink);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition-property: background, border, box-shadow;
+  transition-duration: duration();
+  transition-timing-function: easing();
+
+  &:hover {
+    background: linear-gradient(to bottom, color(sky, lighter), color(sky, light));
+    border-color: color(sky, dark);
+  }
+
+  &:focus {
+    border-color: color(indigo);
+    outline: 0;
+    box-shadow: 0 0 0 1px color(indigo);
+  }
+
+  &:active {
+    // Same color gradient is necessary for background transitions
+    background: linear-gradient(to bottom, color(sky, light), color(sky, light));
+    border-color: color(sky, dark);
+    box-shadow:
+      0 0 0 0 transparent,
+      inset 0 1px 1px 0 rgba(color(ink, lighter), 0.1),
+      inset 0 1px 4px 0 rgba(color(ink, lighter), 0.2);
+  }
+
+  &.Polaris-Button--disabled {
+    @include recolor-icon(color(ink, lightest));
+    background: color(sky, light);
+    color: color(ink, lightest);
+  }
+}
+
+.Polaris-Button--primary {
+  @include button-filled(color(indigo), color(indigo, dark));
+  @include recolor-icon(color(white));
+
+  &.Polaris-Button--disabled {
+    @include recolor-icon(color(white));
+    background: color(indigo, light);
+    border-color: color(indigo, light);
+    box-shadow: none;
+    color: color(white);
+  }
+}
+
+.Polaris-Button--destructive {
+  @include button-filled(color(red), color(red, dark));
+  @include recolor-icon(color(white));
+}
+
+.Polaris-Button--outline {
+  @include button-outline(color(ink, lighter));
+
+  &.Polaris-Button--disabled {
+    background-color: color(white);
+    border-color: color(sky, dark);
+    color: color(ink, lightest);
+  }
+}
+
+.Polaris-Button--destructive.Polaris-Button--outline {
+  @include button-outline(color(red));
+  @include recolor-icon(color(red, dark));
+}
+
+.Polaris-Button--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+// The way the designs work, we need to do lots of reaching down to
+// target the content in pseudo-selectors, so we need higher specificity
+// in this case.
+// stylelint-disable selector-max-specificity
+
+.Polaris-Button--plain {
+  @include recolor-icon(color(blue));
+  margin: (-1 * $vertical-padding) (-1 * spacing());
+  background: transparent;
+  border: border(transparent);
+  box-shadow: none;
+  color: color(blue);
+
+  &:hover,
+  &:focus,
+  &:active {
+    @include recolor-icon(color(blue, dark));
+    background: transparent;
+    border: border(transparent);
+    box-shadow: none;
+    color: color(blue, dark);
+  }
+
+  &:focus > .Polaris-Button__Content::after {
+    opacity: 1;
+  }
+
+  &.Polaris-Button--disabled {
+    background: none;
+  }
+
+  &.Polaris-Button--sizeSlim {
+    margin-top: (-1 * $slim-vertical-padding);
+    margin-bottom: (-1 * $slim-vertical-padding);
+  }
+
+  &.Polaris-Button--sizeLarge {
+    margin: (-1 * $large-vertical-padding) (-1 * spacing(loose));
+  }
+
+  > .Polaris-Button__Content::after {
+    @include plain-button-backdrop;
+    content: '';
+    opacity: 0;
+  }
+
+  &.Polaris-Button--iconOnly {
+    @include recolor-icon(color(ink, lighter));
+    margin: -0.5 * ($min-height - icon-size());
+
+    &:focus,
+    &:active {
+      @include recolor-icon(color(ink, lighter));
+      background: plain-button-background();
+    }
+
+    &:hover,
+    &:active {
+      @include recolor-icon(color(ink));
+    }
+
+    > .Polaris-Button__Content::after {
+      display: none;
+    }
+
+    &.Polaris-Button--disabled {
+      @include recolor-icon(color(sky, dark));
+    }
+  }
+}
+
+// stylelint-enable selector-max-specificity
+
+.Polaris-Button--iconOnly {
+  padding-left: spacing(tight);
+  padding-right: spacing(tight);
+}
+
+.Polaris-Button--sizeSlim {
+  min-height: $slim-min-height;
+  min-width: $slim-min-height;
+  padding: $slim-vertical-padding spacing();
+
+  .Polaris-Button__Content {
+    @include when-typography-condensed {
+      font-size: font-size(body, large-screen);
+    }
+  }
+}
+
+.Polaris-Button--sizeLarge {
+  min-height: $large-min-height;
+  min-width: $large-min-height;
+  padding: $large-vertical-padding spacing(loose);
+}
+
+.Polaris-Button--fullWidth {
+  display: block;
+  width: 100%;
+}
+
+.Polaris-Button__Content {
+  @include text-style-body;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Polaris-Button__Icon {
+  @include text-style-body;
+  transition: color duration() easing();
+
+  &:first-child {
+    // This compensates for the typical icon used in buttons being
+    // inset within its bounding box.
+    margin-left: -2px;
+    margin-right: spacing(extra-tight);
+  }
+
+  &:last-child {
+    margin-left: spacing(extra-tight);
+
+    // This compensates for the disclosure icon, which is substantially
+    // inset within the viewbox (and makes it look like there is too much
+    // spacing on the right of the button)
+    margin-right: -5px;
+  }
+
+  &:only-child {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,67 @@
+$stacking-order: (
+  item: 10,
+  focused: 20,
+);
+
+$plain-horizontal-spacing: spacing(tight);
+$item-spacing: spacing(tight);
+
+.Polaris-ButtonGroup {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: (-1 * $item-spacing);
+  margin-left: (-1 * $item-spacing);
+}
+
+.Polaris-ButtonGroup--segmented {
+  display: flex;
+
+  // This is a violation of our component model, but it's the cleanest
+  // way to remove the border radii on connected elements.
+  // stylelint-disable declaration-no-important
+
+  .Polaris-ButtonGroup__Item {
+    position: relative;
+    z-index: z-index(item, $stacking-order);
+
+    &:not(:first-child) {
+      margin-left: -1px;
+    }
+
+    * {
+      border-radius: 0 !important;
+    }
+
+    &:first-child * {
+      border-top-left-radius: border-radius() !important;
+      border-bottom-left-radius: border-radius() !important;
+    }
+
+    &:last-child * {
+      border-top-right-radius: border-radius() !important;
+      border-bottom-right-radius: border-radius() !important;
+    }
+  }
+
+  // stylelint-enable declaration-no-important
+
+  .Polaris-ButtonGroup__Item--focused {
+    z-index: z-index(focused, $stacking-order);
+  }
+}
+
+.Polaris-ButtonGroup__Item {
+  margin-top: $item-spacing;
+  margin-left: $item-spacing;
+}
+
+.Polaris-ButtonGroup__Item--plain {
+  &:not(:first-child) {
+    margin-left: $item-spacing + $plain-horizontal-spacing;
+  }
+
+  &:not(:last-child) {
+    margin-right: $plain-horizontal-spacing;
+  }
+}

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

@@ -0,0 +1,27 @@
+.Polaris-CalloutCard {
+  display: flex;
+  align-items: center;
+}
+
+.Polaris-CalloutCard__Image {
+  display: none;
+  flex: 0 0 auto;
+  width: rem(100px);
+
+  @include page-content-when-not-fully-condensed {
+    display: block;
+    margin-left: spacing(loose);
+  }
+}
+
+.Polaris-CalloutCard__Content {
+  flex: 1 1 auto;
+}
+
+.Polaris-CalloutCard__Title {
+  margin-bottom: spacing(loose);
+}
+
+.Polaris-CalloutCard__Buttons {
+  margin-top: spacing(loose);
+}

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

@@ -0,0 +1,4 @@
+.Polaris-Caption {
+  @include text-style-caption;
+  margin: 0;
+}

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

@@ -0,0 +1,43 @@
+.Polaris-Card {
+  overflow: hidden;
+  background-color: color(white);
+  box-shadow: shadow();
+
+  + .Polaris-Card {
+    margin-top: spacing(loose);
+  }
+
+  @include page-content-when-not-partially-condensed {
+    border-radius: border-radius();
+  }
+}
+
+.Polaris-Card--subdued {
+  background-color: color(sky, lighter);
+}
+
+.Polaris-Card__Header {
+  padding: spacing(loose) spacing(loose) 0;
+}
+
+.Polaris-Card__Section {
+  padding: spacing(loose);
+
+  + .Polaris-Card__Section {
+    border-top: 1px solid color(sky);
+  }
+}
+
+.Polaris-Card__Section--subdued {
+  background-color: color(sky, lighter);
+}
+
+.Polaris-Card__SectionHeader {
+  padding-bottom: spacing(tight);
+}
+
+.Polaris-Card__Footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 spacing(loose) spacing(loose);
+}

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

@@ -0,0 +1,78 @@
+.Polaris-Checkbox {
+  position: relative;
+}
+
+.Polaris-Checkbox--error {
+  // The basic checked styles have more specificity than this, so need to
+  // basically duplicate that selector here, too.
+  // stylelint-disable-next-line selector-max-specificity
+  .Polaris-Checkbox__Input:checked + .Polaris-Checkbox__Backdrop,
+  .Polaris-Checkbox__Backdrop {
+    @include control-backdrop(error);
+  }
+
+  // We need to know if the input is focusing to change the border color.
+  // stylelint-disable-next-line selector-max-specificity
+  .Polaris-Checkbox__Input:focus + .Polaris-Checkbox__Backdrop,
+  .Polaris-Checkbox__Input:active + .Polaris-Checkbox__Backdrop {
+    @include control-backdrop(focused-error);
+  }
+
+  .Polaris-Checkbox__Icon {
+    @include recolor-icon(color(red, dark));
+  }
+}
+
+.Polaris-Checkbox__Input {
+  @include visually-hidden;
+
+  &:focus,
+  &:active,
+  &:checked {
+    + .Polaris-Checkbox__Backdrop {
+      background: color(indigo);
+    }
+  }
+
+  &:checked {
+    ~ .Polaris-Checkbox__Icon {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &:focus,
+  &:active {
+    + .Polaris-Checkbox__Backdrop {
+      @include control-backdrop(focused);
+    }
+  }
+
+  &:disabled {
+    + .Polaris-Checkbox__Backdrop {
+      @include control-backdrop(disabled);
+    }
+
+    ~ .Polaris-Checkbox__Icon {
+      @include recolor-icon(color(ink, lightest));
+    }
+  }
+}
+
+.Polaris-Checkbox__Backdrop {
+  @include control-backdrop;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.Polaris-Checkbox__Icon {
+  @include recolor-icon(color(indigo));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: 50% 50%;
+  transition: control-icon-transition();
+}