mirrors
/
devdocs
mirror of https://github.com/freeCodeCamp/devdocs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '88688f8549'
${ noResults }
devdocs/assets/stylesheets/components/_settings.scss

137 lines
2.2 KiB
Raw Normal View History Unescape

Add settings page
8 years ago
//
// Settings
//
._settings {
display: none;
position: absolute;
top: 0;
bottom: 0;
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.
7 years ago
z-index: var(--headerZ);
Add settings page
8 years ago
&._in { display: block; }
Improve settings UI Rel: #189
8 years ago
> ._header { justify-content: space-between; }
Add settings page
8 years ago
Improve settings UI Rel: #189
8 years ago
&._dirty > ._header {
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.
7 years ago
background: var(--noteGreenBackground);
border-color: var(--noteGreenBorder);
Improve settings UI Rel: #189
8 years ago
}
Add settings page
8 years ago
}
UI tweaks
8 years ago
//
// Settings page
//
Add settings page
8 years ago
._settings-fieldset {
Fix IE10 flexbox
8 years ago
display: -ms-flexbox;
Add settings page
8 years ago
display: flex;
margin: 1.5rem 0;
line-height: 1.5rem;
}
._settings-legend {
Fix IE10 flexbox
8 years ago
-ms-flex: 0 1 10rem;
flex: 0 1 10rem;
Add settings page
8 years ago
margin: 0;
padding-right: .5rem;
line-height: inherit;
font-size: inherit;
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.
7 years ago
font-weight: var(--boldFontWeight);
Add settings page
8 years ago
text-align: right;
@extend %border-box;
}
._settings-inputs {
Fix IE10 flexbox
8 years ago
-ms-flex: 1 1 20rem;
flex: 1 1 20rem;
Add settings page
8 years ago
}
._settings-label {
Switch to radio buttons for theme picker, only allow auto setting where supported
5 years ago
&:not(._theme-label) {
margin: 0 0 .375rem;
}
Add settings page
8 years ago
> small {
display: block;
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.
7 years ago
color: var(--textColorLight);
Add settings page
8 years ago
margin-left: 1.75rem;
}
Switch to radio buttons for theme picker, only allow auto setting where supported
5 years ago
&._theme-label > small {
display: inline-block;
margin-left: 0.75rem;
}
Add settings page
8 years ago
Switch to radio buttons for theme picker, only allow auto setting where supported
5 years ago
input[type=checkbox], input[type=radio] {
Add settings page
8 years ago
vertical-align: top;
margin: .25rem .375rem;
}
}
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.
7 years ago
@media (max-width: 80rem) {
Improve settings UI
8 years ago
._setting-max-width { display: none; }
Add settings page
8 years ago
}
Add setting to force native scrollbars on webkit/blink Closes #601.
8 years ago
._setting-native-scrollbar { display: none; }
@supports (-webkit-margin-end: 1px) { ._setting-native-scrollbar { display: block; } }
UI tweaks
8 years ago
//
Improve settings UI Rel: #189
8 years ago
// Settings buttons
UI tweaks
8 years ago
//
Add settings page
8 years ago
._settings-btn {
display: block;
UI tweaks
8 years ago
width: 100%;
Add settings page
8 years ago
height: 100%;
line-height: 1.5rem;
padding: 0 .75rem;
font-size: .875rem;
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.
7 years ago
font-weight: var(--boldFontWeight);
Add settings page
8 years ago
color: inherit;
text-align: left;
cursor: pointer;
@extend %border-box;
> svg {
width: 1.5rem;
height: 1.5rem;
margin-right: .125rem;
Replace all remaining PNG UI icons with SVGs
7 years ago
@extend %svg-icon;
Add settings page
8 years ago
}
}
Improve settings UI Rel: #189
8 years ago
._settings-btn-back {
._dirty & { display: none; }
}
._settings-btn-save {
display: none;
._dirty & { display: block; }
}
Add settings page
8 years ago
//
// Header tabs
//
._settings-tabs {
display: none; // mobile only
margin-right: .5rem;
Improve settings UI Rel: #189
8 years ago
._dirty & { display: none !important; }
Add settings page
8 years ago
}
._settings-tab {
position: relative;
vertical-align: top;
padding: 0 .75rem;
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.
7 years ago
line-height: var(--headerHeight);
color: var(--textColorLight);
Add settings page
8 years ago
&.active {
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.
7 years ago
color: var(--textColor);
font-weight: var(--boldFontWeight);
box-shadow: inset 0 -2px var(--linkColor);
Add settings page
8 years ago
}
}