Skip to content

Commit

Permalink
fix: css on webkit (safari)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ewrogers
ewrogers committed Nov 4, 2023
1 parent aa6c35d commit 79a2ea2
Show file tree
Hide file tree
Showing 3 changed files with 231 additions and 166 deletions.
54 changes: 48 additions & 6 deletions public/styles/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,30 @@
text-align: right;
}

.form-input {
div.form-date-container {
position: relative;
display: inline-block;
}

div.form-date-container::after {
content: "▼"; /* Down arrow Unicode character */
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
cursor: pointer;
font-size: 70%;
color: var(--stone-200);
}

input.form-date {
padding: 4px 24px 4px 8px;
min-width: 120px;
}

input.form-input {
-webkit-appearance: none;
background-color: var(--stone-900);
color: var(--stone-50);
border: solid 1px var(--stone-500);
Expand All @@ -86,27 +109,46 @@
margin: 4px;
}

.form-input:focus {
input.form-input:focus {
border: dotted 1px var(--stone-300);
outline: none;
}

.form-select {
div.form-select-container {
position: relative;
display: inline-block;
}

div.form-select-container::after {
content: "▼"; /* Down arrow Unicode character */
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 70%;
color: var(--stone-200);
}

select.form-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: var(--stone-900);
color: var(--stone-50);
border: solid 1px var(--stone-500);
border-radius: 2px;
font-size: 1em;
padding: 4px 8px;
padding: 4px 24px 4px 8px;
margin: 4px;
}

.form-select:focus {
select.form-select:focus {
border: dotted 1px var(--stone-300);
outline: none;
}

.form-select:disabled {
select.form-select:disabled {
background-color: var(--stone-500);
border: solid 1px var(--stone-300);
color: var(--stone-200);
Expand Down
133 changes: 72 additions & 61 deletions src/components/forms/AddEventForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,73 +45,84 @@ const AddEventForm: FC<AddEventProps> = ({ initialDate }) => {
<label for="start-day" class="form-label">
Starts At
</label>
<input
id="start-day"
name="startDay"
type="date"
class="form-input"
required
_={`on load set me.value to '${initialDayString}'`}
/>
<select
id="start-hour"
name="startHour"
class="form-select"
required
_={`on load set me.selectedIndex to ${initialHour}`}
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select
id="start-minute"
name="startMinute"
class="form-select"
required
>
<option value="0" selected>
00
</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<select
id="am-pm"
name="amPm"
class="form-select"
required
_={`on load set me.selectedIndex to ${isAfterNoon ? 1 : 0}`}
>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<div class="form-date-container">
<input
id="start-day"
name="startDay"
type="date"
class="form-input form-date"
required
_={`on load set me.value to '${initialDayString}'`}
/>
</div>
<div class="form-select-container">
<select
id="start-hour"
name="startHour"
class="form-select"
required
_={`on load set me.selectedIndex to ${initialHour}`}
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>

<div class="form-select-container">
<select
id="start-minute"
name="startMinute"
class="form-select"
required
>
<option value="0" selected>
00
</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
</div>
<div class="form-select-container">
<select
id="am-pm"
name="amPm"
class="form-select"
required
_={`on load set me.selectedIndex to ${isAfterNoon ? 1 : 0}`}
>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
</section>

<section>
<label for="duration" class="form-label">
Duration
</label>
<select id="duration" name="duration" class="form-select" required>
<option value="15">15 minutes</option>
<option value="30" selected>
30 minutes
</option>
<option value="45">45 minutes</option>
<option value="60">1 hour</option>
<option value="90">1 hour 30 minutes</option>
<option value="120">2 hours</option>
</select>
<div class="form-select-container">
<select id="duration" name="duration" class="form-select" required>
<option value="15">15 minutes</option>
<option value="30" selected>
30 minutes
</option>
<option value="45">45 minutes</option>
<option value="60">1 hour</option>
<option value="90">1 hour 30 minutes</option>
<option value="120">2 hours</option>
</select>
</div>
</section>

<section>
Expand Down
Loading

0 comments on commit 79a2ea2

Please sign in to comment.