3 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/src/resources/footer-help.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/checkbox.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/ChoiceList.scss:
--------------------------------------------------------------------------------
1 | .Polaris-ChoiceList {
2 | margin: 0;
3 | padding: 0;
4 | border: none;
5 | }
6 |
7 | .Polaris-ChoiceList--titleHidden > .Polaris-ChoiceList__Title {
8 | @include visually-hidden;
9 | }
10 |
11 | .Polaris-ChoiceList__Choices {
12 | list-style: none;
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | .Polaris-ChoiceList__Title {
18 | @include text-style-body;
19 | display: block;
20 | margin: 0 0 spacing(extra-tight);
21 | padding: 0;
22 | }
23 |
--------------------------------------------------------------------------------
/src/resources/icons/checkmark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/icons/refresh.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/avatars/index.js:
--------------------------------------------------------------------------------
1 | export {default as avatarOne} from './avatar-1.svg';
2 | export {default as avatarTwo} from './avatar-2.svg';
3 | export {default as avatarThree} from './avatar-3.svg';
4 | export {default as avatarFour} from './avatar-4.svg';
5 | export {default as avatarFive} from './avatar-5.svg';
6 | export {default as avatarSix} from './avatar-6.svg';
7 | export {default as avatarSeven} from './avatar-7.svg';
8 | export {default as avatarEight} from './avatar-8.svg';
9 | export {default as avatarNine} from './avatar-9.svg';
10 |
--------------------------------------------------------------------------------
/test/test-names.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | function init() {
3 |
4 | Vue.use(PolarisVue, {
5 | componentNameFormat: function(polarisName) {
6 | return 'Pol'+polarisName;
7 | }
8 | });
9 |
10 | var root = new Vue({
11 | el: '#app'
12 | });
13 | }
14 |
15 |
16 | if (document.readyState != 'loading') {
17 | init();
18 | } else {
19 | document.addEventListener('DOMContentLoaded', init);
20 | }
21 |
22 | })();
--------------------------------------------------------------------------------
/src/resources/banner/flag.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/PolarisLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/SkeletonBodyText.scss:
--------------------------------------------------------------------------------
1 | $body-text-height: rem(8px);
2 | $body-text-line-height: rem(12px);
3 | $body-text-last-line-width: 80%;
4 |
5 | .Polaris-SkeletonBodyText__SkeletonBodyTextContainer {
6 | @include skeleton-shimmer;
7 | }
8 |
9 | .Polaris-SkeletonBodyText {
10 | height: $body-text-height;
11 |
12 | @include skeleton-content;
13 |
14 | &:last-child:not(:first-child) {
15 | width: $body-text-last-line-width;
16 | }
17 |
18 | + .Polaris-SkeletonBodyText {
19 | margin-top: $body-text-line-height;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/PolarisImage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
25 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/shared/accessibility.scss:
--------------------------------------------------------------------------------
1 | /// Used to hide an element visually, but keeping it accessible for
2 | /// accessibility tools.
3 |
4 | @mixin visually-hidden {
5 | // Need to make sure we override any existing styles.
6 | // stylelint-disable declaration-no-important
7 | position: absolute !important;
8 | top: 0;
9 | clip: rect(1px, 1px, 1px, 1px) !important;
10 | overflow: hidden !important;
11 | height: 1px !important;
12 | width: 1px !important;
13 | padding: 0 !important;
14 | border: 0 !important;
15 | // stylelint-enable declaration-no-important
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/OptionalTag.vue:
--------------------------------------------------------------------------------
1 |
2 |
25 |
--------------------------------------------------------------------------------
/src/resources/icons/embed.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/CalloutCard.scss:
--------------------------------------------------------------------------------
1 | .Polaris-CalloutCard {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .Polaris-CalloutCard__Image {
7 | display: none;
8 | flex: 0 0 auto;
9 | width: rem(100px);
10 |
11 | @include page-content-when-not-fully-condensed {
12 | display: block;
13 | margin-left: spacing(loose);
14 | }
15 | }
16 |
17 | .Polaris-CalloutCard__Content {
18 | flex: 1 1 auto;
19 | }
20 |
21 | .Polaris-CalloutCard__Title {
22 | margin-bottom: spacing(loose);
23 | }
24 |
25 | .Polaris-CalloutCard__Buttons {
26 | margin-top: spacing(loose);
27 | }
28 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/foundation/z-index.scss:
--------------------------------------------------------------------------------
1 | $global-elements: (
2 | content: 100,
3 | overlay: 400,
4 | );
5 |
6 | /// Returns the z-index of the specified element.
7 | /// @param {String} $element - The key for the element.
8 | /// @param {Map} $context - The map in which to search for the element.
9 | /// @return {Number} The z-index for the element.
10 |
11 | @function z-index($element, $context: $global-elements) {
12 | $index: map-get($context, $element);
13 |
14 | @if $index {
15 | @return $index;
16 | } @else {
17 | @error 'z-index `#{$element}` in `#{$context}` not found.';
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/PolarisDescriptionList.vue:
--------------------------------------------------------------------------------
1 |
2 | -
3 |
4 |
- 5 | {{ item.term }} 6 | 7 |
- 8 | {{ item.description }} 9 | 10 | 11 |
3 |
5 |
6 |
7 |
30 |
--------------------------------------------------------------------------------
/src/components/transitions/FadeUpTransition.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
8 |
9 |
10 |
32 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/foundation/duration.scss:
--------------------------------------------------------------------------------
1 | $unit: 100ms;
2 |
3 | $duration-data: (
4 | fast: $unit,
5 | base: $unit * 2,
6 | slow: $unit * 3,
7 | slower: $unit * 4,
8 | slowest: $unit * 5,
9 | );
10 |
11 | /// Returns the duration value for a given variant.
12 | ///
13 | /// @param {String} $variant - The key for the given variant.
14 | /// @return {Number} The spacing for the variant (in miliseconds).
15 |
16 | @function duration($variant: base) {
17 | $fetched-value: map-get($duration-data, $variant);
18 |
19 | @if type-of($fetched-value) == number {
20 | @return $fetched-value;
21 | } @else {
22 | @error 'Duration variant `#{$variant}` not found. Available variants: #{available-names($duration-data)}';
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/Labelled.scss:
--------------------------------------------------------------------------------
1 | .Polaris-Labelled--hidden > .Polaris-Labelled__LabelWrapper {
2 | @include visually-hidden;
3 | }
4 |
5 | .Polaris-Labelled__LabelWrapper {
6 | margin-bottom: spacing(extra-tight);
7 | display: flex;
8 | justify-content: space-between;
9 | align-items: baseline;
10 | }
11 |
12 | .Polaris-Labelled__HelpText {
13 | @include text-style-body;
14 | @include text-emphasis-subdued;
15 | margin-top: spacing(extra-tight);
16 | }
17 |
18 | .Polaris-Labelled__Error {
19 | display: flex;
20 | margin-top: spacing(extra-tight);
21 | color: color(red, dark);
22 | }
23 |
24 | .Polaris-Labelled__ErrorIcon {
25 | @include recolor-icon(color(red));
26 | margin: 0 spacing(extra-tight) 0 -2px;
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/PolarisFormLayout.vue:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/foundation/spacing.scss:
--------------------------------------------------------------------------------
1 | $unit: 4px;
2 |
3 | $spacing-data: (
4 | none: 0,
5 | extra-tight: rem($unit),
6 | tight: rem($unit * 2),
7 | base: rem($unit * 4),
8 | loose: rem($unit * 5),
9 | extra-loose: rem($unit * 8)
10 | );
11 |
12 | /// Returns the spacing value for a given variant.
13 | ///
14 | /// @param {String} $variant - The key for the given variant.
15 | /// @return {Number} The spacing for the variant.
16 |
17 | @function spacing($variant: base) {
18 | $fetched-value: map-get($spacing-data, $variant);
19 |
20 | @if type-of($fetched-value) == number {
21 | @return $fetched-value;
22 | } @else {
23 | @error 'Spacing variant `#{$variant}` not found. Available variants: #{available-names($spacing-data)}';
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/PolarisFooterHelp.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
30 |
--------------------------------------------------------------------------------
/src/components/PolarisList.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/components/PolarisTextStyle.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
3 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/resources/avatars/avatar-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/avatars/avatar-3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/avatars/avatar-4.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/DynamicTag.vue:
--------------------------------------------------------------------------------
1 |
37 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/foundation/easing.scss:
--------------------------------------------------------------------------------
1 | $easing-data: (
2 | base: cubic-bezier(0.64, 0, 0.35, 1),
3 | in: cubic-bezier(0.36, 0, 1, 1),
4 | out: cubic-bezier(0, 0, 0.42, 1),
5 | excite: cubic-bezier(0.18, 0.67, 0.6, 1.22),
6 | overshoot: cubic-bezier(0.07, 0.28, 0.32, 1.22),
7 | anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65),
8 | );
9 |
10 | /// Returns the timing-function value for a given variant.
11 | ///
12 | /// @param {String} $variant - The key for the given variant.
13 | /// @return {String} The cubic-bezier function (string) for the variant.
14 |
15 | @function easing($variant: base) {
16 | $fetched-value: map-get($easing-data, $variant);
17 |
18 | @if type-of($fetched-value) == string {
19 | @return $fetched-value;
20 | } @else {
21 | @error 'Easing variant `#{$variant}` not found. Available variants: #{available-names($easing-data)}';
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/PolarisLabel.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | {{ title }}
6 |
7 |
8 |
3 |
10 |
11 |
12 |
13 |
14 |
38 |
--------------------------------------------------------------------------------
/src/resources/avatars/avatar-2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/FooterHelp.scss:
--------------------------------------------------------------------------------
1 | // reduces the radii of the circle to half the size of the smallest side
2 | $border-radius: 999px;
3 |
4 | .Polaris-FooterHelp {
5 | display: flex;
6 | justify-content: center;
7 | margin: spacing(loose) 0;
8 | width: 100%;
9 |
10 | @include page-content-when-not-fully-condensed() {
11 | margin: spacing(loose);
12 | width: auto;
13 | }
14 | }
15 |
16 | .Polaris-FooterHelp__Content {
17 | display: inline-flex;
18 | align-items: center;
19 | padding: spacing() spacing(loose) spacing() spacing();
20 | border-top: border();
21 | border-bottom: border();
22 |
23 | @include page-content-when-not-fully-condensed() {
24 | border: border();
25 | border-radius: $border-radius;
26 | }
27 | }
28 |
29 | .Polaris-FooterHelp__Icon {
30 | margin-right: spacing(tight);
31 | }
32 |
33 | .Polaris-FooterHelp__Text {
34 | @include text-style-input;
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/PolarisLayoutAnnotatedSection.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/components/PolarisSkeletonDisplayText.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
34 |
35 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/FormLayout.scss:
--------------------------------------------------------------------------------
1 | $item-min-size: rem(220px);
2 |
3 | .Polaris-FormLayout {
4 | margin-top: -1 * spacing();
5 | margin-left: -1 * spacing(loose);
6 | }
7 |
8 | .Polaris-FormLayout--condensed .Polaris-FormLayout__Item {
9 | flex-basis: (0.5 * $item-min-size);
10 | min-width: (0.5 * $item-min-size);
11 | }
12 |
13 | .Polaris-FormLayout__Title {
14 | margin-bottom: -1 * spacing(tight);
15 | padding: spacing() spacing(loose) 0;
16 | }
17 |
18 | .Polaris-FormLayout__Items {
19 | display: flex;
20 | flex-wrap: wrap;
21 | align-items: center;
22 | }
23 |
24 | .Polaris-FormLayout__HelpText {
25 | @include text-emphasis-subdued;
26 | padding: spacing(tight) spacing(loose) 0;
27 | }
28 |
29 | .Polaris-FormLayout__Item {
30 | flex: 1 1 $item-min-size;
31 | margin-top: spacing();
32 | margin-left: spacing(loose);
33 | min-width: $item-min-size;
34 | max-width: calc(100% - #{spacing(loose)});
35 | }
36 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/foundation/shadows.scss:
--------------------------------------------------------------------------------
1 | /* Shadows are intentionally very subtle gradiations. */
2 | $shadows-data: (
3 | faint: (0 1px 0 0 rgba(22, 29, 37, 0.05)),
4 | base: (0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)),
5 | deep: (0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)),
6 | layer: (0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)),
7 | transparent: 0 0 0 0 transparent
8 | );
9 |
10 |
11 | /// Returns the shadow for the specified depth
12 | /// @param {String} $depth [base] - The shadow's depth.
13 | /// @return {List} The shadow value.
14 |
15 | @function shadow($depth: base) {
16 | $fetched-value: map-get($shadows-data, $depth);
17 |
18 | @if type-of($fetched-value) == list {
19 | @return $fetched-value;
20 | } @else {
21 | @error 'Shadow variant `#{$depth}` not found. Available variants: #{available-names($shadows-data)}';
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/SkeletonDisplayText.scss:
--------------------------------------------------------------------------------
1 | $skeleton-display-text-max-width: rem(120px);
2 |
3 | @mixin skeleton-display-text-height($size){
4 | height: line-height($size);
5 | @include when-typography-not-condensed {
6 | height: line-height($size, large-screen);
7 | }
8 | }
9 |
10 | .Polaris-SkeletonDisplayText__DisplayText {
11 | max-width: $skeleton-display-text-max-width;
12 | @include skeleton-shimmer;
13 | @include skeleton-content;
14 | }
15 |
16 | .Polaris-SkeletonDisplayText--sizeSmall {
17 | @include skeleton-display-text-height('display-small');
18 | }
19 |
20 | .Polaris-SkeletonDisplayText--sizeMedium {
21 | @include skeleton-display-text-height('display-medium');
22 | }
23 |
24 | .Polaris-SkeletonDisplayText--sizeLarge {
25 | @include skeleton-display-text-height('display-large');
26 | }
27 |
28 | .Polaris-SkeletonDisplayText--sizeExtraLarge {
29 | @include skeleton-display-text-height('display-x-large');
30 | }
31 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/Tag.scss:
--------------------------------------------------------------------------------
1 | $height: rem(28px);
2 | $icon-size: rem(16px);
3 |
4 | .Polaris-Tag {
5 | display: inline-flex;
6 | overflow: hidden;
7 | align-items: center;
8 | min-height: $height;
9 | padding-left: spacing(tight);
10 | background-color: color(sky);
11 | border-radius: border-radius();
12 | color: color(ink);
13 | }
14 |
15 | .Polaris-Tag__Button {
16 | @include recolor-icon(color(ink, lighter));
17 | @include unstyled-button;
18 | display: block;
19 | height: $height;
20 | width: $height;
21 | margin-left: spacing(extra-tight);
22 | will-change: background, fill;
23 | transition-property: background, fill;
24 | transition-duration: duration();
25 | transition-timing-function: easing();
26 |
27 | &:hover,
28 | &:focus,
29 | &:active {
30 | @include recolor-icon(color(ink));
31 | background: color(sky, dark);
32 | }
33 |
34 | &:active {
35 | background: rgba(color(ink, lightest), 0.6);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/PolarisTag.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
4 |
17 |
5 |
6 |
7 | {{ title }}
8 |
9 |
12 |
13 | {{ description }}
10 |
14 |
16 |
3 | {{ title }}
4 |
5 |
6 |
7 |
8 |
39 |
--------------------------------------------------------------------------------
/src/components/PolarisBadge.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ status.charAt(0).toUpperCase() + status.slice(1) }}
5 |
6 |
6 |
10 |
11 |
12 |
13 |
42 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/SkeletonPage.scss:
--------------------------------------------------------------------------------
1 | $action-text-spacing: rem(24px);
2 |
3 | .Polaris-SkeletonPage__Page {
4 | @include page-layout;
5 | }
6 |
7 | .Polaris-SkeletonPage--fullWidth {
8 | max-width: none;
9 | }
10 |
11 | .Polaris-SkeletonPage__Content {
12 | @include page-content-layout;
13 | }
14 |
15 | .Polaris-SkeletonPage__Header {
16 | @include page-header-layout;
17 | }
18 |
19 | .Polaris-SkeletonPage__Header--hasSecondaryActions {
20 | @include page-header-has-secondaryactions;
21 | }
22 |
23 | .Polaris-SkeletonPage__Actions {
24 | @include page-actions-layout;
25 | }
26 |
27 | .Polaris-SkeletonPage__Action {
28 | display: flex;
29 | flex-direction: column;
30 | justify-content: center;
31 | min-height: control-height();
32 | padding-right: $action-text-spacing;
33 | margin-bottom: (-1 * spacing(extra-tight));
34 |
35 | &:first-child{
36 | padding-right: 0;
37 | }
38 |
39 | @include page-content-when-partially-condensed {
40 | &:not(:last-child) {
41 | display: none;
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/resources/banner/confetti.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/PolarisPopoverOverlay.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
9 |
3 |
6 | {{ left }}
7 |
8 |
9 |
10 |
11 | {{ children }}
12 |
13 |
15 |
16 |
19 | {{ right }}
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/global.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | @include text-style-body;
4 | @include text-emphasis-normal;
5 | font-family: font-family();
6 | }
7 |
8 | html {
9 | position: relative;
10 | box-sizing: border-box;
11 | font-size: ($base-font-size / $default-browser-font-size) * 100%;
12 | -webkit-font-smoothing: antialiased;
13 |
14 | // This needs to come after -webkit-font-smoothing
15 | // stylelint-disable-next-line declaration-block-properties-order
16 | -moz-osx-font-smoothing: grayscale;
17 |
18 | text-size-adjust: 100%;
19 | text-rendering: optimizeLegibility;
20 | }
21 |
22 | body {
23 | min-height: 100%;
24 | margin: 0;
25 | padding: 0;
26 | background-color: color(sky, light);
27 | }
28 |
29 | * {
30 | box-sizing: inherit;
31 | }
32 |
33 | h1,
34 | h2,
35 | h3,
36 | h4,
37 | h5,
38 | h6,
39 | p {
40 | margin: 0;
41 | font-size: 1em;
42 | font-weight: 400;
43 | }
44 |
45 | a:not([data-polaris-unstyled]) {
46 | color: color(blue);
47 | text-decoration: none;
48 |
49 | &:hover,
50 | &:focus,
51 | &:active {
52 | outline: none;
53 | color: color(blue, dark);
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/List.scss:
--------------------------------------------------------------------------------
1 | $number-size: rem(12px);
2 | $bullet-size: rem(18px);
3 |
4 | .Polaris-List {
5 | list-style: none;
6 | margin-top: 0;
7 | padding-left: 0;
8 |
9 | + .Polaris-List {
10 | margin-top: spacing();
11 | }
12 | }
13 |
14 | .Polaris-List--typeBullet {
15 | > .Polaris-List__Item::before {
16 | content: '\2022'; // bullet
17 | font-size: $bullet-size;
18 | }
19 | }
20 |
21 | .Polaris-List--typeNumber {
22 | counter-reset: ordered-counter;
23 |
24 | > .Polaris-List__Item::before {
25 | @include text-emphasis-strong;
26 | content: counter(ordered-counter, decimal) '.';
27 | counter-increment: ordered-counter;
28 | font-size: $number-size;
29 | vertical-align: top;
30 | }
31 | }
32 |
33 | .Polaris-List__Item {
34 | position: relative;
35 | margin-bottom: spacing(tight);
36 | padding-left: spacing();
37 |
38 | &:last-child {
39 | margin-bottom: 0;
40 | }
41 |
42 | &::before {
43 | position: absolute;
44 | top: 0;
45 | left: 0;
46 | display: block;
47 | }
48 |
49 | .Polaris-List:first-child {
50 | margin-top: spacing(tight);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/ProgressBar.scss:
--------------------------------------------------------------------------------
1 | @function progress-bar-height($height: base) {
2 | $base: 16px;
3 | $data: (
4 | small: rem($base / 2),
5 | base: rem($base),
6 | large: rem($base * 2),
7 | );
8 |
9 | @return map-get($data, $height);
10 | }
11 |
12 | @keyframes fillup {
13 | 0% {
14 | width: 0;
15 | }
16 | }
17 |
18 | .Polaris-ProgressBar {
19 | overflow: hidden;
20 | width: 100%;
21 | background-color: color(sky, base);
22 | border-radius: border-radius();
23 | }
24 |
25 | .Polaris-ProgressBar--sizeSmall {
26 | height: progress-bar-height(small);
27 | }
28 |
29 | .Polaris-ProgressBar--sizeMedium {
30 | height: progress-bar-height();
31 | }
32 |
33 | .Polaris-ProgressBar--sizeLarge {
34 | height: progress-bar-height(large);
35 | }
36 |
37 | .Polaris-ProgressBar__Indicator {
38 | height: inherit;
39 | width: 0;
40 | will-change: width;
41 | background-color: color(teal);
42 | animation: fillup duration(slowest) easing();
43 | transition: width duration(slowest) easing();
44 | }
45 |
46 | .Polaris-ProgressBar__Progress,
47 | .Polaris-ProgressBar__Label {
48 | @include visually-hidden;
49 | }
50 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/Thumbnail.scss:
--------------------------------------------------------------------------------
1 | $stacking-order: (
2 | image: 10,
3 | shadow: 20,
4 | );
5 |
6 | .Polaris-Thumbnail {
7 | position: relative;
8 | display: block;
9 | overflow: hidden;
10 | background: color(white);
11 | border-radius: border-radius();
12 |
13 | &::after {
14 | content: '';
15 | position: absolute;
16 | z-index: z-index(shadow, $stacking-order);
17 | top: 0;
18 | bottom: 0;
19 | left: 0;
20 | right: 0;
21 | display: block;
22 | box-shadow: inset 0 0 0 1px rgba(33, 43, 54, 0.1);
23 | border-radius: border-radius();
24 | }
25 | }
26 |
27 | .Polaris-Thumbnail--sizeSmall {
28 | height: rem(40px);
29 | width: rem(40px);
30 | }
31 |
32 | .Polaris-Thumbnail--sizeMedium {
33 | height: rem(60px);
34 | width: rem(60px);
35 | }
36 |
37 | .Polaris-Thumbnail--sizeLarge {
38 | height: rem(80px);
39 | width: rem(80px);
40 | }
41 |
42 | .Polaris-Thumbnail__Image {
43 | position: absolute;
44 | z-index: z-index(image, $stacking-order);
45 | top: 0;
46 | right: 0;
47 | bottom: 0;
48 | left: 0;
49 | margin: auto;
50 | max-width: 100%;
51 | max-height: 100%;
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/PolarisConnectedItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | {{ children }}
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/DescriptionList.scss:
--------------------------------------------------------------------------------
1 | $breakpoint: 550px;
2 |
3 | .Polaris-DescriptionList {
4 | margin: 0;
5 | padding: 0;
6 |
7 | @include page-content-breakpoint-after($breakpoint) {
8 | display: flex;
9 | flex-wrap: wrap;
10 | align-items: flex-start;
11 | }
12 | }
13 |
14 | .Polaris-DescriptionList__Term {
15 | @include text-emphasis-strong;
16 | padding: spacing() 0 spacing(tight);
17 |
18 | @include page-content-breakpoint-after($breakpoint) {
19 | flex: 0 1 25%;
20 | padding: spacing() spacing() spacing() 0;
21 |
22 | .Polaris-DescriptionList__Description + & + .Polaris-DescriptionList__Description {
23 | border-top: border();
24 | }
25 | }
26 | }
27 |
28 | .Polaris-DescriptionList__Description {
29 | margin-left: 0;
30 | padding: 0 0 spacing();
31 |
32 | + .Polaris-DescriptionList__Term {
33 | border-top: border();
34 | }
35 |
36 | @include page-content-breakpoint-after($breakpoint) {
37 | flex: 1 1 51%;
38 | padding: spacing() 0;
39 |
40 | + .Polaris-DescriptionList__Term + .Polaris-DescriptionList__Description {
41 | border-top: border();
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/foundation/layout.scss:
--------------------------------------------------------------------------------
1 | ////
2 | /// Layout
3 | /// @group foundation/layout
4 | ////
5 |
6 | $layout-width-data: (
7 | primary: (
8 | min: rem(480px),
9 | max: rem(672px)
10 | ),
11 | secondary: (
12 | min: rem(240px),
13 | max: rem(344px)
14 | ),
15 | nav: (
16 | base: rem(240px)
17 | ),
18 | page-with-nav: (
19 | base: rem(700px)
20 | ),
21 | page-content: (
22 | not-condensed: rem(680px),
23 | partially-condensed: rem(450px)
24 | ),
25 | inner-spacing: (
26 | base: spacing(loose)
27 | ),
28 | outer-spacing: (
29 | min: spacing(loose),
30 | max: spacing(extra-loose)
31 | )
32 | );
33 |
34 | /// Returns the widths of the specified column.
35 | /// @param {String} $name - The column name.
36 | /// @return {Number} The width for the column.
37 |
38 | @function layout-width($name, $value: base) {
39 | $fetched-value: map-get(map-get($layout-width-data, $name), $value);
40 |
41 | @if type-of($fetched-value) != null {
42 | @return $fetched-value;
43 | } @else {
44 | @error 'Column `#{$name} - #{$value}` not found. Available columns: #{available-names($layout-width-data)}';
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/PolarisSettingAction.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/components/PolarisResourceList.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
16 | {{ action.content }}
17 |
18 |
19 |
20 | -
3 |
-
4 |
5 | 17 |15 | 16 |
18 |
5 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/components/PolarisFormLayoutGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
14 |
10 |
11 |
12 |
13 |
18 |
23 |
19 |
20 |
21 |
22 |
6 |
12 |
14 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@eastsideco/polaris-vue",
3 | "version": "0.1.19",
4 | "description": "Shopify Polaris for Vue 2",
5 | "main": "lib/polaris-vue.min.js",
6 | "scripts": {
7 | "build": "webpack --env build",
8 | "dev": "webpack --progress --colors --watch --env dev",
9 | "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js",
10 | "test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
11 | },
12 | "devDependencies": {
13 | "babel-cli": "6.24.1",
14 | "babel-core": "6.24.1",
15 | "babel-eslint": "7.2.3",
16 | "babel-loader": "7.0.0",
17 | "babel-plugin-add-module-exports": "0.2.1",
18 | "babel-preset-es2015": "6.24.1",
19 | "chai": "3.5.0",
20 | "css-loader": "^0.28.4",
21 | "eslint": "3.19.0",
22 | "eslint-loader": "1.7.1",
23 | "extract-text-webpack-plugin": "^3.0.0",
24 | "mocha": "3.3.0",
25 | "style-loader": "^0.18.2",
26 | "svg-inline-loader": "^0.8.0",
27 | "vue-loader": "^13.0.4",
28 | "vue-template-compiler": "^2.4.2",
29 | "webpack": "3.1.0",
30 | "yargs": "7.1.0"
31 | },
32 | "repository": {
33 | "type": "git",
34 | "url": "https://github.com/EastsideCo/polaris-vue.git"
35 | },
36 | "keywords": [],
37 | "author": "ESC Apps Team
9 | {{ title }}
10 |
11 |
17 |
18 | {{ helpText }}
19 |
20 |
21 |
3 |
5 |
6 |
7 |
8 |
53 |
--------------------------------------------------------------------------------
/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Caption.scssc:
--------------------------------------------------------------------------------
1 | 3.4.22 (Selective Steve)
2 | b2e6db8a8b7b34eca68cb05855e3462fe2bc523e
3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::RuleNode:
4 | @rule[I".Polaris-Caption:ET:@parsed_ruleso:"Sass::Selector::CommaSequence:
@members[o: Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Class:
5 | @nameI"Polaris-Caption; T:
6 | @linei:@filename0:
@subject0:
@sourceso:Set:
7 | @hash{ :@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti:
@end_poso;;i;i:
8 | @file0:@importer0;i;0;i;i;0:@selector_source_rangeo; ;o;;i;i; o;;i;i; I"#styles/components/Caption.scss; T; o: Sass::Importers::Filesystem:
9 | @rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@real_rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@same_name_warningso;;{ :
10 | @tabsi ;[o:Sass::Tree::MixinNode;I"text-style-caption; T:
11 | @args[ :@keywords{ : @splat0:@kwarg_splat0;[ ;0:
@options{ ;i;o; ;o;;i;i; o;;i;i#; @; @o:Sass::Tree::PropNode;[I" margin; T: @valueo: Sass::Script::Tree::Literal;,o: Sass::Script::Value::String ;,I"0; T;*@&:
12 | @type:identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i; o;;i;i; @; @;$i :@prop_syntax:new;[ ;0;*@&;i;o; ;o;;i;i; o;;i;i; @; @:@name_source_rangeo; ;@5; o;;i;i; @; @:@value_source_rangeo; ;o;;i;i; @6; @; @;0;*@&;i;o; ;@; o;;i;i; @; @:@has_childrenT;0;*@&:@templateI"F.Polaris-Caption {
13 | @include text-style-caption;
14 | margin: 0;
15 | }
16 | ; T;i;o; ;o;;i;i; o;;i;i; @; @;6T
--------------------------------------------------------------------------------
/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Heading.scssc:
--------------------------------------------------------------------------------
1 | 3.4.22 (Selective Steve)
2 | efb4b7c3dc8a4137940ddeeda62f91f6e8cddee2
3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::RuleNode:
4 | @rule[I".Polaris-Heading:ET:@parsed_ruleso:"Sass::Selector::CommaSequence:
@members[o: Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Class:
5 | @nameI"Polaris-Heading; T:
6 | @linei:@filename0:
@subject0:
@sourceso:Set:
7 | @hash{ :@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti:
@end_poso;;i;i:
8 | @file0:@importer0;i;0;i;i;0:@selector_source_rangeo; ;o;;i;i; o;;i;i; I"#styles/components/Heading.scss; T; o: Sass::Importers::Filesystem:
9 | @rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@real_rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@same_name_warningso;;{ :
10 | @tabsi ;[o:Sass::Tree::MixinNode;I"text-style-heading; T:
11 | @args[ :@keywords{ : @splat0:@kwarg_splat0;[ ;0:
@options{ ;i;o; ;o;;i;i; o;;i;i#; @; @o:Sass::Tree::PropNode;[I" margin; T: @valueo: Sass::Script::Tree::Literal;,o: Sass::Script::Value::String ;,I"0; T;*@&:
12 | @type:identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i; o;;i;i; @; @;$i :@prop_syntax:new;[ ;0;*@&;i;o; ;o;;i;i; o;;i;i; @; @:@name_source_rangeo; ;@5; o;;i;i; @; @:@value_source_rangeo; ;o;;i;i; @6; @; @;0;*@&;i;o; ;@; o;;i;i; @; @:@has_childrenT;0;*@&:@templateI"F.Polaris-Heading {
13 | @include text-style-heading;
14 | margin: 0;
15 | }
16 | ; T;i;o; ;o;;i;i; o;;i;i; @; @;6T
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/Connected.scss:
--------------------------------------------------------------------------------
1 | $stacking-order: (
2 | item: 10,
3 | primary: 20,
4 | focused: 30,
5 | );
6 |
7 | .Polaris-Connected {
8 | position: relative;
9 | display: flex;
10 | }
11 |
12 | .Polaris-Connected__Item {
13 | position: relative;
14 | z-index: z-index(item, $stacking-order);
15 | flex: 0 0 auto;
16 |
17 | &:not(:first-child) {
18 | margin-left: -1px;
19 | }
20 | }
21 |
22 | // This is a violation of our component model, but it's the cleanest
23 | // way to remove the border radii on connected elements.
24 | // stylelint-disable declaration-no-important
25 |
26 | .Polaris-Connected__Item--primary {
27 | z-index: z-index(primary, $stacking-order);
28 | flex: 1 1 auto;
29 |
30 | &:not(:first-child) * {
31 | border-top-left-radius: 0 !important;
32 | border-bottom-left-radius: 0 !important;
33 | }
34 |
35 | &:not(:last-child) * {
36 | border-top-right-radius: 0 !important;
37 | border-bottom-right-radius: 0 !important;
38 | }
39 | }
40 |
41 | .Polaris-Connected__Item--connection {
42 | &:first-child * {
43 | border-top-right-radius: 0 !important;
44 | border-bottom-right-radius: 0 !important;
45 |
46 | &::after {
47 | border-top-right-radius: 0 !important;
48 | border-bottom-right-radius: 0 !important;
49 | }
50 | }
51 |
52 | &:last-child * {
53 | border-top-left-radius: 0 !important;
54 | border-bottom-left-radius: 0 !important;
55 |
56 | &::after {
57 | border-top-left-radius: 0 !important;
58 | border-bottom-left-radius: 0 !important;
59 | }
60 | }
61 | }
62 |
63 | // stylelint-enable declaration-no-important
64 |
65 | .Polaris-Connected__Item--focused {
66 | z-index: z-index(focused, $stacking-order);
67 | }
68 |
--------------------------------------------------------------------------------
/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Subheading.scssc:
--------------------------------------------------------------------------------
1 | 3.4.22 (Selective Steve)
2 | 991341b88cd72183659c456e31a0169a09e00722
3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::RuleNode:
4 | @rule[I".Polaris-Subheading:ET:@parsed_ruleso:"Sass::Selector::CommaSequence:
@members[o: Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Class:
5 | @nameI"Polaris-Subheading; T:
6 | @linei:@filename0:
@subject0:
@sourceso:Set:
7 | @hash{ :@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti:
@end_poso;;i;i:
8 | @file0:@importer0;i;0;i;i;0:@selector_source_rangeo; ;o;;i;i; o;;i;i; I"&styles/components/Subheading.scss; T; o: Sass::Importers::Filesystem:
9 | @rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@real_rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@same_name_warningso;;{ :
10 | @tabsi ;[o:Sass::Tree::MixinNode;I"text-style-subheading; T:
11 | @args[ :@keywords{ : @splat0:@kwarg_splat0;[ ;0:
@options{ ;i;o; ;o;;i;i; o;;i;i&; @; @o:Sass::Tree::PropNode;[I" margin; T: @valueo: Sass::Script::Tree::Literal;,o: Sass::Script::Value::String ;,I"0; T;*@&:
12 | @type:identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i; o;;i;i; @; @;$i :@prop_syntax:new;[ ;0;*@&;i;o; ;o;;i;i; o;;i;i; @; @:@name_source_rangeo; ;@5; o;;i;i; @; @:@value_source_rangeo; ;o;;i;i; @6; @; @;0;*@&;i;o; ;@; o;;i;i; @; @:@has_childrenT;0;*@&:@templateI"L.Polaris-Subheading {
13 | @include text-style-subheading;
14 | margin: 0;
15 | }
16 | ; T;i;o; ;o;;i;i; o;;i;i; @; @;6T
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/ButtonGroup.scss:
--------------------------------------------------------------------------------
1 | $stacking-order: (
2 | item: 10,
3 | focused: 20,
4 | );
5 |
6 | $plain-horizontal-spacing: spacing(tight);
7 | $item-spacing: spacing(tight);
8 |
9 | .Polaris-ButtonGroup {
10 | display: flex;
11 | flex-wrap: wrap;
12 | align-items: center;
13 | margin-top: (-1 * $item-spacing);
14 | margin-left: (-1 * $item-spacing);
15 | }
16 |
17 | .Polaris-ButtonGroup--segmented {
18 | display: flex;
19 |
20 | // This is a violation of our component model, but it's the cleanest
21 | // way to remove the border radii on connected elements.
22 | // stylelint-disable declaration-no-important
23 |
24 | .Polaris-ButtonGroup__Item {
25 | position: relative;
26 | z-index: z-index(item, $stacking-order);
27 |
28 | &:not(:first-child) {
29 | margin-left: -1px;
30 | }
31 |
32 | * {
33 | border-radius: 0 !important;
34 | }
35 |
36 | &:first-child * {
37 | border-top-left-radius: border-radius() !important;
38 | border-bottom-left-radius: border-radius() !important;
39 | }
40 |
41 | &:last-child * {
42 | border-top-right-radius: border-radius() !important;
43 | border-bottom-right-radius: border-radius() !important;
44 | }
45 | }
46 |
47 | // stylelint-enable declaration-no-important
48 |
49 | .Polaris-ButtonGroup__Item--focused {
50 | z-index: z-index(focused, $stacking-order);
51 | }
52 | }
53 |
54 | .Polaris-ButtonGroup__Item {
55 | margin-top: $item-spacing;
56 | margin-left: $item-spacing;
57 | }
58 |
59 | .Polaris-ButtonGroup__Item--plain {
60 | &:not(:first-child) {
61 | margin-left: $item-spacing + $plain-horizontal-spacing;
62 | }
63 |
64 | &:not(:last-child) {
65 | margin-right: $plain-horizontal-spacing;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/PolarisTabs.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
20 |
21 |
22 |
23 |
24 |
66 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/Tooltip.scss:
--------------------------------------------------------------------------------
1 | $arrow-size: rem(14px);
2 | $visible-portion-of-arrow: rem(5px);
3 | $content-max-height: rem(100px);
4 | $content-max-width: rem(200px);
5 |
6 | .Polaris-Tooltip {
7 | margin: $visible-portion-of-arrow spacing() spacing();
8 | opacity: 1;
9 | box-shadow: shadow(deep);
10 | border-radius: border-radius();
11 | pointer-events: none;
12 | will-change: opacity, left, top;
13 | transition: opacity duration() easing(in) duration(fast);
14 | }
15 |
16 | .Polaris-Tooltip--measuring {
17 | opacity: 0;
18 | }
19 |
20 | .Polaris-Tooltip--positionedAbove {
21 | margin: spacing() spacing() $visible-portion-of-arrow;
22 |
23 | .Polaris-Tooltip__Tip {
24 | top: inherit;
25 | bottom: 0;
26 | }
27 | }
28 |
29 | .Polaris-Tooltip--light {
30 | .Polaris-Tooltip__Wrapper {
31 | background: color(white);
32 | color: color(ink);
33 | }
34 |
35 | .Polaris-Tooltip__Tip {
36 | background: color(white);
37 | }
38 | }
39 |
40 | .Polaris-Tooltip__Wrapper {
41 | position: relative;
42 | display: flex;
43 | background-color: color(ink);
44 | border-radius: border-radius();
45 | color: color(white);
46 | max-height: $content-max-height;
47 | }
48 |
49 | .Polaris-Tooltip__Content {
50 | position: relative;
51 | margin-top: spacing(extra-tight);
52 | border-radius: border-radius();
53 | max-width: $content-max-width;
54 | max-height: $content-max-height;
55 | }
56 |
57 | .Polaris-Tooltip__Tip {
58 | position: absolute;
59 | top: 0;
60 | left: 50%;
61 | transform: translateX(-50%) rotate(45deg);
62 | height: $arrow-size;
63 | width: $arrow-size;
64 | background: color(ink);
65 | box-shadow: shadow(deep);
66 | }
67 |
68 | .Polaris-Tooltip__Label {
69 | padding: 0 spacing(tight) spacing(extra-tight);
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/PolarisProgressBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
16 | -
5 |
- 6 | 13 | 14 |
17 |
19 |
3 |
7 |
16 |
17 |
18 |
19 |
61 |
--------------------------------------------------------------------------------
/src/components/PolarisActionList.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/util/loggers/ConsoleLogger.js:
--------------------------------------------------------------------------------
1 | import config from 'config/config.js';
2 | import logLevel from './logLevel.js';
3 |
4 | export default class ConsoleLogger {
5 | constructor() {
6 | this.level = logLevel.DEBUG;
7 | }
8 |
9 | setLogLevel(level) {
10 | this.level = level;
11 | }
12 |
13 | send(level, tag, text) {
14 | if (level < this.level) { return; }
15 |
16 | var fn = console.log;
17 | if ((console.error && level == logLevel.ERROR)
18 | || (console.error && level == logLevel.FATAL)) {
19 | fn = console.error;
20 | }
21 | if (console.warn && level == logLevel.WARN) {
22 | fn = console.warn;
23 | }
24 | if (console.info && level == logLevel.INFO) {
25 | fn = console.info;
26 | }
27 | if (console.debug && level == logLevel.DEBUG) {
28 | fn = console.debug;
29 | }
30 | // Binding back to console because iOS Safari is weird
31 | fn.bind(console)(config.logPrefix + logLevel.levelToString(level) + ': ' + '[' + tag + '] ' + text);
32 | }
33 |
34 | sendObject(level, tag, text, object) {
35 | if (level < this.level) { return; }
36 |
37 | var fn = console.log;
38 | if ((console.error && level == logLevel.ERROR)
39 | || (console.error && level == logLevel.FATAL)) {
40 | fn = console.error;
41 | }
42 | if (console.warn && level == logLevel.WARN) {
43 | fn = console.warn;
44 | }
45 | if (console.info && level == logLevel.INFO) {
46 | fn = console.info;
47 | }
48 | if (console.debug && level == this.DEBUG) {
49 | fn = console.debug;
50 | }
51 | fn.bind(console)(config.logPrefix + logLevel.levelToString(level) + ': ' + '[' + tag + '] ' + text, object);
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/shared/controls.scss:
--------------------------------------------------------------------------------
1 | @function control-height() {
2 | @return rem(36px);
3 | }
4 |
5 | @function control-slim-height() {
6 | @return rem(28px);
7 | }
8 |
9 | @function control-vertical-padding() {
10 | @return (control-height() - line-height(input) - rem(2px)) / 2;
11 | }
12 |
13 | @function control-icon-transition() {
14 | @return transform duration(fast) easing(in) easing(out);
15 | }
16 |
17 | @mixin control-backdrop($style: base) {
18 | @if $style == base {
19 | background: color(sky, dark);
20 | border: border(transparent);
21 | box-shadow:
22 | 0 0 0 1px transparent,
23 | shadow(faint);
24 | border-radius: border-radius();
25 | transition-property: box-shadow, background;
26 | transition-duration: duration();
27 | transition-timing-function: easing();
28 |
29 | &::after {
30 | content: '';
31 | position: absolute;
32 | top: 0;
33 | bottom: 0;
34 | left: 0;
35 | right: 0;
36 | display: block;
37 | background: linear-gradient(to bottom, color(white), color(sky, lighter));
38 | border-radius: calc(#{border-radius()} - 1px);
39 | }
40 | } @else if $style == focused {
41 | background: color(indigo);
42 | box-shadow:
43 | 0 0 0 1px color(indigo),
44 | shadow(transparent);
45 |
46 | &::after { background: color(white); }
47 | } @else if $style == error {
48 | background: color(red);
49 | box-shadow: 0 0 0 1px transparent;
50 |
51 | &::after { background: color(red, lighter); }
52 | } @else if $style == disabled {
53 | background: color(sky);
54 | box-shadow: none;
55 |
56 | &::after { background: color(sky, lighter); }
57 | } @else if $style == focused-error {
58 | background: color(indigo);
59 | box-shadow: 0 0 0 1px color(indigo);
60 |
61 | &::after { background: color(red, lighter); }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/PolarisRadioButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
16 |
30 |
19 |
24 |
20 |
23 |
27 | {{ helpText }}
28 |
29 |
12 |
23 |
24 |
25 |
26 |
27 |
3 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/Layout.scss:
--------------------------------------------------------------------------------
1 | $secondary-basis: layout-width(secondary, min);
2 | $primary-basis: layout-width(primary, min);
3 | $relative-size: $primary-basis / $secondary-basis;
4 |
5 | .Polaris-Layout {
6 | display: flex;
7 | flex-wrap: wrap;
8 | justify-content: center;
9 | align-items: flex-start;
10 | margin-top: -1 * spacing(loose);
11 | margin-left: -1 * spacing(loose);
12 | }
13 |
14 | .Polaris-Layout__Section {
15 | flex: $relative-size $relative-size $primary-basis;
16 | min-width: 51%;
17 | }
18 |
19 | .Polaris-Layout__Section--secondary {
20 | flex: 1 1 $secondary-basis;
21 | min-width: 0;
22 | }
23 |
24 | .Polaris-Layout__Section--fullWidth {
25 | flex: 1 1 100%;
26 | }
27 |
28 | .Polaris-Layout__AnnotatedSection {
29 | min-width: 0;
30 | flex: 1 1 100%;
31 | }
32 |
33 | .Polaris-Layout__Section,
34 | .Polaris-Layout__AnnotatedSection {
35 | max-width: calc(100% - #{spacing(loose)});
36 | margin-top: spacing(loose);
37 | margin-left: spacing(loose);
38 |
39 | + .Polaris-Layout__AnnotatedSection {
40 | @include page-content-when-not-fully-condensed {
41 | padding-top: spacing(loose);
42 | border-top: border();
43 | }
44 | }
45 | }
46 |
47 | .Polaris-Layout__AnnotationWrapper {
48 | display: flex;
49 | flex-wrap: wrap;
50 | margin-top: -1 * spacing(loose);
51 | margin-left: -1 * spacing(loose);
52 | }
53 |
54 | .Polaris-Layout__AnnotationContent {
55 | flex: $relative-size $relative-size $primary-basis;
56 | }
57 |
58 | .Polaris-Layout__Annotation {
59 | flex: 1 1 $secondary-basis;
60 | padding: spacing(loose) spacing(loose) 0;
61 |
62 | @include page-content-when-layout-not-stacked {
63 | padding: spacing(loose) spacing(loose) spacing(loose) 0;
64 | }
65 | }
66 |
67 | .Polaris-Layout__Annotation,
68 | .Polaris-Layout__AnnotationContent {
69 | min-width: 0;
70 | max-width: calc(100% - #{spacing(loose)});
71 | margin-top: spacing(loose);
72 | margin-left: spacing(loose);
73 | }
74 |
--------------------------------------------------------------------------------
/src/resources/styles/.sass-cache/3784ff07a3edcd23e5a9011b5d2181ee5fd0388f/shared.scssc:
--------------------------------------------------------------------------------
1 | 3.4.22 (Selective Steve)
2 | debb1ef0e111578b1d5712f2c6cdf864305a1295
3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode
:@imported_filenameI"shared/accessibility:ET;[ :@filename0:
@options{ :@template0:
4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;
i: @offseti:
@end_poso;;
i;i$:
5 | @fileI"styles/shared.scss; T:@importero: Sass::Importers::Filesystem:
6 | @rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@real_rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@same_name_warningso:Set:
7 | @hash{ :@imported_file0o;
;I"shared/breakpoints; T;[ ;
8 | 0; @
9 | ; 0;
i;o; ;o;;
i;i;o;;
i;i";@;@; 0o;
;I"shared/buttons; T;[ ;
10 | 0; @
11 | ; 0;
i;o; ;o;;
i;i;o;;
i;i ;@;@; 0o;
;I"shared/controls; T;[ ;
12 | 0; @
13 | ; 0;
i ;o; ;o;;
i ;i;o;;
i ;i ;@;@; 0o;
;I"shared/icons; T;[ ;
14 | 0; @
15 | ; 0;
i
16 | ;o; ;o;;
i
17 | ;i;o;;
i
18 | ;i ;@;@; 0o;
;I"shared/layout; T;[ ;
19 | 0; @
20 | ; 0;
i ;o; ;o;;
i ;i;o;;
i ;i ;@;@; 0o;
;I"shared/links; T;[ ;
21 | 0; @
22 | ; 0;
i ;o; ;o;;
i ;i;o;;
i ;i ;@;@; 0o;
;I"shared/page; T;[ ;
23 | 0; @
24 | ; 0;
i
;o; ;o;;
i
;i;o;;
i
;i;@;@; 0o;
;I"shared/typography; T;[ ;
25 | 0; @
26 | ; 0;
i;o; ;o;;
i;i;o;;
i;i!;@;@; 0o;
;I"shared/skeleton; T;[ ;
27 | 0; @
28 | ; 0;
i;o; ;o;;
i;i;o;;
i;i ;@;@; 0;
29 | 0; @
30 | ; I" @import 'shared/accessibility';
31 | @import 'shared/breakpoints';
32 | @import 'shared/buttons';
33 | @import 'shared/controls';
34 | @import 'shared/icons';
35 | @import 'shared/layout';
36 | @import 'shared/links';
37 | @import 'shared/page';
38 | @import 'shared/typography';
39 | @import 'shared/skeleton';
40 | ; T;
i;o; ;o;;
i;i;o;;
i;i;@;@:@has_childrenT
--------------------------------------------------------------------------------
/src/components/PolarisTextFieldResizer.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components.scss:
--------------------------------------------------------------------------------
1 | @import 'components/AccountConnection';
2 | @import 'components/ActionList';
3 | @import 'components/Avatar';
4 | @import 'components/Badge';
5 | @import 'components/Banner';
6 | @import 'components/Breadcrumbs';
7 | @import 'components/Button';
8 | @import 'components/ButtonGroup';
9 | @import 'components/CalloutCard';
10 | @import 'components/Caption';
11 | @import 'components/Card';
12 | @import 'components/Checkbox';
13 | @import 'components/Choice';
14 | @import 'components/ChoiceList';
15 | @import 'components/Collapsible';
16 | @import 'components/ColorPicker';
17 | @import 'components/Connected';
18 | @import 'components/DatePicker';
19 | @import 'components/DescriptionList';
20 | @import 'components/DisplayText';
21 | @import 'components/EmptyState';
22 | @import 'components/FooterHelp';
23 | @import 'components/FormLayout';
24 | @import 'components/Heading';
25 | @import 'components/Icon';
26 | @import 'components/KeyboardKey';
27 | @import 'components/Label';
28 | @import 'components/Labelled';
29 | @import 'components/Layout';
30 | @import 'components/Link';
31 | @import 'components/List';
32 | @import 'components/Page';
33 | @import 'components/PageActions';
34 | @import 'components/Pagination';
35 | @import 'components/Popover';
36 | @import 'components/PositionedOverlay';
37 | @import 'components/ProgressBar';
38 | @import 'components/RadioButton';
39 | @import 'components/ResourceList';
40 | @import 'components/Scrollable';
41 | @import 'components/Select';
42 | @import 'components/SettingAction';
43 | @import 'components/SkeletonBodyText';
44 | @import 'components/SkeletonDisplayText';
45 | @import 'components/SkeletonPage';
46 | @import 'components/Spinner';
47 | @import 'components/Stack';
48 | @import 'components/Subheading';
49 | @import 'components/Tabs';
50 | @import 'components/Tag';
51 | @import 'components/TextContainer';
52 | @import 'components/TextField';
53 | @import 'components/TextStyle';
54 | @import 'components/Thumbnail';
55 | @import 'components/Tooltip';
56 | @import 'components/VisuallyHidden';
--------------------------------------------------------------------------------
/src/components/PolarisActionListSection.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
10 |
11 |
6 |
16 | 7 | {{ section.title }} 8 |
9 |-
10 |
6 |
30 |
31 |
32 |
33 |
68 |
--------------------------------------------------------------------------------
/src/resources/styles/.sass-cache/3784ff07a3edcd23e5a9011b5d2181ee5fd0388f/foundation.scssc:
--------------------------------------------------------------------------------
1 | 3.4.22 (Selective Steve)
2 | 5fb3efcedffb33b5d01286df6851d14d488b3191
3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode
:@imported_filenameI"foundation/utilities:ET;[ :@filename0:
@options{ :@template0:
4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;
i: @offseti:
@end_poso;;
i;i$:
5 | @fileI"styles/foundation.scss; T:@importero: Sass::Importers::Filesystem:
6 | @rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@real_rootI"@/home/kiran-price/_polaris_vue/project/src/resources/styles; T:@same_name_warningso:Set:
7 | @hash{ :@imported_file0o;
;I"foundation/colors; T;[ ;
8 | 0; @
9 | ; 0;
i;o; ;o;;
i;i;o;;
i;i!;@;@; 0o;
;I"foundation/spacing; T;[ ;
10 | 0; @
11 | ; 0;
i;o; ;o;;
i;i;o;;
i;i";@;@; 0o;
;I"foundation/borders; T;[ ;
12 | 0; @
13 | ; 0;
i ;o; ;o;;
i ;i;o;;
i ;i";@;@; 0o;
;I" foundation/border-radius; T;[ ;
14 | 0; @
15 | ; 0;
i
16 | ;o; ;o;;
i
17 | ;i;o;;
i
18 | ;i(;@;@; 0o;
;I"foundation/duration; T;[ ;
19 | 0; @
20 | ; 0;
i ;o; ;o;;
i ;i;o;;
i ;i#;@;@; 0o;
;I"foundation/easing; T;[ ;
21 | 0; @
22 | ; 0;
i ;o; ;o;;
i ;i;o;;
i ;i!;@;@; 0o;
;I"foundation/layout; T;[ ;
23 | 0; @
24 | ; 0;
i
;o; ;o;;
i
;i;o;;
i
;i!;@;@; 0o;
;I"foundation/shadows; T;[ ;
25 | 0; @
26 | ; 0;
i;o; ;o;;
i;i;o;;
i;i";@;@; 0o;
;I"foundation/typography; T;[ ;
27 | 0; @
28 | ; 0;
i;o; ;o;;
i;i;o;;
i;i%;@;@; 0o;
;I"foundation/z-index; T;[ ;
29 | 0; @
30 | ; 0;
i;o; ;o;;
i;i;o;;
i;i";@;@; 0;
31 | 0; @
32 | ; I"S@import 'foundation/utilities';
33 | @import 'foundation/colors';
34 | @import 'foundation/spacing';
35 | @import 'foundation/borders';
36 | @import 'foundation/border-radius';
37 | @import 'foundation/duration';
38 | @import 'foundation/easing';
39 | @import 'foundation/layout';
40 | @import 'foundation/shadows';
41 | @import 'foundation/typography';
42 | @import 'foundation/z-index';
43 | ; T;
i;o; ;o;;
i;i;o;;
i;i;@;@:@has_childrenT
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* global __dirname, require, module*/
2 |
3 | const webpack = require('webpack');
4 | const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
5 | const ExtractTextPlugin = require("extract-text-webpack-plugin");
6 | const path = require('path');
7 | const env = require('yargs').argv.env; // use --env with webpack 2
8 |
9 | let libraryName = 'polaris-vue';
10 | let libraryNameCamelCase= 'PolarisVue';
11 |
12 | let plugins = [], outputFile;
13 |
14 | if (env === 'build') {
15 | plugins.push(new UglifyJsPlugin({ minimize: true }));
16 | plugins.push(new webpack.DefinePlugin({
17 | 'process.env': {
18 | NODE_ENV: '"production"'
19 | }
20 | }));
21 | outputFile = libraryName + '.min.js';
22 | } else {
23 | plugins.push(new webpack.DefinePlugin({
24 | 'process.env': {
25 | NODE_ENV: '"development"'
26 | }
27 | }));
28 | outputFile = libraryName + '.js';
29 | }
30 |
31 | plugins.push(new ExtractTextPlugin(libraryName+".css"));
32 |
33 | const config = {
34 | entry: __dirname + '/src/index.js',
35 | devtool: 'source-map',
36 | output: {
37 | path: __dirname + '/lib',
38 | filename: outputFile,
39 | library: libraryNameCamelCase,
40 | libraryTarget: 'umd',
41 | umdNamedDefine: true
42 | },
43 | module: {
44 | rules: [
45 | {
46 | test: /(\.jsx|\.js)$/,
47 | loader: 'babel-loader',
48 | exclude: /(node_modules|bower_components)/
49 | },
50 | {
51 | test: /\.css$/,
52 | loader: ExtractTextPlugin.extract("css-loader")
53 | },
54 | {
55 | test: /\.vue$/,
56 | loader: 'vue-loader',
57 | },
58 | {
59 | test: /\.svg$/,
60 | loader: 'svg-inline-loader'
61 | },
62 | ]
63 | },
64 | resolve: {
65 | modules: [path.resolve('./node_modules'), path.resolve('./src')],
66 | extensions: ['.json', '.js']
67 | },
68 | plugins: plugins,
69 | externals: {
70 | vue: 'vue'
71 | }
72 | };
73 |
74 | module.exports = config;
75 |
--------------------------------------------------------------------------------
/src/components/PolarisPageActions.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
11 | {{ title }}
12 |
13 |
26 |
18 |
25 |
22 |
24 |
27 |
29 |
3 |
4 |
5 |
6 |
14 | {{ action.content }}
15 |
16 |
17 |
18 |
19 |
25 | {{ primaryAction.content }}
26 |
27 |
28 |
29 |
30 |
31 |
32 |
61 |
--------------------------------------------------------------------------------
/src/resources/styles/styles/components/ActionList.scss:
--------------------------------------------------------------------------------
1 | $image-size: rem(20px);
2 | $item-min-height: rem(40px);
3 | $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
4 |
5 | .Polaris-ActionList {
6 | list-style: none;
7 | margin: 0;
8 | padding: spacing(tight) 0;
9 | }
10 |
11 | .Polaris-ActionList__Section--withoutTitle:not(:first-child) {
12 | border-top: border();
13 | margin-top: spacing(tight);
14 | padding-top: spacing(tight);
15 | }
16 |
17 | .Polaris-ActionList__Actions {
18 | list-style: none;
19 | margin: 0;
20 | padding: 0;
21 | }
22 |
23 | .Polaris-ActionList__Title {
24 | @include text-style-subheading;
25 | padding: (spacing(tight) * 1.5) spacing();
26 | border-bottom: border();
27 | }
28 |
29 | .Polaris-ActionList__Item {
30 | @include unstyled-button;
31 | @include unstyled-link;
32 | display: block;
33 | width: 100%;
34 | min-height: $item-min-height;
35 | padding: $item-vertical-padding spacing();
36 | text-align: left;
37 | cursor: pointer;
38 | border-radius: 0;
39 | color: color(ink, light);
40 |
41 | &:hover,
42 | &:focus,
43 | &:active {
44 | background: color(indigo);
45 | outline: none;
46 | color: color(white);
47 |
48 | .Polaris-ActionList__Image {
49 | @include recolor-icon(color(sky));
50 | }
51 | }
52 |
53 | &.Polaris-ActionList--disabled {
54 | color: color(ink, lightest);
55 | cursor: default;
56 | pointer-events: none;
57 |
58 | .Polaris-ActionList__Image {
59 | @include recolor-icon(color(ink, lightest));
60 | }
61 | }
62 | }
63 |
64 | .Polaris-ActionList__Content {
65 | display: flex;
66 | align-items: center;
67 | }
68 |
69 | .Polaris-ActionList__Image {
70 | @include recolor-icon(color(ink, light));
71 | display: flex;
72 | flex: 0 0 auto;
73 | justify-content: center;
74 | align-items: center;
75 | height: $image-size;
76 | width: $image-size;
77 | border-radius: border-radius();
78 |
79 | // We need the negative margin to ensure that the image does not set
80 | // the minimum height of the action item.
81 | margin: (-0.5 * $image-size) spacing() (-0.5 * $image-size) 0;
82 | background-size: cover;
83 | background-position: center center;
84 | }
85 |
86 | .Polaris-ActionList__Text {
87 | @include layout-flex-fix;
88 | flex: 1 0 auto;
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/PolarisStack.vue:
--------------------------------------------------------------------------------
1 |
74 |
--------------------------------------------------------------------------------
/src/components/PolarisPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
19 |
84 |
--------------------------------------------------------------------------------
14 |
16 |