msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

tutorial: fix custombutton colors for a11y contrast (#6212)

Browse Source
pull/6229/head
Mauricio Paternina 4 years ago committed by GitHub
parent 10e3e3dae8
commit 27234275c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File

10
site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
Unescape View File

@ -2,18 +2,18 @@
button { button {
height: 4rem; height: 4rem;
width: 8rem; width: 8rem;
background-color: #aaa; background-color: #ddd;
border-color: #f1c40f; border-color: #ff3e00;
color: #f1c40f; color: #ff3e00;
font-size: 1.25rem; font-size: 1.25rem;
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%); background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
background-position: 100%; background-position: 100%;
background-size: 400%; background-size: 400%;
transition: background 300ms ease-in-out; transition: background 300ms ease-in-out;
} }
button:hover { button:hover {
background-position: 0; background-position: 0;
color: #aaa; color: #ddd;
} }
</style> </style>

10
site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
Unescape View File

@ -2,18 +2,18 @@
button { button {
height: 4rem; height: 4rem;
width: 8rem; width: 8rem;
background-color: #aaa; background-color: #ddd;
border-color: #f1c40f; border-color: #ff3e00;
color: #f1c40f; color: #ff3e00;
font-size: 1.25rem; font-size: 1.25rem;
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%); background-image: linear-gradient(45deg, #ff3e00 50%, transparent 50%);
background-position: 100%; background-position: 100%;
background-size: 400%; background-size: 400%;
transition: background 300ms ease-in-out; transition: background 300ms ease-in-out;
} }
button:hover { button:hover {
background-position: 0; background-position: 0;
color: #aaa; color: #ddd;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save