Miroirs/devdocs
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/devdocs synced 2024-11-16 19:48:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
devdocs/assets/stylesheets/components/_app.scss

23 lines
562 B
SCSS
Raw Permalink Normal View History

Switch from SASS variables to CSS variables * Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.
2018-08-11 17:17:55 +02:00
html._booting { background: var(--contentBackground); }
Improve fixed-width layout
2017-09-23 20:00:44 +02:00
body._max-width { background: none; }
Switch from SASS variables to CSS variables * Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.
2018-08-11 17:17:55 +02:00
html._booting body._max-width { background: var(--documentBackground); }
Improve fixed-width layout
2017-09-23 20:00:44 +02:00
Going open source
2013-10-24 20:25:52 +02:00
._app {
position: relative;
z-index: 1;
height: 100%;
overflow: hidden;
-webkit-transition: opacity .2s;
transition: opacity .2s;
@extend %border-box;
Improve app loading sequence
2017-09-10 00:14:23 +02:00
._booting & { opacity: 0; }
Add an icon in the sidebar to constrain the width of the UI (only visible when applicable)
2015-08-03 23:08:36 +02:00
Move the app layout class to the <body> element
2017-06-25 23:55:17 +02:00
._max-width & {
Add an icon in the sidebar to constrain the width of the UI (only visible when applicable)
2015-08-03 23:08:36 +02:00
margin: 0 auto;
Switch from SASS variables to CSS variables * Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.
2018-08-11 17:17:55 +02:00
max-width: var(--maxWidth);
background: var(--contentBackground);
box-shadow: 1px 0 var(--headerBorder), -1px 0 var(--headerBorder);
Add an icon in the sidebar to constrain the width of the UI (only visible when applicable)
2015-08-03 23:08:36 +02:00
}
Going open source
2013-10-24 20:25:52 +02:00
}
Reference in a new issue Copy permalink