mirror of
https://github.com/umap-project/umap.git
synced 2025-04-29 11:52:38 +02:00
make base.css rtl-friendly
This commit is contained in:
parent
a39d89295c
commit
26b1369a3c
1 changed files with 41 additions and 23 deletions
|
@ -119,13 +119,13 @@ dt {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
.col {
|
.col {
|
||||||
float: left;
|
float: inline-start;
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
.col + .col {
|
.col + .col {
|
||||||
padding-left: 20px;
|
padding-inline-start: 20px;
|
||||||
}
|
}
|
||||||
.half {
|
.half {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
@ -143,7 +143,7 @@ dt {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.col + .wide {
|
.col + .wide {
|
||||||
padding-left: inherit;
|
padding-inline-start: inherit;
|
||||||
}
|
}
|
||||||
.mshow, .tshow {
|
.mshow, .tshow {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -186,7 +186,7 @@ input[type="range"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
margin-right: var(--text-margin);
|
margin-inline-end: var(--text-margin);
|
||||||
}
|
}
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
margin: 0 var(--text-margin);
|
margin: 0 var(--text-margin);
|
||||||
|
@ -272,7 +272,7 @@ button.flat,
|
||||||
border: none;
|
border: none;
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: left;
|
text-align: start;
|
||||||
min-height: inherit;
|
min-height: inherit;
|
||||||
width: initial;
|
width: initial;
|
||||||
display: initial;
|
display: initial;
|
||||||
|
@ -356,8 +356,8 @@ input:invalid {
|
||||||
}
|
}
|
||||||
details {
|
details {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
border-top-left-radius: 4px;
|
border-start-start-radius: 4px;
|
||||||
border-top-right-radius: 4px;
|
border-start-end-radius: 4px;
|
||||||
}
|
}
|
||||||
.dark details {
|
.dark details {
|
||||||
border: 1px solid #222;
|
border: 1px solid #222;
|
||||||
|
@ -392,7 +392,7 @@ fieldset legend {
|
||||||
}
|
}
|
||||||
[data-badge]:after {
|
[data-badge]:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -6px;
|
inset-inline-end: -6px;
|
||||||
top: -6px;
|
top: -6px;
|
||||||
min-width: 8px;
|
min-width: 8px;
|
||||||
min-height: 8px;
|
min-height: 8px;
|
||||||
|
@ -417,7 +417,7 @@ input.switch:empty {
|
||||||
input.switch:empty ~ label {
|
input.switch:empty ~ label {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: inline-start;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
text-indent: 6em;
|
text-indent: 6em;
|
||||||
|
@ -436,7 +436,7 @@ input.switch:empty ~ label:after {
|
||||||
display: block;
|
display: block;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
inset-inline-start: 0;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
width: 6em;
|
width: 6em;
|
||||||
-webkit-transition: all 100ms ease-in;
|
-webkit-transition: all 100ms ease-in;
|
||||||
|
@ -451,7 +451,7 @@ input.switch:empty ~ label:after {
|
||||||
}
|
}
|
||||||
input.switch:empty ~ label:after {
|
input.switch:empty ~ label:after {
|
||||||
width: 3em;
|
width: 3em;
|
||||||
margin-left: 0.1em;
|
margin-inline-start: 0.1em;
|
||||||
background-color: #ededed;
|
background-color: #ededed;
|
||||||
content: "OFF";
|
content: "OFF";
|
||||||
text-indent: 3.5em;
|
text-indent: 3.5em;
|
||||||
|
@ -472,7 +472,7 @@ input.switch:checked ~ label:before {
|
||||||
color: var(--color-darkGray);
|
color: var(--color-darkGray);
|
||||||
content: "ON";
|
content: "ON";
|
||||||
text-indent: 0.7em;
|
text-indent: 0.7em;
|
||||||
text-align: left;
|
text-align: start;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.dark input.switch:checked ~ label:before {
|
.dark input.switch:checked ~ label:before {
|
||||||
|
@ -480,7 +480,7 @@ input.switch:checked ~ label:before {
|
||||||
background-color: var(--color-accent);
|
background-color: var(--color-accent);
|
||||||
}
|
}
|
||||||
input.switch:checked ~ label:after {
|
input.switch:checked ~ label:after {
|
||||||
margin-left: 3em;
|
margin-inline-start: 3em;
|
||||||
}
|
}
|
||||||
.button-bar, .umap-multiplechoice {
|
.button-bar, .umap-multiplechoice {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
@ -552,21 +552,21 @@ input.switch:checked ~ label:after {
|
||||||
.umap-field-iconUrl .action-button,
|
.umap-field-iconUrl .action-button,
|
||||||
.inheritable .define,
|
.inheritable .define,
|
||||||
.inheritable .undefine {
|
.inheritable .undefine {
|
||||||
float: right;
|
float: inline-end;
|
||||||
width: initial;
|
width: initial;
|
||||||
min-height: 18px;
|
min-height: 18px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.inheritable .quick-actions {
|
.inheritable .quick-actions {
|
||||||
float: right;
|
float: inline-end;
|
||||||
}
|
}
|
||||||
.inheritable .quick-actions .formbox {
|
.inheritable .quick-actions .formbox {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.inheritable .quick-actions input {
|
.inheritable .quick-actions input {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
margin-right: 5px;
|
margin-inline-end: 5px;
|
||||||
}
|
}
|
||||||
.inheritable .define,
|
.inheritable .define,
|
||||||
.inheritable.undefined .undefine,
|
.inheritable.undefined .undefine,
|
||||||
|
@ -581,7 +581,7 @@ i.info {
|
||||||
background-image: url('./img/16.svg');
|
background-image: url('./img/16.svg');
|
||||||
background-position: -170px -50px;
|
background-position: -170px -50px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 5px;
|
margin-inline-start: 5px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
@ -616,24 +616,42 @@ i.info {
|
||||||
.umap-to-polygon:before {
|
.umap-to-polygon:before {
|
||||||
background-position: -80px -48px;
|
background-position: -80px -48px;
|
||||||
}
|
}
|
||||||
|
html[dir="rtl"] .umap-to-polygon:before {
|
||||||
|
background-position: -69px -41px;
|
||||||
|
}
|
||||||
.umap-to-polyline:before {
|
.umap-to-polyline:before {
|
||||||
background-position: -110px -42px;
|
background-position: -110px -42px;
|
||||||
}
|
}
|
||||||
|
html[dir="rtl"] .umap-to-polyline:before {
|
||||||
|
background-position: -105px -42px;
|
||||||
|
}
|
||||||
.umap-clone:before {
|
.umap-clone:before {
|
||||||
background-position: -150px -78px;
|
background-position: -150px -78px;
|
||||||
}
|
}
|
||||||
|
html[dir="rtl"] .umap-clone:before {
|
||||||
|
background-position: -139px -78px;
|
||||||
|
}
|
||||||
.umap-delete:before {
|
.umap-delete:before {
|
||||||
background-position: -32px -8px;
|
background-position: -32px -8px;
|
||||||
}
|
}
|
||||||
|
html[dir="rtl"] .umap-delete:before {
|
||||||
|
background-position: -34px -8px;
|
||||||
|
}
|
||||||
.umap-edit:before {
|
.umap-edit:before {
|
||||||
background-position: -6px -6px;
|
background-position: -6px -6px;
|
||||||
}
|
}
|
||||||
.umap-empty:before {
|
.umap-empty:before {
|
||||||
background-position: -110px -78px;
|
background-position: -110px -78px;
|
||||||
}
|
}
|
||||||
|
html[dir="rtl"] .umap-empty:before {
|
||||||
|
background-position: -104px -78px;
|
||||||
|
}
|
||||||
.umap-download:before {
|
.umap-download:before {
|
||||||
background-position: -77px -78px;
|
background-position: -77px -78px;
|
||||||
}
|
}
|
||||||
|
html[dir="rtl"] .umap-download:before {
|
||||||
|
background-position: -68px -78px;
|
||||||
|
}
|
||||||
.permissions-panel,
|
.permissions-panel,
|
||||||
.umap-upload,
|
.umap-upload,
|
||||||
.umap-share,
|
.umap-share,
|
||||||
|
@ -711,7 +729,7 @@ i.info {
|
||||||
|
|
||||||
.umap-pictogram-choice .leaflet-marker-icon {
|
.umap-pictogram-choice .leaflet-marker-icon {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 30px;
|
inset-inline-start: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.umap-color-picker {
|
.umap-color-picker {
|
||||||
|
@ -727,14 +745,14 @@ i.info {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: left;
|
float: inline-start;
|
||||||
}
|
}
|
||||||
input.blur {
|
input.blur {
|
||||||
width: calc(100% - 40px);
|
width: calc(100% - 40px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-top-right-radius: 0;
|
border-start-end-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-end-end-radius: 0;
|
||||||
}
|
}
|
||||||
.blur + .button:before,
|
.blur + .button:before,
|
||||||
.blur + [type="button"]:before {
|
.blur + [type="button"]:before {
|
||||||
|
@ -747,8 +765,8 @@ input.blur {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
border-top-left-radius: 0;
|
border-start-start-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-end-start-radius: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
input[type=hidden].blur + .button,
|
input[type=hidden].blur + .button,
|
||||||
|
|
Loading…
Reference in a new issue