Merge branch 'main' into main-xmr-js-isRTL
This commit is contained in:
XhmikosR
GitHub
commit
26cc6665e9
13 changed files with 101 additions and 82 deletions
|
|
@ -75,5 +75,5 @@ params:
|
|||
js_hash: "sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
|
||||
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
|
||||
js_bundle_hash: "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
|
||||
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
|
||||
popper_hash: "sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
|
||||
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
|
||||
popper_hash: "sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@ const browsers = {
|
|||
safariMac: {
|
||||
base: 'BrowserStack',
|
||||
os: 'OS X',
|
||||
os_version: 'High Sierra',
|
||||
os_version: 'Catalina',
|
||||
browser: 'Safari',
|
||||
browser_version: 'latest'
|
||||
},
|
||||
chromeMac: {
|
||||
base: 'BrowserStack',
|
||||
os: 'OS X',
|
||||
os_version: 'High Sierra',
|
||||
os_version: 'Catalina',
|
||||
browser: 'Chrome',
|
||||
browser_version: 'latest'
|
||||
},
|
||||
firefoxMac: {
|
||||
base: 'BrowserStack',
|
||||
os: 'OS X',
|
||||
os_version: 'High Sierra',
|
||||
os_version: 'Catalina',
|
||||
browser: 'Firefox',
|
||||
browser_version: 'latest'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -52,6 +52,6 @@ describe('jQuery', () => {
|
|||
done()
|
||||
})
|
||||
|
||||
$(fixtureEl).find('button').click()
|
||||
$(fixtureEl).find('button').trigger('click')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
98
package-lock.json
generated
98
package-lock.json
generated
|
|
@ -23,9 +23,9 @@
|
|||
}
|
||||
},
|
||||
"@babel/code-frame": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
|
||||
"integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/highlight": "^7.10.4"
|
||||
|
|
@ -78,12 +78,12 @@
|
|||
}
|
||||
},
|
||||
"@babel/generator": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.10.tgz",
|
||||
"integrity": "sha512-6mCdfhWgmqLdtTkhXjnIz0LcdVCd26wS2JXRtj2XY0u5klDsXBREA/pG5NVOuVnF2LUrBGNFtQkIqqTbblg0ww==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
|
||||
"integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.12.10",
|
||||
"@babel/types": "^7.12.11",
|
||||
"jsesc": "^2.5.1",
|
||||
"source-map": "^0.5.0"
|
||||
}
|
||||
|
|
@ -163,14 +163,14 @@
|
|||
}
|
||||
},
|
||||
"@babel/helper-function-name": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
|
||||
"integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
|
||||
"integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-get-function-arity": "^7.10.4",
|
||||
"@babel/template": "^7.10.4",
|
||||
"@babel/types": "^7.10.4"
|
||||
"@babel/helper-get-function-arity": "^7.12.10",
|
||||
"@babel/template": "^7.12.7",
|
||||
"@babel/types": "^7.12.11"
|
||||
}
|
||||
},
|
||||
"@babel/helper-get-function-arity": {
|
||||
|
|
@ -253,15 +253,15 @@
|
|||
}
|
||||
},
|
||||
"@babel/helper-replace-supers": {
|
||||
"version": "7.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.5.tgz",
|
||||
"integrity": "sha512-5YILoed0ZyIpF4gKcpZitEnXEJ9UoDRki1Ey6xz46rxOzfNMAhVIJMoune1hmPVxh40LRv1+oafz7UsWX+vyWA==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz",
|
||||
"integrity": "sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-member-expression-to-functions": "^7.12.1",
|
||||
"@babel/helper-optimise-call-expression": "^7.10.4",
|
||||
"@babel/traverse": "^7.12.5",
|
||||
"@babel/types": "^7.12.5"
|
||||
"@babel/helper-member-expression-to-functions": "^7.12.7",
|
||||
"@babel/helper-optimise-call-expression": "^7.12.10",
|
||||
"@babel/traverse": "^7.12.10",
|
||||
"@babel/types": "^7.12.11"
|
||||
}
|
||||
},
|
||||
"@babel/helper-simple-access": {
|
||||
|
|
@ -283,24 +283,24 @@
|
|||
}
|
||||
},
|
||||
"@babel/helper-split-export-declaration": {
|
||||
"version": "7.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
|
||||
"integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
|
||||
"integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.11.0"
|
||||
"@babel/types": "^7.12.11"
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
|
||||
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
|
||||
"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/helper-validator-option": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz",
|
||||
"integrity": "sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
|
||||
"integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/helper-wrap-function": {
|
||||
|
|
@ -338,9 +338,9 @@
|
|||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.10.tgz",
|
||||
"integrity": "sha512-PJdRPwyoOqFAWfLytxrWwGrAxghCgh/yTNCYciOz8QgjflA7aZhECPZAa2VUedKg2+QMWkI0L9lynh2SNmNEgA==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
|
||||
"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/plugin-proposal-async-generator-functions": {
|
||||
|
|
@ -614,9 +614,9 @@
|
|||
}
|
||||
},
|
||||
"@babel/plugin-transform-block-scoping": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz",
|
||||
"integrity": "sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.11.tgz",
|
||||
"integrity": "sha512-atR1Rxc3hM+VPg/NvNvfYw0npQEAcHuJ+MGZnFn6h3bo+1U3BWXMdFMlvVRApBTWKQMX7SOwRJZA5FBF/JQbvA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.10.4"
|
||||
|
|
@ -898,16 +898,16 @@
|
|||
}
|
||||
},
|
||||
"@babel/preset-env": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.10.tgz",
|
||||
"integrity": "sha512-Gz9hnBT/tGeTE2DBNDkD7BiWRELZt+8lSysHuDwmYXUIvtwZl0zI+D6mZgXZX0u8YBlLS4tmai9ONNY9tjRgRA==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.11.tgz",
|
||||
"integrity": "sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/compat-data": "^7.12.7",
|
||||
"@babel/helper-compilation-targets": "^7.12.5",
|
||||
"@babel/helper-module-imports": "^7.12.5",
|
||||
"@babel/helper-plugin-utils": "^7.10.4",
|
||||
"@babel/helper-validator-option": "^7.12.1",
|
||||
"@babel/helper-validator-option": "^7.12.11",
|
||||
"@babel/plugin-proposal-async-generator-functions": "^7.12.1",
|
||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
||||
"@babel/plugin-proposal-dynamic-import": "^7.12.1",
|
||||
|
|
@ -936,7 +936,7 @@
|
|||
"@babel/plugin-transform-arrow-functions": "^7.12.1",
|
||||
"@babel/plugin-transform-async-to-generator": "^7.12.1",
|
||||
"@babel/plugin-transform-block-scoped-functions": "^7.12.1",
|
||||
"@babel/plugin-transform-block-scoping": "^7.12.1",
|
||||
"@babel/plugin-transform-block-scoping": "^7.12.11",
|
||||
"@babel/plugin-transform-classes": "^7.12.1",
|
||||
"@babel/plugin-transform-computed-properties": "^7.12.1",
|
||||
"@babel/plugin-transform-destructuring": "^7.12.1",
|
||||
|
|
@ -966,7 +966,7 @@
|
|||
"@babel/plugin-transform-unicode-escapes": "^7.12.1",
|
||||
"@babel/plugin-transform-unicode-regex": "^7.12.1",
|
||||
"@babel/preset-modules": "^0.1.3",
|
||||
"@babel/types": "^7.12.10",
|
||||
"@babel/types": "^7.12.11",
|
||||
"core-js-compat": "^3.8.0",
|
||||
"semver": "^5.5.0"
|
||||
}
|
||||
|
|
@ -1039,12 +1039,12 @@
|
|||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.12.10",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
|
||||
"integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
|
||||
"version": "7.12.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.11.tgz",
|
||||
"integrity": "sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-validator-identifier": "^7.10.4",
|
||||
"@babel/helper-validator-identifier": "^7.12.11",
|
||||
"lodash": "^4.17.19",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
|
|
@ -1140,9 +1140,9 @@
|
|||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz",
|
||||
"integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==",
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
|
||||
"integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==",
|
||||
"dev": true
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
|
|
|
|||
|
|
@ -95,13 +95,13 @@
|
|||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.5.4"
|
||||
"@popperjs/core": "^2.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.12.10",
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/preset-env": "^7.12.10",
|
||||
"@popperjs/core": "^2.5.4",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"@rollup/plugin-babel": "^5.2.2",
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.1",
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.5.4"
|
||||
"@popperjs/core": "^2.6.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,14 +44,14 @@
|
|||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $state, $value in $theme-colors {
|
||||
$background: shift-color($value, $alert-bg-scale);
|
||||
$border: shift-color($value, $alert-border-scale);
|
||||
$color: shift-color($value, $alert-color-scale);
|
||||
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
|
||||
$color: mix($value, color-contrast($background), abs($alert-color-scale));
|
||||
$alert-background: shift-color($value, $alert-bg-scale);
|
||||
$alert-border: shift-color($value, $alert-border-scale);
|
||||
$alert-color: shift-color($value, $alert-color-scale);
|
||||
@if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
|
||||
$alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
|
||||
}
|
||||
.alert-#{$state} {
|
||||
@include alert-variant($background, $border, $color);
|
||||
@include alert-variant($alert-background, $alert-border, $alert-color);
|
||||
}
|
||||
}
|
||||
// scss-docs-end alert-modifiers
|
||||
|
|
|
|||
|
|
@ -152,12 +152,12 @@
|
|||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@each $state, $value in $theme-colors {
|
||||
$background: shift-color($value, $list-group-item-bg-scale);
|
||||
$color: shift-color($value, $list-group-item-color-scale);
|
||||
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
|
||||
$color: mix($value, color-contrast($background), abs($alert-color-scale));
|
||||
$list-group-background: shift-color($value, $list-group-item-bg-scale);
|
||||
$list-group-color: shift-color($value, $list-group-item-color-scale);
|
||||
@if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) {
|
||||
$list-group-color: mix($value, color-contrast($list-group-background), abs($alert-color-scale));
|
||||
}
|
||||
|
||||
@include list-group-item-variant($state, $background, $color);
|
||||
@include list-group-item-variant($state, $list-group-background, $list-group-color);
|
||||
}
|
||||
// scss-docs-end list-group-modifiers
|
||||
|
|
|
|||
|
|
@ -612,6 +612,15 @@ $btn-border-radius-lg: $border-radius-lg !default;
|
|||
|
||||
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
$btn-hover-bg-shade-amount: 15% !default;
|
||||
$btn-hover-bg-tint-amount: 15% !default;
|
||||
$btn-hover-border-shade-amount: 20% !default;
|
||||
$btn-hover-border-tint-amount: 10% !default;
|
||||
$btn-active-bg-shade-amount: 20% !default;
|
||||
$btn-active-bg-tint-amount: 20% !default;
|
||||
$btn-active-border-shade-amount: 25% !default;
|
||||
$btn-active-border-tint-amount: 10% !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
|
||||
// scss-docs-start form-validation-states-loop
|
||||
@each $state, $data in $form-validation-states {
|
||||
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
|
||||
@include form-validation-state($state, $data...);
|
||||
}
|
||||
// scss-docs-end form-validation-states-loop
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
$background,
|
||||
$border,
|
||||
$color: color-contrast($background),
|
||||
$hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
|
||||
$hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
|
||||
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
||||
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
||||
$hover-color: color-contrast($hover-background),
|
||||
$active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
|
||||
$active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
|
||||
$active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
||||
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
||||
$active-color: color-contrast($active-background),
|
||||
$disabled-background: $background,
|
||||
$disabled-border: $border,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin form-validation-state($state, $color, $icon) {
|
||||
@mixin form-validation-state(
|
||||
$state,
|
||||
$color,
|
||||
$icon,
|
||||
$tooltip-color: color-contrast($color),
|
||||
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
||||
$focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
|
||||
) {
|
||||
.#{$state}-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
|
@ -33,8 +40,8 @@
|
|||
margin-top: .1rem;
|
||||
@include font-size($form-feedback-tooltip-font-size);
|
||||
line-height: $form-feedback-tooltip-line-height;
|
||||
color: color-contrast($color);
|
||||
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
||||
color: $tooltip-color;
|
||||
background-color: $tooltip-bg-color;
|
||||
@include border-radius($form-feedback-tooltip-border-radius);
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +66,7 @@
|
|||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,7 +94,7 @@
|
|||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,7 +108,7 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
|
||||
~ .form-check-label {
|
||||
|
|
|
|||
|
|
@ -351,7 +351,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
|
|||
|
||||
## Customizing
|
||||
|
||||
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is looped over to generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
|
||||
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
|
||||
|
||||
Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
|
||||
|
||||
|
|
@ -359,6 +359,8 @@ This is the Sass map from `_variables.scss`. Override this and recompile your Sa
|
|||
|
||||
{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
|
||||
|
||||
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
|
||||
|
||||
This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
|
||||
|
||||
{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ toc: true
|
|||
### Sass
|
||||
|
||||
- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
|
||||
- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).
|
||||
|
||||
### JavaScript
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue