m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-18 07:23:21 +01:00
Code
9677d090d1
metamask-extension/ui/app/css/index.scss

32 lines
967 B
SCSS
Raw Normal View History

Define Design System Colors (#9007) Adds design system colors to the css/variables/colors file and deprecates old colors in the deprecated itcss/variables folder
2020-07-17 18:13:45 +02:00
/*
MetaMask design system imports
The variables declared here should take precedence.
They are included first because they will be used to replace bad variable names in itcss
prior to it being fully removed from the system.
*/
Update css folder structure (#9071)
2020-07-28 22:16:30 +02:00
@import './reset.scss';
@import './design-system/index';
@import './base-styles.scss';
Standardize scss import practices (#9183)
2020-08-19 18:41:56 +02:00
@import '../components/app/app-components';
@import '../components/ui/ui-components';
@import '../pages/pages';
Define Design System Colors (#9007) Adds design system colors to the css/variables/colors file and deprecates old colors in the deprecated itcss/variables folder
2020-07-17 18:13:45 +02:00
Moved UI into repo with its own dependency stack
2016-04-14 00:28:44 +02:00
/*
Move old colors intro settings/variables
2017-08-06 21:49:02 +02:00
ITCSS
http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
Add UI selection
2017-11-14 17:04:55 +01:00
Define Design System Colors (#9007) Adds design system colors to the css/variables/colors file and deprecates old colors in the deprecated itcss/variables folder
2020-07-17 18:13:45 +02:00
DEPRECATED: This CSS architecture is deprecated. The following imports will be removed
overtime.
*/
Remove redundant `.scss` file extension from SCSS imports (#8581) The `.scss` file extension is not required when importing SCSS files. It has been removed from all imports, for consistency. I chose to remove it rather than add it everywhere because imports without the extension seem to be more common.
2020-05-13 14:28:06 +02:00
@import './itcss/settings/index';
@import './itcss/tools/index';
@import './itcss/components/index';
remove old tooltip component and styles (#9250) The old tooltip component was only used in two places. Removing those usages was simple and straight forward. So, instead of colocating the old tooltip styles with the deprecated tooltip component, I removed all old styles and made tooltip-v2 now simply 'tooltip' and removed the deprecated component.
2020-08-18 18:13:55 +02:00
/*
Third Party Library Styles
*/
@import '../../../node_modules/react-tippy/dist/tippy';
Serve CSS as an external file (#6894) The CSS is now served as an external file instead of being injected. This was done to improve performance. Ideally we would come to a middle ground between this and the former behaviour by injecting only the CSS that was required for the initial page load, then lazily loading the rest. However that change would be more complex. The hope was that making all CSS external would at least be a slight improvement. Performance metrics were collected before and after this change to determine whether this change actually helped. The metrics collected were the timing events provided by Chrome DevTools: * DOM Content Loaded (DCL) [1] * Load (L) [2] * First Paint (FP) [3] * First Contentful Paint (FCP) [3] * First Meaningful Paint (FMP) [3] Here are the results (units in milliseconds): Injected CSS: | Run | DCL | L | FP | FCP | FMP | | :--- | ---: | ---: | ---: | ---: | ---: | | 1 | 1569.45 | 1570.97 | 1700.36 | 1700.36 | 1700.36 | | 2 | 1517.37 | 1518.84 | 1630.98 | 1630.98 | 1630.98 | | 3 | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 | | 4 | 1522.15 | 1523.72 | 1629.3 | 1629.3 | 1629.3 | | **Min** | 1517.37 | 1518.84 | 1629.3 | 1629.3 | 1629.3 | | **Max** | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 | | **Mean** | 1553.17 | 1554.71 | 1668.3 | 1668.3 | 1668.3 | | **Std. dev.** | 33.41 | 33.43 | 38.16 | 38.16 | 38.16 | External CSS: | Run | DCL | L | FP | FCP | FMP | | :--- | ---: | ---: | ---: | ---: | ---: | | 1 | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 | | 2 | 1537.55 | 1538.99 | 199.38 | 1633.5 | 1633.5 | | 3 | 1571.28 | 1572.74 | 268.65 | 1677.03 | 1677.03 | | 4 | 1510.98 | 1512.33 | 206.72 | 1607.03 | 1607.03 | | **Min** | 1510.98 | 1512.33 | 199.38 | 1607.03 | 1607.03 | | **Max** | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 | | **Mean** | 1553.8025 | 1555.7425 | 239.93 | 1657.605 | 1657.605 | | **Std. dev.** | 29.5375 | 30.0825 | 36.88 | 37.34 | 37.34 | Unfortunately, using an external CSS file made no discernible improvement to the overall page load time. DCM and L were practically identical, and FCP and FMP were marginally better (well within error margins). However, the first paint time was _dramatically_ improved. This change seems worthwhile for the first paint time improvement alone. It also allows us to delete some code and remove a dependency. The old `css.js` module included two third-party CSS files as well, so those have been imported into the main Sass file. This was easier than bundling them in the gulpfile. The resulting CSS bundle needs to be served from the root because we're using a few `@include` rules that make this assumption. We could move this under `/css/` if desired, but we'd need to update each of these `@include` rules. Relates to #6646 [1]: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded [2]: https://developer.mozilla.org/en-US/docs/Web/Events/load [3]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
2019-07-23 19:10:13 +02:00
@import '../../../node_modules/react-select/dist/react-select';
Copy Permalink