polaris_view_helpers 0.0.3 → 0.0.4

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

@@ -0,0 +1,8 @@
+@import 'shared/accessibility';
+@import 'shared/breakpoints';
+@import 'shared/buttons';
+@import 'shared/controls';
+@import 'shared/icons';
+@import 'shared/layout';
+@import 'shared/links';
+@import 'shared/typography';

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

@@ -0,0 +1,16 @@
+/// Used to hide an element visually, but keeping it accessible for
+/// accessibility tools.
+
+@mixin visually-hidden {
+  // Need to make sure we override any existing styles.
+  // stylelint-disable declaration-no-important
+  position: absolute !important;
+  top: 0;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  overflow: hidden !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  // stylelint-enable declaration-no-important
+}

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

@@ -0,0 +1,127 @@
+$has-nav: false !default;
+
+$stacked-content: em(layout-width(primary, min) + layout-width(secondary, min) + layout-width(inner-spacing));
+$not-condensed-content: em(layout-width(page-content, not-condensed));
+$partially-condensed-content: em(layout-width(page-content, partially-condensed));
+
+$not-condensed-outer-spacing: em(2 * layout-width(outer-spacing, max));
+$partially-condensed-outer-spacing: em(2 * layout-width(outer-spacing, min));
+
+$not-condensed-min-page: $not-condensed-content + $not-condensed-outer-spacing;
+$partially-condensed-min-page: $partially-condensed-content + $partially-condensed-outer-spacing;
+
+$nav-size: em(layout-width(nav));
+$nav-min-window: em(layout-width(page-with-nav));
+
+@function breakpoint($value) {
+  @return em($value);
+}
+
+// These end up being too awkward because they are already multiline.
+// stylelint-disable media-query-list-comma-newline-after
+
+@mixin page-content-breakpoint-before($size) {
+  $size: breakpoint($size);
+
+  @if $has-nav {
+    @if $size < $partially-condensed-content {
+      @media
+        (max-width: #{min($nav-min-window, $size)}),
+        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size}) { @content; }
+    } @else if $size < $not-condensed-content {
+      @media
+        (max-width: #{min($nav-min-window, $size + $partially-condensed-outer-spacing)}),
+        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size + $not-condensed-outer-spacing}) { @content; }
+    } @else {
+      @media
+        (max-width: #{min($nav-min-window, $size + $partially-condensed-outer-spacing)}),
+        (min-width: #{$nav-min-window}) and (max-width: #{$nav-size + $size + $not-condensed-outer-spacing}) { @content; }
+    }
+  } @else {
+    @if $size < $partially-condensed-content {
+      @media (max-width: #{$size}) { @content; }
+    } @else if $size < $not-condensed-content {
+      @media (max-width: #{$size + $partially-condensed-outer-spacing}) { @content; }
+    } @else {
+      @media (max-width: #{$size + $not-condensed-outer-spacing}) { @content; }
+    }
+  }
+}
+
+@mixin page-content-breakpoint-after($size) {
+  $size: breakpoint($size);
+
+  @if $has-nav {
+    @if $size < $partially-condensed-content {
+      @media
+        (max-width: #{$nav-min-window}) and (min-width: #{$size}),
+        (min-width: #{$nav-size + $size}) { @content; }
+    } @else if $size < $not-condensed-content {
+      @media
+        (max-width: #{$nav-min-window}) and (min-width: #{$size + $partially-condensed-outer-spacing}),
+        (min-width: #{$nav-size + $size + $partially-condensed-outer-spacing}) { @content; }
+    } @else {
+      @media
+        (max-width: #{$nav-min-window}) and (min-width: #{$size + $not-condensed-outer-spacing}),
+        (min-width: #{$nav-size + $size + $not-condensed-outer-spacing}) { @content; }
+    }
+  } @else {
+    @if $size < $partially-condensed-content {
+      @media (min-width: #{$size}) { @content; }
+    } @else if $size < $not-condensed-content {
+      @media (min-width: #{$size + $partially-condensed-outer-spacing}) { @content; }
+    } @else {
+      @media (min-width: #{$size + $not-condensed-outer-spacing}) { @content; }
+    }
+  }
+}
+
+// stylelint-enable media-query-list-comma-newline-after
+
+@mixin breakpoint-after($breakpoint) {
+  @media (min-width: #{breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin breakpoint-before($breakpoint) {
+  @media (max-width: #{breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin page-content-when-layout-stacked() {
+  @include page-content-breakpoint-before($stacked-content) {
+    @content;
+  }
+}
+
+@mixin page-content-when-layout-not-stacked() {
+  @include page-content-breakpoint-after($stacked-content) {
+    @content;
+  }
+}
+
+@mixin page-content-when-partially-condensed() {
+  @include page-content-breakpoint-before($not-condensed-content) {
+    @content;
+  }
+}
+
+@mixin page-content-when-not-partially-condensed() {
+  @include page-content-breakpoint-after($not-condensed-content) {
+    @content;
+  }
+}
+
+@mixin page-content-when-fully-condensed() {
+  @include page-content-breakpoint-before($partially-condensed-content) {
+    @content;
+  }
+}
+
+@mixin page-content-when-not-fully-condensed() {
+  @include page-content-breakpoint-after($partially-condensed-content) {
+    @content;
+  }
+}

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

@@ -0,0 +1,87 @@
+@mixin button-filled($button-color, $focus-color, $outline-color: null) {
+  $border-color: darken($button-color, 10%);
+  $active-color: darken($button-color, 15%);
+
+  background: linear-gradient(to bottom, lighten($button-color, 2%), darken($button-color, 2%));
+  border-color: $border-color;
+  box-shadow:
+    inset 0 1px 0 0 lighten($button-color, 3%),
+    shadow(faint),
+    0 0 0 0 transparent;
+  color: color(white);
+
+  &:hover {
+    background: linear-gradient(to bottom, $button-color, darken($button-color, 5%));
+    border-color: $border-color;
+  }
+
+  &:focus {
+    border-color: $focus-color;
+    box-shadow:
+      inset 0 1px 0 0 lighten($button-color, 5%),
+      shadow(faint),
+      0 0 0 1px $focus-color;
+  }
+
+  &:active {
+    background: linear-gradient(to bottom, $border-color, $border-color);
+    border-color: $active-color;
+    box-shadow:
+      inset 0 0 0 0 transparent,
+      shadow(faint),
+      0 0 1px 0 $active-color;
+  }
+}
+
+@mixin button-outline($outline-color) {
+  background: transparent;
+  border-color: rgba($outline-color, 0.4);
+  box-shadow: none;
+  color: darken($outline-color, 20%);
+
+  &:hover {
+    background: rgba($outline-color, 0.05);
+    border-color: rgba($outline-color, 0.4);
+  }
+
+  &:focus {
+    border-color: rgba($outline-color, 0.8);
+    box-shadow: 0 0 0 1px rgba($outline-color, 0.8);
+  }
+
+  &:active {
+    background: rgba($outline-color, 0.1);
+    box-shadow: none;
+  }
+}
+
+@function plain-button-background() {
+  @return rgba(color(ink), 0.1);
+}
+
+@mixin plain-button-backdrop() {
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  left: -5px;
+  right: -5px;
+  display: block;
+  background: plain-button-background();
+  border-radius: border-radius();
+  transition: opacity duration() easing();
+}
+
+@mixin unstyled-button() {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+}

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

@@ -0,0 +1,59 @@
+@function control-height() {
+  @return rem(36px);
+}
+
+@function control-vertical-padding() {
+  @return (control-height() - line-height(input) - rem(2px)) / 2;
+}
+
+@function control-icon-transition() {
+  @return transform duration(fast) easing(in);
+}
+
+@mixin control-backdrop($style: base) {
+  @if $style == base {
+    background: color(sky, dark);
+    border: border(transparent);
+    box-shadow:
+      0 0 0 1px transparent,
+      shadow(faint);
+    border-radius: border-radius();
+    transition-property: box-shadow, background;
+    transition-duration: duration();
+    transition-timing-function: easing();
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: block;
+      background: linear-gradient(to bottom, color(white), color(sky, lighter));
+      border-radius: calc(#{border-radius()} - 1px);
+    }
+  } @else if $style == focused {
+    background: color(indigo);
+    box-shadow:
+      0 0 0 1px color(indigo),
+      shadow(transparent);
+
+    &::after { background: color(white); }
+  } @else if $style == error {
+    background: color(red);
+    box-shadow: 0 0 0 1px transparent;
+
+    &::after { background: color(red, lighter); }
+  } @else if $style == disabled {
+    background: color(sky);
+    box-shadow: none;
+
+    &::after { background: color(sky, lighter); }
+  } @else if $style == focused-error {
+    background: color(indigo);
+    box-shadow: 0 0 0 1px color(indigo);
+
+    &::after { background: color(red, lighter); }
+  }
+}

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

@@ -0,0 +1,11 @@
+@function icon-size() {
+  @return rem(20px);
+}
+
+@mixin recolor-icon($main-color, $secondary-color: null) {
+  fill: $main-color;
+
+  @if $secondary-color != null {
+    color: $secondary-color;
+  }
+}

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

@@ -0,0 +1,8 @@
+/// To be used on flex items. Resolves some common layout issues, such as
+/// text truncation not respecting padding or breaking out of container.
+/// https://css-tricks.com/flexbox-truncated-text/
+
+@mixin layout-flex-fix {
+  min-width: 0;
+  max-width: 100%;
+}

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

@@ -0,0 +1,8 @@
+@mixin unstyled-link() {
+  color: inherit;
+  text-decoration: none;
+
+  &:visited {
+    color: inherit;
+  }
+}

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

@@ -0,0 +1,128 @@
+$typography-condensed: em(640px);
+
+@mixin when-typography-not-condensed {
+  @include breakpoint-after($typography-condensed) { @content; }
+}
+
+@mixin when-typography-condensed {
+  @include breakpoint-before($typography-condensed) { @content; }
+}
+
+@mixin text-style-caption {
+  font-size: font-size(caption);
+  font-weight: 400;
+  line-height: line-height(caption);
+
+  @include when-typography-not-condensed {
+    font-size: font-size(caption, large-screen);
+    line-height: line-height(caption, large-screen);
+  }
+}
+
+@mixin text-style-heading {
+  font-size: font-size(heading);
+  font-weight: 600;
+  line-height: line-height(heading);
+
+  @include when-typography-not-condensed {
+    font-size: font-size(heading, large-screen);
+  }
+}
+
+@mixin text-style-subheading {
+  font-size: font-size(subheading);
+  font-weight: 700;
+  line-height: line-height(subheading);
+  text-transform: uppercase;
+
+  @include when-typography-not-condensed {
+    font-size: font-size(subheading, large-screen);
+  }
+}
+
+@mixin text-style-input {
+  font-size: font-size(input);
+  font-weight: 400;
+  line-height: line-height(input);
+
+  text-transform: initial;
+  letter-spacing: initial;
+
+  @include when-typography-not-condensed {
+    font-size: font-size(input, large-screen);
+  }
+}
+
+@mixin text-style-body {
+  font-size: font-size(body);
+  font-weight: 400;
+  line-height: line-height(body);
+
+  text-transform: initial;
+  letter-spacing: initial;
+
+  @include when-typography-not-condensed {
+    font-size: font-size(body, large-screen);
+  }
+}
+
+@mixin text-style-display-x-large {
+  font-size: font-size(display-x-large);
+  font-weight: 600;
+  line-height: line-height(display-x-large);
+
+  @include when-typography-not-condensed {
+    font-size: font-size(display-x-large, large-screen);
+    line-height: line-height(display-x-large, large-screen);
+  }
+}
+
+@mixin text-style-display-large {
+  font-size: font-size(display-large);
+  font-weight: 600;
+  line-height: line-height(display-large);
+
+  @include when-typography-not-condensed {
+    font-size: font-size(display-large, large-screen);
+    line-height: line-height(display-large, large-screen);
+  }
+}
+
+@mixin text-style-display-medium {
+  font-size: font-size(display-medium);
+  font-weight: 400;
+  line-height: line-height(display-medium);
+
+  @include when-typography-not-condensed {
+    font-size: font-size(display-medium, large-screen);
+    line-height: line-height(display-medium, large-screen);
+  }
+}
+
+@mixin text-style-display-small {
+  font-size: font-size(display-small);
+  font-weight: 400;
+  line-height: line-height(display-small);
+
+  @include when-typography-not-condensed {
+    font-size: font-size(display-small, large-screen);
+    line-height: line-height(display-small, large-screen);
+  }
+}
+
+@mixin text-emphasis-placeholder() {
+  color: color(ink, lightest);
+}
+
+@mixin text-emphasis-subdued($for-background: null) {
+  color: color(ink, lighter, $for-background: $for-background);
+}
+
+@mixin text-emphasis-strong {
+  font-weight: 700;
+}
+
+@mixin text-emphasis-normal($for-background: null) {
+  font-weight: 400;
+  color: color(ink, $for-background: $for-background);
+}