<div class="umfc-showcase-container umfc-v2">
<h1 class="umfc-main-title">Modern Form Controls</h1>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Text & Number Inputs</legend>
<div class="umfc-grid">
<div class="umfc-input-group"><label for="umfcText" class="umfc-label">Text</label><input type="text" id="umfcText" class="umfc-input" placeholder="Enter text..."></div>
<div class="umfc-input-group"><label for="umfcEmail" class="umfc-label">Email</label><input type="email" id="umfcEmail" class="umfc-input" placeholder="name@example.com"></div>
<div class="umfc-input-group"><label for="umfcPass" class="umfc-label">Password</label><input type="password" id="umfcPass" class="umfc-input" placeholder="Password"></div>
<div class="umfc-input-group"><label for="umfcNum" class="umfc-label">Number</label><input type="number" id="umfcNum" class="umfc-input" placeholder="123"></div>
<div class="umfc-input-group"><label for="umfcSearch" class="umfc-label">Search</label><input type="search" id="umfcSearch" class="umfc-input" placeholder="Search..."></div>
<div class="umfc-input-group"><label for="umfcTel" class="umfc-label">Telephone</label><input type="tel" id="umfcTel" class="umfc-input" placeholder="123-456-7890"></div>
<div class="umfc-input-group"><label for="umfcUrl" class="umfc-label">URL</label><input type="url" id="umfcUrl" class="umfc-input" placeholder="https://example.com"></div>
<div class="umfc-input-group"><label for="umfcTextDis" class="umfc-label">Disabled</label><input type="text" id="umfcTextDis" class="umfc-input" placeholder="Disabled" disabled></div>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Textarea</legend>
<div class="umfc-input-group">
<label for="umfcArea" class="umfc-label">Message</label>
<textarea id="umfcArea" class="umfc-textarea" rows="4" placeholder="Enter your message here..."></textarea>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Select Dropdown</legend>
<div class="umfc-grid">
<div class="umfc-input-group">
<label for="umfcSel" class="umfc-label">Choose Option</label>
<div class="umfc-select-wrapper">
<select id="umfcSel" class="umfc-select">
<option value="" disabled selected>Select an option...</option>
<option value="1">Modern Option 1</option>
<option value="2">Modern Option 2 is Longer</option>
<option value="3">Modern Option 3</option>
</select>
</div>
</div>
<div class="umfc-input-group">
<label for="umfcSelDis" class="umfc-label">Disabled Select</label>
<div class="umfc-select-wrapper umfc-disabled">
<select id="umfcSelDis" class="umfc-select" disabled>
<option value="">Disabled Select</option>
</select>
</div>
</div>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Checkboxes (Custom)</legend>
<div class="umfc-check-radio-group">
<label class="umfc-checkbox-control">
<input type="checkbox" name="cbSample" checked>
<span class="umfc-checkbox-indicator"></span> Custom Checkbox 1
</label>
<label class="umfc-checkbox-control">
<input type="checkbox" name="cbSample2">
<span class="umfc-checkbox-indicator"></span> Custom Checkbox 2
</label>
<label class="umfc-checkbox-control umfc-disabled">
<input type="checkbox" name="cbSample3" disabled checked>
<span class="umfc-checkbox-indicator"></span> Disabled Checked
</label>
<label class="umfc-checkbox-control umfc-disabled">
<input type="checkbox" name="cbSample4" disabled>
<span class="umfc-checkbox-indicator"></span> Disabled Unchecked
</label>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Radio Buttons (Custom)</legend>
<div class="umfc-check-radio-group">
<label class="umfc-radio-control">
<input type="radio" name="radioSample" value="r1" checked>
<span class="umfc-radio-indicator"></span> Custom Radio Option A
</label>
<label class="umfc-radio-control">
<input type="radio" name="radioSample" value="r2">
<span class="umfc-radio-indicator"></span> Custom Radio Option B
</label>
<label class="umfc-radio-control umfc-disabled">
<input type="radio" name="radioSampleDis" value="r3" disabled checked>
<span class="umfc-radio-indicator"></span> Disabled Radio Checked
</label>
<label class="umfc-radio-control umfc-disabled">
<input type="radio" name="radioSampleDis2" value="r4" disabled>
<span class="umfc-radio-indicator"></span> Disabled Radio Unchecked
</label>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Date, Time & Color Pickers</legend>
<div class="umfc-grid umfc-grid-pickers">
<div class="umfc-input-group"><label for="umfcDate" class="umfc-label">Date</label><input type="date" id="umfcDate" class="umfc-input umfc-datetime"></div>
<div class="umfc-input-group"><label for="umfcTime" class="umfc-label">Time</label><input type="time" id="umfcTime" class="umfc-input umfc-datetime"></div>
<div class="umfc-input-group"><label for="umfcDTL" class="umfc-label">Datetime-Local</label><input type="datetime-local" id="umfcDTL" class="umfc-input umfc-datetime"></div>
<div class="umfc-input-group"><label for="umfcMonth" class="umfc-label">Month</label><input type="month" id="umfcMonth" class="umfc-input umfc-datetime"></div>
<div class="umfc-input-group"><label for="umfcWeek" class="umfc-label">Week</label><input type="week" id="umfcWeek" class="umfc-input umfc-datetime"></div>
<div class="umfc-input-group"><label for="umfcColor" class="umfc-label">Color</label><input type="color" id="umfcColor" class="umfc-input-color" value="#2563eb"></div>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">File Input</legend>
<div class="umfc-input-group">
<label class="umfc-label">Upload Document</label>
<div class="umfc-file-input-wrapper">
<input type="file" id="umfcFileModern" class="umfc-input-file-hidden">
<label for="umfcFileModern" class="umfc-file-button">Choose File</label>
<span class="umfc-file-name-display">No file selected</span>
</div>
</div>
</fieldset>
<fieldset class="umfc-fieldset">
<legend class="umfc-legend">Buttons</legend>
<div class="umfc-button-group">
<button class="umfc-button umfc-btn-primary">Primary Action</button>
<button class="umfc-button umfc-btn-secondary">Secondary</button>
<button class="umfc-button umfc-btn-success">Success</button>
<button class="umfc-button umfc-btn-danger">Danger</button>
</div>
<div class="umfc-button-group">
<button class="umfc-button umfc-btn-warning">Warning</button>
<button class="umfc-button umfc-btn-info">Info</button>
<button class="umfc-button umfc-btn-light">Light</button>
<button class="umfc-button umfc-btn-dark">Dark</button>
</div>
<div class="umfc-button-group">
<button class="umfc-button umfc-btn-outline-primary">Outline Primary</button>
<button class="umfc-button umfc-btn-outline-secondary">Outline Secondary</button>
<button class="umfc-button umfc-btn-primary" disabled>Disabled Primary</button>
</div>
</fieldset>
</div>
:root {
--umfc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--umfc-text-color: #1f2937;
--umfc-bg-color: #ffffff;
--umfc-border-color: #d1d5db;
--umfc-border-focus-color: #2563eb;
--umfc-placeholder-color: #9ca3af;
--umfc-disabled-bg: #f3f4f6;
--umfc-disabled-text: #9ca3af;
--umfc-disabled-border: #e5e7eb;
--umfc-input-padding-y: 0.6rem;
--umfc-input-padding-x: 0.8rem;
--umfc-border-radius: 0.375rem;
--umfc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--umfc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--umfc-shadow-focus: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
--umfc-primary-color: #2563eb;
--umfc-primary-hover-color: #1d4ed8;
--umfc-secondary-color: #4b5563;
--umfc-secondary-hover-color: #374151;
}
html, body {
background-color: #f9fafb;
}
.umfc-showcase-container.umfc-v2 {
font-family: var(--umfc-font-family);
background-color: #f9fafb;
color: var(--umfc-text-color);
padding: 20px;
max-width: 850px;
margin: 20px auto;
border-radius: 10px;
}
.umfc-v2 .umfc-main-title {
font-size: 2em; color: #111827; text-align: center; margin-bottom: 30px;
}
.umfc-v2 .umfc-fieldset {
border: none;
padding: 0;
margin-bottom: 30px;
}
.umfc-v2 .umfc-legend {
font-size: 1.2em; font-weight: 600; color: #374151;
padding: 0; margin-bottom: 15px;
}
.umfc-v2 .umfc-input-group {
margin-bottom: 1rem;
}
.umfc-v2 .umfc-label {
display: block; font-size: 0.875rem;
color: #4b5563;
margin-bottom: 0.375rem;
font-weight: 500;
}
.umfc-v2 .umfc-input,
.umfc-v2 .umfc-textarea,
.umfc-v2 .umfc-select {
display: block; width: 100%;
padding: var(--umfc-input-padding-y) var(--umfc-input-padding-x);
font-size: 0.95rem; font-weight: 400; line-height: 1.5;
color: var(--umfc-text-color);
background-color: var(--umfc-bg-color);
background-clip: padding-box;
border: 1px solid var(--umfc-border-color);
border-radius: var(--umfc-border-radius);
box-shadow: var(--umfc-shadow-sm);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-sizing: border-box;
}
.umfc-v2 .umfc-input::placeholder, .umfc-v2 .umfc-textarea::placeholder {
color: var(--umfc-placeholder-color); opacity: 1;
}
.umfc-v2 .umfc-input:focus, .umfc-v2 .umfc-textarea:focus, .umfc-v2 .umfc-select:focus {
border-color: var(--umfc-border-focus-color);
outline: 0;
box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-input:disabled, .umfc-v2 .umfc-textarea:disabled, .umfc-v2 .umfc-select:disabled,
.umfc-v2 .umfc-select-wrapper.umfc-disabled {
background-color: var(--umfc-disabled-bg); color: var(--umfc-disabled-text);
border-color: var(--umfc-disabled-border); opacity: 0.7; cursor: not-allowed; box-shadow: none;
}
.umfc-v2 .umfc-input[type="number"] { -moz-appearance: textfield; }
.umfc-v2 .umfc-input[type="number"]::-webkit-outer-spin-button,
.umfc-v2 .umfc-input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.umfc-v2 .umfc-textarea { resize: vertical; min-height: 90px; }
/* Select specific styling */
.umfc-v2 .umfc-select-wrapper { position: relative; display: inline-block; width: 100%; }
.umfc-v2 .umfc-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.5rem; }
.umfc-v2 .umfc-select-wrapper::after {
content: ''; position: absolute; top: 50%; right: 0.9rem;
width: 0.4em; height: 0.4em; border-style: solid;
border-width: 0 0.12em 0.12em 0;
border-color: var(--umfc-placeholder-color);
transform: translateY(-60%) rotate(45deg);
pointer-events: none; transition: border-color 0.15s ease-in-out;
}
.umfc-v2 .umfc-select-wrapper:hover::after { border-color: #4b5563; }
.umfc-v2 .umfc-select-wrapper.umfc-disabled::after { border-color: var(--umfc-disabled-text); }
/* Custom Checkbox */
.umfc-v2 .umfc-checkbox-control {
position: relative; display: flex; align-items: center;
padding-left: 28px;
margin-bottom: 0.5rem; cursor: pointer; font-size: 0.95rem; user-select: none;
}
.umfc-v2 .umfc-checkbox-control input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.umfc-v2 .umfc-checkbox-indicator {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
height: 20px; width: 20px; background-color: var(--umfc-bg-color);
border: 1px solid var(--umfc-border-color); border-radius: var(--umfc-border-radius);
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-checkbox-control:hover input ~ .umfc-checkbox-indicator {
border-color: #adb5bd;
}
.umfc-v2 .umfc-checkbox-control input:checked ~ .umfc-checkbox-indicator {
background-color: var(--umfc-primary-color);
border-color: var(--umfc-primary-color);
}
.umfc-v2 .umfc-checkbox-indicator::after {
content: ""; position: absolute; display: none;
left: 6px; top: 2px; width: 5px; height: 10px;
border: solid white; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.umfc-v2 .umfc-checkbox-control input:checked ~ .umfc-checkbox-indicator::after { display: block; }
.umfc-v2 .umfc-checkbox-control input:focus-visible ~ .umfc-checkbox-indicator {
box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm);
border-color: var(--umfc-border-focus-color);
}
.umfc-v2 .umfc-checkbox-control.umfc-disabled {
color: var(--umfc-disabled-text); cursor: not-allowed;
}
.umfc-v2 .umfc-checkbox-control.umfc-disabled input ~ .umfc-checkbox-indicator {
background-color: var(--umfc-disabled-bg); border-color: var(--umfc-disabled-border); opacity: 0.7;
}
.umfc-v2 .umfc-checkbox-control.umfc-disabled input:checked ~ .umfc-checkbox-indicator {
background-color: #a0aec0; border-color: #a0aec0;
}
/* Custom Radio Button */
.umfc-v2 .umfc-radio-control {
position: relative; display: flex; align-items: center;
padding-left: 28px; margin-bottom: 0.5rem; cursor: pointer; font-size: 0.95rem; user-select: none;
}
.umfc-v2 .umfc-radio-control input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; }
.umfc-v2 .umfc-radio-indicator {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
height: 20px; width: 20px; background-color: var(--umfc-bg-color);
border: 1px solid var(--umfc-border-color); border-radius: 50%;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-radio-control:hover input ~ .umfc-radio-indicator {
border-color: #adb5bd;
}
.umfc-v2 .umfc-radio-control input:checked ~ .umfc-radio-indicator {
border-color: var(--umfc-primary-color);
}
.umfc-v2 .umfc-radio-indicator::after {
content: ""; position: absolute; display: none;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 10px; height: 10px; border-radius: 50%; background-color: var(--umfc-primary-color);
}
.umfc-v2 .umfc-radio-control input:checked ~ .umfc-radio-indicator::after { display: block; }
.umfc-v2 .umfc-radio-control input:focus-visible ~ .umfc-radio-indicator {
box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm);
border-color: var(--umfc-border-focus-color);
}
.umfc-v2 .umfc-radio-control.umfc-disabled {
color: var(--umfc-disabled-text); cursor: not-allowed;
}
.umfc-v2 .umfc-radio-control.umfc-disabled input ~ .umfc-radio-indicator {
background-color: var(--umfc-disabled-bg); border-color: var(--umfc-disabled-border); opacity: 0.7;
}
.umfc-v2 .umfc-radio-control.umfc-disabled input:checked ~ .umfc-radio-indicator::after {
background-color: #a0aec0;
}
.umfc-v2 .umfc-input.umfc-datetime {
min-width: 180px;
}
.umfc-v2 .umfc-input-color {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
width: 44px;
height: calc(1.5em + var(--umfc-input-padding-y) * 2 + 2px);
padding: 0.25rem; background-color: transparent;
border: 1px solid var(--umfc-border-color); border-radius: var(--umfc-border-radius);
cursor: pointer; box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-input-color::-webkit-color-swatch-wrapper { padding: 0; }
.umfc-v2 .umfc-input-color::-webkit-color-swatch { border: none; border-radius: calc(var(--umfc-border-radius) - 3px); }
.umfc-v2 .umfc-input-color::-moz-color-swatch { border: none; border-radius: calc(var(--umfc-border-radius) - 3px); }
.umfc-v2 .umfc-input-color:focus {
border-color: var(--umfc-border-focus-color); outline: 0; box-shadow: var(--umfc-shadow-focus);
}
.umfc-v2 .umfc-file-input-wrapper { display: flex; align-items: center; }
.umfc-v2 .umfc-input-file-hidden { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.umfc-v2 .umfc-file-button {
display: inline-block; padding: var(--umfc-input-padding-y) var(--umfc-input-padding-x);
font-size: 0.95rem; font-weight: 500; color: #374151;
background-color: #f3f4f6; border: 1px solid var(--umfc-border-color);
border-radius: var(--umfc-border-radius); cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease; box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-file-button:hover { background-color: #e5e7eb; border-color: #9ca3af; }
.umfc-v2 .umfc-file-name-display { margin-left: 12px; font-size: 0.9rem; color: #6b7280; }
.umfc-v2 .umfc-button-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.umfc-v2 .umfc-button {
display: inline-block; font-weight: 500; text-align: center; vertical-align: middle;
cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent;
padding: var(--umfc-input-padding-y) calc(var(--umfc-input-padding-x) * 1.25);
font-size: 0.95rem; line-height: 1.5; border-radius: var(--umfc-border-radius);
transition: all 0.15s ease-in-out;
box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-button:focus-visible { outline: 0; box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm); }
.umfc-v2 .umfc-button:active { transform: translateY(1px); box-shadow: none; }
.umfc-v2 .umfc-button:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.umfc-v2 .umfc-btn-primary { color: #fff; background-color: var(--umfc-primary-color); border-color: var(--umfc-primary-color); }
.umfc-v2 .umfc-btn-primary:hover { background-color: var(--umfc-primary-hover-color); border-color: var(--umfc-primary-hover-color); }
.umfc-v2 .umfc-btn-secondary { color: #fff; background-color: var(--umfc-secondary-color); border-color: var(--umfc-secondary-color); }
.umfc-v2 .umfc-btn-secondary:hover { background-color: var(--umfc-secondary-hover-color); border-color: var(--umfc-secondary-hover-color); }
.umfc-v2 .umfc-btn-success { color: #fff; background-color: #10b981; border-color: #10b981; }
.umfc-v2 .umfc-btn-success:hover { background-color: #059669; border-color: #047857; }
.umfc-v2 .umfc-btn-danger { color: #fff; background-color: #ef4444; border-color: #ef4444; }
.umfc-v2 .umfc-btn-danger:hover { background-color: #dc2626; border-color: #b91c1c; }
.umfc-v2 .umfc-btn-warning { color: #1f2937; background-color: #f59e0b; border-color: #f59e0b; }
.umfc-v2 .umfc-btn-warning:hover { background-color: #d97706; border-color: #b45309; }
.umfc-v2 .umfc-btn-info { color: #fff; background-color: #3b82f6; border-color: #3b82f6; }
.umfc-v2 .umfc-btn-info:hover { background-color: #2563eb; border-color: #1d4ed8; }
.umfc-v2 .umfc-btn-light { color: #1f2937; background-color: #f3f4f6; border-color: #e5e7eb; }
.umfc-v2 .umfc-btn-light:hover { background-color: #e5e7eb; border-color: #d1d5db; }
.umfc-v2 .umfc-btn-dark { color: #fff; background-color: #1f2937; border-color: #1f2937; }
.umfc-v2 .umfc-btn-dark:hover { background-color: #111827; border-color: #000000; }
.umfc-v2 .umfc-btn-outline-primary { color: var(--umfc-primary-color); border-color: var(--umfc-primary-color); background-color:transparent; box-shadow: none; }
.umfc-v2 .umfc-btn-outline-primary:hover { color: #fff; background-color: var(--umfc-primary-color); }
.umfc-v2 .umfc-btn-outline-secondary { color: var(--umfc-secondary-color); border-color: var(--umfc-secondary-color); background-color:transparent; box-shadow: none;}
.umfc-v2 .umfc-btn-outline-secondary:hover { color: #fff; background-color: var(--umfc-secondary-color); }
.umfc-v2 .umfc-note { text-align: center; font-size: 0.85em; color: #6b7280; margin-top: 30px; padding: 10px; background-color: #f3f4f6; border-radius:var(--umfc-border-radius); }
.umfc-v2 .umfc-check-radio-group { display: flex; flex-direction: column; gap: 0.75rem; }
.umfc-v2 .umfc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.umfc-v2 .umfc-grid-pickers input { min-width:160px; }
