mirror of
https://github.com/freeCodeCamp/devdocs
synced 2024-11-16 19:48:10 +01:00
a30fcf9d9a
* 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.
28 lines
556 B
SCSS
28 lines
556 B
SCSS
._notice {
|
|
position: absolute;
|
|
z-index: var(--noticeZ);
|
|
bottom: 0;
|
|
left: var(--sidebarWidth);
|
|
right: 0;
|
|
height: 2.5rem;
|
|
padding: 0 1.25rem;
|
|
background: var(--noticeBackground);
|
|
box-shadow: inset 0 1px var(--noticeBorder);
|
|
|
|
@include mobile { left: var(--sidebarMediumWidth); }
|
|
|
|
._sidebar-hidden & { left: 0; }
|
|
|
|
~ ._container { padding-bottom: 2.5rem; }
|
|
}
|
|
|
|
._notice-text {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
height: 2.5rem;
|
|
line-height: 1rem;
|
|
font-size: .875rem;
|
|
}
|
|
|
|
._notice-link { cursor: pointer; }
|