Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Fixed tag display issues

Browse source 
The tags UI is pretty messed up all round. This fix makes it work properly at least on desktop. Mobile needs a lot more love. This is a followup to #1774 and most problems stemming originally from #710
This commit is contained in:
John O'Nolan 2014-01-07 23:29:59 +01:00
parent 371dc8622a
commit 8f02b3341b
1 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
core/client/assets/sass/layouts/editor.scss
View file

@ -499,7 +499,7 @@ body.zen {
text-transform: none; text-transform: none;
padding: 10px 0 0 0; padding: 10px 0 0 0;
&:after, &:before { &:after {
content: ""; content: "";
position: fixed; position: fixed;
top: 10px; top: 10px;
@ -511,16 +511,10 @@ body.zen {
pointer-events: none; pointer-events: none;
@include breakpoint($mobile) { @include breakpoint($mobile) {
right: 176px; right: 161px;
} }
} }
&:before {
right: auto;
left: 29px;
@include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
}
.tags { .tags {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -529,7 +523,7 @@ body.zen {
max-width: 80%; max-width: 80%;
max-width: calc(100% - 320px); max-width: calc(100% - 320px);
height: 26px; height: 26px;
padding-left: 8px; padding-left: 5px;
padding-bottom: 20px; padding-bottom: 20px;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -580,7 +574,7 @@ body.zen {
.tag { .tag {
@include icon-after($i-x, 8px, $darkgrey) { @include icon-after($i-x, 8px, $darkgrey) {
margin-left: 4px; margin-left: 4px;
vertical-align: 5%; vertical-align: 10%;
text-shadow: rgba(255,255,255,0.15) 0 1px 0; text-shadow: rgba(255,255,255,0.15) 0 1px 0;
@include transition; @include transition;
} }
@ -599,7 +593,11 @@ body.zen {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;} @include icon-after($i-x, 8px, $lightgrey) {
margin-left: 4px;
vertical-align: 10%;
text-shadow: none;
}
} }
} }