diff --git a/src/css/common/_editor.scss b/src/css/common/_editor.scss index 7157e002..1b76697b 100644 --- a/src/css/common/_editor.scss +++ b/src/css/common/_editor.scss @@ -26,13 +26,13 @@ &::before { content: ''; - padding-bottom: 5px; + padding-block-end: 5px; } } /* Fix cursor color with rubyblue theme (see https://goo.gl/3HDgRm */ .cm-s-rubyblue .CodeMirror-cursor { - border-left: 1px solid white !important; + border-inline-start: 1px solid white !important; } [class*="CodeMirror-lint-marker"], [class*="CodeMirror-lint-message"], .CodeMirror-lint-marker-multiple { @@ -45,19 +45,19 @@ .CodeMirror-lint-marker-multiple { position: absolute; - top: 0; + inset-block-start: 0; } [class*="CodeMirror-lint-marker"]:before { font: normal 18px/1 dashicons; position: relative; - top: -2px; + inset-block-start: -2px; } [class*="CodeMirror-lint-message"]:before { font: normal 16px/1 dashicons; - left: 16px; position: absolute; + inset-inline-start: 16px; } .CodeMirror-lint-message-error, @@ -69,7 +69,7 @@ .CodeMirror-lint-message-warning { background-color: #fff8e5; - border-left: 4px solid #ffb900; + border-inline-start: 4px solid #ffb900; } .CodeMirror-lint-marker-warning::before, .CodeMirror-lint-message-warning::before { @@ -79,7 +79,7 @@ .CodeMirror-lint-message-error { background-color: #fbeaea; - border-left: 4px solid #dc3232; + border-inline-start: 4px solid #dc3232; } .CodeMirror-lint-marker-error::before, .CodeMirror-lint-message-error::before { @@ -105,7 +105,7 @@ .CodeMirror-foldmarker { color: inherit; - margin-left: 0.25em; - margin-right: 0.25em; + margin-inline-start: 0.25em; + margin-inline-end: 0.25em; font-weight: bold; } diff --git a/src/css/common/_type-badges.scss b/src/css/common/_type-badges.scss index 1dd5ee97..4ff16e31 100644 --- a/src/css/common/_type-badges.scss +++ b/src/css/common/_type-badges.scss @@ -11,7 +11,7 @@ .nav-tab .badge, .button .snippet-type-badge, .go-pro-button .badge, h1 .snippet-type-badge, h2 .snippet-type-badge, h3 .snippet-type-badge { /* rtl:ignore */ - margin-left: 3px; + margin-inline-start: 3px; } .button .badge { @@ -57,7 +57,7 @@ $badges: (php: theme.$php-active, css: theme.$css-highlight, js: theme.$js-highl } .go-pro-badge, .pro-badge, .core-badge { - margin-left: 3px; + margin-inline-start: 3px; border: 1px solid currentColor; border-radius: 5px; font-size: 10px; @@ -77,12 +77,12 @@ $badges: (php: theme.$php-active, css: theme.$css-highlight, js: theme.$js-highl .go-pro-button .badge, .go-pro-badge { color: theme.$pro; border-color: theme.$pro; - margin-left: 1px; + margin-inline-start: 1px; } .wp-core-ui .button.nav-tab-button { - margin-left: 0.5em; - float: right; + margin-inline-start: 0.5em; + float: inline-end; color: #a7aaad; background: #f6f7f7; border-color: #f6f7f7; diff --git a/src/css/edit.scss b/src/css/edit.scss index 036e4dec..dceb95bb 100644 --- a/src/css/edit.scss +++ b/src/css/edit.scss @@ -15,7 +15,7 @@ } .notice.error blockquote { - margin-bottom: 0; + margin-block-end: 0; } h2 { @@ -34,25 +34,25 @@ h2:first-of-type, .submit-inline { .saved-snippet { &.inactive-snippet, &.active-snippet { #title { - border-left-width: 4px; + border-inline-start-width: 4px; } } &.active-snippet #title { - border-left-color: #46b450; + border-inline-start-color: #46b450; } &.inactive-snippet #title { - border-left-color: #bbb; + border-inline-start-color: #bbb; } &.erroneous-snippet #title { - border-left-color: #dc3232; + border-inline-start-color: #dc3232; } } #snippet-form { - margin-top: 10px; + margin-block-start: 10px; #snippet-tags, textarea { width: 100%; @@ -68,7 +68,7 @@ label[for='snippet_description'] h3 div { /* Add spacing in between the action buttons */ .button + .button, .generate-button + .button { - margin-left: .5em; + margin-inline-start: .5em; } h2 .button { @@ -87,37 +87,37 @@ h2 .button { } .submit-inline { - float: right; - margin-bottom: 0; + float: inline-end; + margin-block-end: 0; } p.snippet-scope, .snippet-scope p { - margin-top: 15px; + margin-block-start: 15px; } .snippet-description-container { - margin-top: 25px; + margin-block-start: 25px; .wp-editor-tools { - padding-top: 5px; + padding-block-start: 5px; } .wp-editor-tabs { - float: left; + float: inline-start; } } .snippet-scope label, .html-shortcode-options strong { display: inline-block; - margin-right: 1.5em; + margin-inline-end: 1.5em; } .below-snippet-editor { display: flex; flex-flow: row wrap; justify-content: space-between; - padding-top: 1px; + padding-block-start: 1px; } .snippet-priority { @@ -125,7 +125,7 @@ p.snippet-scope, .snippet-scope p { font-weight: bold; cursor: help; font-size: 1.1em; - padding-right: 0.5em; + padding-inline-end: 0.5em; } input { @@ -142,7 +142,7 @@ p.snippet-scope, .snippet-scope p { } .wrap h2.nav-tab-wrapper { - border-bottom: none; + border-block-end: none; } .code-snippets-copy-text { @@ -155,6 +155,6 @@ p.snippet-scope, .snippet-scope p { #edit-snippet-form-container .cs-sticky-notice { position: sticky; - top: 40px; + inset-block-start: 40px; z-index: 100; } diff --git a/src/css/edit/_gpt.scss b/src/css/edit/_gpt.scss index efc2e6d9..428578ae 100644 --- a/src/css/edit/_gpt.scss +++ b/src/css/edit/_gpt.scss @@ -14,19 +14,19 @@ } .notice { - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; } } .generate-button { - float: right; + float: inline-end; display: flex; align-items: center; .dashicons-warning { color: #b32d2e; - margin-right: 11px; + margin-inline-end: 11px; } } @@ -38,15 +38,15 @@ padding: 0 8px; background-color: #fff; border: 1px solid #bbb; - border-left: 0; - border-right: 0; + border-inline-start: 0; + border-inline-end: 0; color: #666; font-style: italic; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; img { height: 1rem; - padding-right: 5px; + padding-inline-end: 5px; } } diff --git a/src/css/edit/_tags.scss b/src/css/edit/_tags.scss index 9b1dc91e..f53fa482 100644 --- a/src/css/edit/_tags.scss +++ b/src/css/edit/_tags.scss @@ -25,7 +25,7 @@ } .tagger > ul > li { - padding-bottom: 0.4rem; + padding-block-end: 0.4rem; margin: 0.4rem 5px 4px; &:not(.tagger-new) { @@ -50,7 +50,7 @@ .tagger li a.close { padding: 4px; - margin-left: 4px; + margin-inline-start: 4px; &:hover { color: white; @@ -67,7 +67,7 @@ outline: none; box-shadow: none; width: 100%; - padding-left: 0; + padding-inline-start: 0; box-sizing: border-box; background: transparent; } diff --git a/src/css/edit/_tooltips.scss b/src/css/edit/_tooltips.scss index 5653726b..bdbd62d1 100644 --- a/src/css/edit/_tooltips.scss +++ b/src/css/edit/_tooltips.scss @@ -9,8 +9,8 @@ .snippet-editor-help { position: absolute; - right: 5px; - top: 5px; + inset-inline-end: 5px; + inset-block-start: 5px; &:hover .editor-help-text { visibility: visible; @@ -26,9 +26,9 @@ border-radius: 6px; position: absolute; z-index: 99; - top: 125%; - right: 0; - margin-right: -10px; + inset-block-start: 125%; + inset-inline-end: 0; + margin-inline-end: -10px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; @@ -37,15 +37,15 @@ &::after { content: ""; position: absolute; - bottom: 100%; - right: 0; - margin-right: 10px; + inset-block-end: 100%; + inset-inline-end: 0; + margin-inline-end: 10px; border: 5px solid transparent; - border-bottom-color: #555; + border-block-end-color: #555; } td:first-child { - padding-right: 0.5em; + padding-inline-end: 0.5em; } .mac-key { diff --git a/src/css/edit/_types.scss b/src/css/edit/_types.scss index b76c13c0..d77869f0 100644 --- a/src/css/edit/_types.scss +++ b/src/css/edit/_types.scss @@ -2,11 +2,11 @@ .CodeMirror-sizer { min-height: 300px !important; box-sizing: border-box; - padding-bottom: 1.5em !important; + padding-block-end: 1.5em !important; &::after { position: absolute; - bottom: 0; + inset-block-end: 0; } } @@ -24,7 +24,7 @@ } .CodeMirror-sizer { - padding-bottom: 0 !important; + padding-block-end: 0 !important; &::before { content: ' article::after { - border-bottom: 1px solid #666; + border-block-end: 1px solid #666; content: ' '; display: block; width: 50%; @@ -230,7 +230,7 @@ a.csp-card { } > article:last-child { - padding-bottom: 1px; + padding-block-end: 1px; &::after { border: 0; @@ -279,7 +279,7 @@ a.csp-card { padding: 40px 0 50px 0; .csp-card { - margin-top: 20px; + margin-block-start: 20px; justify-content: flex-start; color: black; position: relative; @@ -311,8 +311,8 @@ a.csp-card { display: block; font-size: .9rem; letter-spacing: 1px; - margin-bottom: 0; - margin-top: 0; + margin-block-start: 0; + margin-block-end: 0; text-transform: uppercase; width: fit-content; padding: 5px 15px; @@ -348,7 +348,7 @@ a.csp-card { } .csp-section-partners { - border-top: 1px solid theme.$outline; + border-block-start: 1px solid theme.$outline; header { display: flex; @@ -363,12 +363,12 @@ a.csp-card { width: 0; padding: 15px; border: 6px solid #e7c0b3; - border-right-color: theme.$secondary; + border-inline-end-color: theme.$secondary; border-radius: 22px; animation: loading-rotate 1s infinite linear; position: absolute; - left: 47%; - top: 45%; + inset-inline-start: 47%; + inset-block-start: 45%; } @keyframes loading-rotate {