[css-logical] Replace uses of webkit-prefixed logical properties with standard ones in /ui/webui
Bug 850000 added standard logical properties and aliased prefixed ones
to them. The prefixed properties are still used in various places, but
the standard ones should be used instead. This patch replaces all the
uses in /ui/webeui
Spec: https://drafts.csswg.org/css-logical/#box
BUG=862141
Change-Id: I9c77c4374bef006fa518eba96f10db8e9bc9c2eb
Reviewed-on: https://chromium-review.googlesource.com/1146930
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#577360}diff --git a/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html b/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html
index 88fbdb2e2..00f6e17 100644
--- a/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html
+++ b/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html
@@ -7,10 +7,10 @@
<style include="cr-shared-style">
/* .list-frame and .list-item match the styling in settings_shared_css. */
.list-frame {
- -webkit-padding-end: 20px;
- -webkit-padding-start: 60px;
align-items: center;
display: block;
+ padding-inline-end: 20px;
+ padding-inline-start: 60px;
}
.list-item {
diff --git a/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html b/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html
index 96310bc..409975b 100644
--- a/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html
+++ b/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html
@@ -17,9 +17,9 @@
}
.untrusted {
- -webkit-margin-end: 16px;
color: var(--paper-red-700);
font-weight: 500;
+ margin-inline-end: 16px;
text-transform: uppercase;
}
diff --git a/ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html b/ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html
index f2cb53a..89d19e9b 100644
--- a/ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html
+++ b/ui/webui/resources/cr_components/chromeos/bluetooth_dialog.html
@@ -75,7 +75,7 @@
}
paper-button.action-button {
- -webkit-margin-start: 8px;
+ margin-inline-start: 8px;
}
</style>
<!-- TODO(stevenjb/dschuyler): Find a solution to support i18n{} here -->
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.html b/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.html
index 631416c..ce2da59 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_choose_mobile.html
@@ -13,7 +13,7 @@
<style include="network-shared md-select iron-flex paper-button-style">
/* Leave some space between button and select. */
select {
- -webkit-margin-start: 8px;
+ margin-inline-start: 8px;
}
</style>
<div class="property-box first two-line">
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html b/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html
index 9652ec4..7cb2f0f 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html
@@ -13,13 +13,13 @@
<template>
<style include="network-shared md-select iron-flex">
a {
- -webkit-margin-start: 4px;
+ margin-inline-start: 4px;
}
cr-input {
- /* Aligns with the start of cr-radio-button's text. */
- -webkit-margin-start: 38px;
margin-bottom: 4px;
+ /* Aligns with the start of cr-radio-button's text. */
+ margin-inline-start: 38px;
}
paper-radio-group {
@@ -29,14 +29,14 @@
.nameservers {
/* Aligns with the start of cr-radio-button's text. */
- -webkit-margin-start: 38px;
+ margin-inline-start: 38px;
}
#radioGroupDiv {
- -webkit-padding-end: var(--cr-section-padding);
- -webkit-padding-start: var(--cr-section-padding);
align-items: center;
display: block;
+ padding-inline-end: var(--cr-section-padding);
+ padding-inline-start: var(--cr-section-padding);
}
</style>
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_property_list.html b/ui/webui/resources/cr_components/chromeos/network/network_property_list.html
index ed8d700..7f9e937 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_property_list.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_property_list.html
@@ -21,7 +21,7 @@
}
cr-policy-network-indicator {
- -webkit-margin-start: var(--settings-controlled-by-spacing);
+ margin-inline-start: var(--settings-controlled-by-spacing);
}
</style>
<template is="dom-repeat" items="[[fields]]"
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_proxy.html b/ui/webui/resources/cr_components/chromeos/network/network_proxy.html
index 13d1e953..4a01756 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_proxy.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_proxy.html
@@ -32,7 +32,7 @@
}
#manualProxy {
- -webkit-padding-start: var(--cr-section-padding);
+ padding-inline-start: var(--cr-section-padding);
}
</style>
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_shared_css.html b/ui/webui/resources/cr_components/chromeos/network/network_shared_css.html
index bb92d28..55f5ea9 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_shared_css.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_shared_css.html
@@ -22,7 +22,7 @@
}
.property-box.indented {
- -webkit-margin-start: var(--cr-section-padding);
+ margin-inline-start: var(--cr-section-padding);
}
.property-box.single-column {
@@ -45,9 +45,9 @@
}
.property-box > .middle {
- -webkit-padding-start: 16px;
align-items: center;
flex: auto;
+ padding-inline-start: 16px;
}
.secondary {
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html b/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html
index 38cfcfa6..9b80166 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html
@@ -22,7 +22,7 @@
}
iron-icon {
- -webkit-margin-end: 10px;
+ margin-inline-end: 10px;
}
.dialog-error {
@@ -38,15 +38,15 @@
}
.separator {
- -webkit-border-start: var(--cr-separator-line);
- -webkit-margin-end: var(--cr-section-padding);
- -webkit-margin-start: var(--cr-section-padding);
+ border-inline-start: var(--cr-separator-line);
flex-shrink: 0;
height: calc(var(--cr-section-min-height) - 9px);
+ margin-inline-end: var(--cr-section-padding);
+ margin-inline-start: var(--cr-section-padding);
}
cr-toggle {
- -webkit-margin-start: var(--cr-button-edge-spacing);
+ margin-inline-start: var(--cr-button-edge-spacing);
}
</style>
diff --git a/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html b/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html
index 9a5c63c..fbe37a20 100644
--- a/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html
+++ b/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html
@@ -128,8 +128,8 @@
}
#switchMode {
- -webkit-margin-end: 8px;
background-image: url(videocam_icon.svg);
+ margin-inline-end: 8px;
}
:host([videomode]) #switchMode {
diff --git a/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html b/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html
index 607ac714..f0549d0b 100644
--- a/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html
+++ b/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html
@@ -58,9 +58,9 @@
#discard button {
--iron-icon-fill-color: white;
- -webkit-margin-end: 0;
- -webkit-margin-start: 0;
border-radius: 50%;
+ margin-inline-end: 0;
+ margin-inline-start: 0;
}
</style>
<div id="preview" hidden="[[!showImagePreview_(cameraActive_, imageSrc)]]">
diff --git a/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.html b/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.html
index 9a38d0d..4a9bbe3 100644
--- a/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.html
+++ b/ui/webui/resources/cr_elements/chromeos/network/cr_network_list_item.html
@@ -20,7 +20,7 @@
}
#divOuter {
- -webkit-padding-end: var(--cr-icon-ripple-padding);
+ padding-inline-end: var(--cr-icon-ripple-padding);
}
#divDetail {
@@ -30,11 +30,11 @@
}
#divText {
- -webkit-margin-start: 20px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: center;
+ margin-inline-start: 20px;
}
#networkStateText {
diff --git a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
index aa3a1460..c3a75d69 100644
--- a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
+++ b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
@@ -111,8 +111,8 @@
}
#label-container {
- -webkit-padding-start: 20px;
color: var(--cr-checkbox-label-color, var(--google-grey-900));
+ padding-inline-start: 20px;
white-space: normal;
@apply --cr-checkbox-label-container;
diff --git a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
index c1abc9d..65fadd0d 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
@@ -58,10 +58,10 @@
* See https://crbug.com/846254 and associated CL for more information.
*/
:host ::slotted([slot=body]) {
- -webkit-padding-end: 20px;
- -webkit-padding-start: 20px;
color: var(--cr-secondary-text-color);
padding-bottom: 0;
+ padding-inline-end: 20px;
+ padding-inline-start: 20px;
padding-top: 0;
@apply --cr-dialog-body;
}
@@ -75,13 +75,13 @@
* See https://crbug.com/846254 and associated CL for more information.
*/
:host ::slotted([slot=title]) {
- -webkit-padding-end: 20px;
- -webkit-padding-start: 20px;
color: var(--cr-primary-text-color);
flex: 1;
font-size: calc(15 / 13 * 100%);
line-height: 1;
padding-bottom: 16px;
+ padding-inline-end: 20px;
+ padding-inline-start: 20px;
padding-top: 20px;
@apply --cr-dialog-title;
}
@@ -95,11 +95,11 @@
* See https://crbug.com/846254 and associated CL for more information.
*/
:host ::slotted([slot=button-container]) {
- -webkit-padding-end: 16px;
- -webkit-padding-start: 16px;
display: flex;
justify-content: flex-end;
padding-bottom: 16px;
+ padding-inline-end: 16px;
+ padding-inline-start: 16px;
padding-top: 24px;
@apply --cr-dialog-button-container;
}
@@ -153,8 +153,8 @@
display: flex;
};
- -webkit-margin-end: 4px;
align-self: flex-start;
+ margin-inline-end: 4px;
margin-top: 4px;
@apply --cr-dialog-close-image;
diff --git a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
index ca5c048..b143e8cd 100644
--- a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
+++ b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
@@ -57,13 +57,13 @@
}
.drawer-header {
- -webkit-padding-start: 24px;
align-items: center;
border-bottom: var(--cr-separator-line);
display: flex;
font-size: 123.08%; /* go to 16px from 13px */
min-height: 56px;
outline: none;
+ padding-inline-start: 24px;
}
:host ::slotted(.drawer-content) {
diff --git a/ui/webui/resources/cr_elements/cr_input/cr_input.html b/ui/webui/resources/cr_elements/cr_input/cr_input.html
index 213a69c..6002d1f 100644
--- a/ui/webui/resources/cr_elements/cr_input/cr_input.html
+++ b/ui/webui/resources/cr_elements/cr_input/cr_input.html
@@ -36,7 +36,7 @@
/* Margin between <input> and <paper-button> in the 'suffix' slot */
:host ::slotted(paper-button[slot=suffix]) {
- -webkit-margin-start: var(--cr-button-edge-spacing);
+ margin-inline-start: var(--cr-button-edge-spacing);
}
:host([invalid]) #label {
diff --git a/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html b/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
index eec3620..a8b26e1 100644
--- a/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
+++ b/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
@@ -47,9 +47,6 @@
font-size: inherit;
line-height: inherit;
outline: none;
- text-align: inherit;
- text-overflow: ellipsis;
- width: 100%;
/**
* When using mixins, avoid using padding shorthand. Using both the
@@ -59,11 +56,15 @@
*
* See https://crbug.com/846254 and associated CL for more information.
*/
- -webkit-padding-end: var(--cr-input-padding-end, 8px);
- -webkit-padding-start: var(--cr-input-padding-start, 8px);
padding-bottom: var(--cr-input-padding-bottom, 6px);
+ padding-inline-end: var(--cr-input-padding-end, 8px);
+ padding-inline-start: var(--cr-input-padding-start, 8px);
padding-top: var(--cr-input-padding-top, 6px);
+ text-align: inherit;
+ text-overflow: ellipsis;
+ width: 100%;
+
@apply --cr-input-input;
}
diff --git a/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html b/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html
index 1ecfead..8ae3c5d 100644
--- a/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html
+++ b/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html
@@ -43,9 +43,9 @@
}
#startIcon {
- -webkit-padding-end: var(--cr-icon-button-margin-start);
display: flex;
flex-shrink: 0;
+ padding-inline-end: var(--cr-icon-button-margin-start);
width: var(--cr-link-row-icon-width, var(--cr-icon-size));
}
diff --git a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
index 6b3d5379..c75f207 100644
--- a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
+++ b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
@@ -32,8 +32,8 @@
}
#labelWrapper {
- -webkit-margin-start: var(--cr-radio-button-label-spacing, 20px);
flex: 1;
+ margin-inline-start: var(--cr-radio-button-label-spacing, 20px);
@apply --cr-radio-button-label;
}
diff --git a/ui/webui/resources/cr_elements/cr_toast/cr_toast.html b/ui/webui/resources/cr_elements/cr_toast/cr_toast.html
index 5bcab2f..d09b9a57 100644
--- a/ui/webui/resources/cr_elements/cr_toast/cr_toast.html
+++ b/ui/webui/resources/cr_elements/cr_toast/cr_toast.html
@@ -34,10 +34,10 @@
}
:host ::slotted(paper-button) {
- -webkit-margin-start: 32px;
background-color: transparent;
border: none;
color: var(--google-blue-300);
+ margin-inline-start: 32px;
min-width: 52px;
padding: 8px;
}
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
index 0d1601a..ec50ca4 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -19,26 +19,26 @@
}
h1 {
- -webkit-margin-start: 6px;
- -webkit-padding-end: 12px;
flex: 1;
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
line-height: normal;
+ margin-inline-start: 6px;
+ padding-inline-end: 12px;
}
#leftContent {
/* margin-start here must match margin-end on #rightContent. */
- -webkit-margin-start: 12px;
+ margin-inline-start: 12px;
position: relative;
transition: opacity 100ms;
}
#leftSpacer {
- -webkit-margin-start: 6px;
align-items: center;
display: flex;
+ margin-inline-start: 6px;
}
#menuButtonContainer {
@@ -55,7 +55,7 @@
}
#rightContent {
- -webkit-margin-end: 12px;
+ margin-inline-end: 12px;
}
:host([narrow]) #centeredContent {
@@ -82,8 +82,6 @@
}
#menuPromo {
- -webkit-padding-end: 12px;
- -webkit-padding-start: 8px;
align-items: center;
background: #616161;
border-radius: 2px;
@@ -93,6 +91,8 @@
font-weight: 500;
opacity: 0;
padding-bottom: 6px;
+ padding-inline-end: 12px;
+ padding-inline-start: 8px;
padding-top: 6px;
position: absolute;
top: var(--cr-toolbar-height);
@@ -120,12 +120,12 @@
#closePromo {
-webkit-appearance: none;
- -webkit-margin-start: 12px;
background: none;
border: none;
color: inherit;
font-size: 20px; /* Shouldn't change if default font-size changes. */
line-height: 20px;
+ margin-inline-start: 12px;
padding: 0;
width: 20px;
}
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
index c346b14..8b149e0 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
@@ -60,9 +60,9 @@
/* Input field. */
#searchTerm {
-webkit-font-smoothing: antialiased;
- -webkit-margin-start: 2px;
flex: 1;
line-height: 185%;
+ margin-inline-start: 2px;
position: relative;
}
@@ -101,10 +101,10 @@
/** Wide layout. */
:host(:not([narrow])) {
- -webkit-padding-end: 0;
background: rgba(0, 0, 0, 0.22);
border-radius: 2px;
cursor: text;
+ padding-inline-end: 0;
width: var(--cr-toolbar-field-width, 680px);
}
@@ -128,7 +128,7 @@
:host([narrow][showing-search]) #icon,
:host([narrow][showing-search]) paper-spinner-lite {
- -webkit-margin-start: 18px; /* Line up with Menu icon. */
+ margin-inline-start: 18px; /* Line up with Menu icon. */
}
</style>
<template is="dom-if" id="spinnerTemplate">
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html
index cc54229b..a658e9c3 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html
@@ -9,7 +9,6 @@
<template>
<style include="cr-icons paper-button-style">
:host {
- -webkit-padding-start: var(--cr-toolbar-field-margin, 0);
background: white;
border-bottom: 1px solid var(--google-grey-300);
bottom: 0;
@@ -17,6 +16,7 @@
display: flex;
left: 0;
opacity: 0;
+ padding-inline-start: var(--cr-toolbar-field-margin, 0);
pointer-events: none;
position: absolute;
right: 0;
@@ -42,7 +42,7 @@
}
paper-button {
- -webkit-margin-start: 8px;
+ margin-inline-start: 8px;
}
#number-selected {
@@ -50,9 +50,9 @@
}
paper-icon-button-light {
- -webkit-margin-end: 24px;
- -webkit-margin-start: 2px;
height: 36px;
+ margin-inline-end: 24px;
+ margin-inline-start: 2px;
width: 36px;
}
diff --git a/ui/webui/resources/cr_elements/paper_button_style_css.html b/ui/webui/resources/cr_elements/paper_button_style_css.html
index 8d6a558..beec808 100644
--- a/ui/webui/resources/cr_elements/paper_button_style_css.html
+++ b/ui/webui/resources/cr_elements/paper_button_style_css.html
@@ -91,7 +91,7 @@
/* cancel-button is meant to be used within a cr-dialog */
paper-button.cancel-button {
- -webkit-margin-end: 8px;
+ margin-inline-end: 8px;
}
paper-button.action-button,
diff --git a/ui/webui/resources/cr_elements/shared_vars_css.html b/ui/webui/resources/cr_elements/shared_vars_css.html
index 13686d7..e870a4648 100644
--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -45,8 +45,8 @@
--cr-paper-icon-button-margin: {
/* Shift button so ripple overlaps the end of the row. */
- -webkit-margin-end: var(--cr-icon-ripple-margin);
- -webkit-margin-start: var(--cr-icon-button-margin-start);
+ margin-inline-end: var(--cr-icon-ripple-margin);
+ margin-inline-start: var(--cr-icon-button-margin-start);
}
--cr-primary-text: {
diff --git a/ui/webui/resources/css/apps/topbutton_bar.css b/ui/webui/resources/css/apps/topbutton_bar.css
index 5e4a746..2979c0d 100644
--- a/ui/webui/resources/css/apps/topbutton_bar.css
+++ b/ui/webui/resources/css/apps/topbutton_bar.css
@@ -10,7 +10,6 @@
.topbutton-bar button {
-webkit-app-region: no-drag;
-webkit-box-shadow: none;
- -webkit-margin-end: 10px;
background-color: transparent;
background-image: none;
background-position: center;
@@ -18,6 +17,7 @@
border: 0;
display: block;
height: 32px;
+ margin-inline-end: 10px;
min-width: 0;
outline: none;
padding: 0;
diff --git a/ui/webui/resources/css/bubble.css b/ui/webui/resources/css/bubble.css
index 5e5a590..cf76818 100644
--- a/ui/webui/resources/css/bubble.css
+++ b/ui/webui/resources/css/bubble.css
@@ -22,7 +22,7 @@
/* When the close button is there, we need more padding on the right of the
* bubble. */
.bubble-close:not([hidden]) ~ .bubble-content {
- -webkit-padding-end: 22px;
+ padding-inline-end: 22px;
}
.bubble-close {
diff --git a/ui/webui/resources/css/bubble_button.css b/ui/webui/resources/css/bubble_button.css
index 5ab9ce7a..d92c4a5 100644
--- a/ui/webui/resources/css/bubble_button.css
+++ b/ui/webui/resources/css/bubble_button.css
@@ -3,10 +3,10 @@
* found in the LICENSE file. */
.bubble-button {
- -webkit-margin-start: 4px;
display: inline-block;
height: 0;
line-height: 1;
+ margin-inline-start: 4px;
vertical-align: middle;
width: 16px;
}
diff --git a/ui/webui/resources/css/chrome_shared.css b/ui/webui/resources/css/chrome_shared.css
index 95ef34d5..2dc7709 100644
--- a/ui/webui/resources/css/chrome_shared.css
+++ b/ui/webui/resources/css/chrome_shared.css
@@ -81,8 +81,8 @@
}
html[dir='rtl'] .favicon-cell.weakrtl {
- -webkit-padding-end: 22px;
- -webkit-padding-start: 0;
+ padding-inline-end: 22px;
+ padding-inline-start: 0;
}
/* weakrtl for selection drop downs needs to account for the fact that
diff --git a/ui/webui/resources/css/controlled_indicator.css b/ui/webui/resources/css/controlled_indicator.css
index deaee16..340ac931 100644
--- a/ui/webui/resources/css/controlled_indicator.css
+++ b/ui/webui/resources/css/controlled_indicator.css
@@ -9,7 +9,7 @@
}
.controlled-setting-indicator {
- -webkit-margin-end: 0.3em;
+ margin-inline-end: 0.3em;
}
.controlled-setting-indicator:not([controlled-by]) {
@@ -63,12 +63,12 @@
}
.controlled-setting-bubble-extension-name {
- -webkit-padding-start: 30px;
background-repeat: no-repeat;
font-weight: bold;
height: 24px;
margin-top: -9px;
overflow: hidden;
+ padding-inline-start: 30px;
padding-top: 3px;
position: absolute;
text-overflow: ellipsis;
diff --git a/ui/webui/resources/css/dialogs.css b/ui/webui/resources/css/dialogs.css
index 3d9a9099..0f2805bb 100644
--- a/ui/webui/resources/css/dialogs.css
+++ b/ui/webui/resources/css/dialogs.css
@@ -95,11 +95,11 @@
}
.cr-dialog-title {
- -webkit-margin-end: 20px;
display: block;
font-size: 120%;
font-weight: bold;
margin-bottom: 10px;
+ margin-inline-end: 20px;
white-space: nowrap;
word-wrap: normal;
}
diff --git a/ui/webui/resources/css/menu.css b/ui/webui/resources/css/menu.css
index 986fd86..aabf5036 100644
--- a/ui/webui/resources/css/menu.css
+++ b/ui/webui/resources/css/menu.css
@@ -72,7 +72,7 @@
}
cr-menu > [checked] {
- -webkit-padding-start: 0;
+ padding-inline-start: 0;
}
cr-menu > [selected][checked]:active::before {
@@ -83,8 +83,8 @@
* but it's buggy in current webkit revision, so I have to use [showShortcuts].
*/
cr-menu[showShortcuts] > ::after {
- -webkit-padding-start: 30px;
color: #999;
content: attr(shortcutText);
float: right;
+ padding-inline-start: 30px;
}
diff --git a/ui/webui/resources/css/overlay.css b/ui/webui/resources/css/overlay.css
index 0187f76..8d991f9 100644
--- a/ui/webui/resources/css/overlay.css
+++ b/ui/webui/resources/css/overlay.css
@@ -98,7 +98,6 @@
}
.overlay .page h1 {
- -webkit-padding-end: 24px;
color: #333;
/* 120% of the body's font-size of 84% is 16px. This will keep the relative
* size between the body and these titles consistent. */
@@ -144,8 +143,8 @@
.overlay .page .button-strip > :-webkit-any(button,
input[type='button'],
input[type='submit']) {
- -webkit-margin-start: 10px;
display: block;
+ margin-inline-start: 10px;
}
.overlay .page .button-strip > .default-button:not(:focus) {
diff --git a/ui/webui/resources/css/table.css b/ui/webui/resources/css/table.css
index 11394ff..88adf2fb 100644
--- a/ui/webui/resources/css/table.css
+++ b/ui/webui/resources/css/table.css
@@ -89,27 +89,27 @@
}
.table-header-sort-image-desc::after {
- -webkit-padding-start: 5px;
color: #888;
content: '\25be'; /* BLACK DOWN-POINTING SMALL TRIANGLE */
+ padding-inline-start: 5px;
position: relative;
top: -2px;
}
.table-header-sort-image-asc::after {
- -webkit-padding-start: 5px;
color: #888;
content: '\25b4'; /* BLACK UP-POINTING SMALL TRIANGLE */
+ padding-inline-start: 5px;
position: relative;
top: -2px;
}
.table-header-splitter {
- -webkit-margin-start: -1px;
background-color: black;
cursor: col-resize;
height: 100%;
left: 0;
+ margin-inline-start: -1px;
position: absolute;
top: 0;
width: 5px;
diff --git a/ui/webui/resources/css/tabs.css b/ui/webui/resources/css/tabs.css
index 018c6f1..63bb858 100644
--- a/ui/webui/resources/css/tabs.css
+++ b/ui/webui/resources/css/tabs.css
@@ -8,11 +8,11 @@
}
tabs {
- -webkit-padding-start: 8px;
background: -webkit-linear-gradient(white, rgb(243, 243, 243));
border-bottom: 1px solid rgb(160, 160, 160);
display: -webkit-box;
margin: 0;
+ padding-inline-start: 8px;
}
/* New users of tabs.css should add 'new-style-tabs' to the class list of any
@@ -21,14 +21,13 @@
* TODO(rfevang): Remove when all users are converted to the new style.
* (crbug.com/247772). */
tabs.new-style-tabs {
- -webkit-padding-start: 9px;
background: #fbfbfb;
border-bottom: 1px solid #c8c8c8;
+ padding-inline-start: 9px;
padding-top: 14px;
}
tabs > * {
- -webkit-margin-start: 5px;
background: rgba(160, 160, 160, .3);
border: 1px solid rgba(160, 160, 160, .3);
border-bottom: 0;
@@ -36,6 +35,7 @@
border-top-right-radius: 3px;
cursor: default;
display: block;
+ margin-inline-start: 5px;
min-width: 4em;
padding: 2px 10px;
text-align: center;
@@ -43,11 +43,11 @@
}
tabs.new-style-tabs > * {
- -webkit-margin-start: 0;
background: #fbfbfb;
border: 1px solid #fbfbfb;
border-bottom: 0;
border-radius: 0;
+ margin-inline-start: 0;
min-width: 0;
padding: 4px 9px 4px 10px;
transition: none;
diff --git a/ui/webui/resources/css/tree.css b/ui/webui/resources/css/tree.css
index d4c11e10..4165b21 100644
--- a/ui/webui/resources/css/tree.css
+++ b/ui/webui/resources/css/tree.css
@@ -96,9 +96,9 @@
}
.tree-label {
- -webkit-padding-start: 20px;
background-position: 0 50%;
background-repeat: no-repeat;
+ padding-inline-start: 20px;
white-space: pre;
}
@@ -135,8 +135,8 @@
</if>
tree[icon-visibility=hidden] .tree-label {
- -webkit-padding-start: 0;
background-image: none !important;
+ padding-inline-start: 0;
}
tree[icon-visibility=parent] .tree-label,
diff --git a/ui/webui/resources/css/widgets.css b/ui/webui/resources/css/widgets.css
index 4193047..2ba6a1a 100644
--- a/ui/webui/resources/css/widgets.css
+++ b/ui/webui/resources/css/widgets.css
@@ -49,19 +49,19 @@
:-webkit-any(button,
input[type='button'],
input[type='submit']):not(.custom-appearance) {
- -webkit-padding-end: 10px;
- -webkit-padding-start: 10px;
+ padding-inline-end: 10px;
+ padding-inline-start: 10px;
}
select {
-webkit-appearance: none;
- -webkit-padding-end: 24px;
- -webkit-padding-start: 10px;
/* OVERRIDE */
background-image: url(../images/select.png),
-webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
background-position: right center;
background-repeat: no-repeat;
+ padding-inline-end: 24px;
+ padding-inline-start: 10px;
}
html[dir='rtl'] select {
@@ -269,9 +269,9 @@
}
:-webkit-any(.checkbox, .radio) label input ~ span {
- -webkit-margin-start: 0.6em;
/* Make sure long spans wrap at the same horizontal position they start. */
display: block;
+ margin-inline-start: 0.6em;
}
:-webkit-any(.checkbox, .radio) label:hover {
diff --git a/ui/webui/resources/html/md_select_css.html b/ui/webui/resources/html/md_select_css.html
index 3a5cb6d..7dd6744 100644
--- a/ui/webui/resources/html/md_select_css.html
+++ b/ui/webui/resources/html/md_select_css.html
@@ -14,10 +14,6 @@
--md-arrow-width: 0.9em;
-webkit-appearance: none;
- /* Ensures 3px space between text and arrow */
- -webkit-padding-end: calc(var(--md-select-side-padding) +
- var(--md-arrow-width) + 3px);
- -webkit-padding-start: var(--md-select-side-padding);
background: url(chrome://resources/images/arrow_down.svg)
calc(100% - var(--md-select-side-padding))
center no-repeat;
@@ -33,6 +29,10 @@
max-width: 100%;
outline: none;
padding-bottom: 6px;
+ /* Ensures 3px space between text and arrow */
+ padding-inline-end: calc(var(--md-select-side-padding) +
+ var(--md-arrow-width) + 3px);
+ padding-inline-start: var(--md-select-side-padding);
padding-top: 6px;
width: var(--md-select-width, 200px);
}
diff --git a/ui/webui/resources/js/cr/ui/page_manager/page_manager.js b/ui/webui/resources/js/cr/ui/page_manager/page_manager.js
index 5333b9c..00d92c3 100644
--- a/ui/webui/resources/js/cr/ui/page_manager/page_manager.js
+++ b/ui/webui/resources/js/cr/ui/page_manager/page_manager.js
@@ -21,7 +21,7 @@
/**
* Offset of page container in pixels. Uber pages that use the side menu
* can override this with the setter.
- * The default (23) comes from -webkit-margin-start in uber_shared.css.
+ * The default (23) comes from margin-inline-start in uber_shared.css.
* @type {number}
*/
horizontalOffset_: 23,
diff --git a/ui/webui/resources/js/cr/ui/table/table_header.js b/ui/webui/resources/js/cr/ui/table/table_header.js
index 602245d..324c01c1 100644
--- a/ui/webui/resources/js/cr/ui/table/table_header.js
+++ b/ui/webui/resources/js/cr/ui/table/table_header.js
@@ -144,7 +144,7 @@
if (splitters[i].hidden)
continue;
place += cm.getWidth(i);
- splitters[i].style.webkitMarginStart = place + 'px';
+ splitters[i].style.marginInlineStart = place + 'px';
}
},
diff --git a/ui/webui/resources/js/cr/ui/tree.js b/ui/webui/resources/js/cr/ui/tree.js
index bd2e2b7..3dc541d 100644
--- a/ui/webui/resources/js/cr/ui/tree.js
+++ b/ui/webui/resources/js/cr/ui/tree.js
@@ -311,7 +311,7 @@
*/
setDepth_: function(depth) {
if (depth != this.depth_) {
- this.rowElement.style.WebkitPaddingStart =
+ this.rowElement.style.paddingInlineStart =
Math.max(0, depth - 1) * INDENT + 'px';
this.depth_ = depth;
var items = this.items;
