polaris_view_helpers 0.0.3 → 0.0.4

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

@@ -0,0 +1,18 @@
+.Polaris-Label {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.Polaris-Label--hidden {
+  @include visually-hidden;
+}
+
+.Polaris-Label__Text {
+  @include text-style-body;
+  display: block;
+  flex: 1 1 auto;
+  color: currentColor;
+  -webkit-tap-highlight-color: transparent;
+}

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

@@ -0,0 +1,24 @@
+.Polaris-Labelled--hidden > .Polaris-Labelled__LabelWrapper {
+  @include visually-hidden;
+}
+
+.Polaris-Labelled__LabelWrapper {
+  margin-bottom: spacing(extra-tight);
+}
+
+.Polaris-Labelled__HelpText {
+  @include text-style-body;
+  @include text-emphasis-subdued;
+  margin-top: spacing(extra-tight);
+}
+
+.Polaris-Labelled__Error {
+  display: flex;
+  margin-top: spacing(extra-tight);
+  color: color(red, dark);
+}
+
+.Polaris-Labelled__ErrorIcon {
+  @include recolor-icon(color(red));
+  margin: 0 spacing(extra-tight) 0 -2px;
+}

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

@@ -0,0 +1,69 @@
+$secondary-basis: layout-width(secondary, min);
+$primary-basis: layout-width(primary, min);
+$relative-size: $primary-basis / $secondary-basis;
+
+.Polaris-Layout {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-top: -1 * spacing(loose);
+  margin-left: -1 * spacing(loose);
+}
+
+.Polaris-Layout__Section {
+  @include layout-flex-fix;
+  flex: $relative-size $relative-size $primary-basis;
+  margin-top: spacing(loose);
+  margin-left: spacing(loose);
+  min-width: 51%;
+}
+
+.Polaris-Layout__Section--secondary {
+  flex: 1 1 $secondary-basis;
+  min-width: 0;
+}
+
+.Polaris-Layout__Item {
+  flex: 1 1 100%;
+}
+
+.Polaris-Layout__AnnotatedSection {
+  flex: 1 1 100%;
+  margin-top: spacing(loose);
+  margin-left: spacing(loose);
+}
+
+.Polaris-Layout__Section,
+.Polaris-Layout__AnnotatedSection {
+  + .Polaris-Layout__AnnotatedSection {
+    @include page-content-when-not-fully-condensed {
+      padding-top: spacing(loose);
+      border-top: border();
+    }
+  }
+}
+
+.Polaris-Layout__AnnotationWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -1 * spacing(loose);
+  margin-left: -1 * spacing(loose);
+}
+
+.Polaris-Layout__AnnotationContent {
+  flex: $relative-size $relative-size $primary-basis;
+  margin-top: spacing(loose);
+  margin-left: spacing(loose);
+}
+
+.Polaris-Layout__Annotation {
+  flex: 1 1 $secondary-basis;
+  margin-top: spacing(loose);
+  margin-left: spacing(loose);
+  padding: spacing(loose) spacing(loose) 0;
+
+  @include page-content-when-layout-not-stacked {
+    padding: spacing(loose) spacing(loose) spacing(loose) 0;
+  }
+}

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

@@ -0,0 +1,18 @@
+.Polaris-Link {
+  appearance: none;
+  display: inline;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: inherit;
+  color: color(blue);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+    color: color(blue, dark);
+  }
+}

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

@@ -0,0 +1,52 @@
+$number-size: rem(12px);
+$bullet-size: rem(18px);
+
+.Polaris-List {
+  list-style: none;
+  margin-top: 0;
+  padding-left: 0;
+
+  + .Polaris-List {
+    margin-top: spacing();
+  }
+}
+
+.Polaris-List--typeBullet {
+  > .Polaris-List__Item::before {
+    content: '\2022'; // bullet
+    font-size: $bullet-size;
+  }
+}
+
+.Polaris-List--typeNumber {
+  counter-reset: ordered-counter;
+
+  > .Polaris-List__Item::before {
+    @include text-emphasis-strong;
+    content: counter(ordered-counter, decimal) '.';
+    counter-increment: ordered-counter;
+    font-size: $number-size;
+    vertical-align: top;
+  }
+}
+
+.Polaris-List__Item {
+  position: relative;
+  margin-bottom: spacing(tight);
+  padding-left: spacing();
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+  }
+
+  .Polaris-List:first-child {
+    margin-top: spacing(tight);
+  }
+}

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

@@ -0,0 +1,125 @@
+$navigation-elements-height: rem(36px);
+$title-height: line-height(display-large, large-screen);
+$actions-vertical-spacing: rem(4px);
+$action-horizontal-padding: 1.5 * spacing(tight);
+
+$stacking-order: (
+  title: 10,
+  breadcrumbs: 20,
+);
+
+.Polaris-Page {
+  margin: 0 auto;
+  padding: 0;
+  max-width: layout-width(primary, max) + layout-width(secondary, max) + layout-width(inner-spacing);
+
+  @include page-content-when-not-fully-condensed {
+    padding: 0 spacing(loose);
+  }
+
+  @include page-content-when-not-partially-condensed {
+    padding: 0 spacing(extra-loose);
+  }
+}
+
+.Polaris-Page--fullWidth {
+  max-width: none;
+}
+
+.Polaris-Page__Content {
+  margin: spacing(loose) 0;
+}
+
+.Polaris-Page__Header {
+  margin: spacing(loose) 0;
+  padding: 0 spacing(loose);
+
+  @include page-content-when-not-fully-condensed {
+    padding: 0;
+  }
+}
+
+@include page-content-when-not-partially-condensed {
+  .Polaris-Page__Header--hasBreadcrumbs .Polaris-Page__PrimaryAction {
+    margin-top: -1 * ($navigation-elements-height + $title-height + $actions-vertical-spacing);
+  }
+
+  .Polaris-Page__Header--hasPagination .Polaris-Page__PrimaryAction {
+    margin-top: -1 * ($title-height + $actions-vertical-spacing);
+  }
+}
+
+.Polaris-Page__Navigation {
+  display: flex;
+  justify-content: space-between;
+}
+
+.Polaris-Page__Pagination {
+  margin-left: auto;
+}
+
+.Polaris-Page__Actions {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: 2 * $actions-vertical-spacing;
+
+  @include page-content-when-not-fully-condensed {
+    margin-top: $actions-vertical-spacing;
+  }
+}
+
+.Polaris-Page__SecondaryActions {
+  margin-right: auto;
+}
+
+.Polaris-Page__PrimaryAction {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.Polaris-Page__Action {
+  @include unstyled-button;
+  @include text-style-body;
+  min-height: control-height();
+  padding: 0 $action-horizontal-padding;
+  border-radius: border-radius();
+  color: color(ink, lighter);
+  will-change: background, color;
+  transition-property: background;
+  transition-duration: duration();
+  transition-timing-function: easing();
+
+  &:hover,
+  &:active {
+    color: color(ink);
+
+    .Polaris-Page__ActionIcon {
+      @include recolor-icon(color(ink));
+    }
+  }
+
+  &:focus,
+  &:active {
+    background: plain-button-background();
+  }
+
+  &:first-child {
+    margin-left: -1 * $action-horizontal-padding;
+  }
+
+  &:last-child {
+    margin-right: -1 * $action-horizontal-padding;
+  }
+}
+
+.Polaris-Page__ActionContent {
+  display: flex;
+  align-items: center;
+  min-height: control-height();
+}
+
+.Polaris-Page__ActionIcon {
+  @include recolor-icon(color(ink, lighter));
+  margin-right: spacing(extra-tight);
+}

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

@@ -0,0 +1,9 @@
+.Polaris-PageActions {
+  margin: 0 auto;
+  padding: spacing(loose);
+  border-top: border();
+
+  @include page-content-when-not-fully-condensed {
+    padding: spacing(loose) 0;
+  }
+}

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

@@ -0,0 +1,139 @@
+$min-height: control-height();
+$vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2;
+
+// This is the adjustment needed to get the icon to appear flush with other
+// content around it.
+$plain-horizontal-adjustment: rem(10px);
+
+$stacking-order: (
+  item: 10,
+  focused: 20,
+);
+
+.Polaris-Pagination {
+  display: inline-flex;
+
+  &:not(.Polaris-Pagination--plain) {
+    @include page-content-when-fully-condensed {
+      display: flex;
+      width: 100%;
+
+      .Polaris-Pagination__Button {
+        flex: 1 0 auto;
+      }
+    }
+  }
+}
+
+.Polaris-Pagination--plain {
+  .Polaris-Pagination__Button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    appearance: none;
+    box-shadow: none;
+
+    // We always want this to have a border-radius, so it needs to override
+    // the :first/:last-child selectors below
+    // stylelint-disable-next-line declaration-no-important
+    border-radius: border-radius() !important;
+
+    &:hover,
+    &:active {
+      @include recolor-icon(color(ink));
+      background: transparent;
+      border: none;
+      box-shadow: none;
+    }
+
+    &:focus {
+      background: plain-button-background();
+      border: none;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      @include recolor-icon(color(sky, dark));
+      background: transparent;
+      border: none;
+      box-shadow: none;
+    }
+
+    &:not(:first-child) {
+      margin-left: 0;
+    }
+
+    &:first-child {
+      margin-left: -1 * $plain-horizontal-adjustment;
+    }
+
+    &:last-child {
+      margin-right: -1 * $plain-horizontal-adjustment;
+    }
+  }
+}
+
+.Polaris-Pagination__Button {
+  @include recolor-icon(color(ink, lighter));
+  position: relative;
+  z-index: z-index(item, $stacking-order);
+  display: inline-block;
+  min-width: $min-height;
+  margin: 0;
+  padding: $vertical-padding spacing(tight);
+  background: linear-gradient(to bottom, color(white), color(sky, lighter));
+  border: border(dark);
+  border-radius: border-radius();
+  line-height: 1;
+  color: color(ink);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition-property: color, 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 {
+    z-index: z-index(focused, $stacking-order);
+    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);
+  }
+
+  &:disabled {
+    @include recolor-icon(color(ink, lightest));
+    background: color(sky, light);
+    color: color(ink, lightest);
+    cursor: default;
+  }
+
+  &:not(:first-child) {
+    margin-left: -1px;
+  }
+
+  &:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}