Skip to content

Commit

Permalink
Issue #118: Adjustments for locale in admin bar.
Browse files Browse the repository at this point in the history 
Fixes #118.
Includes the "translate" icon from Phosphor Icons, licensed under MIT.
  • Loading branch information
@laryn
laryn committed Mar 9, 2024
1 parent e68b049 commit f9b6ca8
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 46 deletions.
63 changes: 23 additions & 40 deletions dist/css/layout/gin_admin_bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,44 +47,32 @@
}

#admin-bar #admin-bar-icon .icon,
#admin-bar #admin-bar-extra .extra,
#admin-bar #admin-bar-extra .page,
#admin-bar #admin-bar-extra .user-counter,
#admin-bar #admin-bar-extra .account,
#admin-bar #admin-bar-extra .logout,
#admin-bar #admin-bar-extra .dropdown > li > span,
#admin-bar #admin-bar-extra .dropdown > li > a,
#admin-bar #admin-bar-menu > li > .dropdown > li > a,
#admin-bar #admin-bar-menu.dropdown li > span.menu {
background: none;
}

[dir="ltr"] #admin-bar #admin-bar-icon .icon,
[dir="ltr"] #admin-bar #admin-bar-extra .extra,
[dir="ltr"] #admin-bar #admin-bar-extra .page,
[dir="ltr"] #admin-bar #admin-bar-extra .user-counter,
[dir="ltr"] #admin-bar #admin-bar-extra .account,
[dir="ltr"] #admin-bar #admin-bar-extra .logout,
[dir="ltr"] #admin-bar #admin-bar-extra .dropdown > li > span,
[dir="ltr"] #admin-bar #admin-bar-extra .dropdown > li > a,
[dir="ltr"] #admin-bar #admin-bar-menu > li > .dropdown > li > a,
[dir="ltr"] #admin-bar #admin-bar-menu.dropdown li > span.menu {
padding: var(--gin-spacing-m) var(--gin-spacing-s) var(--gin-spacing-m) var(--gin-spacing-xs);
}

[dir="rtl"] #admin-bar #admin-bar-icon .icon,
[dir="rtl"] #admin-bar #admin-bar-extra .extra,
[dir="rtl"] #admin-bar #admin-bar-extra .page,
[dir="rtl"] #admin-bar #admin-bar-extra .user-counter,
[dir="rtl"] #admin-bar #admin-bar-extra .account,
[dir="rtl"] #admin-bar #admin-bar-extra .logout,
[dir="rtl"] #admin-bar #admin-bar-extra .dropdown > li > span,
[dir="rtl"] #admin-bar #admin-bar-extra .dropdown > li > a,
[dir="rtl"] #admin-bar #admin-bar-menu > li > .dropdown > li > a,
[dir="rtl"] #admin-bar #admin-bar-menu.dropdown li > span.menu {
padding: var(--gin-spacing-m) var(--gin-spacing-xs) var(--gin-spacing-m) var(--gin-spacing-s);
}

#admin-bar #admin-bar-icon .icon::before,
#admin-bar #admin-bar-extra .extra::before,
#admin-bar #admin-bar-extra .page::before,
#admin-bar #admin-bar-extra .user-counter::before,
#admin-bar #admin-bar-extra .account::before,
#admin-bar #admin-bar-extra .logout::before,
#admin-bar #admin-bar-extra .dropdown > li > span::before,
#admin-bar #admin-bar-extra .dropdown > li > a::before,
#admin-bar #admin-bar-menu > li > .dropdown > li > a::before,
#admin-bar #admin-bar-menu.dropdown li > span.menu::before {
content: "";
Expand All @@ -97,35 +85,26 @@
}

[dir="ltr"] #admin-bar #admin-bar-icon .icon::before,
[dir="ltr"] #admin-bar #admin-bar-extra .extra::before,
[dir="ltr"] #admin-bar #admin-bar-extra .page::before,
[dir="ltr"] #admin-bar #admin-bar-extra .user-counter::before,
[dir="ltr"] #admin-bar #admin-bar-extra .account::before,
[dir="ltr"] #admin-bar #admin-bar-extra .logout::before,
[dir="ltr"] #admin-bar #admin-bar-extra .dropdown > li > span::before,
[dir="ltr"] #admin-bar #admin-bar-extra .dropdown > li > a::before,
[dir="ltr"] #admin-bar #admin-bar-menu > li > .dropdown > li > a::before,
[dir="ltr"] #admin-bar #admin-bar-menu.dropdown li > span.menu::before {
float: left;
margin-right: var(--gin-spacing-xs);
}

[dir="rtl"] #admin-bar #admin-bar-icon .icon::before,
[dir="rtl"] #admin-bar #admin-bar-extra .extra::before,
[dir="rtl"] #admin-bar #admin-bar-extra .page::before,
[dir="rtl"] #admin-bar #admin-bar-extra .user-counter::before,
[dir="rtl"] #admin-bar #admin-bar-extra .account::before,
[dir="rtl"] #admin-bar #admin-bar-extra .logout::before,
[dir="rtl"] #admin-bar #admin-bar-extra .dropdown > li > span::before,
[dir="rtl"] #admin-bar #admin-bar-extra .dropdown > li > a::before,
[dir="rtl"] #admin-bar #admin-bar-menu > li > .dropdown > li > a::before,
[dir="rtl"] #admin-bar #admin-bar-menu.dropdown li > span.menu::before {
float: right;
margin-left: var(--gin-spacing-xs);
}

#admin-bar #admin-bar-icon .icon.active-trail,
#admin-bar #admin-bar-extra .extra.active-trail,
#admin-bar #admin-bar-extra .page.active-trail,
#admin-bar #admin-bar-extra .user-counter.active-trail,
#admin-bar #admin-bar-extra .account.active-trail,
#admin-bar #admin-bar-extra .logout.active-trail,
#admin-bar #admin-bar-extra .dropdown > li > span.active-trail,
#admin-bar #admin-bar-extra .dropdown > li > a.active-trail,
#admin-bar #admin-bar-menu > li > .dropdown > li > a.active-trail,
#admin-bar #admin-bar-menu.dropdown li > span.menu.active-trail {
color: #fff;
Expand All @@ -134,11 +113,8 @@
}

#admin-bar #admin-bar-icon .icon.active-trail::before,
#admin-bar #admin-bar-extra .extra.active-trail::before,
#admin-bar #admin-bar-extra .page.active-trail::before,
#admin-bar #admin-bar-extra .user-counter.active-trail::before,
#admin-bar #admin-bar-extra .account.active-trail::before,
#admin-bar #admin-bar-extra .logout.active-trail::before,
#admin-bar #admin-bar-extra .dropdown > li > span.active-trail::before,
#admin-bar #admin-bar-extra .dropdown > li > a.active-trail::before,
#admin-bar #admin-bar-menu > li > .dropdown > li > a.active-trail::before,
#admin-bar #admin-bar-menu.dropdown li > span.menu.active-trail::before {
background-color: #fff;
Expand Down Expand Up @@ -222,6 +198,11 @@
mask-image: url("../../media/sprite.svg#user-view");
}

#admin-bar .locale:before {
-webkit-mask-image: url("../../media/sprite.svg#translate-view");
mask-image: url("../../media/sprite.svg#translate-view");
}

#admin-bar .logout:before {
-webkit-mask-image: url("../../media/sprite.svg#logout-view");
mask-image: url("../../media/sprite.svg#logout-view");
Expand All @@ -238,11 +219,13 @@

#admin-bar #admin-bar-search-items {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: var(--gin-font-size-xxs);
line-height: 1;
min-height: calc(var(--input-padding-vertical) * 2 + 1);
border-radius: var(--gin-border-xl);
color: var(--gin-color-button-text);
}

[dir="ltr"] #admin-bar #admin-bar-search-items {
Expand Down
2 changes: 1 addition & 1 deletion dist/media/sprite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions media/icons/general/translate.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions styles/helpers/_svg-sprite.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ $sprites: (
'more': "../../media/sprite.svg#more-view",
'sidebar': "../../media/sprite.svg#sidebar-view",
'tool': "../../media/sprite.svg#tool-view",
'translate': "../../media/sprite.svg#translate-view",
'users': "../../media/sprite.svg#users-view",
'grid': "../../media/sprite.svg#grid-view",
'list': "../../media/sprite.svg#list-view",
Expand Down Expand Up @@ -162,6 +163,10 @@ $sizes: (
'width': 24px,
'height': 24px
),
'translate': (
'width': 256px,
'height': 256px
),
'users': (
'width': 24px,
'height': 24px
Expand Down
15 changes: 10 additions & 5 deletions styles/layout/gin_admin_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,8 @@

// Icons
#admin-bar-icon .icon,
#admin-bar-extra .extra,
#admin-bar-extra .page,
#admin-bar-extra .user-counter,
#admin-bar-extra .account,
#admin-bar-extra .logout,
#admin-bar-extra .dropdown > li > span,
#admin-bar-extra .dropdown > li > a,
#admin-bar-menu > li > .dropdown > li > a,
#admin-bar-menu.dropdown li > span.menu {
padding: var(--gin-spacing-m) var(--gin-spacing-s) var(--gin-spacing-m) var(--gin-spacing-xs);
Expand Down Expand Up @@ -190,6 +187,13 @@
}
}

// Locale
.locale {
&:before {
mask-image: icon('translate');
}
}

// Logout
.logout {
&:before {
Expand Down Expand Up @@ -218,6 +222,7 @@
background: #fff icon('search') no-repeat center right var(--gin-spacing-s);
background-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);
border-radius: var(--gin-border-xl);
color: var(--gin-color-button-text);
}
}

Expand Down

0 comments on commit f9b6ca8

Please sign in to comment.