Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

chore: rename styles to module, add more focus styles

Browse Source
This commit is contained in:
Thomas Heartman 2022-02-24 18:00:03 +01:00
parent 39f4d73d59
commit aa3fb6c4e2
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/components/UserFeedback/index.jsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import './styles.css'; import styles from './styles.module.css';
const Component = ({ text }) => ( const Component = ({ text }) => (
<article className="user-feedback"> <article className="user-feedback">
<form> <form className={styles.bah}>
<p> <p>
<span className="visually-hidden"> <span className="visually-hidden">
On a scale from 1 to 5 where 1 is very unsatisfied and 5 is On a scale from 1 to 5 where 1 is very unsatisfied and 5 is

19
website/src/components/UserFeedback/styles.css → website/src/components/UserFeedback/styles.module.css
View File

@ -7,6 +7,20 @@
box-shadow: var(--ifm-global-shadow-lw); box-shadow: var(--ifm-global-shadow-lw);
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
text-align: center; text-align: center;
--outline-style: 2px solid var(--ifm-color-primary);
}
.user-feedback > form {
max-width: 850px;
margin: auto;
}
.user-feedback * {
outline-offset: 4px;
}
.user-feedback *:focus {
outline: var(--outline-style);
} }
.satisfaction-input-container { .satisfaction-input-container {
@ -24,11 +38,10 @@
width: 3em; width: 3em;
border: var(--ifm-global-border-width) solid currentColor; border: var(--ifm-global-border-width) solid currentColor;
border-radius: 50%; border-radius: 50%;
outline-offset: 4px;
} }
.user-satisfaction-score-input:focus-visible + .user-satisfaction-score-label { .user-satisfaction-score-input:focus-visible + .user-satisfaction-score-label {
outline: 2px solid var(--ifm-color-primary); outline: var(--outline-style);
} }
.user-satisfaction-score-label:hover { .user-satisfaction-score-label:hover {
@ -46,3 +59,5 @@
display: flex; display: flex;
justify-content: end; justify-content: end;
} }
.bah {}