├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── demo ├── bootstrap-polaris.js ├── bootstrap-polaris.min.css ├── bulk-edit-layout.html ├── index.html ├── order-page-layout.html ├── page-layout.html └── retail.svg ├── dist ├── assets │ ├── icons │ │ ├── add.svg │ │ ├── alert.svg │ │ ├── arrowDown.svg │ │ ├── arrowLeft.svg │ │ ├── arrowRight.svg │ │ ├── arrowUp.svg │ │ ├── calendar.svg │ │ ├── cancel.svg │ │ ├── cancelSmall.svg │ │ ├── caretDown.svg │ │ ├── caretUp.svg │ │ ├── check-scratch.svg │ │ ├── check.svg │ │ ├── chevronDown.svg │ │ ├── chevronLeft.svg │ │ ├── chevronRight.svg │ │ ├── chevronUp.svg │ │ ├── circleCancel.svg │ │ ├── circleChevronDown.svg │ │ ├── circleChevronLeft.svg │ │ ├── circleChevronRight.svg │ │ ├── circleChevronUp.svg │ │ ├── circlePlus.svg │ │ ├── conversation.svg │ │ ├── critical.svg │ │ ├── default-banner.svg │ │ ├── delete.svg │ │ ├── disable.svg │ │ ├── dispute.svg │ │ ├── duplicate.svg │ │ ├── embed.svg │ │ ├── export.svg │ │ ├── external.svg │ │ ├── help.svg │ │ ├── horizontalDots.svg │ │ ├── import.svg │ │ ├── info.svg │ │ ├── next.svg │ │ ├── notes.svg │ │ ├── notification.svg │ │ ├── previous.svg │ │ ├── print.svg │ │ ├── radio.svg │ │ ├── refresh.svg │ │ ├── risk.svg │ │ ├── save.svg │ │ ├── search.svg │ │ ├── select.svg │ │ ├── subtract.svg │ │ ├── success.svg │ │ ├── view.svg │ │ └── warning.svg │ └── images │ │ └── empty-state.svg └── bootstrap-polaris.min.css ├── gulpfile.js ├── package-lock.json ├── package.json ├── readme.md └── scss ├── _alert.scss ├── _badge.scss ├── _banner.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _code.scss ├── _custom-forms.scss ├── _dropdown.scss ├── _footer-help.scss ├── _forms.scss ├── _functions.scss ├── _grid.scss ├── _images.scss ├── _input-group.scss ├── _jumbotron.scss ├── _list-group.scss ├── _media.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _pagination.scss ├── _polaris-avatar.scss ├── _polaris-bulk-edit.scss ├── _polaris-caption.scss ├── _polaris-checkbox.scss ├── _polaris-empty-results.scss ├── _polaris-icons.scss ├── _polaris-lists.scss ├── _polaris-page-actions.scss ├── _polaris-page-header.scss ├── _polaris-progress-bar.scss ├── _polaris-radio.scss ├── _polaris-resource-list.scss ├── _popover.scss ├── _print.scss ├── _reboot.scss ├── _spinner.scss ├── _tables.scss ├── _toast.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables.scss ├── bootstrap-grid.scss ├── bootstrap-reboot.scss ├── bootstrap.scss ├── mixins ├── _Polaris-color.scss ├── _alert.scss ├── _background-variant.scss ├── _badge.scss ├── _border-radius.scss ├── _box-shadow.scss ├── _breakpoints.scss ├── _buttons.scss ├── _clearfix.scss ├── _float.scss ├── _forms.scss ├── _gradients.scss ├── _grid-framework.scss ├── _grid.scss ├── _hover.scss ├── _image.scss ├── _list-group.scss ├── _lists.scss ├── _nav-divider.scss ├── _navbar-align.scss ├── _pagination.scss ├── _reset-text.scss ├── _resize.scss ├── _screen-reader.scss ├── _size.scss ├── _table-row.scss ├── _text-emphasis.scss ├── _text-hide.scss ├── _text-truncate.scss ├── _transition.scss ├── _type.scss └── _visibility.scss └── utilities ├── _align.scss ├── _background.scss ├── _borders.scss ├── _clearfix.scss ├── _display.scss ├── _embed.scss ├── _flex.scss ├── _float.scss ├── _position.scss ├── _screenreaders.scss ├── _sizing.scss ├── _spacing.scss ├── _text.scss └── _visibility.scss /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '39 16 * * 0' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v2 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v1 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v1 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v1 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .vscode/ 5 | -------------------------------------------------------------------------------- /demo/bootstrap-polaris.js: -------------------------------------------------------------------------------- 1 | /* This javascript isn't meant for production 2 | * rather examples of how to extend functionality of components 3 | */ 4 | 5 | (function () { 6 | /* 7 | * Add/Subtract functionality for quantity selectors 8 | */ 9 | let quantitySelectors = document.querySelectorAll('.quantity-selector'); 10 | 11 | quantitySelectors.forEach(function (selector) { 12 | let input = selector.querySelector('.quantity-selector__input'); 13 | let add = selector.querySelector('.quantity-selector__add'); 14 | let subtract = selector.querySelector('.quantity-selector__subtract'); 15 | 16 | let min = +input.getAttribute('min') || 0; 17 | let max = +input.getAttribute('max') || Infinity; 18 | 19 | add.addEventListener('click', function () { 20 | input.value = (+input.value < max) ? +input.value + 1 : max; 21 | }); 22 | subtract.addEventListener('click', function () { 23 | input.value = (+input.value > min) ? input.value - 1 : min; 24 | }); 25 | }); 26 | 27 | document.getElementById('toastButton').addEventListener('click', function(e) { 28 | var showText = "Show Toast" 29 | var hideText = "Hide Toast" 30 | 31 | var toast = document.getElementById('sampleToast'); 32 | 33 | if (e.target.innerHTML == showText) { 34 | e.target.innerHTML = hideText; 35 | toast.classList.add('show'); 36 | } else { 37 | e.target.innerHTML = showText; 38 | toast.classList.remove('show'); 39 | } 40 | }); 41 | 42 | document.querySelector('#sampleToast button').addEventListener('click', function(e) { 43 | document.getElementById('toastButton').click(); 44 | }); 45 | 46 | })(); 47 | -------------------------------------------------------------------------------- /demo/bulk-edit-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrap Polaris 9 | 10 | 13 | 14 | 15 |
16 |
17 |
18 |

Bulk Edit

19 |
20 |
21 | 22 | 23 | Export 24 | 25 |
26 |
27 | 28 |
29 |
30 |

Edit Products

31 |
32 | 33 |
34 |
35 |
36 |
Title
37 |
Variant
38 |
Start Date
39 |
Number
40 |
Checkbox
41 |
42 |
43 |
44 |
Blue Silk Tuxedo
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |
55 | 59 |
60 |
61 |
62 |
63 |
64 |
Blue Silk Tuxedo
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 |
75 | 79 |
80 |
81 |
82 |
83 |
84 |
Blue Silk Tuxedo
85 |
86 | 87 |
88 |
89 | 90 |
91 |
92 | 93 |
94 |
95 | 99 |
100 |
101 |
102 |
103 |
104 | 105 |
106 | 132 |
133 | 134 |
135 | 136 |
137 |
138 |
139 | 140 | 141 | 142 | 143 | 144 | 145 |
146 |

Learn more about 147 | fufilling orders.

148 |
149 |
150 | 151 |
152 | 153 | -------------------------------------------------------------------------------- /demo/order-page-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrap Polaris 9 | 10 | 13 | 14 | 15 |
16 |
17 |
18 |

Orders

19 |
20 |
21 | 22 | 23 | Export 24 | 25 |
26 |
27 | 28 |
29 |
30 | 44 |
45 |
46 | 47 |
48 |
49 | 50 | 55 |
56 | 57 | 73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 | 86 | 89 | 95 | 98 | 101 | 104 | 107 | 108 | 109 | 110 | 111 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 |
81 | 85 | 87 | Order 88 | 90 | 91 | Date 92 | 93 | 94 | 96 | Customer 97 | 99 | Payment Status 100 | 102 | Fulfillment Status 103 | 105 | Total 106 |
112 | 116 | #1001Yesterday, 4:06pmDerek morashAuthorizedUnfulfilled$19.16
126 | 130 | #1001Yesterday, 4:06pmDerek morashAuthorizedUnfulfilled$19.16
140 | 144 | #1001Yesterday, 4:06pmDerek morashPaidFulfilled$19.16
154 |
155 | 156 |
157 |
158 | 159 |
160 |
161 |
162 | 163 | 164 | 165 | 166 | 167 | 168 |
169 |

Learn more about 170 | fufilling orders.

171 |
172 |
173 | 174 |
175 | 176 | -------------------------------------------------------------------------------- /demo/page-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Bootstrap Polaris 9 | 10 | 13 | 14 | 15 |
16 |
17 | 48 |
49 |

Jar With Lock-Lid

50 |
51 |
52 | 56 | 57 | 58 | View 59 | 60 | 64 |
65 |
66 | 67 | 83 | 84 |
85 |
86 |
87 |
88 |
89 | 90 | 91 |
92 |
93 | 94 | 95 |
96 |
97 |
98 |
99 |
100 |

Pricing

101 |
102 |
103 |
104 | 105 | 106 |
107 |
108 |
109 |
110 | 111 | 112 |
113 |
114 |
115 | 116 | 120 |
121 |
122 |
123 |
124 |
125 |
126 |

Sales channels

127 |
128 |
129 |

Online Store

130 |
131 |
132 | 133 |
134 |
135 |

Actions

136 |

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum

137 | 138 | 144 | 145 |

There are five tiers to the Bootstrap grid system.

146 | 147 |
    148 |
  • 149 | 153 |
    • 154 |
  • 155 | 159 |
    • 160 |
  • 161 | 165 |
    • 166 |
167 |
168 |
169 |
170 | 171 | 172 |
173 |
174 |
175 |
176 |
177 | 178 | 184 | 185 |
186 |
187 |
188 | 189 | 190 | 191 | 192 | 193 | 194 |
195 |

Learn more about 196 | products.

197 |
198 |
199 |
200 | 201 | -------------------------------------------------------------------------------- /dist/assets/icons/add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/alert.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/arrowDown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/arrowLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/arrowRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/arrowUp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/cancel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/cancelSmall.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/caretDown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/caretUp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/check-scratch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20fill-rule%3D%22evenodd%22%20fill%3D%22%235c6ac4%22%3E%3Cpath%20d%3D%22M8.315%2013.859l-3.182-3.417a.506.506%200%200%201%200-.684l.643-.683a.437.437%200%200%201%20.642%200l2.22%202.393%204.942-5.327a.437.437%200%200%201%20.643%200l.643.684a.504.504%200%200%201%200%20.683l-5.91%206.35a.437.437%200%200%201-.642%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.315%2013.859l-3.182-3.417a.506.506%200%200%201%200-.684l.643-.683a.437.437%200%200%201%20.642%200l2.22%202.393%204.942-5.327a.437.437%200%200%201%20.643%200l.643.684a.504.504%200%200%201%200%20.683l-5.91%206.35a.437.437%200%200%201-.642%200%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E -------------------------------------------------------------------------------- /dist/assets/icons/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/chevronDown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/chevronLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/chevronRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/chevronUp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/circleCancel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/circleChevronDown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/circleChevronLeft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/circleChevronRight.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/circleChevronUp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/circlePlus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/conversation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/critical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/default-banner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/disable.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/dispute.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/duplicate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/embed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/export.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/external.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/horizontalDots.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/import.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/notes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/notification.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/previous.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/radio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22%235c6ac4%22%20%2F%3E%3C%2Fsvg%3E -------------------------------------------------------------------------------- /dist/assets/icons/refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/risk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/save.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/select.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/subtract.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/success.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/view.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/icons/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var settings = require("./package.json").settings; 2 | var gulp = require("gulp"); 3 | var sass = require("gulp-sass"); 4 | var sourcemaps = require('gulp-sourcemaps'); 5 | var autoprefixer = require("gulp-autoprefixer"); 6 | var concat = require("gulp-concat"); 7 | 8 | var autoprefixerOptions = { 9 | browsers: ["last 2 versions", "> 1%"], 10 | cascade: false 11 | }; 12 | 13 | gulp.task("compilesass", function() { 14 | return gulp 15 | .src(settings.sass_source) 16 | .pipe(sourcemaps.init()) 17 | .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError)) 18 | .pipe(autoprefixer(autoprefixerOptions)) 19 | .pipe(sourcemaps.write()) 20 | .pipe(concat(settings.css_name)) 21 | .pipe(gulp.dest('./demo')) 22 | .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError)) 23 | .pipe(gulp.dest(settings.css_dest)); 24 | }); 25 | 26 | gulp.task("default", ["compilesass"], function() { 27 | gulp.watch([settings.sass_watch_loc], ["compilesass"]); 28 | }); 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-polaris", 3 | "version": "0.0.1", 4 | "settings": { 5 | "sass_source": "./scss/bootstrap.scss", 6 | "sass_watch_loc": "./scss/**/*.scss", 7 | "css_dest": "./dist/", 8 | "css_name": "bootstrap-polaris.min.css" 9 | }, 10 | "devDependencies": { 11 | "gulp": "^4.0.2", 12 | "gulp-autoprefixer": "^8.0.0", 13 | "gulp-concat": "^2.6.1", 14 | "gulp-sass": "^5.1.0", 15 | "gulp-sourcemaps": "^3.0.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Polaris 2 | A [Shopify Polaris](https://polaris.shopify.com/) toolkit based on [Bootstrap v4](http://getbootstrap.com/). View demo here [https://ablesense.github.io/bootstrap-polaris/demo/index.html](https://ablesense.github.io/bootstrap-polaris/demo/index.html). 3 | 4 | Shopify Polaris is a great way to make apps for Shopify that provide a consistent feel to the whole ecosystem, however it is heavily geared towards React and doesn't have very clean or semantic markup. Bootstrap Polaris is meant to keep that consistent UX while using light semantic and accessible markup, while removing the need for a front end JS framework. 5 | 6 | ## Development Installation 7 | 8 | - Clone Repo and run `npm install` 9 | - Run `gulp` 10 | - Edit files in `scss/` 11 | - Gulp compiles changes into the `dist` and `demo` directories. Both versions are minified but the demo version has sourcemaps enabled. 12 | 13 | https://github.com/twbs/bootstrap 14 | 15 | https://github.com/Shopify/polaris -------------------------------------------------------------------------------- /scss/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | padding: $alert-padding-y $alert-padding-x; 7 | margin-bottom: $alert-margin-bottom; 8 | border: $alert-border-width solid transparent; 9 | @include border-radius($alert-border-radius); 10 | } 11 | 12 | // Headings for larger alerts 13 | .alert-heading { 14 | // Specified to prevent conflicts of changing $headings-color 15 | color: inherit; 16 | } 17 | 18 | // Provide class for links that match alerts 19 | .alert-link { 20 | font-weight: $alert-link-font-weight; 21 | } 22 | 23 | 24 | // Dismissible alerts 25 | // 26 | // Expand the right padding and account for the close button's positioning. 27 | 28 | .alert-dismissible { 29 | // Adjust close link position 30 | .close { 31 | position: relative; 32 | top: -$alert-padding-y; 33 | right: -$alert-padding-x; 34 | padding: $alert-padding-y $alert-padding-x; 35 | color: inherit; 36 | } 37 | } 38 | 39 | 40 | // Alternate styles 41 | // 42 | // Generate contextual modifier classes for colorizing the alert. 43 | 44 | @each $color, $value in $theme-colors { 45 | .alert-#{$color} { 46 | @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-flex; 8 | align-items: center; 9 | padding: $badge-padding-y $badge-padding-x; 10 | border: 2px solid $white; 11 | background-color: $gray-300; 12 | font-size: $badge-font-size; 13 | font-weight: $badge-font-weight; 14 | line-height: 2rem; 15 | color: $badge-color; 16 | text-align: center; 17 | white-space: nowrap; 18 | vertical-align: baseline; 19 | border-radius: 2rem; 20 | 21 | // Empty badges collapse automatically 22 | &:empty { 23 | display: none; 24 | } 25 | } 26 | 27 | .badge--success { 28 | background-color: color(green,light); 29 | color: color(green,text); 30 | } 31 | .badge--info { 32 | background-color: color(blue,light); 33 | color: color(blue,text); 34 | } 35 | .badge--attention { 36 | background-color: color(yellow,light); 37 | color: color(yellow,text); 38 | } 39 | .badge--warning { 40 | background-color: color(orange,light); 41 | color: color(orange,text); 42 | } 43 | 44 | .badge__status { 45 | height: 1rem; 46 | width: 1rem; 47 | margin: 0 .4rem 0 -.5rem; 48 | border: .2rem solid currentColor; 49 | border-radius: 50%; 50 | overflow: hidden; 51 | color: inherit; 52 | font-size: 1px; 53 | text-indent: -9999rem; 54 | } 55 | 56 | .badge__status--incomplete { 57 | border: .2rem solid currentColor; 58 | } 59 | .badge__status--partial { 60 | background: linear-gradient(0deg,currentColor,currentColor 50%,transparent 0,transparent); 61 | } 62 | .badge__status--complete { 63 | background: currentColor; 64 | } 65 | 66 | // Quick fix for badges in buttons 67 | .btn .badge { 68 | position: relative; 69 | top: -1px; 70 | } 71 | 72 | // Pill badges 73 | // 74 | // Make them extra rounded with a modifier to replace v3's badges. 75 | 76 | .badge-pill { 77 | padding-right: $badge-pill-padding-x; 78 | padding-left: $badge-pill-padding-x; 79 | @include border-radius($badge-pill-border-radius); 80 | } 81 | 82 | // Colors 83 | // 84 | // Contextual variations (linked badges get darker on :hover). 85 | 86 | @each $color, $value in $theme-colors { 87 | .badge-#{$color} { 88 | @include badge-variant($value); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /scss/_banner.scss: -------------------------------------------------------------------------------- 1 | .banner { 2 | position: relative; 3 | display: flex; 4 | width: 100%; 5 | margin-top: 1.6rem; 6 | margin-bottom: 1.6rem; 7 | padding: 1.6rem; 8 | border-radius: 0 0 3px 3px; 9 | background-color: $gray-200; 10 | box-shadow: inset 0 3px 0 0 $gray-600, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 11 | transition: box-shadow .2s cubic-bezier(.64,0,.35,1); 12 | transition-delay: .1s; 13 | 14 | &:focus { 15 | outline: none; 16 | box-shadow: inset 0 3px 0 0 color(ink, lighter), inset 0 0 0 3px color(ink, lighter), 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 17 | } 18 | 19 | p, li { 20 | margin: 0; 21 | font-size: 1.5rem; 22 | 23 | @include media-breakpoint-up(sm) { 24 | font-size: 1.4rem; 25 | } 26 | } 27 | 28 | .btn { 29 | margin-top: 1.5rem; 30 | } 31 | 32 | .col-grid [class*="col-"] &:first-child { 33 | margin-top: 0; 34 | } 35 | 36 | .col-grid [class*="col-"] &:last-child { 37 | margin-bottom: 0; 38 | } 39 | } 40 | 41 | .banner--success { 42 | background-color: color(green, lighter); 43 | box-shadow: inset 0 3px 0 0 color(green, base), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 44 | 45 | .polaris-icon__has-backdrop { 46 | fill: color(green, dark); 47 | 48 | &:after { 49 | background-color: color(green, light); 50 | } 51 | } 52 | 53 | &:focus { 54 | box-shadow: inset 0 3px 0 0 color(green, base), inset 0 0 0 3px color(green, base), 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 55 | } 56 | } 57 | 58 | .banner--warning { 59 | background-color: color(yellow, lighter); 60 | box-shadow: inset 0 3px 0 0 color(yellow, base), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 61 | 62 | .polaris-icon__has-backdrop { 63 | fill: color(yellow, dark); 64 | 65 | &:after { 66 | background-color: color(yellow, light); 67 | } 68 | } 69 | 70 | &:focus { 71 | box-shadow: inset 0 3px 0 0 color(yellow, base), inset 0 0 0 3px color(yellow, base), 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 72 | } 73 | } 74 | 75 | .banner--critical { 76 | background-color: color(red, lighter); 77 | box-shadow: inset 0 3px 0 0 color(red, base), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 78 | 79 | .polaris-icon__has-backdrop { 80 | fill: color(red, dark); 81 | 82 | &:after { 83 | background-color: color(red, light); 84 | } 85 | } 86 | 87 | &:focus { 88 | box-shadow: inset 0 3px 0 0 color(red, base), inset 0 0 0 3px color(red, base), 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 89 | } 90 | } 91 | 92 | .banner--info { 93 | background-color: color(teal, lighter); 94 | box-shadow: inset 0 3px 0 0 color(teal, base), inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 95 | 96 | .polaris-icon__has-backdrop { 97 | fill: color(teal, dark); 98 | 99 | &:after { 100 | background-color: color(teal, light); 101 | } 102 | } 103 | 104 | &:focus { 105 | box-shadow: inset 0 3px 0 0 color(teal, base), inset 0 0 0 3px color(teal, base), 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15); 106 | } 107 | } 108 | 109 | .banner__ribbon { 110 | flex: 0 0 3.2rem; 111 | margin-right: 1.6rem; 112 | } -------------------------------------------------------------------------------- /scss/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 3 | margin-bottom: 1rem; 4 | list-style: none; 5 | background-color: $breadcrumb-bg; 6 | @include border-radius($border-radius); 7 | @include clearfix; 8 | } 9 | 10 | .breadcrumb-item { 11 | float: left; 12 | 13 | // The separator between breadcrumbs (by default, a forward-slash: "/") 14 | + .breadcrumb-item::before { 15 | display: inline-block; // Suppress underlining of the separator in modern browsers 16 | padding-right: $breadcrumb-item-padding; 17 | padding-left: $breadcrumb-item-padding; 18 | color: $breadcrumb-divider-color; 19 | content: "#{$breadcrumb-divider}"; 20 | } 21 | 22 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 23 | // without `