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.
137 lines
2.1 KiB
SCSS
137 lines
2.1 KiB
SCSS
._jquery {
|
|
//
|
|
// Index page
|
|
//
|
|
|
|
h2.entry-title {
|
|
margin: 0 0 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.entry-summary {
|
|
margin: -1rem 0 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.post:not(:only-of-type),
|
|
.page:not(:only-of-type) {
|
|
width: 50%;
|
|
float: left;
|
|
|
|
&:nth-of-type(2n+1) { clear: both; }
|
|
}
|
|
|
|
//
|
|
// Article page
|
|
//
|
|
|
|
// Table of contents
|
|
|
|
.toc > h4 { font-size: inherit; }
|
|
|
|
.toc-list {
|
|
margin-top: 0;
|
|
font-weight: var(--boldFontWeight);
|
|
|
|
> li + li { margin-top: 1em; }
|
|
> li > ul { font-weight: normal; }
|
|
> li > ul > li + li { margin-top: 0; }
|
|
}
|
|
|
|
// Headings
|
|
|
|
.section-title, .entry-wrapper > h3, .underline { @extend %block-heading; }
|
|
|
|
.name > .version-details,
|
|
.section-title > .version-details,
|
|
.returns,
|
|
.option-type {
|
|
float: right;
|
|
font-weight: var(--boldFontWeight);
|
|
margin-left: 1em;
|
|
}
|
|
|
|
// Method signatures
|
|
|
|
.signatures {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.signature {
|
|
+ .signature { margin-top: 1em; }
|
|
|
|
> .name {
|
|
margin-top: 1em;
|
|
@extend %block-label, %label-blue;
|
|
}
|
|
|
|
> ul {
|
|
padding-left: 1em;
|
|
list-style: none;
|
|
|
|
> li + li { margin-top: 1em; }
|
|
> li > ul { list-style-type: disc; }
|
|
}
|
|
}
|
|
|
|
// Examples
|
|
|
|
.entry-example {
|
|
> h4 {
|
|
margin: 2em 0 1.5em;
|
|
line-height: inherit;
|
|
font-size: inherit;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
// Quick nav (jQuery UI)
|
|
|
|
#quick-nav {
|
|
margin-bottom: 2em;
|
|
max-width: 38em;
|
|
overflow: hidden;
|
|
@extend %note, %note-blue;
|
|
|
|
> h2 {
|
|
margin: .25rem 0 1rem;
|
|
font-size: 1rem;
|
|
|
|
> a { float: right; }
|
|
}
|
|
}
|
|
|
|
.quick-nav-section {
|
|
width: 33%;
|
|
float: left;
|
|
|
|
> h3 {
|
|
margin: 0 0 .5em;
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
// Options (jQuery UI)
|
|
|
|
.api-item {
|
|
padding-left: 1rem;
|
|
|
|
> h3 {
|
|
margin-left: -1rem;
|
|
@extend %block-label, %label-blue;
|
|
}
|
|
}
|
|
|
|
// Misc
|
|
|
|
p > code, li > code { @extend %label; }
|
|
.warning { @extend %note; }
|
|
|
|
.name > a,
|
|
.version-details > a {
|
|
color: inherit;
|
|
@extend %internal-link;
|
|
}
|
|
}
|