bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-07 04:03:29 +00:00
Code Issues Releases Wiki Activity

Revert "Disable native icon for datetime-local field and use our own icons for stylizing (#18633)" (#18796)

Browse Source 
This reverts commit 2d8f74bf70.
This commit is contained in:
Jared
2026-02-05 16:44:29 -05:00
committed by GitHub
parent 1b812d2274
commit 2fd3404c27
2 changed files with 14 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
apps/web/src/app/admin-console/organizations/manage/events.component.html
View File

@@ -14,70 +14,24 @@
<div class="tw-mt-4 tw-flex tw-items-center">
<bit-form-field>
<bit-label>{{ "from" | i18n }}</bit-label>
<div class="tw-relative">
<input
#startInput
bitInput
type="datetime-local"
placeholder="{{ 'startDate' | i18n }}"
formControlName="start"
(change)="dirtyDates = true"
class="datetime-input"
/>
<svg
class="datetime-calendar-icon"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="Open date picker"
role="button"
tabindex="0"
(click)="startInput.showPicker()"
(keydown.enter)="startInput.showPicker()"
(keydown.space)="startInput.showPicker()"
>
<path
d="M14 2h-1V1a1 1 0 00-2 0v1H5V1a1 1 0 00-2 0v1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM2 14V6h12v8H2z"
fill="currentColor"
/>
</svg>
</div>
<input
bitInput
type="datetime-local"
placeholder="{{ 'startDate' | i18n }}"
formControlName="start"
(change)="dirtyDates = true"
/>
</bit-form-field>
<span class="tw-mx-2">-</span>
<bit-form-field>
<bit-label>{{ "to" | i18n }}</bit-label>
<div class="tw-relative">
<input
#endInput
bitInput
type="datetime-local"
placeholder="{{ 'endDate' | i18n }}"
formControlName="end"
(change)="dirtyDates = true"
class="datetime-input"
/>
<svg
class="datetime-calendar-icon"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="Open date picker"
role="button"
tabindex="0"
(click)="endInput.showPicker()"
(keydown.enter)="endInput.showPicker()"
(keydown.space)="endInput.showPicker()"
>
<path
d="M14 2h-1V1a1 1 0 00-2 0v1H5V1a1 1 0 00-2 0v1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM2 14V6h12v8H2z"
fill="currentColor"
/>
</svg>
</div>
<input
bitInput
type="datetime-local"
placeholder="{{ 'endDate' | i18n }}"
formControlName="end"
(change)="dirtyDates = true"
/>
</bit-form-field>
<form>
<button

64
apps/web/src/scss/tailwind.css
View File

@@ -79,70 +79,6 @@
.theme_dark img.new-logo-themed {
content: url("../images/logo-white.svg");
}
/**
* Custom calendar icon for date/datetime inputs
* Hides native macOS picker and uses custom SVG calendar icon
*/
/* Hide the native calendar picker indicator completely */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
appearance: none;
}
/* Wrapper for datetime input to ensure proper positioning */
bit-form-field .tw-relative {
display: flex;
align-items: stretch;
}
/* Ensure datetime inputs have proper padding and alignment */
.datetime-input {
padding-right: 2.5rem !important;
padding-top: 0.625rem !important;
padding-bottom: 0.625rem !important;
height: 44px;
display: flex;
align-items: center;
}
/* Position and style for custom datetime calendar icon */
.datetime-calendar-icon {
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Light mode calendar icon color - dark for visibility */
.theme_light .datetime-calendar-icon {
color: #333333;
}
/* Dark mode calendar icon color - light for visibility */
.theme_dark .datetime-calendar-icon {
color: #cccccc;
}
/* Hover effect for calendar icon */
.datetime-calendar-icon:hover {
opacity: 0.7;
}
/* Focus styling for accessibility */
.datetime-calendar-icon:focus {
outline: 2px solid rgba(var(--color-primary-600));
outline-offset: 2px;
border-radius: 2px;
}
}
/**