diff options
Diffstat (limited to 'app/javascript/styles/mastodon/forms.scss')
-rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 82 |
1 files changed, 44 insertions, 38 deletions
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 0d5cdf382..129a836f3 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -54,12 +54,12 @@ code { .radio > label { position: relative; - padding-left: 28px; + padding-inline-start: 28px; input { position: absolute; top: -2px; - left: 0; + inset-inline-start: 0; } } } @@ -79,7 +79,7 @@ code { .label_input, .hint { - padding-left: 28px; + padding-inline-start: 28px; } .label_input__wrapper { @@ -89,7 +89,7 @@ code { label.checkbox { position: absolute; top: 2px; - left: 0; + inset-inline-start: 0; } label a { @@ -152,7 +152,7 @@ code { li { list-style: disc; - margin-left: 18px; + margin-inline-start: 18px; } } @@ -218,7 +218,7 @@ code { &.select .hint { margin-top: 6px; - margin-left: 150px; + margin-inline-start: 150px; } } @@ -292,7 +292,7 @@ code { max-width: 100%; height: auto; border-radius: 4px; - background: url("images/void.png"); + background: url('images/void.png'); &:last-child { margin-bottom: 0; @@ -373,13 +373,13 @@ code { width: auto; position: relative; padding-top: 5px; - padding-left: 25px; + padding-inline-start: 25px; flex: 1 1 auto; } - input[type="checkbox"] { + input[type='checkbox'] { position: absolute; - left: 0; + inset-inline-start: 0; top: 5px; margin: 0; } @@ -393,12 +393,12 @@ code { border-radius: 4px; } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="url"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='url'], + input[type='datetime-local'], textarea { box-sizing: border-box; font-size: 16px; @@ -436,11 +436,11 @@ code { } } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"] { + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'] { &:focus:invalid:not(:placeholder-shown), &:required:invalid:not(:placeholder-shown) { border-color: lighten($error-red, 12%); @@ -452,11 +452,11 @@ code { color: lighten($error-red, 12%); } - input[type="text"], - input[type="number"], - input[type="email"], - input[type="password"], - input[type="datetime-local"], + input[type='text'], + input[type='number'], + input[type='email'], + input[type='password'], + input[type='datetime-local'], textarea, select { border-color: lighten($error-red, 12%); @@ -510,10 +510,10 @@ code { font-weight: 500; outline: 0; margin-bottom: 10px; - margin-right: 10px; + margin-inline-end: 10px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } &:active, @@ -560,11 +560,13 @@ code { outline: 0; font-family: inherit; resize: vertical; - background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px; + background: darken($ui-base-color, 10%) + url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") + no-repeat right 8px center / auto 16px; border: 1px solid darken($ui-base-color, 14%); border-radius: 4px; - padding-left: 10px; - padding-right: 30px; + padding-inline-start: 10px; + padding-inline-end: 30px; height: 41px; } @@ -579,7 +581,7 @@ code { &__append { position: absolute; - right: 3px; + inset-inline-end: 3px; top: 1px; padding: 10px; padding-bottom: 9px; @@ -597,10 +599,14 @@ code { display: block; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 1px; width: 5px; - background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%)); + background-image: linear-gradient( + to right, + rgba(darken($ui-base-color, 10%), 0), + darken($ui-base-color, 10%) + ); } } } @@ -767,7 +773,7 @@ code { li { display: inline-block; - margin-right: 10px; + margin-inline-end: 10px; } a { @@ -926,7 +932,7 @@ code { .actions { padding: 30px 0; - padding-right: 20px; + padding-inline-end: 20px; flex: 0 0 auto; } } @@ -979,7 +985,7 @@ code { border-radius: 4px; display: flex; align-items: center; - padding-right: 4px; + padding-inline-end: 4px; position: relative; top: 1px; transition: border-color 300ms linear; @@ -988,7 +994,7 @@ code { flex: 1 1 auto; } - input[type="text"] { + input[type='text'] { background: transparent; border: 0; padding: 10px; |