fui-fancyui/dist/src/components/atoms/PasswordStrengthMeter/PasswordSrengthMeter.style.js

FancyUI Libary

import e from "../../../design/designFunctions/arrayToCssValues/arrayToCssValues.js";
import { styled as a, css as t } from "styled-components";
const o = t`
  border-radius: ${({ $borderRadius: r }) => e(r, "borderRadius")};
  background-image: none;
  transition: all 0.4s ease;
  height: ${({ $height: r }) => e(r, "spacing")};
`, n = a.meter`
  background: none;
  width: 100%;
  display: block;
  border-color: transparent; /* Needed for Safari */
  height: ${({ $height: r }) => e(r, "spacing")};

  &::-webkit-meter-bar {
    height: ${({ $height: r }) => e(r, "spacing")};
    border: 0;
    background-color: transparent;
    background-image: none;
  }

  &::-webkit-meter-optimum-value {
    background-color: ${({ theme: r }) => r.color.success[0]}; // Strongest (green)
    ${o}
  }

  &:-moz-meter-optimum::-moz-meter-bar {
    background-color: ${({ theme: r }) => r.color.success[0]};
    ${o}
  }

  &::-webkit-meter-suboptimum-value {
    background-color: ${({ theme: r }) => r.color.warning[0]}; // Medium (yellow)
    ${o}
  }

  &:-moz-meter-suboptimum::-moz-meter-bar {
    background-color: ${({ theme: r }) => r.color.warning[0]};
    ${o}
  }

  &::-webkit-meter-even-less-good-value {
    background-color: ${({ theme: r }) => r.color.error[0]}; // Weak (red)
    ${o}
  }

  &:-moz-meter-subsuboptimum::-moz-meter-bar {
    background-color: ${({ theme: r }) => r.color.error[0]};
    ${o}
  }
`;
export {
  n as StyledMeter
};