consul/ui/packages/consul-ui/app/styles/components
John Cowen 9bfa9afb5a ui: Move all our icons to use CSS custom properties instead of SASS vars (#10298)
* 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)
2021-06-21 10:55:29 +00:00
..
auth-form ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
auth-modal ui: Intention "Action change" warning modal (#9108) 2020-11-06 14:57:19 +00:00
card ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
code-editor ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
composite-row ui: %horizontal-kv-list CSS component (and related) (#10285) 2021-06-21 10:45:38 +00:00
confirmation-dialog ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
definition-table ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
dom-recycling-table ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
expanded-single-select ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
flash-message ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
list-row ui: %horizontal-kv-list CSS component (and related) (#10285) 2021-06-21 10:45:38 +00:00
oidc-select ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
progress ui: Move all our icons to use CSS custom properties instead of SASS vars (#10298) 2021-06-21 10:55:29 +00:00
radio-card ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
secret-button ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
tabular-details ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
tabular-dl ui: Auth Methods - Create Binding Rules tab (#9914) 2021-03-26 11:47:47 -04:00
tooltip-panel ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
anchors.scss ui: Accessibility scan improvements (#9485) 2021-01-05 10:05:59 +00:00
app-view.scss ui: Add docs for AppView (#10265) 2021-05-24 11:33:04 +00:00
auth-form.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
auth-modal.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
breadcrumbs.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
buttons.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
code-editor.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
composite-row.scss ui: Miscellaneous Lock Session fixes (#10225) 2021-05-19 10:08:18 +00:00
confirmation-dialog.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
definition-table.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
empty-state.scss ui: Move control of login modal to use JS rather than HTML (label/id) (#9883) 2021-04-06 13:40:40 +01:00
flash-message.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
form-elements.scss ui: Intention "Action change" warning modal (#9108) 2020-11-06 14:57:19 +00:00
menu-panel.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
more-popover-menu.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
oidc-select.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
pill.scss Create TransparentProxy mode label for service instance page 2021-04-15 09:19:21 -04:00
popover-select.scss ui: Auth Methods List view (#9617) 2021-02-17 13:56:56 -05:00
progress.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
radio-card.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
secret-button.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
table.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
tabular-collection.scss ui: Fixup CSS for create pages (#9019) 2020-10-23 15:41:36 +01:00
tabular-details.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00
tooltip-panel.scss ui: Move to Workspaced Structure (#8994) 2020-10-21 15:23:16 +01:00