├── .babelrc ├── .editorconfig ├── .gitignore ├── .nvmrc ├── README.md ├── app.js ├── lib ├── polaris-vue.css ├── polaris-vue.css.map ├── polaris-vue.js ├── polaris-vue.js.map └── polaris-vue.min.js ├── package-lock.json ├── package.json ├── src ├── ComponentHelpers.js ├── SvgSource.js ├── components │ ├── DynamicTag.vue │ ├── DynamicTemplate.vue │ ├── OptionalTag.vue │ ├── PolarisAccountConnection.vue │ ├── PolarisActionList.vue │ ├── PolarisActionListItem.vue │ ├── PolarisActionListSection.vue │ ├── PolarisAvatar.vue │ ├── PolarisBadge.vue │ ├── PolarisBanner.vue │ ├── PolarisBreadcrumbs.vue │ ├── PolarisBreadcrumbs.vue.html │ ├── PolarisButton.vue │ ├── PolarisButtonGroup.vue │ ├── PolarisButtonGroupItem.vue │ ├── PolarisCalloutCard.vue │ ├── PolarisCaption.vue │ ├── PolarisCard.vue │ ├── PolarisCardSection.vue │ ├── PolarisCheckbox.vue │ ├── PolarisChoice.vue │ ├── PolarisChoiceList.vue │ ├── PolarisCollapsible.vue │ ├── PolarisColorPicker.vue │ ├── PolarisColorPickerAlphaPicker.vue │ ├── PolarisColorPickerHuePicker.vue │ ├── PolarisColorPickerSlidable.vue │ ├── PolarisConnected.vue │ ├── PolarisConnectedItem.vue │ ├── PolarisDatePicker.vue │ ├── PolarisDatePickerDay.vue │ ├── PolarisDatePickerMonth.vue │ ├── PolarisDatePickerWeekday.vue │ ├── PolarisDescriptionList.vue │ ├── PolarisDisplayText.vue │ ├── PolarisEmptyState.vue │ ├── PolarisFooterHelp.vue │ ├── PolarisFormLayout.vue │ ├── PolarisFormLayoutGroup.vue │ ├── PolarisFormLayoutGroupItemWrapper.vue │ ├── PolarisFormLayoutItem.vue │ ├── PolarisHeading.vue │ ├── PolarisIcon.vue │ ├── PolarisImage.vue │ ├── PolarisKeyboardKey.vue │ ├── PolarisLabel.vue │ ├── PolarisLabelled.vue │ ├── PolarisLayout.vue │ ├── PolarisLayoutAnnotatedSection.vue │ ├── PolarisLayoutSection.vue │ ├── PolarisLink.vue │ ├── PolarisList.vue │ ├── PolarisListItem.vue │ ├── PolarisPage.vue │ ├── PolarisPageAction.vue │ ├── PolarisPageActions.vue │ ├── PolarisPageHeader.vue │ ├── PolarisPagination.vue │ ├── PolarisPopover.vue │ ├── PolarisPopoverOverlay.vue │ ├── PolarisPopoverPane.vue │ ├── PolarisPopoverSection.vue │ ├── PolarisPositionedOverlay.vue │ ├── PolarisProgressBar.vue │ ├── PolarisRadioButton.vue │ ├── PolarisResourceList.vue │ ├── PolarisResourceListItem.vue │ ├── PolarisScrollable.vue │ ├── PolarisSelect.vue │ ├── PolarisSettingAction.vue │ ├── PolarisSettingToggle.vue │ ├── PolarisSkeletonBodyText.vue │ ├── PolarisSkeletonDisplayText.vue │ ├── PolarisSkeletonPage.vue │ ├── PolarisSpinner.vue │ ├── PolarisStack.vue │ ├── PolarisStackItem.vue │ ├── PolarisSubheading.vue │ ├── PolarisTabs.vue │ ├── PolarisTag.vue │ ├── PolarisTextContainer.vue │ ├── PolarisTextField.vue │ ├── PolarisTextFieldResizer.vue │ ├── PolarisTextFieldSpinner.vue │ ├── PolarisTextStyle.vue │ ├── PolarisThumbnail.vue │ ├── PolarisUnstyledLink.vue │ ├── PolarisVisuallyHidden.vue │ └── transitions │ │ ├── CollapseTransition.vue │ │ ├── FadeTransition.vue │ │ └── FadeUpTransition.vue ├── config │ └── config.js ├── data │ ├── Action.js │ ├── HSBColor.js │ ├── RGBColor.js │ └── date-utils.js ├── index.js ├── resources │ ├── alert-icon.svg │ ├── arrow-left.svg │ ├── arrow-right.svg │ ├── arrow-up-down.svg │ ├── avatars │ │ ├── avatar-1.svg │ │ ├── avatar-2.svg │ │ ├── avatar-3.svg │ │ ├── avatar-4.svg │ │ ├── avatar-5.svg │ │ ├── avatar-6.svg │ │ ├── avatar-7.svg │ │ ├── avatar-8.svg │ │ ├── avatar-9.svg │ │ └── index.js │ ├── banner │ │ ├── circle-alert.svg │ │ ├── circle-barred.svg │ │ ├── circle-check-mark.svg │ │ ├── circle-information.svg │ │ ├── confetti.svg │ │ └── flag.svg │ ├── cancel-small.svg │ ├── caret-down.svg │ ├── caret-up.svg │ ├── checkbox-error-icon.svg │ ├── checkbox.svg │ ├── chevron-icon.svg │ ├── disclosure.svg │ ├── dismiss-icon.svg │ ├── footer-help.svg │ ├── icons │ │ ├── add.svg │ │ ├── alert.svg │ │ ├── arrow-down.svg │ │ ├── arrow-left.svg │ │ ├── arrow-right.svg │ │ ├── arrow-up-down.svg │ │ ├── arrow-up.svg │ │ ├── calendar.svg │ │ ├── cancel-small.svg │ │ ├── cancel.svg │ │ ├── caret-down.svg │ │ ├── caret-up.svg │ │ ├── checkmark.svg │ │ ├── chevron-down.svg │ │ ├── chevron-left.svg │ │ ├── chevron-right.svg │ │ ├── chevron-up.svg │ │ ├── circle-cancel.svg │ │ ├── circle-chevron-down.svg │ │ ├── circle-chevron-left.svg │ │ ├── circle-chevron-right.svg │ │ ├── circle-chevron-up.svg │ │ ├── circle-plus.svg │ │ ├── conversation.svg │ │ ├── delete.svg │ │ ├── disable.svg │ │ ├── dispute.svg │ │ ├── duplicate.svg │ │ ├── embed.svg │ │ ├── export.svg │ │ ├── external.svg │ │ ├── help.svg │ │ ├── horizontal-dots.svg │ │ ├── import.svg │ │ ├── index.js │ │ ├── notes.svg │ │ ├── print.svg │ │ ├── refresh.svg │ │ ├── risk.svg │ │ ├── save.svg │ │ ├── search.svg │ │ ├── subtract.svg │ │ └── view.svg │ ├── placeholder.svg │ ├── spinner-large.svg │ ├── spinner-small.svg │ └── styles │ │ ├── .sass-cache │ │ ├── 3784ff07a3edcd23e5a9011b5d2181ee5fd0388f │ │ │ ├── components.scssc │ │ │ ├── foundation.scssc │ │ │ ├── global.scssc │ │ │ └── shared.scssc │ │ ├── 75e7aa77c1638214e006658ba63ecb4f9209a4f4 │ │ │ ├── accessibility.scssc │ │ │ ├── breakpoints.scssc │ │ │ ├── buttons.scssc │ │ │ ├── controls.scssc │ │ │ ├── icons.scssc │ │ │ ├── layout.scssc │ │ │ ├── links.scssc │ │ │ ├── page.scssc │ │ │ ├── skeleton.scssc │ │ │ └── typography.scssc │ │ ├── 95a37c6fd2c633741302b5b5c89c69671a6dcb9b │ │ │ ├── border-radius.scssc │ │ │ ├── borders.scssc │ │ │ ├── colors.scssc │ │ │ ├── duration.scssc │ │ │ ├── easing.scssc │ │ │ ├── layout.scssc │ │ │ ├── shadows.scssc │ │ │ ├── spacing.scssc │ │ │ ├── typography.scssc │ │ │ ├── utilities.scssc │ │ │ └── z-index.scssc │ │ ├── a9279a0b8b36639bb6a04c2ff4541eb631ad85e7 │ │ │ ├── AccountConnection.scssc │ │ │ ├── ActionList.scssc │ │ │ ├── Avatar.scssc │ │ │ ├── Badge.scssc │ │ │ ├── Banner.scssc │ │ │ ├── Breadcrumbs.scssc │ │ │ ├── Button.scssc │ │ │ ├── ButtonGroup.scssc │ │ │ ├── CalloutCard.scssc │ │ │ ├── Caption.scssc │ │ │ ├── Card.scssc │ │ │ ├── Checkbox.scssc │ │ │ ├── Choice.scssc │ │ │ ├── ChoiceList.scssc │ │ │ ├── Collapsible.scssc │ │ │ ├── ColorPicker.scssc │ │ │ ├── Connected.scssc │ │ │ ├── DatePicker.scssc │ │ │ ├── DescriptionList.scssc │ │ │ ├── DisplayText.scssc │ │ │ ├── EmptyState.scssc │ │ │ ├── FooterHelp.scssc │ │ │ ├── FormLayout.scssc │ │ │ ├── Heading.scssc │ │ │ ├── Icon.scssc │ │ │ ├── KeyboardKey.scssc │ │ │ ├── Label.scssc │ │ │ ├── Labelled.scssc │ │ │ ├── Layout.scssc │ │ │ ├── Link.scssc │ │ │ ├── List.scssc │ │ │ ├── Page.scssc │ │ │ ├── PageActions.scssc │ │ │ ├── Pagination.scssc │ │ │ ├── Popover.scssc │ │ │ ├── PositionedOverlay.scssc │ │ │ ├── ProgressBar.scssc │ │ │ ├── RadioButton.scssc │ │ │ ├── ResourceList.scssc │ │ │ ├── Scrollable.scssc │ │ │ ├── Select.scssc │ │ │ ├── SettingAction.scssc │ │ │ ├── SkeletonBodyText.scssc │ │ │ ├── SkeletonDisplayText.scssc │ │ │ ├── SkeletonPage.scssc │ │ │ ├── Spinner.scssc │ │ │ ├── Stack.scssc │ │ │ ├── Subheading.scssc │ │ │ ├── Tabs.scssc │ │ │ ├── Tag.scssc │ │ │ ├── TextContainer.scssc │ │ │ ├── TextField.scssc │ │ │ ├── TextStyle.scssc │ │ │ ├── Thumbnail.scssc │ │ │ ├── Tooltip.scssc │ │ │ └── VisuallyHidden.scssc │ │ └── dc5f439b431fea23dd598b262e484e1df1c91976 │ │ │ └── styles.scssc │ │ ├── styles.css │ │ ├── styles.css.map │ │ ├── styles.scss │ │ └── styles │ │ ├── components.scss │ │ ├── components │ │ ├── AccountConnection.scss │ │ ├── ActionList.scss │ │ ├── Avatar.scss │ │ ├── Badge.scss │ │ ├── Banner.scss │ │ ├── Breadcrumbs.scss │ │ ├── Button.scss │ │ ├── ButtonGroup.scss │ │ ├── CalloutCard.scss │ │ ├── Caption.scss │ │ ├── Card.scss │ │ ├── Checkbox.scss │ │ ├── Choice.scss │ │ ├── ChoiceList.scss │ │ ├── Collapsible.scss │ │ ├── ColorPicker.scss │ │ ├── Connected.scss │ │ ├── DatePicker.scss │ │ ├── DescriptionList.scss │ │ ├── DisplayText.scss │ │ ├── EmptyState.scss │ │ ├── FooterHelp.scss │ │ ├── FormLayout.scss │ │ ├── Heading.scss │ │ ├── Icon.scss │ │ ├── KeyboardKey.scss │ │ ├── Label.scss │ │ ├── Labelled.scss │ │ ├── Layout.scss │ │ ├── Link.scss │ │ ├── List.scss │ │ ├── Page.scss │ │ ├── PageActions.scss │ │ ├── Pagination.scss │ │ ├── Popover.scss │ │ ├── PositionedOverlay.scss │ │ ├── ProgressBar.scss │ │ ├── RadioButton.scss │ │ ├── ResourceList.scss │ │ ├── Scrollable.scss │ │ ├── Select.scss │ │ ├── SettingAction.scss │ │ ├── SkeletonBodyText.scss │ │ ├── SkeletonDisplayText.scss │ │ ├── SkeletonPage.scss │ │ ├── Spinner.scss │ │ ├── Stack.scss │ │ ├── Subheading.scss │ │ ├── Tabs.scss │ │ ├── Tag.scss │ │ ├── TextContainer.scss │ │ ├── TextField.scss │ │ ├── TextStyle.scss │ │ ├── Thumbnail.scss │ │ ├── Tooltip.scss │ │ └── VisuallyHidden.scss │ │ ├── foundation.scss │ │ ├── foundation │ │ ├── border-radius.scss │ │ ├── borders.scss │ │ ├── colors.scss │ │ ├── duration.scss │ │ ├── easing.scss │ │ ├── layout.scss │ │ ├── shadows.scss │ │ ├── spacing.scss │ │ ├── typography.scss │ │ ├── utilities.scss │ │ └── z-index.scss │ │ ├── global.scss │ │ ├── shared.scss │ │ └── shared │ │ ├── accessibility.scss │ │ ├── breakpoints.scss │ │ ├── buttons.scss │ │ ├── controls.scss │ │ ├── icons.scss │ │ ├── layout.scss │ │ ├── links.scss │ │ ├── page.scss │ │ ├── skeleton.scss │ │ └── typography.scss └── util │ ├── log.js │ └── loggers │ ├── ConsoleLogger.js │ └── logLevel.js ├── test ├── index.html ├── name-test.html ├── test-names.js └── test.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["babel-plugin-add-module-exports"] 4 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = LF 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # Remove some common IDE working directories 30 | .idea 31 | .vscode 32 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v6.10 2 | -------------------------------------------------------------------------------- /lib/polaris-vue.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"polaris-vue.css","sourceRoot":""} -------------------------------------------------------------------------------- /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 ", 38 | "license": "MIT", 39 | "dependencies": { 40 | "change-case": "^3.0.1", 41 | "node-sass": "^4.9.0", 42 | "sass-loader": "^6.0.6" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/SvgSource.js: -------------------------------------------------------------------------------- 1 | const FILL_REGEX = /fill="[^"]*"/g; 2 | const SVG_REGEX = /(]*>|<\/svg>)/g; 3 | const VIEWBOX_REGEX = /viewBox="([^"]*)"/; 4 | 5 | export default { 6 | create(str, classes) { 7 | str = str.replace(FILL_REGEX, (fill) => { 8 | return fill.includes('#FFF') ? 'fill="currentColor"' : ''; 9 | }); 10 | 11 | if (classes) { 12 | str = str.replace(/^ 2 | export default { 3 | render(createElement) { 4 | return createElement(this.tag, { 5 | on: this.on, 6 | domProps: { 7 | value: this.value, 8 | }, 9 | ref: 'element' 10 | }, this.$slots.default) 11 | }, 12 | props: { 13 | tag: { 14 | type: String, 15 | required: true 16 | }, 17 | on: { 18 | type: Object, 19 | default() { 20 | return {}; 21 | } 22 | }, 23 | value: { 24 | type: [String, Number], 25 | }, 26 | }, 27 | methods: { 28 | blur() { 29 | this.$refs.element.blur(); 30 | }, 31 | focus() { 32 | this.$refs.element.focus(); 33 | } 34 | } 35 | }; 36 | 37 | -------------------------------------------------------------------------------- /src/components/DynamicTemplate.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/components/OptionalTag.vue: -------------------------------------------------------------------------------- 1 | 2 | 25 | -------------------------------------------------------------------------------- /src/components/PolarisActionList.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 65 | -------------------------------------------------------------------------------- /src/components/PolarisActionListSection.vue: -------------------------------------------------------------------------------- 1 |
6 |

7 | {{ section.title }} 8 |

9 |
    10 | 14 |
15 |
16 | 17 | 18 | 19 | 20 | 72 | -------------------------------------------------------------------------------- /src/components/PolarisBadge.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/PolarisBreadcrumbs.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/PolarisButtonGroup.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/PolarisButtonGroupItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 32 | -------------------------------------------------------------------------------- /src/components/PolarisCaption.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/PolarisCardSection.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/PolarisChoice.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/PolarisCollapsible.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 42 | -------------------------------------------------------------------------------- /src/components/PolarisColorPickerHuePicker.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/PolarisConnected.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/PolarisConnectedItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/PolarisDatePickerWeekday.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 39 | -------------------------------------------------------------------------------- /src/components/PolarisDescriptionList.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/PolarisDisplayText.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/PolarisFooterHelp.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /src/components/PolarisFormLayout.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /src/components/PolarisFormLayoutGroup.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/PolarisFormLayoutGroupItemWrapper.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/PolarisFormLayoutItem.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/PolarisHeading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/PolarisImage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/PolarisKeyboardKey.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/PolarisLabel.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 38 | -------------------------------------------------------------------------------- /src/components/PolarisLayout.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/PolarisLayoutAnnotatedSection.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/PolarisLayoutSection.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | -------------------------------------------------------------------------------- /src/components/PolarisLink.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/PolarisList.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/PolarisListItem.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/PolarisPageActions.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 61 | -------------------------------------------------------------------------------- /src/components/PolarisPopoverOverlay.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/PolarisPopoverPane.vue: -------------------------------------------------------------------------------- 1 | 43 | -------------------------------------------------------------------------------- /src/components/PolarisPopoverSection.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/PolarisProgressBar.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 61 | -------------------------------------------------------------------------------- /src/components/PolarisRadioButton.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/PolarisResourceList.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | -------------------------------------------------------------------------------- /src/components/PolarisScrollable.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 53 | -------------------------------------------------------------------------------- /src/components/PolarisSettingAction.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/PolarisSettingToggle.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/PolarisSkeletonBodyText.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /src/components/PolarisSkeletonDisplayText.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/PolarisSkeletonPage.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | 68 | -------------------------------------------------------------------------------- /src/components/PolarisSpinner.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 52 | -------------------------------------------------------------------------------- /src/components/PolarisStack.vue: -------------------------------------------------------------------------------- 1 | 74 | -------------------------------------------------------------------------------- /src/components/PolarisStackItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/PolarisSubheading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/PolarisTabs.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 24 | 66 | -------------------------------------------------------------------------------- /src/components/PolarisTag.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/PolarisTextContainer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /src/components/PolarisTextFieldResizer.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/PolarisTextFieldSpinner.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/PolarisTextStyle.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/PolarisThumbnail.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/PolarisUnstyledLink.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/PolarisVisuallyHidden.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/transitions/CollapseTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /src/components/transitions/FadeTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 16 | 17 | 25 | -------------------------------------------------------------------------------- /src/components/transitions/FadeUpTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /src/config/config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | debug: process.env.NODE_ENV != 'production', 3 | logPrefix: '[PolarisVue] ', 4 | }; 5 | -------------------------------------------------------------------------------- /src/data/Action.js: -------------------------------------------------------------------------------- 1 | export class Action { 2 | constructor() { 3 | this.content = null; 4 | this.accessibilityLabel = null, 5 | this.url = null; 6 | this.onAction = null; 7 | this.disabled = false; 8 | this.destructive = false; 9 | this.icon = null; 10 | } 11 | 12 | setContent(v) { 13 | this.content = v; 14 | return this; 15 | } 16 | 17 | setAccessibilityLabel(v) { 18 | this.accessibilityLabel = v; 19 | return this; 20 | } 21 | 22 | setUrl(v) { 23 | this.url = v; 24 | return this; 25 | } 26 | 27 | setOnAction(v) { 28 | this.onAction = v; 29 | return this; 30 | } 31 | 32 | setDisabled(v) { 33 | this.disabled = v; 34 | return this; 35 | } 36 | 37 | setDestructive(v) { 38 | this.destructive = v; 39 | return this; 40 | } 41 | 42 | setIcon(v) { 43 | this.icon = v; 44 | return this; 45 | } 46 | } -------------------------------------------------------------------------------- /src/data/HSBColor.js: -------------------------------------------------------------------------------- 1 | import RGBColor from './RGBColor.js'; 2 | 3 | export default class HSBColor { 4 | constructor(hue, saturation, brightness, alpha = 1) { 5 | this.hue = hue; 6 | this.saturation = saturation; 7 | this.brightness = brightness; 8 | this.alpha = alpha; 9 | } 10 | 11 | toRGB() { 12 | const chroma = this.brightness * this.saturation; 13 | const huePrime = this.hue / 60; 14 | const hueDelta = 1 - Math.abs(huePrime % 2 - 1); 15 | const intermediateValue = chroma * hueDelta; 16 | 17 | let red = 0; 18 | let green = 0; 19 | let blue = 0; 20 | if (huePrime >= 0 && huePrime <= 1) { 21 | red = chroma; 22 | green = intermediateValue; 23 | blue = 0; 24 | } 25 | 26 | if (huePrime >= 1 && huePrime <= 2) { 27 | red = intermediateValue; 28 | green = chroma; 29 | blue = 0; 30 | } 31 | 32 | if (huePrime >= 2 && huePrime <= 3) { 33 | red = 0; 34 | green = chroma; 35 | blue = intermediateValue; 36 | } 37 | 38 | if (huePrime >= 3 && huePrime <= 4) { 39 | red = 0; 40 | green = intermediateValue; 41 | blue = chroma; 42 | } 43 | 44 | if (huePrime >= 4 && huePrime <= 5) { 45 | red = intermediateValue; 46 | green = 0; 47 | blue = chroma; 48 | } 49 | 50 | if (huePrime >= 5 && huePrime <= 6) { 51 | red = chroma; 52 | green = 0; 53 | blue = intermediateValue; 54 | } 55 | 56 | const chromaBrightnessDelta = this.brightness - chroma; 57 | red += chromaBrightnessDelta; 58 | green += chromaBrightnessDelta; 59 | blue += chromaBrightnessDelta; 60 | 61 | return new RGBColor( 62 | Math.round(red * 255), 63 | Math.round(green * 255), 64 | Math.round(blue * 255), 65 | this.alpha 66 | ); 67 | } 68 | } -------------------------------------------------------------------------------- /src/data/RGBColor.js: -------------------------------------------------------------------------------- 1 | import HSBColor from './HSBColor.js'; 2 | 3 | export default class RGBColor { 4 | constructor(red, green, blue, alpha = 1) { 5 | this.red = red; 6 | this.green = green; 7 | this.blue = blue; 8 | this.alpha = alpha; 9 | } 10 | 11 | toCssString() { 12 | return 'rgba('+this.red+', '+this.green+', '+this.blue+', '+this.alpha+')'; 13 | } 14 | 15 | toHSB() { 16 | const r = this.red / 255; 17 | const g = this.green / 255; 18 | const b = this.blue / 255; 19 | 20 | const largestComponent = Math.max(r, g, b); 21 | const smallestComponent = Math.min(r, g, b); 22 | 23 | const delta = largestComponent - smallestComponent; 24 | const saturation = largestComponent === 0 25 | ? 0 26 | : delta / largestComponent; 27 | 28 | let huePercentage = 0; 29 | switch (largestComponent) { 30 | case r: 31 | huePercentage = (g - b) / delta % 6; 32 | break; 33 | case g: 34 | huePercentage = (b - r) / delta + 2; 35 | break; 36 | case b: 37 | huePercentage = (r - g) / delta + 4; 38 | break; 39 | } 40 | 41 | const hue = Math.round(huePercentage / 6 * 360); 42 | 43 | return new HSBColor( 44 | Math.min(0, Math.max(360, hue)), 45 | Math.min(0, Math.max(1, saturation)), 46 | Math.min(0, Math.max(1, largestComponent)), 47 | this.alpha 48 | ); 49 | 50 | } 51 | } -------------------------------------------------------------------------------- /src/data/date-utils.js: -------------------------------------------------------------------------------- 1 | export default { 2 | months: [ 3 | 'January', 4 | 'February', 5 | 'March', 6 | 'April', 7 | 'May', 8 | 'June', 9 | 'July', 10 | 'August', 11 | 'September', 12 | 'October', 13 | 'November', 14 | 'December', 15 | ], 16 | weekdays: [ 17 | 'Sunday', 18 | 'Monday', 19 | 'Tuesday', 20 | 'Wednesday', 21 | 'Thursday', 22 | 'Friday', 23 | 'Saturday', 24 | ], 25 | isSameDay(a, b) { 26 | return (a.getDate() == b.getDate()) && 27 | (a.getMonth() == b.getMonth()) && 28 | (a.getFullYear() == b.getFullYear()); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/resources/alert-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/arrow-up-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-2.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-3.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-4.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-5.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-6.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-7.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-8.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/avatars/avatar-9.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/resources/banner/circle-alert.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/banner/circle-barred.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/banner/circle-check-mark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/banner/circle-information.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/banner/confetti.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/banner/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/cancel-small.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/caret-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/caret-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/checkbox-error-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/checkbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/chevron-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/disclosure.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/dismiss-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/footer-help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/alert.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/arrow-up-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/cancel-small.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/cancel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/caret-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/caret-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/checkmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/chevron-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/chevron-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/circle-cancel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/circle-chevron-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/circle-chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/circle-chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/circle-chevron-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/circle-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/conversation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/disable.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/dispute.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/duplicate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/embed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/export.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/external.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/help.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/icons/horizontal-dots.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/import.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/notes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/risk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/save.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/subtract.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/icons/view.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/resources/placeholder.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/placeholder.svg -------------------------------------------------------------------------------- /src/resources/spinner-large.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/spinner-small.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/3784ff07a3edcd23e5a9011b5d2181ee5fd0388f/global.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/3784ff07a3edcd23e5a9011b5d2181ee5fd0388f/global.scssc -------------------------------------------------------------------------------- /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/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/accessibility.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/accessibility.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/breakpoints.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/breakpoints.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/buttons.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/buttons.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/controls.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/controls.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/icons.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/icons.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/layout.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/layout.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/page.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/page.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/skeleton.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/skeleton.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/typography.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/75e7aa77c1638214e006658ba63ecb4f9209a4f4/typography.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/border-radius.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/border-radius.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/borders.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/borders.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/colors.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/duration.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/duration.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/easing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/easing.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/layout.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/layout.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/shadows.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/shadows.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/spacing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/spacing.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/typography.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/typography.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/utilities.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/z-index.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/95a37c6fd2c633741302b5b5c89c69671a6dcb9b/z-index.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/AccountConnection.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/AccountConnection.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ActionList.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ActionList.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Avatar.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Avatar.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Badge.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Badge.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Banner.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Banner.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Breadcrumbs.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Breadcrumbs.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Button.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Button.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ButtonGroup.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ButtonGroup.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/CalloutCard.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/CalloutCard.scssc -------------------------------------------------------------------------------- /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/Card.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Card.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Checkbox.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Checkbox.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Choice.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Choice.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ChoiceList.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ChoiceList.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Collapsible.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Collapsible.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ColorPicker.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ColorPicker.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Connected.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Connected.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/DatePicker.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/DatePicker.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/DescriptionList.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/DescriptionList.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/DisplayText.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/DisplayText.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/EmptyState.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/EmptyState.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/FooterHelp.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/FooterHelp.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/FormLayout.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/FormLayout.scssc -------------------------------------------------------------------------------- /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/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Icon.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Icon.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/KeyboardKey.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/KeyboardKey.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Label.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Label.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Labelled.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Labelled.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Layout.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Layout.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Link.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Link.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/List.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/List.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Page.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Page.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/PageActions.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/PageActions.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Pagination.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Pagination.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Popover.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Popover.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/PositionedOverlay.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/PositionedOverlay.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ProgressBar.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ProgressBar.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/RadioButton.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/RadioButton.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ResourceList.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/ResourceList.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Scrollable.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Scrollable.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Select.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Select.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SettingAction.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SettingAction.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SkeletonBodyText.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SkeletonBodyText.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SkeletonDisplayText.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SkeletonDisplayText.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SkeletonPage.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/SkeletonPage.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Spinner.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Spinner.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Stack.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Stack.scssc -------------------------------------------------------------------------------- /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/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Tabs.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Tabs.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Tag.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Tag.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/TextContainer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/TextContainer.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/TextField.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/TextField.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/TextStyle.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/TextStyle.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Thumbnail.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Thumbnail.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Tooltip.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EastsideCo/polaris-vue/5bca44e085f5229d3b09e1f1546ce78e7a25f981/src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/Tooltip.scssc -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/a9279a0b8b36639bb6a04c2ff4541eb631ad85e7/VisuallyHidden.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 35b298baee09118a592ef435a0e0dba8a1eeddf7 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::RuleNode: 4 | @rule[I".Polaris-VisuallyHidden:ET:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Class: 5 | @nameI"Polaris-VisuallyHidden; 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/VisuallyHidden.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"visually-hidden; T: 11 | @args[:@keywords{: @splat0:@kwarg_splat0;[;0: @options{;i;o; ;o;;i;i;o;;i;i ;@;@;0;*@&;i;o; ;@;o;;i;i;@;@:@has_childrenT;0;*@&:@templateI"=.Polaris-VisuallyHidden { 12 | @include visually-hidden; 13 | } 14 | ; T;i;o; ;o;;i;i;o;;i;i;@;@;+T -------------------------------------------------------------------------------- /src/resources/styles/.sass-cache/dc5f439b431fea23dd598b262e484e1df1c91976/styles.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | e2185c9e533f8adf10a9fb94b6f4bf8a87739169 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::ImportNode :@imported_filenameI"styles/foundation: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.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"styles/shared; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"styles/global; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"styles/components; T;[; 12 | 0; @ 13 | ; 0; i ;o; ;o;; i ;i;o;; i ;i!;@;@;0; 14 | 0; @ 15 | ; I"q@import 'styles/foundation'; 16 | @import 'styles/shared'; 17 | @import 'styles/global'; 18 | @import 'styles/components'; 19 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /src/resources/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'styles/foundation'; 2 | @import 'styles/shared'; 3 | @import 'styles/global'; 4 | @import 'styles/components'; 5 | -------------------------------------------------------------------------------- /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/resources/styles/styles/components/AccountConnection.scss: -------------------------------------------------------------------------------- 1 | .Polaris-AccountConnection__TermsOfService { 2 | margin-top: spacing(loose); 3 | } 4 | 5 | .Polaris-AccountConnection__Content { 6 | > * + * { 7 | margin-top: spacing(tight); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /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/resources/styles/styles/components/Avatar.scss: -------------------------------------------------------------------------------- 1 | $small-size: rem(32px); 2 | $medium-size: rem(40px); 3 | $large-size: rem(60px); 4 | 5 | $avatar-initial-offset: 2px; 6 | 7 | .Polaris-Avatar { 8 | position: relative; 9 | display: flex; 10 | overflow: hidden; 11 | justify-content: center; 12 | align-items: center; 13 | background: color(teal); 14 | border-radius: 50%; 15 | user-select: none; 16 | } 17 | 18 | .Polaris-Avatar--sizeSmall { 19 | height: $small-size; 20 | width: $small-size; 21 | font-size: rem(14px); 22 | } 23 | 24 | .Polaris-Avatar--sizeMedium { 25 | height: $medium-size; 26 | width: $medium-size; 27 | font-size: rem(18px); 28 | } 29 | 30 | .Polaris-Avatar--sizeLarge { 31 | height: $large-size; 32 | width: $large-size; 33 | font-size: rem(26px); 34 | } 35 | 36 | .Polaris-Avatar--styleOne { 37 | background: color(teal); 38 | } 39 | 40 | .Polaris-Avatar--styleTwo { 41 | background: color(red); 42 | } 43 | 44 | .Polaris-Avatar--styleThree { 45 | background: color(orange); 46 | } 47 | 48 | .Polaris-Avatar--styleFour { 49 | background: color(green); 50 | } 51 | 52 | .Polaris-Avatar--styleFive { 53 | background: color(blue); 54 | } 55 | 56 | .Polaris-Avatar--styleSix { 57 | background: color(purple); 58 | } 59 | 60 | .Polaris-Avatar__Image { 61 | width: 100%; 62 | position: absolute; 63 | } 64 | 65 | .Polaris-Avatar__Initials { 66 | line-height: 0; 67 | color: color(white); 68 | text-transform: uppercase; 69 | margin-left: $avatar-initial-offset; 70 | letter-spacing: $avatar-initial-offset; 71 | } 72 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/Badge.scss: -------------------------------------------------------------------------------- 1 | $height: rem(20px); 2 | $horizontal-padding: ($height / 2); 3 | 4 | $pip-size: rem(10px); 5 | $pip-spacing: ($height - $pip-size) / 2; 6 | 7 | @mixin pip-color($color) { 8 | .Polaris-Badge__Pip { 9 | color: $color; 10 | } 11 | } 12 | 13 | .Polaris-Badge { 14 | @include pip-color(color(ink, lightest)); 15 | display: inline-flex; 16 | align-items: center; 17 | padding: 0 $horizontal-padding; 18 | background-color: color(sky); 19 | border: 2px solid color(white); 20 | border-radius: $height; 21 | font-size: rem(13px); 22 | line-height: $height; 23 | color: color(ink, light); 24 | } 25 | 26 | .Polaris-Badge--statusSuccess { 27 | @include pip-color(color(green, dark)); 28 | background-color: color(green, light); 29 | color: color(green, text); 30 | } 31 | 32 | .Polaris-Badge--statusInfo { 33 | @include pip-color(color(blue, dark)); 34 | background-color: color(blue, light); 35 | color: color(blue, text); 36 | } 37 | 38 | .Polaris-Badge--statusAttention { 39 | @include pip-color(color(yellow, dark)); 40 | background-color: color(yellow, light); 41 | color: color(yellow, text); 42 | } 43 | 44 | .Polaris-Badge--statusWarning { 45 | @include pip-color(color(orange, dark)); 46 | background-color: color(orange, light); 47 | color: color(orange, text); 48 | } 49 | 50 | .Polaris-Badge--progressIncomplete .Polaris-Badge__Pip { 51 | background: transparent; 52 | } 53 | 54 | .Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip { 55 | background: linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent); 56 | } 57 | 58 | .Polaris-Badge--progressComplete .Polaris-Badge__Pip { 59 | background: currentColor; 60 | } 61 | 62 | .Polaris-Badge__Pip { 63 | height: $pip-size; 64 | width: $pip-size; 65 | margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding); 66 | border: rem(2px) solid currentColor; 67 | border-radius: 50%; 68 | } 69 | -------------------------------------------------------------------------------- /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/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/components/Caption.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Caption { 2 | @include text-style-caption; 3 | margin: 0; 4 | } 5 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/Card.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Card { 2 | overflow: hidden; 3 | background-color: color(white); 4 | box-shadow: shadow(); 5 | 6 | + .Polaris-Card { 7 | margin-top: spacing(loose); 8 | } 9 | 10 | @include page-content-when-not-partially-condensed { 11 | border-radius: border-radius(); 12 | } 13 | } 14 | 15 | .Polaris-Card--subdued { 16 | background-color: color(sky, lighter); 17 | } 18 | 19 | .Polaris-Card__Header { 20 | padding: spacing(loose) spacing(loose) 0; 21 | } 22 | 23 | .Polaris-Card__Section { 24 | padding: spacing(loose); 25 | 26 | + .Polaris-Card__Section { 27 | border-top: 1px solid color(sky); 28 | } 29 | } 30 | 31 | .Polaris-Card__Section--subdued { 32 | background-color: color(sky, lighter); 33 | } 34 | 35 | .Polaris-Card__SectionHeader { 36 | padding-bottom: spacing(tight); 37 | } 38 | 39 | .Polaris-Card__Footer { 40 | display: flex; 41 | justify-content: flex-end; 42 | padding: 0 spacing(loose) spacing(loose); 43 | } 44 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/Choice.scss: -------------------------------------------------------------------------------- 1 | $control-size: rem(16px); 2 | 3 | // Need to push the control down just a little to have it appear 4 | // vertically centered with the label. 5 | $control-vertical-adjustment: 2px; 6 | 7 | // Negative margin on the left compensates for the icon being inset 8 | // within its viewbox. 9 | $icon-horizontal-adjustment: 2px; 10 | 11 | .Polaris-Choice { 12 | display: inline-flex; 13 | justify-content: flex-start; 14 | padding: spacing(extra-tight) 0; 15 | } 16 | 17 | .Polaris-Choice--labelHidden { 18 | > .Polaris-Choice__Label { 19 | @include visually-hidden; 20 | } 21 | } 22 | 23 | .Polaris-Choice__Control { 24 | display: flex; 25 | flex: 0 0 auto; 26 | align-items: stretch; 27 | height: $control-size; 28 | width: $control-size; 29 | margin-top: $control-vertical-adjustment; 30 | margin-right: spacing(tight); 31 | 32 | > * { 33 | width: 100%; 34 | } 35 | } 36 | 37 | .Polaris-Choice__Label { 38 | @include text-style-body; 39 | -webkit-tap-highlight-color: transparent; 40 | } 41 | 42 | .Polaris-Choice__Descriptions { 43 | padding-left: spacing(tight) + $control-size; 44 | } 45 | 46 | .Polaris-Choice__HelpText { 47 | @include text-style-body; 48 | @include text-emphasis-subdued; 49 | margin-bottom: spacing(extra-tight); 50 | } 51 | 52 | .Polaris-Choice__Error { 53 | display: flex; 54 | margin-bottom: spacing(extra-tight); 55 | color: color(red, dark); 56 | } 57 | 58 | .Polaris-Choice__ErrorIcon { 59 | @include recolor-icon(color(red)); 60 | margin: 0 spacing(extra-tight) 0 (-1 * $icon-horizontal-adjustment); 61 | } 62 | -------------------------------------------------------------------------------- /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/styles/styles/components/Collapsible.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Collapsible { 2 | overflow: hidden; 3 | height: 0; 4 | padding-top: 0; 5 | padding-bottom: 0; 6 | opacity: 0; 7 | will-change: opacity, height; 8 | } 9 | 10 | .Polaris-Collapsible--animating { 11 | transition-property: opacity, height; 12 | transition-duration: duration(slow); 13 | transition-timing-function: easing(out); 14 | } 15 | 16 | .Polaris-Collapsible--open { 17 | opacity: 1; 18 | } 19 | -------------------------------------------------------------------------------- /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/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/components/DisplayText.scss: -------------------------------------------------------------------------------- 1 | .Polaris-DisplayText { 2 | margin: 0; 3 | } 4 | 5 | .Polaris-DisplayText--sizeSmall { 6 | @include text-style-display-small; 7 | } 8 | 9 | .Polaris-DisplayText--sizeMedium { 10 | @include text-style-display-medium; 11 | } 12 | 13 | .Polaris-DisplayText--sizeLarge { 14 | @include text-style-display-large; 15 | } 16 | 17 | .Polaris-DisplayText--sizeExtraLarge { 18 | @include text-style-display-x-large; 19 | } 20 | -------------------------------------------------------------------------------- /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/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/components/Heading.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Heading { 2 | @include text-style-heading; 3 | margin: 0; 4 | } 5 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/KeyboardKey.scss: -------------------------------------------------------------------------------- 1 | $key-base-height: rem(24px); 2 | $bottom-shadow-size: 2px; 3 | 4 | .Polaris-KeyboardKey { 5 | display: inline-block; 6 | height: $key-base-height; 7 | margin: 0 (spacing(extra-tight) / 2) $bottom-shadow-size; 8 | padding: 0 spacing(extra-tight); 9 | background-color: color(white, base); 10 | box-shadow: 11 | 0 0 0 1px color(sky, dark), 12 | 0 $bottom-shadow-size 0 0 color(white), 13 | 0 $bottom-shadow-size 0 1px color(sky, dark); 14 | border-radius: border-radius(); 15 | font-family: font-family(); 16 | font-size: rem(12px); 17 | font-weight: 500; 18 | line-height: $key-base-height; 19 | color: color(ink, lighter); 20 | text-align: center; 21 | min-width: $key-base-height; 22 | user-select: none; 23 | } 24 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/Label.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Label { 2 | -webkit-tap-highlight-color: transparent; 3 | } 4 | 5 | .Polaris-Label--hidden { 6 | @include visually-hidden; 7 | } 8 | 9 | .Polaris-Label__Text { 10 | @include text-style-body; 11 | display: block; 12 | flex: 1 1 auto; 13 | color: currentColor; 14 | -webkit-tap-highlight-color: transparent; 15 | } 16 | -------------------------------------------------------------------------------- /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/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/styles/components/Link.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Link { 2 | appearance: none; 3 | display: inline; 4 | padding: 0; 5 | background: none; 6 | border: none; 7 | font-size: inherit; 8 | color: color(blue); 9 | text-decoration: none; 10 | cursor: pointer; 11 | 12 | &:hover, 13 | &:focus, 14 | &:active { 15 | outline: none; 16 | color: color(blue, dark); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /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/PageActions.scss: -------------------------------------------------------------------------------- 1 | .Polaris-PageActions { 2 | margin: 0 auto; 3 | padding: spacing(loose); 4 | border-top: border(); 5 | 6 | @include page-content-when-not-fully-condensed { 7 | padding: spacing(loose) 0; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/PositionedOverlay.scss: -------------------------------------------------------------------------------- 1 | .Polaris-PositionedOverlay { 2 | position: absolute; 3 | z-index: z-index(overlay); 4 | } 5 | 6 | .Polaris-PositionedOverlay--calculating { 7 | visibility: hidden; 8 | } 9 | -------------------------------------------------------------------------------- /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/RadioButton.scss: -------------------------------------------------------------------------------- 1 | .Polaris-RadioButton { 2 | position: relative; 3 | } 4 | 5 | .Polaris-RadioButton__Input { 6 | margin: 0; 7 | padding: 0; 8 | opacity: 0; 9 | appearance: none; 10 | 11 | &:focus, 12 | &:active, 13 | &:checked { 14 | + .Polaris-RadioButton__Backdrop { 15 | background: color(indigo); 16 | } 17 | } 18 | 19 | &:checked { 20 | ~ .Polaris-RadioButton__Icon { 21 | transform: translate(-50%, -50%) scale(1); 22 | } 23 | } 24 | 25 | &:focus, 26 | &:active { 27 | + .Polaris-RadioButton__Backdrop { 28 | @include control-backdrop(focused); 29 | } 30 | } 31 | 32 | &:disabled { 33 | + .Polaris-RadioButton__Backdrop { 34 | @include control-backdrop(disabled); 35 | } 36 | 37 | ~ .Polaris-RadioButton__Icon { 38 | background-color: color(sky, dark); 39 | } 40 | } 41 | } 42 | 43 | .Polaris-RadioButton__Backdrop { 44 | @include control-backdrop; 45 | position: absolute; 46 | top: 0; 47 | bottom: 0; 48 | left: 0; 49 | right: 0; 50 | border-radius: 50%; 51 | 52 | &::after { 53 | border-radius: 50%; 54 | } 55 | } 56 | 57 | .Polaris-RadioButton__Icon { 58 | position: absolute; 59 | top: 50%; 60 | left: 50%; 61 | transform: translate(-50%, -50%) scale(0); 62 | transform-origin: 50% 50%; 63 | height: 50%; 64 | width: 50%; 65 | background: color(indigo); 66 | border-radius: 50%; 67 | transition: control-icon-transition(); 68 | } 69 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/Scrollable.scss: -------------------------------------------------------------------------------- 1 | $shadow-color: rgba(color(black), 0.1); 2 | $shadow-size: rem(20px); 3 | $shadow-bottom: inset 0 (-1 * $shadow-size) $shadow-size (-1 * $shadow-size) $shadow-color; 4 | $shadow-top: inset 0 $shadow-size $shadow-size (-1 * $shadow-size) $shadow-color; 5 | 6 | .Polaris-Scrollable { 7 | -webkit-overflow-scrolling: touch; 8 | } 9 | 10 | .Polaris-Scrollable--horizontal { 11 | overflow-x: auto; 12 | } 13 | 14 | .Polaris-Scrollable--vertical { 15 | overflow-y: auto; 16 | } 17 | 18 | .Polaris-Scrollable--hasTopShadow { 19 | box-shadow: $shadow-top; 20 | } 21 | 22 | .Polaris-Scrollable--hasBottomShadow { 23 | box-shadow: $shadow-bottom; 24 | } 25 | 26 | .Polaris-Scrollable--hasTopShadow.Polaris-Scrollable--hasBottomShadow { 27 | box-shadow: $shadow-top, $shadow-bottom; 28 | } 29 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/SettingAction.scss: -------------------------------------------------------------------------------- 1 | $feature-width: rem(350px); 2 | 3 | .Polaris-SettingAction { 4 | display: flex; 5 | flex-wrap: wrap; 6 | align-items: center; 7 | margin-top: -1 * spacing(); 8 | margin-left: -1 * spacing(); 9 | } 10 | 11 | .Polaris-SettingAction__Setting, 12 | .Polaris-SettingAction__Action { 13 | flex: 0 0 auto; 14 | margin-top: spacing(); 15 | margin-left: spacing(); 16 | max-width: calc(100% - #{spacing()}); 17 | min-width: 0; 18 | } 19 | 20 | .Polaris-SettingAction__Setting { 21 | flex: 1 0 $feature-width; 22 | } 23 | -------------------------------------------------------------------------------- /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/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/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/styles/styles/components/Spinner.scss: -------------------------------------------------------------------------------- 1 | $small-size: rem(20px); 2 | $large-size: rem(44px); 3 | 4 | @keyframes loading { 5 | to { 6 | transform: rotate(360deg); 7 | } 8 | } 9 | 10 | @mixin spinnerSize($size) { 11 | height: $size; 12 | width: $size; 13 | } 14 | 15 | .Polaris-Spinner { 16 | animation: loading duration(slowest) linear infinite; 17 | color: transparent; 18 | } 19 | 20 | .Polaris-Spinner--sizeSmall { 21 | @include spinnerSize($small-size); 22 | } 23 | 24 | .Polaris-Spinner--sizeLarge { 25 | @include spinnerSize($large-size); 26 | } 27 | 28 | .Polaris-Spinner--colorWhite { 29 | fill: color(white); 30 | } 31 | 32 | .Polaris-Spinner--colorTeal { 33 | fill: color(teal); 34 | } 35 | 36 | .Polaris-Spinner--colorInkLightest { 37 | fill: color(ink, lightest); 38 | } 39 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/Subheading.scss: -------------------------------------------------------------------------------- 1 | .Polaris-Subheading { 2 | @include text-style-subheading; 3 | margin: 0; 4 | } 5 | -------------------------------------------------------------------------------- /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/resources/styles/styles/components/TextContainer.scss: -------------------------------------------------------------------------------- 1 | @mixin text-container-spacing($spacing: base) { 2 | > * + * { 3 | margin-top: (spacing($spacing)); 4 | } 5 | } 6 | 7 | .Polaris-TextContainer { 8 | @include text-container-spacing; 9 | } 10 | 11 | .Polaris-TextContainer--spacingTight { 12 | @include text-container-spacing(tight); 13 | } 14 | 15 | .Polaris-TextContainer--spacingLoose { 16 | @include text-container-spacing(loose); 17 | } 18 | -------------------------------------------------------------------------------- /src/resources/styles/styles/components/TextStyle.scss: -------------------------------------------------------------------------------- 1 | .Polaris-TextStyle--variationPositive { 2 | color: color(green, dark); 3 | } 4 | 5 | .Polaris-TextStyle--variationNegative { 6 | color: color(red, dark); 7 | } 8 | 9 | .Polaris-TextStyle--variationStrong { 10 | @include text-emphasis-strong; 11 | } 12 | 13 | .Polaris-TextStyle--variationSubdued { 14 | @include text-emphasis-subdued; 15 | } 16 | -------------------------------------------------------------------------------- /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/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/resources/styles/styles/components/VisuallyHidden.scss: -------------------------------------------------------------------------------- 1 | .Polaris-VisuallyHidden { 2 | @include visually-hidden; 3 | } 4 | -------------------------------------------------------------------------------- /src/resources/styles/styles/foundation.scss: -------------------------------------------------------------------------------- 1 | @import 'foundation/utilities'; 2 | @import 'foundation/colors'; 3 | @import 'foundation/spacing'; 4 | @import 'foundation/borders'; 5 | @import 'foundation/border-radius'; 6 | @import 'foundation/duration'; 7 | @import 'foundation/easing'; 8 | @import 'foundation/layout'; 9 | @import 'foundation/shadows'; 10 | @import 'foundation/typography'; 11 | @import 'foundation/z-index'; 12 | -------------------------------------------------------------------------------- /src/resources/styles/styles/foundation/border-radius.scss: -------------------------------------------------------------------------------- 1 | $border-radius-data: ( 2 | base: 3px, 3 | large: 6px 4 | ); 5 | 6 | /// Returns the border radius of the specified size. 7 | /// @param {String} $size - The border radius's size. 8 | /// @return {Number} The border radius value. 9 | 10 | @function border-radius($size: base) { 11 | @return map-get($border-radius-data, $size); 12 | } 13 | -------------------------------------------------------------------------------- /src/resources/styles/styles/foundation/borders.scss: -------------------------------------------------------------------------------- 1 | $borders-data: ( 2 | base: 1px solid color(sky), 3 | dark: 1px solid color(sky, dark), 4 | transparent: 1px solid transparent 5 | ); 6 | 7 | /// Returns the default border. 8 | /// @param {String} $variant [base] - The border variant key. 9 | /// @return {List} The border value. 10 | 11 | @function border($variant: base) { 12 | $fetched-value: map-get($borders-data, $variant); 13 | 14 | @if $fetched-value { 15 | @return $fetched-value; 16 | } @else { 17 | @error 'Border variant `#{$variant}` not found. Available variants: #{available-names($borders-data)}'; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/shared.scss: -------------------------------------------------------------------------------- 1 | @import 'shared/accessibility'; 2 | @import 'shared/breakpoints'; 3 | @import 'shared/buttons'; 4 | @import 'shared/controls'; 5 | @import 'shared/icons'; 6 | @import 'shared/layout'; 7 | @import 'shared/links'; 8 | @import 'shared/page'; 9 | @import 'shared/typography'; 10 | @import 'shared/skeleton'; 11 | -------------------------------------------------------------------------------- /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/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/resources/styles/styles/shared/icons.scss: -------------------------------------------------------------------------------- 1 | @function icon-size() { 2 | @return rem(20px); 3 | } 4 | 5 | @mixin recolor-icon($main-color, $secondary-color: null) { 6 | fill: $main-color; 7 | 8 | @if $secondary-color != null { 9 | color: $secondary-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/resources/styles/styles/shared/layout.scss: -------------------------------------------------------------------------------- 1 | /// To be used on flex items. Resolves some common layout issues, such as 2 | /// text truncation not respecting padding or breaking out of container. 3 | /// https://css-tricks.com/flexbox-truncated-text/ 4 | 5 | @mixin layout-flex-fix { 6 | min-width: 0; 7 | max-width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/resources/styles/styles/shared/links.scss: -------------------------------------------------------------------------------- 1 | @mixin unstyled-link() { 2 | color: inherit; 3 | text-decoration: none; 4 | 5 | &:visited { 6 | color: inherit; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/resources/styles/styles/shared/page.scss: -------------------------------------------------------------------------------- 1 | $actions-vertical-spacing: spacing(tight); 2 | 3 | @mixin page-layout { 4 | margin: 0 auto; 5 | padding: 0; 6 | max-width: layout-width(primary, max) + layout-width(secondary, max) + layout-width(inner-spacing); 7 | 8 | @include page-content-when-not-fully-condensed { 9 | padding: 0 spacing(loose); 10 | } 11 | 12 | @include page-content-when-not-partially-condensed { 13 | padding: 0 spacing(extra-loose); 14 | } 15 | } 16 | 17 | @mixin page-content-layout { 18 | margin: spacing(loose) 0; 19 | 20 | @include page-content-when-not-partially-condensed { 21 | margin-top: spacing(loose); 22 | } 23 | } 24 | 25 | @mixin page-header-layout { 26 | padding: spacing(loose) spacing(loose) 0; 27 | 28 | @include page-content-when-not-fully-condensed { 29 | padding-left: 0; 30 | padding-right: 0; 31 | } 32 | 33 | @include page-content-when-not-partially-condensed { 34 | padding-top: spacing(extra-loose); 35 | } 36 | } 37 | 38 | @mixin page-header-has-secondaryactions { 39 | padding-top: rem(24px); 40 | } 41 | 42 | @mixin page-actions-layout { 43 | display: flex; 44 | flex-direction: row-reverse; 45 | justify-content: flex-end; 46 | align-items: center; 47 | margin-top: 2 * $actions-vertical-spacing; 48 | 49 | @include page-content-when-not-fully-condensed { 50 | margin-top: $actions-vertical-spacing; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/resources/styles/styles/shared/skeleton.scss: -------------------------------------------------------------------------------- 1 | /// Used to create the shimmer effect of skeleton components 2 | $skeleton-shimmer-duration: duration(slower) * 2; 3 | 4 | @keyframes skeletonShimmerAnimation { 5 | 0% { 6 | opacity: 0.45; 7 | } 8 | 9 | 100% { 10 | opacity: 0.9; 11 | } 12 | } 13 | 14 | @mixin skeleton-shimmer { 15 | animation: skeletonShimmerAnimation $skeleton-shimmer-duration linear infinite alternate; 16 | will-change: opacity; 17 | } 18 | 19 | @mixin skeleton-content { 20 | position: relative; 21 | 22 | &::after { 23 | content: ''; 24 | position: absolute; 25 | top: 0; 26 | right: 0; 27 | bottom: 0; 28 | left: 0; 29 | display: block; 30 | background-color: color(sky); 31 | border-radius: border-radius(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/util/log.js: -------------------------------------------------------------------------------- 1 | import logLevel from './loggers/logLevel.js'; 2 | 3 | class Log { 4 | constructor() { 5 | this.loggers = []; 6 | } 7 | 8 | addLogger(logger) { 9 | this.loggers.push(logger); 10 | } 11 | 12 | 13 | send(level, tag, text) { 14 | for (let logger of this.loggers) { 15 | logger.send(level, tag, text); 16 | } 17 | } 18 | 19 | sendObject(level, tag, text, object) { 20 | for (let logger of this.loggers) { 21 | logger.sendObject(level, tag, text, object); 22 | } 23 | } 24 | } 25 | 26 | 27 | // Expose log levels on Log 28 | var levelMap = logLevel.getMap(); 29 | for (var key in levelMap) { 30 | Log.prototype[levelMap[key]] = key; 31 | } 32 | 33 | export default new Log(); 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/util/loggers/logLevel.js: -------------------------------------------------------------------------------- 1 | var map = { 2 | 0: 'DEBUG', 3 | 1: 'INFO', 4 | 2: 'WARN', 5 | 3: 'ERROR', 6 | 4: 'FATAL' 7 | }; 8 | 9 | class LogLevel { 10 | getMap() { 11 | return map; 12 | } 13 | 14 | levelToString(level) { 15 | return map[level]; 16 | } 17 | 18 | stringToLevel(str) { 19 | for (let key in map) { 20 | if (map[key] == str) { 21 | return key; 22 | } 23 | } 24 | return null; 25 | } 26 | } 27 | 28 | for (var key in map) { 29 | LogLevel.prototype[map[key]] = key; 30 | } 31 | 32 | export default new LogLevel(); 33 | -------------------------------------------------------------------------------- /test/name-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | testing 15 | 16 | -------------------------------------------------------------------------------- /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 | })(); -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------