Skip to content

Commit

Permalink
hide meter if field empty
Browse files Browse the repository at this point in the history
  • Loading branch information
cartja committed Dec 16, 2024
1 parent 7f29a8d commit 470869e
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 51 deletions.
8 changes: 3 additions & 5 deletions src/components/Dashboard/ChangePasswordCustom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,13 @@ export default function ChangePasswordCustomForm(props: ChangePasswordCustomForm
render={(formProps) => {
return (
<form id="passwords-view-form" onSubmit={formProps.handleSubmit}>
<fieldset className="password-format">
<label>
<fieldset>
<legend>
<FormattedMessage
defaultMessage="Tip: Choose a strong password"
description="help text for custom password label"
/>
</label>
</legend>
<ul id="password-custom-help">
{[
<FormattedMessage
Expand All @@ -90,9 +90,7 @@ export default function ChangePasswordCustomForm(props: ChangePasswordCustomForm
return <li key={list.key}>{list}</li>;
})}
</ul>
</fieldset>

<fieldset className="change-password-custom-inputs">
<FinalField
name="custom"
component={NewPasswordInput}
Expand Down
98 changes: 52 additions & 46 deletions src/styles/_ChangePassword.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,47 +19,53 @@ fieldset.toggle-change-password-options {
margin: 1rem;
}

meter {
width: 100%;
//height: 2.5rem;
}
meter::-webkit-meter-bar {
background: $border-gray;
border-color: $border-gray;
border-width: 2px;
}
meter[value="1"]::-webkit-meter-optimum-value {
background: $txt-gray;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="2"]::-webkit-meter-optimum-value {
background: $txt-gray;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="3"]::-webkit-meter-optimum-value {
background: $txt-gray;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="4"]::-webkit-meter-optimum-value {
background: $txt-gray;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/* Password strength meter */

.meter-wrapper {
border: 2px solid $border-gray;
//border: 2px solid $border-gray;
background: $border-gray;
border-radius: 10px;
height: 20px;
overflow: hidden;
line-height: 0;

.form-field-error-area:empty + & {
display: none;
}
}
meter {
width: 100%;
height: 20px;
border: none;
}

/* Gecko based browsers */
/* Webkit browsers */
meter::-webkit-meter-bar {
height: 20px;
//background: $border-gray;
background: repeating-linear-gradient(-55deg, $border-gray, $border-gray 10px, $bg-gray 10px, $bg-gray 20px);
// border-color: $border-gray;
// border-width: 2px;
}
meter::-webkit-meter-optimum-value {
background: $txt-gray;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
// meter[value="1"]::-webkit-meter-optimum-value {
// background: $$error-red;
// }
// meter[value="2"]::-webkit-meter-optimum-value {
// background: $error-red;
// }
// meter[value="3"]::-webkit-meter-optimum-value {
// background: $success-green;
// }
// meter[value="4"]::-webkit-meter-optimum-value {
// background: $success-green;
// }

/* Gecko browsers */
:-moz-meter-optimum::-moz-meter-bar {
background: $txt-gray;
}
Expand All @@ -79,22 +85,22 @@ meter[value="4"]::-webkit-meter-optimum-value {
}
}

meter {
display: block;
margin: 0 auto;
// meter {
// display: block;
// margin: 0 auto;

width: 550px;
height: 25px;
// width: 550px;
// height: 25px;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// -webkit-appearance: none;
// -moz-appearance: none;
// appearance: none;

border: 1px solid #ccc;
border-radius: 3px;
// border: 1px solid #ccc;
// border-radius: 3px;

/* Firefox */
background: none; /* Required to get rid of the default background prop. */
background-color: whiteSmoke;
box-shadow: 0 5px 5px -5px #333 inset;
}
// /* Firefox */
// background: none; /* Required to get rid of the default background prop. */
// background-color: whiteSmoke;
// box-shadow: 0 5px 5px -5px #333 inset;
// }

0 comments on commit 470869e

Please sign in to comment.