tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix hashtags select styling in default and high contrast skins

Browse Source 
Port 169b9d4428 to glitch-soc
This commit is contained in:
Thibaut Girka
2019-02-15 18:21:00 +01:00
parent 4dcb04b888
commit a151c5566a
4 changed files with 128 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/flavours/glitch/styles/_mixins.scss
View File

@ -82,3 +82,34 @@
font-size: 16px;
}
}
@mixin search-popout() {
background: $simple-background-color;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $light-text-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $inverted-text-color;
}
}

66
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -339,14 +339,41 @@
display: block;
font-weight: 500;
margin-bottom: 10px;
}
.column-settings__hashtag-select {
.column-settings__hashtags {
.column-settings__row {
margin-bottom: 15px;
}
.column-select {
&__control {
@include search-input();
}
&__placeholder {
color: $dark-text-color;
padding-left: 2px;
font-size: 12px;
}
&__value-container {
padding-left: 6px;
}
&__multi-value {
background: lighten($ui-base-color, 8%);
&__remove {
cursor: pointer;
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 12%);
color: lighten($darker-text-color, 4%);
}
}
}
&__multi-value__label,
@ -354,9 +381,42 @@
color: $darker-text-color;
}
&__indicator-separator,
&__clear-indicator,
&__dropdown-indicator {
display: none;
cursor: pointer;
transition: none;
color: $dark-text-color;
&:hover,
&:active,
&:focus {
color: lighten($dark-text-color, 4%);
}
}
&__indicator-separator {
background-color: lighten($ui-base-color, 8%);
}
&__menu {
@include search-popout();
padding: 0;
background: $ui-secondary-color;
}
&__menu-list {
padding: 6px;
}
&__option {
color: $inverted-text-color;
border-radius: 4px;
font-size: 14px;
&--is-focused,
&--is-selected {
background: darken($ui-secondary-color, 10%);
}
}
}
}

24
app/javascript/flavours/glitch/styles/components/drawer.scss
View File

@ -157,29 +157,7 @@
}
.drawer--search--popout {
box-sizing: border-box;
margin-top: 10px;
border-radius: 4px;
padding: 10px 14px 14px 14px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
color: $light-text-color;
background: $simple-background-color;
h4 {
margin-bottom: 10px;
color: $light-text-color;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
ul { margin-bottom: 10px }
li { padding: 4px 0 }
em {
color: $inverted-text-color;
font-weight: 500;
}
@include search-popout();
}
.drawer--account {