almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 11:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: make icon.css more logical and working in rtl

Browse source
This commit is contained in:
Yohan Boniface 2024-08-28 17:31:09 +02:00
parent ca86721b89
commit d0c1a55b2f
1 changed files with 36 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
umap/static/umap/css/icon.css
View file

@ -2,9 +2,8 @@
.icon { .icon {
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
padding: 0 10px;
vertical-align: middle; vertical-align: middle;
/* Reste default style, in case we apply this class on a button element */ /* Reset default style, in case we apply this class on a button element */
border: none; border: none;
background-color: initial; background-color: initial;
} }
@ -12,10 +11,15 @@
background-image: url('../img/16.svg'); background-image: url('../img/16.svg');
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
width: 24px;
--tile: -24px;
} }
.icon + span { .icon + span {
margin-inline-start: 10px; margin-inline-start: 10px;
} }
html[dir="rtl"] .icon {
transform: scaleX(-1);
}
.icon-block { .icon-block {
display: block; display: block;
float: inline-start; float: inline-start;
@ -28,127 +32,99 @@
background-image: url('../img/16-white.svg'); background-image: url('../img/16-white.svg');
} }
.icon-add { .icon-add {
background-position: -26px -24px; background-position: var(--tile) var(--tile);
}
html[dir="rtl"] .icon-add {
background-position: -25px -24px;
} }
.icon-back { .icon-back {
background-position: -122px -144px; background-position: calc(var(--tile) * 5) calc(var(--tile) * 6);
}
html[dir="rtl"] .icon-back {
transform: scaleX(-1);
} }
.icon-caption { .icon-caption {
background-position: -98px -24px; background-position: calc(var(--tile) * 4) var(--tile);
} }
.icon-close { .icon-close {
background-position: -26px 0px; background-position: var(--tile) 0px;
} }
.icon-delete { .icon-delete {
background-position: -121px -49px; background-position: calc(var(--tile) * 5) calc(var(--tile) * 2);
}
html[dir="rtl"] .icon-delete {
background-position: -124px -49px;
} }
.readonly .icon-delete, .readonly .icon-delete,
.off .icon-delete { .off .icon-delete {
background-position: -121px -122px; background-position: calc(var(--tile) * 5) calc(var(--tile) * 5);
}
html[dir="rtl"] .readonly .icon-delete,
html[dir="rtl"] .off .icon-delete {
background-position: -124px -122px;
} }
.icon-drag { .icon-drag {
background-position: -72px -73px; background-position: calc(var(--tile) * 3) calc(var(--tile) * 3);
cursor: move; cursor: move;
float: inline-end; float: inline-end;
} }
.icon-eye { .icon-eye {
background-position: -49px -26px; background-position: calc(var(--tile) * 2) var(--tile);
} }
.off .icon-eye { .off .icon-eye {
background-position: -73px -26px; background-position: calc(var(--tile) * 3) var(--tile);
} }
.icon-edit { .icon-edit {
background-position: -51px -49px; background-position: calc(var(--tile) * 2) calc(var(--tile) * 2);
}
html[dir="rtl"] .icon-edit {
background-position: -49px -49px;
} }
.off .icon-edit { .off .icon-edit {
background-position: -51px -73px; background-position: calc(var(--tile) * 2) calc(var(--tile) * 3);
}
html[dir="rtl"] .off .icon-edit {
background-position: -49px -73px;
} }
.icon-filters { .icon-filters {
background-position: -4px -24px; background-position: 0px var(--tile);
}
html[dir="rtl"] .icon-filters {
background-position: -1px -24px;
} }
.icon-key { .icon-key {
background-position: -144px -121px; background-position: calc(var(--tile) * 6) calc(var(--tile) * 5);
} }
.icon-layers { .icon-layers {
background-position: -96px -120px; background-position: calc(var(--tile) * 4) calc(var(--tile) * 5);
} }
.icon-list { .icon-list {
background-position: -28px -99px; background-position: var(--tile) calc(var(--tile) * 4);
} }
.icon-marker { .icon-marker {
background-position: -72px -120px; background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
} }
.icon-polygon { .icon-polygon {
background-position: -24px -119px; background-position: var(--tile) calc(var(--tile) * 5);
} }
.icon-polyline { .icon-polyline {
background-position: 0 -119px; background-position: 0 calc(var(--tile) * 5);
} }
.icon-resize { .icon-resize {
background-position: -74px -144px; background-position: calc(var(--tile) * 3) calc(var(--tile) * 6);
} }
.icon-restore { .icon-restore {
background-position: -121px -74px; background-position: calc(var(--tile) * 5) calc(var(--tile) * 3);
} }
.expanded .icon-resize { .expanded .icon-resize {
background-position: -50px -144px; background-position: calc(var(--tile) * 2) calc(var(--tile) * 6);
} }
.icon-search { .icon-search {
background-position: -27px -120px; background-position: var(--tile) calc(var(--tile) * 5);
} }
.icon-settings { .icon-settings {
background-position: -23px -97px; background-position: var(--tile) calc(var(--tile) * 4);
}
html[dir="rtl"] .icon-settings {
background-position: -27px -97px;
} }
.icon-share { .icon-share {
background-position: 0px -120px; background-position: 0px calc(var(--tile) * 5);
}
html[dir="rtl"] .icon-share {
background-position: -3px -120px;
} }
.icon-table { .icon-table {
background-position: -50px -1px; background-position: calc(var(--tile) * 2) 0px;
} }
.readonly .icon-table, .readonly .icon-table,
.off .icon-table { .off .icon-table {
background-position: -74px -1px; background-position: calc(var(--tile) * 3) 0px;
} }
.remotelayer .icon-table { .remotelayer .icon-table {
display: none !important; display: none !important;
} }
.icon-tilelayer { .icon-tilelayer {
background-position: -98px -141px; background-position: calc(var(--tile) * 4) calc(var(--tile) * 6);
} }
.icon-upload { .icon-upload {
background-position: -144px -97px; background-position: calc(var(--tile) * 6) calc(var(--tile) * 4);
} }
.icon-zoom { .icon-zoom {
background-position: -1px -49px; background-position: 0px calc(var(--tile) * 2);
} }
.off .icon-zoom { .off .icon-zoom {
background-position: -25px -49px; background-position: var(--tile) calc(var(--tile) * 2);
} }