mirror of https://github.com/status-im/consul.git
9eab715149
* ui: Move all our icons to use CSS custom properties The good thing about SASS vars is, if you don't use them they get removed from the final build. Whereas with CSS we have no tree-shaking to get rid of unused CSS custom properties. We can mostly work around this and for some things like colors its no big deal if we have some hex-codes in the build that we don't use as hex-codes are relatively small. We've been slowly but surely moving all of our colors (and other things) to use CSS custom properties instead of SASS vars now that we have them available. This commit makes use of the 'tree-shaking' abilities of @extend to ensure that we only compile in the icons that we use. This commit is mostly churn-less as we already use @extend for the majority of our icons, so generally there is zero change here for working on the UI, but I did spot one single place where we were using SASS vars instead of @extend. This now uses the new form (second commit) Interestingly this reduces our CSS payload by ~2kb to ~53kb (around 25kb of that is these icons) |
||
|---|---|---|
| .. | ||
| auth-form | ||
| auth-modal | ||
| card | ||
| code-editor | ||
| composite-row | ||
| confirmation-dialog | ||
| definition-table | ||
| dom-recycling-table | ||
| expanded-single-select | ||
| flash-message | ||
| list-row | ||
| oidc-select | ||
| progress | ||
| radio-card | ||
| secret-button | ||
| tabular-details | ||
| tabular-dl | ||
| tooltip-panel | ||
| anchors.scss | ||
| app-view.scss | ||
| auth-form.scss | ||
| auth-modal.scss | ||
| breadcrumbs.scss | ||
| buttons.scss | ||
| code-editor.scss | ||
| composite-row.scss | ||
| confirmation-dialog.scss | ||
| definition-table.scss | ||
| empty-state.scss | ||
| flash-message.scss | ||
| form-elements.scss | ||
| menu-panel.scss | ||
| more-popover-menu.scss | ||
| oidc-select.scss | ||
| pill.scss | ||
| popover-select.scss | ||
| progress.scss | ||
| radio-card.scss | ||
| secret-button.scss | ||
| table.scss | ||
| tabular-collection.scss | ||
| tabular-details.scss | ||
| tooltip-panel.scss | ||