Add fallback border-radius to .btn #24505
Merged
Conversation
This file contains 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
Fixes #24503 by manually calling the border-radius instead of using the mixin.
XhmikosR
reviewed
Oct 23, 2017
| @@ -90,5 +90,10 @@ | |||
| padding: $padding-y $padding-x; | |||
| font-size: $font-size; | |||
| line-height: $line-height; | |||
| @include border-radius($border-radius); | |||
| // Manually declare to provide an override to the browser default | |||
| @if $enable-rounded { | |||
There was a problem hiding this comment.
Maybe use the one-liner solution?
There was a problem hiding this comment.
Hi @mdo, Maybe I am missing something, but we are already resetting the browser default on reboot here https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss#L342
I can't reproduce this issue on v4-dev and I can set $enable-rounded: false and .btns go square.
|
@andresgalante This block removes |
|
Hi @brunnopleffken Thanks for the clarification. Here are the reboot lines where we remove border radius from webkit browsers: Firefox will remove the borders as soon as we define a (transparent) border. Opera, Edge and IE just don't show rounded corners by default. I am sure I am missing something since @mdo and you have been able to reproduce it, but I just can't reproduce it neither in Bootstrap with @mdo if you think this should be merged please go ahead and do it, it doesn't hurt to have it. I can't approve it without reproducing it. |
|
Hello @andresgalante
Yes, this PR forcing |
|
@brunnopleffken thanks a lot for testing it. Nope, I am on a mac. As I mention before it's probably me and since the code doesn't hurt to ensure we remove border radius. I am ok to merge it. |
Closed
gijsbotje
added a commit
to gijsbotje/bootstrap
that referenced
this pull request
Dec 30, 2017
* append btn-* and input-* variables and extends their from input-btn-* variables * Update _variables.scss * edit code comments * dist * Add unit tests for util.js * update new focus and shadow properties to use vars * dist * dist * dist * Add `table-row` in documentation (twbs#24551) * form y space in doc * Dropdown handle keydown on input and textarea. * Fix unit tests. * fixes twbs#24574 * dist * Revamp docs About section (twbs#24589) - Drops the Team page for privacy and accuracy. I don't want to pressure folks into feeling committed to the project through a page like this, and it also doesn't allow folks any privacy option (as you can hide org membership on your GitHub profile). - Moves the History page into an Overview page, which includes an updated history page and a quick team blurb at the top. - Added redirects to the new Overview page from Team and History * Add fallback border-radius to .btn (twbs#24505) Fixes twbs#24503 by manually calling the border-radius instead of using the mixin. * Remove invalid bower.json (twbs#24584) (twbs#24590) * Add information about the fact we do not use Popper.js for Dropdown c… (twbs#24571) * Add information about the fact we do not use Popper.js for Dropdown contained in navbars * Update dropdowns.md * Update dropdowns.md * Remove the now unused _data/core-team.yml and the relevant scss. (twbs#24593) * dist * Add `.modal-dialog-centered` for optional vertically centered modal (twbs#24510) * Add .modal-dialog-centered for optional vertically cenetered modal Fixes twbs#23638 * adds modal-dialog-centered class to docs and removes margin to avoid generating a vertical scrolling * mention limitations * fix aria attr * Add `width: 100%` to the .modal-content for the centered version. Adding it here to avoid adding another selector by limiting it to the centered modal modifier. * Add dropright and dropleft (right and left placements for our dropdown) (twbs#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left * Throw error about Popper.js only when it's needed because some of our plugins don't use it (twbs#24573) * tweak spacing * nuke container class for consistency while we're here * dist * Clean up package.json scripts. (twbs#24583) * rename build/htmllint.js to build/vnu-jar.js * remove the unused `bash` script * split the `docs-lint` scripts * fix watch-js script to run only the parent `js-compile` script * Do not create a Popper.js instance when we don't need it * Explain contents of bundled JS files in docs (twbs#23735) * Fix bad title for our dispose method in our documentation * Add missing trailing slashes to URLs in docs * dist * redesign these tables, fix headings, add intro paragraphs * changes colors references on variables.scss from hardcoded to variables on the theme * adds variables for the hr element margin * Minor Markdown consistency cleanup. (twbs#24605) * Update docsearch.js links (twbs#24613) * Remove bower.json from _config.yml. (twbs#24609) * build/*.js: es6ify. (twbs#24611) * Add display utilities link in 'Utilities for layout' docs page (twbs#24615) * Re-enable vnu-jar's warnings and suppress the ones we don't need now. * vnu-jar.js: pass `-Xss512k` for 32-bit Java to avoid a StackOverflowError error. * Remove the redundant `role=navigation` from `nav`s. * Add comments to clarify why we ignore a couple of vnu's errors. * "autocomplete" attribute errors * "legend" is not allowed as child of "div" * Remove invalid example of `title` attribute in an SVG and related vnu error suppression * Remove `datetime-local` warning from vnu ignore list, change reboot example. * Shorten ignores - add more comments. * More wording tweaks * Fix invalid `<nav ... role="tablist">` in docs. * Fix broken footer link after the about page revamp. (twbs#24612) * Update devDependencies and gems. (twbs#24610) * Create CODE_OF_CONDUCT.md (twbs#24629) * Convert modal's px units to rem (twbs#23782) * Update our Webpack documentation for Webpack 3 (twbs#24656) * Update Jekyll excludes to ignore more files. * Add svg files in workbox and remove jpg. * getting-started/introduction.md: move title below the retired meta tags. * Highlight snippet as CSS. * Remove a few extra newlines. * Remove whitespace in SVG includes. * Update package-lock.json. (twbs#24666) * Minor Sass consistency changes. (twbs#24677) * use `background-color` instead of the shorthand * use `outline: 0` consistently * fix transform order * remove quotes from `SFMono-Regular` * changes list-inline-padding from 5px to .5rem * Convert px values to rem on tooltip variables (twbs#23468) * converts px valures to rem on tooltip variables * keep as px to match popover changes * fixing label cutoff at 0% (twbs#24544) * Restore .progress-bar transition (twbs#24694) Unintentionally removed in twbs#22703. Fixes twbs#24643. * fixes twbs#24553: override border-color on focus of custom select with form validation (twbs#24695) * getting-started.md: Redirect from `/getting-started/` too. (twbs#24669) * dist * Move hardcoded opacity value in `.btn:disabled` to variable `$btn-disabled-opacity` (twbs#24680) * Nav Tabs use single variable to style `$nav-tabs-link-hover-border-color` and `$nav-tabs-link-active-border-color` (twbs#24639) * dist * descriptive docs variable naming (twbs#24521) * use descriptive docs btn naming * rename `btn-bd-yellow` to `btn-bd-download` * sort state vars * sort state vars * info, warning, danger * rename btn-bd-purple * rename `.btn-bd-purple` to `.btn-bd-primary` * align docs color variables * generate $bd-purple-light color * with http://razorltd.github.io/sasscolourfunctioncalculator/ * allow overide of docs variables * fixes twbs#24642 * Reduce custom file z-index (twbs#24633) * dist * Popover - call `content` once if it's a function. (twbs#24690) * Escape ID in Util.getSelectorFromElement (twbs#24700) * Fix test failure with jQuery 1.9.1 (twbs#24706) * Update to babel beta 5 * Update devDependencies. * Use correct jQuery name in docs (twbs#24712) * upgrade to node 8.9.x and dist * Adds underline back to `btn-link` on focus * Update devDependencies (twbs#24722) * Use native pseudo-selectors instead of jQuery selectors (twbs#24713) * Add missing `role="button"` in collapse examples. (twbs#24725) * Make styling of grouped option buttons class-based Referencing twbs#23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute. * Update gems. (twbs#24732) * fix typo grid.md (twbs#24757) fixes twbs#24744 * Update Hound config. 1. Explicitly disable ESLint in Hound for now; it was disabled all this time. Temporarily disabled until the ESLint plugins are updated upstream 2. Remove unneeded ignore from .houndignore * Remove .hound.yml. We might revisit this later, but currently we get too many FP with our current setup. * Update devDependencies. (twbs#24762) * Object spread : less jQuery more ES6 (twbs#24665) * Adds variables for form validation messages (twbs#24767) * Removed .col-form-label from vertical form example (twbs#24771) Fixes twbs#24739 * Simplify spread (twbs#24774) * Correct spelling mistakes. (twbs#24778) * Use UMD and fix build to properly load deps (twbs#24783) * Remove the now unused .houndignore file. (twbs#24776) * Fix installing deps in our webpack docs * Fix nested cards on card group (twbs#24766) * Update popper.js to v1.12.9. (twbs#24797) * Don't run postcss for `dist/css/*.min.css` files. (twbs#24676) * Change the text color to dark on bg color warning examples (twbs#24805) * Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (twbs#24825) * Remove the unused assets/js/ie10-viewport-bug-workaround.js. * Combine ie-emulation-modes-warning.js with docs.min.js. * Typos in grid.md (twbs#24828) Fixed typos in offsetting section of grid.md * Fix dropup example code * Update devDependencies. (twbs#24829) * Add support for fractional viewport widths (zoom/high-dpi displays) (twbs#24299) * Change breakpoint max- calculation to fractional values * Update docs to reflect fractional max-width breakpoint values * Add fractional max-width to offcanvas example * Add documentation and SCSS comment for fractional viewport support * Add a simple script to generate SRI hashes for our assets. (twbs#24814) * Allow us to run our unit test on differents jquery version * Run karma tests in parallel. * Update typography docs (twbs#24863) * closes twbs#24450 * Rewrite custom form check backgrounds (twbs#24697) * Rewrite custom form check backgrounds Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true. Fixes twbs#24598 * restore default vars * Revamp custom check and radio backgrounds Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient. * remove now unused mixin * mention change in migration docs * lets the centered modal have any height (twbs#24803) * Custom select updates (twbs#24699) * Add support for size attribute on custom selects * Add large custom select, document it and the small variant * fix custom select focus state * fix custom file input focus styles * remove empty line * Update package.json. (twbs#24582) 1. Use the same jQuery version in jspm 2. Update the files to only include the source and dist folders * Use Jekyll's `smartify` filter when possible. (twbs#24866) * Darken outline hover color to match default button hover (twbs#24150) * Fix Issue twbs#24144 Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button. * Fix Issue twbs#24144 Filled button on hover should utilize the same color-yiq mixin so that theme buttons match * default values, fix mixin * rename it * document it * add migration note * fixes twbs#24728 * Remove unused CSS. (twbs#24872) * tab.js: do not remove fade class if there's no initial active pane * Restore currently unused variables (twbs#24891) * Replace lint-vars.sh with a Node.js script. (twbs#24860) Also, include it in the `css` npm script since it's instant. * Fix docs horizontal scrollbar (twbs#24878) * Fix docs horizontal scrollbar in Components > Modal * Add overflow to docs example class * Drop the handleUpdate() variant While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here). * Combine path and remove variable used in one place. (twbs#24873) * Update devDependencies and gems. (twbs#24876) * Override padding on radio input label (twbs#24899) We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close twbs#24844. * Update README.md (twbs#24912) * Work around Travis failures. Note that we should revert this when the issue is fixed. * Revert the Travis workaround. (twbs#24926) The issue has been fixed. * Adds variable for color yiq threshold (twbs#24886) * Remove .col-form-legend in favor of .col-form-label (twbs#24932) * chore: sync with twbs (#1) * Make styling of grouped option buttons class-based Referencing twbs#23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute. * Fix installing deps in our webpack docs * Fix nested cards on card group (twbs#24766) * Update popper.js to v1.12.9. (twbs#24797) * Don't run postcss for `dist/css/*.min.css` files. (twbs#24676) * Change the text color to dark on bg color warning examples (twbs#24805) * Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (twbs#24825) * Remove the unused assets/js/ie10-viewport-bug-workaround.js. * Combine ie-emulation-modes-warning.js with docs.min.js. * Typos in grid.md (twbs#24828) Fixed typos in offsetting section of grid.md * Fix dropup example code * Update devDependencies. (twbs#24829) * Add support for fractional viewport widths (zoom/high-dpi displays) (twbs#24299) * Change breakpoint max- calculation to fractional values * Update docs to reflect fractional max-width breakpoint values * Add fractional max-width to offcanvas example * Add documentation and SCSS comment for fractional viewport support * Add a simple script to generate SRI hashes for our assets. (twbs#24814) * Allow us to run our unit test on differents jquery version * Run karma tests in parallel. * Update typography docs (twbs#24863) * closes twbs#24450 * Rewrite custom form check backgrounds (twbs#24697) * Rewrite custom form check backgrounds Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true. Fixes twbs#24598 * restore default vars * Revamp custom check and radio backgrounds Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient. * remove now unused mixin * mention change in migration docs * lets the centered modal have any height (twbs#24803) * Custom select updates (twbs#24699) * Add support for size attribute on custom selects * Add large custom select, document it and the small variant * fix custom select focus state * fix custom file input focus styles * remove empty line * Update package.json. (twbs#24582) 1. Use the same jQuery version in jspm 2. Update the files to only include the source and dist folders * Use Jekyll's `smartify` filter when possible. (twbs#24866) * Darken outline hover color to match default button hover (twbs#24150) * Fix Issue twbs#24144 Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button. * Fix Issue twbs#24144 Filled button on hover should utilize the same color-yiq mixin so that theme buttons match * default values, fix mixin * rename it * document it * add migration note * fixes twbs#24728 * Remove unused CSS. (twbs#24872) * tab.js: do not remove fade class if there's no initial active pane * Restore currently unused variables (twbs#24891) * Replace lint-vars.sh with a Node.js script. (twbs#24860) Also, include it in the `css` npm script since it's instant. * Fix docs horizontal scrollbar (twbs#24878) * Fix docs horizontal scrollbar in Components > Modal * Add overflow to docs example class * Drop the handleUpdate() variant While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here). * Combine path and remove variable used in one place. (twbs#24873) * Update devDependencies and gems. (twbs#24876) * Override padding on radio input label (twbs#24899) We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close twbs#24844. * Update README.md (twbs#24912) * Work around Travis failures. Note that we should revert this when the issue is fixed. * Revert the Travis workaround. (twbs#24926) The issue has been fixed. * add .col-form-legend-lg and .col-form-legend-sm classes * document .col-form-legend-{size} * trash .col-form-legend completely One class fits all * Update forms.md * consolidate copy * property order * Document breaking change from twbs#24932 * Update devDependencies and gems. (twbs#24940) * Remove page reload in pwa.js. (twbs#24923) * Use only transitionend event (twbs#24962) * Update link to Font Awesome They have a shiny new site for v5 - https://fontawesome.com/ * Specify host 0.0.0.0 for Jekyll (twbs#24974) Allows for remote connections on same network (as Jekyll now seems to default to 127.0.0.1 which means it does not react to incoming external requests) * dropdown: add boundary config option (twbs#24976) * tooltip+popover: add boundary config option (twbs#24979) * Link to BootstrapCDN and fix its name. (twbs#24987) * dist * Update devDependencies and gems. (twbs#25023) * Rewrite input group component (twbs#25020) * Rewrite input group component * Set the feedback to 100% width for input group * Move from .row to .form-row for tighter layout * no need for custom feedback here, we're using browser messaging * add input group to validation examples * add note about validating multiple * migration note added * Form check markup v2 (twbs#25050) * match layout behaviors * ditch the indicator as separate element for psuedo-elements on the label * move disabled to attribute only on input * redo default inline check to support new markup * redo inline forms * clean up vars * update validation mixin to new structure * update checks in docs * linting for for/id attributes * dist * dist * Restyle code element, remove docs example overflow, improve docs examples (twbs#25054) * Restyle code element, clean up variables - Removes the padding and background-color - Changes the color to a brand color () - Add new variables to kbd element styles to account for removing the code ones - Remove overrides that were needed previously * only break between words, and override it in the pre * make file inputs 100% wide * scope custom file changes in input group for sizing * shorter button labels for responsive * narrower cards * button was too wide * downsize * fewer links in pagination * redo cell text * improve overflow docs * Updated Quick Start Link (twbs#25001) * Updated Link For Getting started Page * Change URL scheme of previous commit From http to https * dist * adds hover state to the `button` element for background color utilities (twbs#24813) * adds a hover state to the button element on the backrgound color utitility * Adjust z-index to fix hover/focus overlaps * Move .table-responsive to a parent class instead of a modifier * dist * Update our browserslist. (twbs#24919) Update our browserslist. * Add `last 1 major version` and `>= 1%`. * Add Firefox. Firefox v38 is older than the ESR, so basically replace ESR with v38. * Fix tooltip/popover arrow size and position * further clarify z-index docs, fix twbs#24999 * change heading * prefix those * closes twbs#24973 * Make custom select and file inputs 100% wide Matches browser default inputs and swaps some max-width properties for a regular width * space custom select sizing examples * remove input group overrides since they're defaults now * Move from h4s and misc to h5s so headings from example snippets don't show in our table of contents * Update SCSS import order to have print styles last * Closes twbs#25039 Adds some additional context on `.form-group` usage * dist * dist * Darken table border-color Fixes twbs#25016 which noticed a .thead-light and border-color of the .table-border are the same color. * dist * Fix input group border radius issue (twbs#25075) (twbs#25076) * Fix input group border radius issue (twbs#25075) * Remove migration note - All buttons In input group do not have to be the same element now. * lint * Clean up button group (twbs#25073) * Remove unnecessary float - since parent btn-group is displayed as inline-flex, the child elements are placed left to right by default. * Cleanup of reset rounded corners - Remove `border-radius :0` since it is enough by each reset of left and right side - A `.dropdown-toggle` selector should not be used for reset rounded corner since it does not have border-radius property. Instead use .dropdown-toggle as negation pseudo-class. * Rewrite custom file input - Changes the wrapping label to a div so we can style the label instead of another element while also supporting form validation. - Fixes form validation styles for custom file input (closes twbs#24831). - Updates docs with validation styles (also adding example feedback text while I was there) and new how it works section. * remove broken static demo * remove popover static example * smaller popover arrows for more reasonable visuals and more ideal pixel rounding * consolidate content properties, un-nest * un-nest and un-chain popover classes * linting * dist * dist * improve docs tables * closes twbs#24929 * extra space * dist * Opinionated: reintroduce `cursor:pointer` Explicitly re-adds the "hand" `cursor:pointer` for non-disabled `.btn`, `.close`, `.navbar-toggler` elements, as well as forcing `page-link` pagination controls to always have the "hand" cursor (even if an author uses it on, say, `<button>` elements for a dynamically updating in-page pagination). Controversial, as everybody jumped on the bandwagon following this article https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b - which does have its merits of course, but there are also counter-arguments like http://kizu.ru/en/issues/cursor-pointer/ And seeing the amount of issues we've seen following the change, and the potential complexity needed to consistently address the cursor issue (see twbs#24156 where i explore how the cursor needs to be based on "intent", and how that's tough to determine), I'm favouring an opinionated take here of just reintroducing the `cursor:pointer`. * dist * Only apply the active and focus shadow on the focus state for :active * fix mixin include * line break * apply same active/focus shadow styling to button variants * Set `cursor:pointer` for `<summary>` * npm dist * Update version to 4.0.0-beta.3 * Allow customizing Popover and Tooltip `font-size` outside of `$font-size-sm` * Allow customizing Popover and Tooltip `border-radius` while I'm at it * Update JS-powered buttons docs to include single button example Closes twbs#25067 * add note about single vs group * Move alert theme-color() levels to variables Closes twbs#24341 * linting * Add docs about active menu items (twbs#24993) * Remove blank line * Expand border utilities to include top, right, bottom, left * Improve lint vars output messaging (twbs#25049) * Add examples of disabled tooltip and popover triggers * Remove margin-bottom on .bd-example (twbs#25048) * Darken $gray-600 by 10% for AA contrast (twbs#25123) Closes twbs#23319. Both `.text-muted` and `.btn-outline-secondary` (and indeed all secondary items) make use of `$gray-600`. New value provides a contrast ratio of 4.69.
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.
Fixes #24503 by manually calling the border-radius instead of using the mixin.