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

3d drop shadows (#14701)

Browse source 
* remove 3d box shadow

* profile cards fixes

* little fix

* dark mode + listings modal

* dropdowns padding

* whoops
This commit is contained in:
ludwiczakpawel 2021-09-13 11:02:53 +02:00 • committed by GitHub
parent da709cf5c6
commit f2f2c34673
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 73 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -209,7 +209,7 @@ function buildArticleHTML(article) {
}">${filterXSS(article.user.name)}</a>
${
isArticle
? `<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"><button id="story-author-preview-trigger-${article.id}" aria-controls="story-author-preview-content-${article.id}" class="profile-preview-card__trigger fs-s crayons-btn crayons-btn--ghost p-1 -ml-1" aria-label="${article.user.name} profile details">${article.user.name}</button>${previewCardContent}</div>`
? `<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"><button id="story-author-preview-trigger-${article.id}" aria-controls="story-author-preview-content-${article.id}" class="profile-preview-card__trigger fs-s crayons-btn crayons-btn--ghost p-1 -ml-1 -my-2" aria-label="${article.user.name} profile details">${article.user.name}</button>${previewCardContent}</div>`
: ''
}
${forOrganization}

13
app/assets/stylesheets/components/autocomplete.scss
View file

@ -14,13 +14,12 @@
&[data-reach-popover] {
// Reach UI adds a width directly to this element as an inline style. !important is needed to make sure the size is constrained.
width: 250px !important;
@include generate-box(
$level: 1,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
border-radius: var(--radius);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
border: none;
}
}

13
app/assets/stylesheets/components/dropdowns.scss
View file

@ -1,17 +1,16 @@
@import '../config/import';
.crayons-dropdown {
@include generate-box(
$level: 2,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
position: absolute;
display: none; // initially hidden
padding: var(--su-4);
min-width: 250px;
z-index: var(--z-dropdown);
background: var(--card-bg);
color: var(--card-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
border-radius: var(--radius);
@media (min-width: $breakpoint-s) {
max-width: 360px;
@ -21,7 +20,7 @@
&.side-bar {
bottom: 100%;
font-size: var(--fs-base);
padding: var(--su-1);
padding: var(--su-2);
right: var(--su-1);
@media (min-width: $breakpoint-m) {
right: auto;

2
app/assets/stylesheets/components/forms.scss
View file

@ -17,7 +17,7 @@
&-focus {
background-color: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: 1px 1px 0 var(--form-border-focus);
box-shadow: 0 0 0 1px var(--form-border-focus);
}
&-disabled {

16
app/assets/stylesheets/components/modals.scss
View file

@ -35,7 +35,7 @@
pointer-events: none;
&__overlay {
background: var(--base-100);
background: rgba(0, 0, 0, 0.6);
opacity: 0.5;
position: absolute;
left: 0;
@ -59,22 +59,22 @@
max-height: 100%;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: auto;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--base-a10);
@media (min-width: $breakpoint-s) {
@include generate-box(
$level: 3,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
border-radius: var(--radius-large);
max-height: calc(100% - var(--su-6));
height: auto;
width: 90%;
}
&__header {
border-bottom: 2px solid var(--card-color);
border-bottom: 1px solid var(--base-a5);
display: flex;
align-items: center;
justify-content: space-between;

37
app/assets/stylesheets/components/notices.scss
View file

@ -2,46 +2,23 @@
.crayons-notice {
padding: var(--su-4);
@include generate-box(
$level: 1,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
border-radius: var(--radius);
&--danger {
@include generate-box(
$level: 1,
$bg: var(--accent-danger-a10),
$border: var(--accent-danger),
$color: var(--card-color)
);
background: var(--accent-danger-a10);
}
&--warning {
@include generate-box(
$level: 1,
$bg: var(--accent-warning-a10),
$border: var(--accent-warning),
$color: var(--card-color)
);
background: var(--accent-warning-a10);
}
&--success {
@include generate-box(
$level: 1,
$bg: var(--accent-success-a10),
$border: var(--accent-success),
$color: var(--card-color)
);
background: var(--accent-success-a10);
}
&--info {
@include generate-box(
$level: 1,
$bg: var(--accent-brand-a10),
$border: var(--accent-brand),
$color: var(--card-color)
);
background: var(--accent-brand-a10);
}
}

11
app/assets/stylesheets/components/snackbars.scss
View file

@ -19,12 +19,11 @@
}
&__item {
@include generate-box(
$level: 1,
$bg: var(--snackbar-bg),
$border: var(--snackbar-border),
$color: var(--snackbar-color)
);
border-radius: var(--radius);
background: var(--snackbar-bg);
color: var(--snackbar-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
display: none;
align-items: center;
justify-content: space-between;

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

@ -168,9 +168,9 @@
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
// Forms
--form-bg: var(--base-0);
--form-bg: var(--base-inverted);
--form-bg-focus: var(--base-inverted);
--form-border: var(--base-30);
--form-border: var(--base-20);
--form-border-hover: var(--base-40);
--form-border-focus: var(--accent-brand);
--form-placeholder-color: var(--base-60);
@ -185,7 +185,6 @@
// Snackbars
--snackbar-bg: var(--base-90);
--snackbar-border: var(--base-100);
--snackbar-color: var(--body-color-inverted);
// Indicators

27
app/assets/stylesheets/config/_import.scss vendored
View file

@ -205,30 +205,3 @@ $z-indexes: (
}
}
}
////////////////////////////////////////////////////////////////////////////////////
// generate-box() - generating classes for different style
//
// This mixin automates process of generating styles for different
// types of boxes used across Crayons.
//
// @param {integer} $level Visual elevation level: 0-4
// @param {color} $bg Background color
// @param {color} $border Border and shadow colors
// @param {color} $color Content color
@mixin generate-box(
$level: 1,
$bg: var(--card-bg),
$border: var(--base-100),
$color: var(--card-color)
) {
background: $bg;
border: 2px solid $border;
@if $level > 0 {
box-shadow: #{pow(2, $level) + px} #{pow(2, $level) + px} 0 $border;
}
color: $color;
border-radius: var(--radius);
}

3
app/assets/stylesheets/config/_variables.scss
View file

@ -33,7 +33,8 @@
// Border radius ///////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
--radius: 5px;
--radius: 0.375rem;
--radius-large: 0.75rem;
////////////////////////////////////////////////////////////////////////////////////
// Transitions /////////////////////////////////////////////////////////////////////

10
app/assets/stylesheets/ltags/UserSubscriptionTag.scss
View file

@ -2,12 +2,10 @@
.ltag__user-subscription-tag {
&__container {
@include generate-box(
$level: 1,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
border-radius: var(--radius);
border: 1px solid var(--card-color);
box-sizing: border-box;
display: flex;

7
app/assets/stylesheets/signin.scss
View file

@ -8,13 +8,6 @@
padding: var(--su-6);
margin: var(--su-3);
@include generate-box(
$level: 1,
$bg: #f5f6fe,
$border: var(--accent-brand),
$color: var(--card-color)
);
@media (min-width: $breakpoint-s) {
padding: var(--su-7);
margin: 0 0 var(--su-3) 0;

10
app/assets/stylesheets/signup-modal.scss
View file

@ -8,13 +8,9 @@
margin-right: var(--su-4);
height: auto;
width: auto;
@include generate-box(
$level: 2,
$bg: var(--base-inverted),
$border: var(--base),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
border-radius: var(--radius);
@media (min-width: $breakpoint-s) {
margin: inherit;

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

@ -178,7 +178,6 @@
// Snackbars
--snackbar-bg: var(--base-10);
--snackbar-border: var(--accent-brand);
--snackbar-color: var(--accent-brand);
// Indicators

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

@ -176,7 +176,6 @@
// Snackbars
--snackbar-bg: var(--base-90);
--snackbar-border: var(--base-100);
--snackbar-color: var(--body-color-inverted);
// Indicators

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

@ -176,7 +176,6 @@
// Snackbars
--snackbar-bg: var(--base-10);
--snackbar-border: var(--base-20);
--snackbar-color: var(--card-color);
// Indicators

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

@ -176,7 +176,6 @@
// Snackbars
--snackbar-bg: var(--base-90);
--snackbar-border: var(--base-100);
--snackbar-color: var(--body-color-inverted);
// Indicators

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

@ -233,12 +233,11 @@
.crayons-article-form {
&__tagsoptions {
@include generate-box(
$level: 2,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: var(--radius);
position: absolute;
left: 0;

2
app/assets/stylesheets/views/comments.scss
View file

@ -22,7 +22,7 @@
&:focus-within {
background-color: var(--form-bg-focus);
border-color: var(--form-border-focus);
box-shadow: 1px 1px 0 var(--form-border-focus);
box-shadow: 0 0 0 1px var(--form-border-focus);
}
}

11
app/assets/stylesheets/views/listings.scss
View file

@ -46,12 +46,11 @@
.listingform {
&__tagsoptions {
@include generate-box(
$level: 2,
$bg: var(--card-bg),
$border: var(--card-color),
$color: var(--card-color)
);
background: var(--card-bg);
color: var(--card-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: var(--radius);
position: absolute;
left: 0;

11
app/assets/stylesheets/views/signin.scss
View file

@ -8,13 +8,10 @@
grid-gap: var(--su-6);
padding: var(--su-6);
margin: var(--su-3);
@include generate-box(
$level: 1,
$bg: #f5f6fe,
$border: var(--accent-brand),
$color: var(--card-color)
);
background: var(--accent-brand-a10);
color: var(--card-color);
border-radius: var(--radius);
border: 1px solid var(--accent-brand-a10);
@media (min-width: $breakpoint-s) {
padding: var(--su-7);

1
app/assets/stylesheets/views/signup-modal.scss
View file

@ -49,7 +49,6 @@
}
&__footer {
border-top: 2px solid var(--base-100);
padding: var(--su-2) var(--su-4) 0 var(--su-4);
margin: 0 calc(-1 * var(--modal-body-padding)) 0
calc(-1 * var(--modal-body-padding));

4
app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
View file

@ -70,7 +70,7 @@ Object {
<button
aria-controls="story-author-preview-content-62407"
aria-label="Stella Macejkovic profile details"
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1 -my-2"
id="story-author-preview-trigger-62407"
>
Stella Macejkovic
@ -318,7 +318,7 @@ Object {
<button
aria-controls="story-author-preview-content-62407"
aria-label="Stella Macejkovic profile details"
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1 -my-2"
id="story-author-preview-trigger-62407"
>
Stella Macejkovic

2
app/javascript/profilePreviewCards/MinimalProfilePreviewCard.jsx
View file

@ -12,7 +12,7 @@ export const MinimalProfilePreviewCard = ({
<button
id={triggerId}
aria-controls={contentId}
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1"
class="profile-preview-card__trigger fs-s p-1 crayons-btn crayons-btn--ghost -ml-1 -my-2"
aria-label={`${name} profile details`}
>
{name}

2
app/views/articles/_single_story.html.erb
View file

@ -39,7 +39,7 @@
<%= story.cached_user.name %>
</a>
<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block">
<button id="story-author-preview-trigger-<%= story.id %>" aria-controls="story-author-preview-content-<%= story.id %>" class="profile-preview-card__trigger fs-s p-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="<%= story.cached_user.name %> profile details">
<button id="story-author-preview-trigger-<%= story.id %>" aria-controls="story-author-preview-content-<%= story.id %>" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="<%= story.cached_user.name %> profile details">
<%= story.cached_user.name %>
</button>
<div

18
app/views/layouts/_nav_menu.html.erb
View file

@ -1,6 +1,6 @@
<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto p-0 crayons-header__menu__dropdown inline-block">
<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto p-0 crayons-header__menu__dropdown inline-block m:-mr-2 top-100 -mt-1">
<ul class="p-0" id="crayons-header__menu__dropdown__list">
<li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1 mb-1">
<li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-2 mb-2">
<a id="first-nav-link" class="crayons-link crayons-link--block">
<div>
<span class="fw-medium block">...</span>
@ -9,18 +9,18 @@
</a>
</li>
<li class="px-1 js-header-menu-admin-link hidden">
<li class="px-2 js-header-menu-admin-link hidden">
<a href="<%= admin_path %>" class="crayons-link crayons-link--block" data-no-instant>Admin</a>
</li>
<li class="px-1"><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
<li class="px-1"><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
<li class="px-1"><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
<li class="px-1"><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
<li class="border-0 border-b-1 border-solid border-base-20 px-1 pb-1">
<li class="px-2"><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
<li class="px-2"><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
<li class="px-2"><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
<li class="px-2"><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
<li class="border-0 border-b-1 border-solid border-base-20 px-2 pb-1">
<a href="<%= user_settings_path %>" class="crayons-link crayons-link--block" id="second-last-nav-link">Settings</a>
</li>
<li class="px-1 py-1">
<li class="px-2 py-2">
<a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
</li>
</ul>