maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] CSS fixes (#8764)

Browse source 
* flare tag line height

* .

* fix editor overflow issue

* fix editor overflow issue

* themable actions colors

* name position
This commit is contained in:
ludwiczakpawel 2020-06-18 15:16:13 +02:00 • committed by GitHub
parent 158b3f1307
commit cb1f03ce9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 62 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/assets/stylesheets/article-show.scss
View file

@ -36,19 +36,23 @@
top: var(--header-height);
right: 0;
height: calc(100vh - var(--header-height));
z-index: 200;
z-index: 100;
transform: translateX(360px);
transition: var(--transition-props);
&.showing {
transform: initial;
}
iframe {
height: 100%;
border: none;
box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1);
width: 360px;
}
&.showing {
transform: initial;
iframe {
box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1);
}
}
}
.mod-actions-menu-btn {
@ -71,19 +75,10 @@
}
}
.actions-menu-svg {
color: white;
}
.mod-actions-menu-btn,
.actions-menu-svg {
.mod-actions-menu-btn {
transition: 0.3s all ease;
}
.actions-menu-svg:hover {
color: white;
}
.flag-user-modal {
.flag-user-modal-header {
padding-left: var(--su-4);

8
app/assets/stylesheets/config/_colors.scss
View file

@ -211,4 +211,12 @@
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
// Reactions
--reaction-like-color: var(--accent-danger);
--reaction-like-bg: var(--accent-danger-a10);
--reaction-custom-color: var(--accent-success);
--reaction-custom-bg: var(--accent-success-a10);
--reaction-save-color: var(--accent-brand);
--reaction-save-bg: var(--accent-brand-a10);
}

4
app/assets/stylesheets/moderators.scss
View file

@ -210,13 +210,9 @@
color: var(--base-70);
}
button.close-actions-panel {
border: none;
width: 40px;
height: 40px;
position: absolute;
right: var(--su-4);
top: var(--su-4);
background-color: var(--base-10);
}
}
.reactions-container {

1
app/assets/stylesheets/scaffolds.scss
View file

@ -100,7 +100,6 @@ pre {
color: #eff0f9;
line-height: 1.42em;
font-size: 13px;
// width: calc(100% - 25px);
@media screen and (min-width: 380px) {
font-size: 15px;
}

8
app/assets/stylesheets/themes/hacker.scss
View file

@ -204,4 +204,12 @@
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
// Reactions
--reaction-like-color: var(--accent-danger);
--reaction-like-bg: var(--accent-danger-a10);
--reaction-custom-color: var(--accent-success);
--reaction-custom-bg: var(--accent-success-a10);
--reaction-save-color: var(--accent-warning);
--reaction-save-bg: var(--accent-warning-a10);
}

8
app/assets/stylesheets/themes/minimal.scss
View file

@ -202,4 +202,12 @@
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjN2E3YTdhIi8+Cjwvc3ZnPg==);
// Reactions
--reaction-like-color: var(--accent-danger);
--reaction-like-bg: var(--accent-danger-a10);
--reaction-custom-color: var(--accent-success);
--reaction-custom-bg: var(--accent-success-a10);
--reaction-save-color: var(--accent-brand);
--reaction-save-bg: var(--accent-brand-a10);
}

8
app/assets/stylesheets/themes/night.scss
View file

@ -204,4 +204,12 @@
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==);
// Reactions
--reaction-like-color: var(--accent-danger);
--reaction-like-bg: var(--accent-danger-a10);
--reaction-custom-color: var(--accent-success);
--reaction-custom-bg: var(--accent-success-a10);
--reaction-save-color: var(--accent-brand);
--reaction-save-bg: var(--accent-brand-a10);
}

8
app/assets/stylesheets/themes/pink.scss
View file

@ -202,4 +202,12 @@
// Select icon
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjNTcxOTJkIi8+Cjwvc3ZnPg==);
// Reactions
--reaction-like-color: var(--accent-danger);
--reaction-like-bg: var(--accent-danger-a10);
--reaction-custom-color: var(--accent-success);
--reaction-custom-bg: var(--accent-success-a10);
--reaction-save-color: var(--accent-brand);
--reaction-save-bg: var(--accent-brand-a10);
}

3
app/assets/stylesheets/views/article-form.scss
View file

@ -72,9 +72,6 @@
}
&__content {
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
height: calc(
100vh - var(--header-height) - var(--article-form-actions-height)

17
app/assets/stylesheets/views/article.scss
View file

@ -341,7 +341,7 @@
right: 0;
bottom: 0;
padding: var(--su-2);
@supports (padding-button: constant(safe-area-inset-bottom)) {
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
padding-bottom: env(safe-area-inset-bottom);
}
display: flex;
@ -360,9 +360,6 @@
box-shadow: none;
justify-content: stretch;
top: calc(var(--header-height) + var(--layout-padding) + 6vh);
.static-navbar-config & {
top: var(--layout-padding);
}
}
}
@ -423,24 +420,24 @@
&--like {
&:hover,
&.user-activated {
--reaction-color: var(--accent-danger);
--reaction-bg: var(--accent-danger-a10);
--reaction-color: var(--reaction-like-color);
--reaction-bg: var(--reaction-like-bg);
}
}
&--unicorn {
&:hover,
&.user-activated {
--reaction-color: var(--accent-success-darker);
--reaction-bg: var(--accent-success-a10);
--reaction-color: var(--reaction-custom-color);
--reaction-bg: var(--reaction-custom-bg);
}
}
&--readinglist {
&:hover,
&.user-activated {
--reaction-color: var(--accent-brand);
--reaction-bg: var(--accent-brand-a10);
--reaction-color: var(--reaction-save-color);
--reaction-bg: var(--reaction-save-bg);
}
}
}

6
app/views/articles/_sticky_nav.html.erb
View file

@ -43,11 +43,11 @@
<div class="crayons-article-sticky grid gap-4" id="article-show-primary-sticky-nav">
<div class="crayons-card crayons-card--secondary crayons-card--branded p-4 pt-0 hidden l:grid gap-4">
<div class="-mt-4">
<a href="<%= @actor.path %>" class="flex items-end">
<span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %> mr-2">
<a href="<%= @actor.path %>" class="flex">
<span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %> mr-2 shrink-0">
<img src="<%= ProfileImage.new(@actor).get(width: 90) %>" class="<% if @actor.class.name == "User" %>crayons-avatar__image<% elsif @actor.class.name == "Organization" %>crayons-logo__image<% end %>" alt="<%= @actor.name %> profile image">
</span>
<span class="crayons-link fs-l fw-bold"><%= @actor.name %></span>
<span class="crayons-link fs-l fw-bold mt-5"><%= @actor.name %></span>
</a>
</div>
<% if @actor.tag_line.present? %>

4
app/views/moderations/actions_panel.html.erb
View file

@ -12,8 +12,8 @@
<header class="top-header">
<h1>Moderate Post</h1>
<h2>Rate the quality of this post</h2>
<button class="close-actions-panel circle centered-icon" type="button" title="Close moderator actions panel">
<%= inline_svg_tag("chevron-right.svg", aria: true, title: "Close moderator actions panel") %>
<button class="crayons-btn crayons-btn--secondary crayons-btn--icon-rounded close-actions-panel" type="button" title="Close moderator actions panel">
<%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: "Close moderator actions panel") %>
</button>
</header>