Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

[EC-838] fix: CSP issues with inline styles (#4219)

Browse Source
This commit is contained in:
Andreas Coroiu 2022-12-15 15:42:15 +01:00 committed by GitHub
parent 002c3f6368
commit d8a121463e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
libs/components/src/checkbox/checkbox.component.ts
View File

@ -7,18 +7,6 @@ import { BitFormControlAbstraction } from "../form-control";
selector: "input[type=checkbox][bitCheckbox]",
template: "",
providers: [{ provide: BitFormControlAbstraction, useExisting: CheckboxComponent }],
styles: [
`
:host:checked:before {
-webkit-mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
`,
],
})
export class CheckboxComponent implements BitFormControlAbstraction {
@HostBinding("class")
@ -63,6 +51,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
"[&>label:hover]:checked:tw-border-primary-700",
"checked:before:tw-bg-text-contrast",
"checked:before:tw-mask-image-[var(--mask-image)]",
"checked:before:tw-mask-position-[center]",
"checked:before:tw-mask-repeat-[no-repeat]",
"checked:disabled:tw-border-secondary-100",
"checked:disabled:tw-bg-secondary-100",
@ -72,6 +63,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
constructor(@Optional() @Self() private ngControl?: NgControl) {}
@HostBinding("style.--mask-image")
protected maskImage = `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
@HostBinding()
@Input()
get disabled() {

23
libs/components/tailwind.config.base.js
View File

@ -1,5 +1,6 @@
/* eslint-disable */
const colors = require("tailwindcss/colors");
const plugin = require("tailwindcss/plugin");
function rgba(color) {
return "rgb(var(" + color + ") / <alpha-value>)";
@ -94,5 +95,25 @@ module.exports = {
}),
},
},
plugins: [],
plugins: [
plugin(function ({ matchUtilities, theme, addUtilities, addComponents, e, config }) {
matchUtilities(
{
"mask-image": (value) => ({
"-webkit-mask-image": value,
"mask-image": value,
}),
"mask-position": (value) => ({
"-webkit-mask-position": value,
"mask-position": value,
}),
"mask-repeat": (value) => ({
"-webkit-mask-repeat": value,
"mask-repeat": value,
}),
},
{}
);
}),
],
};