Bug 1279230 - Convert Pocket CSS to logical properties to prepare for RTL support r=thecount,Gijs

Differential Revision: https://phabricator.services.mozilla.com/D50754

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Itiel 2019-11-08 00:35:59 +00:00
Родитель da06587b5f
Коммит d6131764c5
3 изменённых файлов: 88 добавлений и 83 удалений

Просмотреть файл

@ -55,8 +55,9 @@
position: relative;
display: inline-block;
height: 2.5em;
left: 50%;
margin: 2em 0 0 -1.25em;
inset-inline-start: 50%;
margin-block: 2em 0;
margin-inline: -1.25em 0;
font-size: 10px;
text-indent: 999em;
position: absolute;
@ -72,7 +73,7 @@
content: '';
position: absolute;
top: 0;
left: 1.125em;
inset-inline-start: 1.125em;
width: 0.25em;
height: 0.75em;
border-radius: .2em;
@ -99,7 +100,7 @@
/*=Core detail
--------------------------------------------------------------------------------------- */
.pkt_ext_containersaved .pkt_ext_initload {
left: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
@ -147,7 +148,7 @@
margin: 19px 0 4px;
padding: 0;
position: relative;
text-align: left;
text-align: start;
text-transform: none;
}
@keyframes fade_in_out {
@ -172,12 +173,12 @@
display: none;
font-size: 12px;
font-weight: normal;
left: 6.4em;
inset-inline-start: 6.4em;
max-width: 21em;
opacity: 0;
position: absolute;
top: 2.7em;
text-align: left;
text-align: start;
visibility: hidden;
}
.pkt_ext_container_finalerrorstate .pkt_ext_errordetail {
@ -188,7 +189,7 @@
.pkt_ext_containersaved .pkt_ext_logo {
background: url(../img/pocketlogosolo@1x.png) center center no-repeat;
display: block;
float: left;
float: inline-start;
height: 40px;
padding: 1.25em 1em;
position: relative;
@ -212,16 +213,16 @@
}
}
.pkt_ext_containersaved .pkt_ext_topdetail {
float: left;
float: inline-start;
}
.pkt_ext_containersaved .pkt_ext_edit_msg {
box-sizing: border-box;
display: none;
font-size: 0.75em;
left: auto;
inset-inline-start: auto;
padding: 0 1.4em;
position: absolute;
text-align: left;
text-align: inline-start;
top: 8.7em;
width: 100%;
}
@ -259,18 +260,18 @@
box-sizing: border-box;
background: none;
border: 0;
float: left;
float: inline-start;
list-style: none;
line-height: 0.8;
height: auto;
padding-right: 0.4em;
padding-inline-end: 0.4em;
width: auto;
}
.pkt_ext_containersaved .pkt_ext_item_actions li:before {
content: none;
}
.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_actions_separator {
border-left: 2px solid #777;
border-inline-start: 2px solid #777;
height: 0.75em;
margin-top: 0.3em;
padding: 0;
@ -288,8 +289,8 @@
height: auto;
margin: 0;
padding: 0.5em;
float: left;
text-align: left;
float: inline-start;
text-align: start;
text-decoration: none;
text-transform: none;
}
@ -306,12 +307,12 @@
cursor: default;
}
.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_openpocket {
float: right;
padding-right: 0.7em;
text-align: right;
float: inline-end;
padding-inline-end: 0.7em;
text-align: end;
}
.pkt_ext_containersaved .pkt_ext_item_actions .pkt_ext_removeitem {
padding-left: 0;
padding-inline-start: 0;
}
.pkt_ext_containersaved .pkt_ext_close {
background: url(../img/tag_close@1x.png) center center no-repeat;
@ -319,7 +320,7 @@
display: block;
font-size: 0.8em;
height: 10px;
right: 0.5em;
inset-inline-end: 0.5em;
overflow: hidden;
position: absolute;
text-align: center;
@ -356,7 +357,7 @@
box-sizing: border-box;
flex: 1;
background-color: #fff;
border-right: 1px solid #c3c3c3;
border-inline-end: 1px solid #c3c3c3;
color: #333;
display: block;
float: none;
@ -366,15 +367,14 @@
overflow: hidden;
padding: 0.25em 0.5em;
width: 14em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-inline: 0.5em;
}
.pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_tag_input_wrapper {
border: 1px solid #d74345;
}
.pkt_ext_containersaved .pkt_ext_tag_input_wrapper .token-input-list {
display: block;
left: 0;
inset-inline-start: 0;
height: 1.7em;
overflow: hidden;
position: relative;
@ -397,7 +397,7 @@
background-color: #fff;
color: #333;
font-size: 14px;
float: left;
float: inline-start;
line-height: normal;
height: auto;
min-height: 0;
@ -443,7 +443,8 @@
}
.pkt_ext_containersaved .pkt_ext_tag_error .pkt_ext_btn {
border: 1px solid #c3c3c3;
border-width: 1px 1px 1px 0;
border-block-width: 1px;
border-inline-width: 0 1px;
height: 2.35em;
}
.pkt_ext_containersaved .autocomplete-suggestions {
@ -459,7 +460,7 @@
box-sizing: border-box;
background: #ebebeb;
clear: both;
left: 0;
inset-inline-start: 0;
opacity: 0;
min-height: 110px;
position: fixed;
@ -487,7 +488,7 @@
font-style: normal;
letter-spacing: normal;
margin: 0.5em 0;
text-align: left;
text-align: start;
text-transform: none;
}
.pkt_ext_containersaved .pkt_ext_recenttag_detail .pkt_ext_loadingspinner,
@ -499,7 +500,7 @@
.pkt_ext_containersaved .pkt_ext_suggestedtag_detail_loading .pkt_ext_loadingspinner {
display: block;
font-size: 6px;
left: 48%;
inset-inline-start: 48%;
}
.pkt_ext_containersaved .pkt_ext_recenttag_detail ul,
.pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul {
@ -507,7 +508,7 @@
margin: 0;
height: 2em;
overflow: hidden;
padding: 2px 0 0 0;
padding: 2px 0 0;
}
.pkt_ext_containersaved .pkt_ext_suggestedtag_detail ul {
height: auto;
@ -518,7 +519,7 @@
.pkt_ext_containersaved .pkt_ext_recenttag_detail li,
.pkt_ext_containersaved .pkt_ext_suggestedtag_detail li {
background: none;
float: left;
float: inline-start;
height: inherit;
line-height: 1.5;
list-style: none;
@ -534,13 +535,13 @@
color: #333;
font-size: 0.8125em;
line-height: 1.2;
left: auto;
inset-inline-start: auto;
position: absolute;
text-align: left;
text-align: start;
top: 2em;
}
.pkt_ext_containersaved .pkt_ext_suggestedtag_detail .suggestedtag_msg {
margin-right: 1.3em;
margin-inline-end: 1.3em;
}
.pkt_ext_containersaved .token_tag {
border-radius: 4px;
@ -551,7 +552,7 @@
font-size: 14px;
font-weight: normal;
letter-spacing: normal;
margin-right: 0.5em;
margin-inline-end: 0.5em;
padding: 0.125em 0.625em;
text-decoration: none;
text-transform: none;
@ -617,7 +618,7 @@
background: #fff;
border: 1px solid #cdcdcd;
margin-top: 0.5em;
left: 0 !important;
inset-inline-start: 0 !important;
overflow-y: auto;
top: 1.9em !important;
z-index: 9000;
@ -639,7 +640,7 @@
letter-spacing: normal;
list-style: none;
padding: 0.75em;
text-align: left;
text-align: start;
text-transform: none;
width: inherit;
}
@ -656,7 +657,7 @@
padding: 0;
}
.token-input-list li {
text-align: left;
text-align: start;
list-style: none;
}
.token-input-list li input {
@ -678,7 +679,7 @@
display: block;
width: auto;
margin: 0 0.2em;
float: left;
float: inline-start;
}
.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled {
position: relative;
@ -691,7 +692,7 @@
}
.pkt_ext_containersaved .pkt_ext_tag_input_wrapper_disabled .pkt_ext_tag_input_blocker {
height: 100%;
left: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
@ -718,7 +719,8 @@
cursor: pointer;
display: inline-block;
height: 8px;
margin: 0 0 0 8px;
margin-block: 0;
margin-inline: 8px 0;
overflow: hidden;
width: 8px;
text-indent: -99px;
@ -778,16 +780,14 @@
}
.pkt_ext_saved_overflow .pkt_ext_item_actions li {
float: none;
padding-left: 1em;
padding-right: 1em;
padding-inline: 1em;
text-align: center;
}
.pkt_ext_saved_overflow .pkt_ext_item_actions .pkt_ext_removeitem,
.pkt_ext_saved_overflow .pkt_ext_item_actions .pkt_ext_openpocket {
float: none;
text-align: center;
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
.pkt_ext_saved_overflow .pkt_ext_item_actions .pkt_ext_actions_separator {
display: none;
@ -804,9 +804,8 @@
}
.pkt_ext_container_finalerrorstate.pkt_ext_saved_overflow .pkt_ext_errordetail {
box-sizing: border-box;
left: 0;
padding-left: 1em;
padding-right: 1em;
inset-inline-start: 0;
padding-inline: 1em;
text-align: center;
top: 8.3em;
width: 100%;
@ -873,7 +872,7 @@ button {
height: 22px;
width: 22px;
top: -3px;
left: -28px;
inset-inline-start: -28px;
content: "";
background-image: url(../img/signup_firefoxlogo@2x.png);
background-size: 22px 22px;
@ -896,18 +895,12 @@ button {
.pkt_ext_indent_bordered {
margin: 15px 0;
padding: 0 7px;
border-left: 4px solid rgba(68, 68, 68, .15);
text-align: left;
border-inline-start: 4px solid rgba(68, 68, 68, .15);
text-align: start;
font-size: 13px;
color: #313131;
}
[dir='rtl'] .pkt_ext_indent_bordered {
border-left: none;
border-right: 4px solid rgba(68, 68, 68, .15);
text-align: right;
}
.pkt_ext_indent_bordered > p {
margin-bottom: 3px;
}

Просмотреть файл

@ -12,7 +12,7 @@
height: 15px;
width: 10px;
top: 0;
left: -16px;
inset-inline-start: -16px;
content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 10 15" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="white" fill-rule="evenodd"><path d="M0.81,0.407552083 L9.19,0.407552083 C9.63735065,0.407552083 10,0.770201436 10,1.21755208 L10,14.0233333 C10,14.470684 9.63735065,14.8333333 9.19,14.8333333 L0.81,14.8333333 C0.362649353,14.8333333 6.09896166e-16,14.470684 5.55111512e-16,14.0233333 L2.22044605e-16,1.21755208 C1.67259951e-16,0.770201436 0.362649353,0.407552083 0.81,0.407552083 Z M1,1.31865406 L1,12.074719 L9,12.074719 L9,1.31865406 L1,1.31865406 Z M3.68055556,13.1666667 C3.48879002,13.1666667 3.33333333,13.3221234 3.33333333,13.5138889 C3.33333333,13.7056544 3.48879002,13.8611111 3.68055556,13.8611111 L6.31944444,13.8611111 C6.51120998,13.8611111 6.66666667,13.7056544 6.66666667,13.5138889 C6.66666667,13.3221234 6.51120998,13.1666667 6.31944444,13.1666667 L3.68055556,13.1666667 Z"></path></g></svg>');
}
@ -40,7 +40,7 @@
}
.pkt_ext_saved_sendcollectemail .pkt_ext_tag_detail {
margin: 0px auto;
margin: 0 auto;
}
.pkt_ext_saved_sendcollectemail .pkt_ext_tag_detail,
@ -49,8 +49,8 @@
}
.pkt_ext_checkbox_wrapper {
text-align: left;
margin: 0px auto 15px;
text-align: start;
margin: 0 auto 15px;
width: 255px;
}
@ -84,6 +84,10 @@
background: url(../img/app_store_dowload_apple.svg) bottom right no-repeat;
}
.pkt_ext_apple_download:dir(rtl) {
background-position-x: left;
}
.pkt_ext_google_download {
display: inline-block;
height: 60px;
@ -96,7 +100,7 @@
margin: 0 auto 17px;
height: 95px;
background-color: #FFF;
box-shadow: 0px 1px 1px rgba(147,147,147,0.5);
box-shadow: 0 1px 1px rgba(147,147,147,0.5);
}
.pkt_ext_experiment_saved_tile .pkt_ext_save_title {
@ -109,12 +113,12 @@
}
.pkt_ext_experiment_saved_tile.pkt_ext_has_image .pkt_ext_save_title {
margin-left: 78px;
margin-inline-start: 78px;
width: 210px;
}
.pkt_ext_experiment_saved_tile .pkt_ext_save_image {
left: 0;
inset-inline-start: 0;
}
.pkt_ext_experiment_saved_tile {
@ -124,7 +128,7 @@
.pkt_ext_save_image {
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
box-sizing: border-box;
height: 100%;
width: 78px;
@ -140,7 +144,7 @@
font-size: 14px;
font-weight: 400;
line-height: 16px;
text-align: left;
text-align: start;
overflow: hidden;
color: #222;
}
@ -165,12 +169,12 @@ a.pkt_ext_save_open:hover {
.pkt_ext_save_source {
margin-top: 7px;
padding-left: 0;
padding-inline-start: 0;
color: #999;
font-size: 12px;
font-weight: 400;
line-height: 1.1em;
letter-spacing:0.03em;
letter-spacing: 0.03em;
}
.pkt_ext_ho2_experiment .pkt_ext_suggestedtag_detail,

Просмотреть файл

@ -124,7 +124,7 @@
display: block;
height: 18px;
margin-top: -9px;
right: -15px;
inset-inline-end: -15px;
position: absolute;
text-indent: -9999px;
width: 18px;
@ -167,13 +167,15 @@
}
.pkt_ext_introstory p {
margin-bottom: 0;
text-align: left;
text-align: start;
}
.pkt_ext_introstoryone {
padding: 20px 18px 15px 20px;
padding-block: 20px 15px;
padding-inline: 20px 18px;
}
.pkt_ext_introstorytwo {
padding: 3px 0 0 20px;
padding-block: 3px 0;
padding-inline: 20px 0;
}
.pkt_ext_introstorytwo .pkt_ext_tagline {
margin-bottom: 1.5em;
@ -191,9 +193,13 @@
.pkt_ext_introstoryone_img {
background: url(../img/pocketsignup_button@1x.png) center right no-repeat;
height: 82px;
padding: 0 0 0 0.7em;
padding-block: 0;
padding-inline: 0.7em 0;
width: 82px;
}
.pkt_ext_introstoryone_img:dir(rtl) {
background-position-x: left;
}
@media (min-resolution: 1.1dppx) {
.pkt_ext_introstoryone_img {
background-image: url(../img/pocketsignup_button@2x.png);
@ -203,9 +209,13 @@
.pkt_ext_introstorytwo_img {
background: url(../img/pocketsignup_devices@1x.png) bottom right no-repeat;
height: 110px;
padding: 1em 0 0 0.7em;
padding-block: 1em 0;
padding-inline: 0.7em 0;
width: 124px;
}
.pkt_ext_introstorytwo_img:dir(rtl) {
background-position-x: left;
}
@media (min-resolution: 1.1dppx) {
.pkt_ext_introstorytwo_img {
background-image: url(../img/pocketsignup_devices@2x.png);
@ -296,7 +306,7 @@
.pkt_ext_containersignup .signup-btn-firefox .logo {
background: url(../img/signup_firefoxlogo@1x.png) center center no-repeat;
height: 2.6em;
left: 10px;
inset-inline-start: 10px;
margin: 0;
padding: 0;
width: 22px;
@ -344,20 +354,18 @@
.pkt_ext_signup_overflow .signup-btn-email {
font-size: 14px;
min-width: 12.6em;
padding-left: 0.75em;
padding-right: 0.75em;
padding-inline: 0.75em;
}
.pkt_ext_signup_overflow .signup-btn-tryitnow .text,
.pkt_ext_signup_overflow .signup-btn-firefox .text {
padding-left: 0;
padding-right: 0;
padding-inline: 0;
}
/*=Language overrides
--------------------------------------------------------------------------------------- */
.pkt_ext_signup_de .pkt_ext_introstoryone_img {
margin-right: -5px;
padding-left: 0;
margin-inline-end: -5px;
padding-inline-start: 0;
}
.pkt_ext_signup_de .pkt_ext_introstorytwo .pkt_ext_tagline,
.pkt_ext_signup_es .pkt_ext_introstorytwo .pkt_ext_tagline,
@ -382,7 +390,7 @@
.pkt_ext_signup_ja .signup-btn-tryitnow .text,
.pkt_ext_signup_ru .signup-btn-firefox .text,
.pkt_ext_signup_ru .signup-btn-tryitnow .text {
left: 15px;
inset-inline-start: 15px;
}
.pkt_ext_signup_de .signup-btn-firefox .logo,
.pkt_ext_signup_es .pkt_ext_signupdetail_hero .signup-btn-firefox .logo,