Skip to content

GitLab

T
tangled
Commit ba2b8ea8 authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot
Browse files
Options

Update font, colors for date popup UI. 

This CL updates the used font for date popup UI to sans-serif.
The colors for disabled, hover and selected state are also updated.

Removed setUseMockTheme(false) from tests to avoid the need to rebase the
test results for changes to the in-page controls (e.g. different border color).

Bug: 1003625, 988155
Change-Id: I95486783d9dca6d262c111b78a40862c6d5d5945
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1808081
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697108}
parent 8c5a2293
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 22 deletions
third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css
View file @ ba2b8ea8
......@@ -4,7 +4,7 @@
*/
body {
font: 12px "Segoe UI", system-ui, Roboto, Ubuntu, sans-serif;
font: 12px sans-serif;
}
.calendar-picker {
......@@ -41,11 +41,15 @@ body {
}
.calendar-navigation-button:hover {
background-color: #F3F3F3;
background-color: #E5E5E5;
}
.calendar-navigation-button:disabled {
color: #C5C5C5;
background-color: #FFFFFF;
}
.calendar-navigation-button:disabled path {
fill: rgba(16, 16, 16, 0.3);;
}
.calendar-title {
......@@ -55,19 +59,33 @@ body {
}
.month-popup-button {
border-width: 0px !important;
border: 0 !important;
font-weight: bold;
padding: 0;
}
.month-popup-button:focus {
outline: auto 1px -webkit-focus-ring-color !important;
}
.month-popup-button:disabled {
background-color: #FFFFFF;
color: rgba(16, 16, 16, 0.3);
}
.month-popup-button:disabled polygon {
fill: rgba(16, 16, 16, 0.3) !important;
}
.month-popup-button .disclosure-triangle {
margin: 0;
margin-inline-start: 4px;
margin-inline-end: 1px;
}
.day-cell {
background-color: #ffffff;
border: 0;
border: 0 !important;
border-radius: 2px;
color: #767676;
padding: 1px;
......@@ -80,29 +98,33 @@ body {
.week-number-cell.highlighted,
.day-cell.highlighted {
background-color: #F3F3F3;
background-color: #E5E5E5;
}
.week-number-cell.selected,
.day-cell.selected {
background-color: #D9EBF9;
background-color: #CECECE;
font-weight: bold;
}
.week-number-cell.disabled,
.day-cell.disabled {
background-color: #ffffff;
color: #C5C5C5;
background-color: #FFFFFF;
color: rgba(16, 16, 16, 0.3);
}
.day-cell.highlighted.today,
.day-cell.today {
background-color: #0078D4;
background-color: #6E6E6E;
border: 0;
color: #FFFFFF;
font-weight: bold;
}
.day-cell.selected.today {
border: 2px solid #CECECE !important;
}
.today-button-refresh {
border: 0;
bottom: 12px;
......@@ -115,6 +137,15 @@ body {
width: auto;
}
.today-button-refresh:hover {
background-color: #E5E5E5;
}
.today-button-refresh:disabled {
background-color: #FFFFFF;
color: rgba(16, 16, 16, 0.3);
}
.year-list-view {
border: 0;
}
......@@ -142,5 +173,10 @@ body {
}
.month-button.highlighted {
background-color: #F3F3F3;
background-color: #E5E5E5;
}
.month-button[aria-disabled="true"] {
background-color: #FFFFFF;
color: rgba(16, 16, 16, 0.3);
}
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-coarse.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-disabled-previous-month.html 0 → 100644
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
<input type=date id=date value="2018-01-22" min="2018-01-01" max="2018-12-31">
<script>
openPicker(document.getElementById('date'), () => testRunner.notifyDone());
</script>
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-rtl.html
View file @ ba2b8ea8
<!DOCTYPE html>
<html dir="rtl">
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
if (window.internals)
internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-step.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-appearance-zoom150.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-disabled-values.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/calendar-picker/date-picker-month-appearance.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/month-picker/month-picker-appearance-disabled-today.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/month-picker/month-picker-appearance-disabled-values.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/month-picker/month-picker-appearance-rtl.html
View file @ ba2b8ea8
<!DOCTYPE html>
<html dir="rtl">
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
if (window.internals)
internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
......
third_party/blink/web_tests/fast/forms/controls-new-ui/month-picker/month-picker-appearance-value-not-in-interval.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
third_party/blink/web_tests/fast/forms/controls-new-ui/month-picker/month-picker-appearance-zoom150.html
View file @ ba2b8ea8
<!DOCTYPE html>
<script>
testRunner.setUseMockTheme(false);
testRunner.waitUntilDone();
</script>
<script src="../../../forms/resources/picker-common.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment