Migrate form Sass vars & new focus styles #41708
Open
+9,818
−11,660
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Don't disallow calc() * Remove disables that aren't needed * Remove custom subtract and add functions * Remove more disables * keep it here
* Convert .ratio helper to new .ratio utility * Fix up * Fix links for now, even though they'll be deleted
* Drop clearfix for display: flow-root * Fix links
* Remove all deprecated Sass variables and deprecation notices from docs components * Fix linter error * fix
* Remove added badges from docs pages * Remove AddedIn
…s and extra dependencies once we migrate to Sass modules (#41697)
* Reorganize scss folder * Migrate to Sass modules * Migrate docs to Sass modules, comment out docs grid CSS * Give helpers folder an index.scss, migrate ratio helper to aspect-ratio utility * Delete node sass Action * Modify Sass tests to pass for new Sass modules implementation * Don't disallow calc() * Move heading classes back to Reboot to prevent a dependency * Utilities, some helpers, and theme colors * Temporary fix of docs compilation * Temporary Bundlewatch fix * docs fix import to use * Restyle docs callouts * Fix docs colors * Revert typo * Reintroduce `css-lint-vars` npm script * Bump to Sass v1.90.x * Fixes * more * Remove --------- Co-authored-by: Julien Déramond <[email protected]>
* First pass at CSS layers * bundlewatch * more bundlewatch
…41702) * Restore both grids and update mixins * Bundlewatch
* Co-locate Sass variables in most files * another * fix * Don't bring tables into reboot, temp remove some sass vars so we don't need the co-dependency * Move vars * bundlewatch * scssdocs * Fix scssdocs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Colocates Sass vars for forms into their respective files, but adds a new shared
forms/_forms-variables.scssto have some centralized ones that are used across files. This needs revisiting though because I hate the idea of having to import forms vars into buttons. Need a cleaner, less nested solution.Explaining that last part more, we have
$input-btn-padding-xwhich is then applied to$input-btn-padding-xwhich is then used by$form-select-padding-x. Insane to me.This also sneaks in a new focus ring style—mixin, helper, and CSS variables—for components. This helps us remove the
box-shadow"outline" hack for custom shadows. We can do this now thatoutlinerespectsborder-radiusin almost all browsers. Instead of doing translucent focus rings too, we're color mixing so that the focus ring will better stand out.Need to revisit some commented out things here—we have some form bits that are complicated and component details cross individual stylesheets.
Also need to fix up selects—their background image is missing. Ideally we could do some image mask here, but we can't do generated elements on selects.