nfsfu234-form-validation/dist/css/nfsfu234FormValidation.css.map

NFSFU234FormValidation is a lightweight and user-friendly JavaScript library designed for validating HTML form elements, with a special emphasis on textarea fields. It offers customizable validation messages, comprehensive support for required field check

{"version":3,"sources":["../../src/css/nfsfu234FormValidation.css"],"names":[],"mappings":"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","file":"nfsfu234FormValidation.css","sourcesContent":["/* Define custom CSS variables */\n:root {\n    --success: #4caf50;           /* Define a custom variable for success color */\n    --failure: #f44336;         /* Define a custom variable for failure color */\n    --warning: #ff9800;      /* Define a custom variable for warning color */\n    --white: #ffffff;         /* Define a custom variable for white color */\n    --black: #000000;      /* Define a custom variable for black color */\n  }\n  \n  /* Utility class for relative positioning */\n  .relative-position {\n    position: relative !important; /* Apply relative positioning to the element */\n  }\n  \n  /* Utility class for background color indicating success */\n  .bgSuccess {\n    background: var(--success) !important; /* Set background color to the defined success color */\n    color: var(--white) !important;        /* Set text color to white */\n  }\n  \n  /* Utility class for text color indicating success */\n  .text-success {\n    color: var(--success) !important; /* Set text color to the defined success color */\n  }\n  \n  /* Utility class for background color indicating failure */\n  .fail {\n    background: var(--failure) !important; /* Set background color to the defined failure color */\n    color: var(--white) !important;        /* Set text color to white */\n  }\n  \n  /* Utility class for text color indicating failure */\n  .text-failure,\n  .text-fail {\n    color: var(--failure) !important; /* Set text color to the defined failure color */\n  }\n  \n  /* Utility class for background color indicating warning */\n  .warning {\n    background: var(--warning) !important; /* Set background color to the defined warning color */\n    color: var(--white) !important;        /* Set text color to white */\n  }\n  \n  /* Utility class for input focus with error */\n  .input-focus-error {\n    border: 1px solid var(--failure) !important; /* Set border color to the defined failure color */\n    color: var(--failure) !important;           /* Set text color to the defined failure color */\n  }\n  \n  /* Utility class for input focus with success */\n  .input-focus-success {\n    border: 1px solid var(--success) !important; /* Set border color to the defined failure color */\n    color: var(--success) !important;           /* Set text color to the defined failure color */\n  }\n  \n  /* Utility class for inline error message */\n  .js-inline-message {\n    color: var(--failure);         /* Set text color to the defined failure color */\n    font-size: calc(100% - 0.3rem); /* Reduce font size slightly compared to parent element */\n    text-transform: uppercase;     /* Convert text to uppercase */\n    display: block; \n    width: 100%;\n    margin: 5px 0;\n  }\n  \n  \n  \n  /* Styling for error container */\n  .js-errorMessageContainer {\n    position: absolute;         /* Absolute positioning to place it correctly */\n    top: 0;                     /* Position at the top of the container */\n    width: 100%;                /* Take the full width of the container */\n    height: max-content;        /* Adjust height based on content inside */\n  }\n  \n  /* Styling for login error message container */\n  .js-errorMessageContainer .login-error-message-container {\n    position: relative;         /* Relative positioning for child elements */\n    width: clamp(100%, 80vw, 300px); /* Width is responsive between 100% and 300px */\n    background: red;            /* Background color for error container */\n    color: #fff;                /* Text color for error message */\n    border-radius: 10px;        /* Rounded corners for the container */\n    border: 1.5px solid red !important;    /* Red border for the container */\n    overflow: hidden;           /* Hide overflowing content */\n    margin-bottom: 10px;       /* Add space at the bottom of the container */\n    /* margin-top: -100px; */   /* (Commented out) Adjust top margin if needed */\n    display: none;              /* Initially hide the container */\n    transition: 0.5s margin ease-in-out; /* Add smooth transition for margin */\n  }\n  \n  /* Styling for the message inside error container */\n  .js-errorMessageContainer .login-error-message-container .message {\n    width: calc(100% - 50px);   /* Calculate width minus icon space */\n    height: 100%;               /* Take full height of the container */\n    padding: 0 0.3rem;          /* Add padding to the message */\n    min-height: 50px;           /* Set minimum height for the container */\n    display: flex;              /* Display as flex for centering content */\n    align-items: center;        /* Center vertically */\n    justify-content: center;    /* Center horizontally */\n    letter-spacing: 1.5px;      /* Add letter spacing for uppercase text */\n    text-transform: uppercase;  /* Convert text to uppercase */\n    text-align: center;         /* Center text within the container */\n  }\n  \n  /* Styling for the icon inside error container */\n  .js-errorMessageContainer .login-error-message-container .icon {\n    position: absolute;         /* Absolute positioning for the icon */\n    top: 0;                     /* Position at the top of the container */\n    right: 0;                   /* Position at the right of the container */\n    height: 100%;               /* Take full height of the container */\n    width: 50px;                /* Set width for the icon space */\n    background: #fff;           /* Background color for the icon space */\n    color: red;                 /* Icon color (red for error) */\n    display: flex;              /* Display as flex for centering content */\n    align-items: center;        /* Center vertically */\n    justify-content: center;    /* Center horizontally */\n  }\n  \n  /* Styling for SVG icon inside error container */\n  .js-errorMessageContainer .login-error-message-container .icon svg {\n    height: 60%;                /* Set height of the SVG icon */\n    width: 60%;                 /* Set width of the SVG icon */\n    fill: currentColor;         /* Set SVG icon fill color to current color (red) */\n  }\n  \n  /* Styling for active state of the error container */\n  .js-errorMessageContainer .login-error-message-container.active {\n    display: block !important; /* Display the container when active */\n  }\n  \n  /* Styling for success state of the error container */\n  .js-errorMessageContainer .login-error-message-container.success {\n    background: var(--success); /* Background color for success state */\n    border: 1.5px solid var(--success) !important; /* Border color for success state */\n  }\n  \n  /* Styling for success icon in the error container */\n  .js-errorMessageContainer .login-error-message-container.success .icon {\n    color: var(--success);      /* Icon color for success state */\n  }\n  \n  /* Keyframes animation for spinning */\n  @keyframes spin {\n    100% {\n        transform: rotate(360deg); /* Rotate the element fully */\n    }\n  }\n  \n  /* Styling for elements with the spin class */\n  .spin, \n  .js-spin\n  {\n    animation: spin 1s infinite linear; /* Apply the spinning animation */\n  }\n\n  svg.spin, \n  svg.js-spin\n  {\n    width: 25px;\n    height: 25px;\n  }\n  \n  /* Styling for show password button */\n  .cssShowPassword {\n    position: absolute;         /* Absolute positioning for the button */\n    bottom: 0;                  /* Position at the bottom of the container */\n    right: 0;                   /* Position at the right of the container */\n    height: 50px;               /* Set height for the button */\n    width: 50px;                /* Set width for the button */\n    background: #000;           /* Background color for the button */\n    color: #fff;                /* Text color for the button */\n    fill: #fff;                 /* Icon fill color for the button */\n    display: flex;              /* Display as flex for centering content */\n    align-items: center;        /* Center vertically */\n    justify-content: center;    /* Center horizontally */\n  }\n  \n  /* Styling for SVG icon inside show password button */\n  .cssShowPassword svg {\n    width: 25px;                /* Set width of the SVG icon */\n    height: 25px;               /* Set height of the SVG icon */\n  }\n  "]}