IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Refactor pikaday month prev/next button styling

Browse Source 
And topic-list last poster halo effect
This commit is contained in:
Penar Musaraj 2020-08-04 14:39:25 -04:00
parent d0953dcda9
commit fb91320cba
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/color_definitions.scss
View File

@ -31,6 +31,7 @@
--primary-low-rgb: #{hexToRGB($primary-low)}; --primary-low-rgb: #{hexToRGB($primary-low)};
--secondary-rgb: #{hexToRGB($secondary)}; --secondary-rgb: #{hexToRGB($secondary)};
--header_background-rgb: #{hexToRGB($header_background)}; --header_background-rgb: #{hexToRGB($header_background)};
--tertiary-rgb: #{hexToRGB($tertiary)};
--primary-very-low: #{$primary-very-low}; --primary-very-low: #{$primary-very-low};
--primary-low: #{$primary-low}; --primary-low: #{$primary-low};

4
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -114,8 +114,8 @@
height: $td-posters-height; height: $td-posters-height;
} }
.posters a:first-child .avatar.latest:not(.single) { .posters a:first-child .avatar.latest:not(.single) {
box-shadow: 0 0 3px 1px desaturate($tertiary-medium, 35%); box-shadow: 0 0 3px 1px rgba(var(--tertiary-rgb), 0.35);
border: 2px solid desaturate($tertiary-medium, 40%); border: 2px solid rgba(var(--tertiary-rgb), 0.5);
position: relative; position: relative;
top: -2px; top: -2px;
left: -2px; left: -2px;

28
app/assets/stylesheets/vendor/pikaday.scss vendored
View File

@ -1,4 +1,5 @@
@import "common/foundation/variables"; @import "common/foundation/variables";
@import "common/foundation/mixins";
/*! /*!
* Pikaday * Pikaday
@ -114,14 +115,9 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
text-indent: 20px; // hide text using text-indent trick, using width value (it's enough) text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: var(--primary); // sets color of SVG masks below
background-position: center center;
background-repeat: no-repeat;
background-size: 75% 75%; background-size: 75% 75%;
opacity: .5; opacity: .5;
@if (lightness($secondary) < 50) { // invert the black png if the background is dark
filter: invert(1);
}
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -136,14 +132,28 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
.pika-prev, .pika-prev,
.is-rtl .pika-next { .is-rtl .pika-next {
float: left; float: left;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); -webkit-mask: svg-uri(
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'
)
no-repeat 50% 50%;
mask: svg-uri(
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'
)
no-repeat 50% 50%;
} }
.pika-next, .pika-next,
.is-rtl .pika-prev { .is-rtl .pika-prev {
float: right; float: right;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); -webkit-mask: svg-uri(
} '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'
)
no-repeat 50% 50%;
mask: svg-uri(
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'
)
no-repeat 50% 50%;
}
.pika-select { .pika-select {
display: inline-block; display: inline-block;