github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-30 07:53:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Implementing a box-shadow system, cleaning up existing shadows

Browse Source
This commit is contained in:
Kris 2018-02-20 12:18:20 -05:00
parent ed422285f0
commit 677e126fbf
33 changed files with 69 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -205,7 +205,7 @@ $mobile-breakpoint: 700px;
width: 460px; width: 460px;
right: 0; right: 0;
z-index: z("dropdown"); z-index: z("dropdown");
box-shadow: 0 2px 6px rgba(0,0,0, .8); box-shadow: shadow("card");
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $secondary;
padding: 12px 12px 5px; padding: 12px 12px 5px;
@ -519,7 +519,6 @@ $mobile-breakpoint: 700px;
background-color: $secondary; background-color: $secondary;
border: 1px solid $primary-low; border: 1px solid $primary-low;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
li.select2-search-choice { li.select2-search-choice {

2
app/assets/stylesheets/common/base/compose.scss
View File

@ -19,7 +19,7 @@
z-index: z("composer","content"); z-index: z("composer","content");
transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease; transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease;
background-color: $secondary; background-color: $secondary;
box-shadow: 0 -1px 40px rgba(0,0,0, .12); box-shadow: shadow("composer");
.reply-area { .reply-area {
display: flex; display: flex;

2
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -6,7 +6,7 @@ body.crawler {
z-index: z("max"); z-index: z("max");
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25); box-shadow: shadow("header");
} }
div.topic-list div[itemprop='itemListElement'] { div.topic-list div[itemprop='itemListElement'] {
padding: 10px 0; padding: 10px 0;

6
app/assets/stylesheets/common/base/discourse.scss
View File

@ -165,7 +165,7 @@ textarea {
&:focus:required:invalid:focus { &:focus:required:invalid:focus {
border-color: $danger; border-color: $danger;
box-shadow: 0 0 6px $danger; box-shadow: shadow("focus-danger");
} }
} }
@ -196,7 +196,7 @@ input {
border-radius: 0; border-radius: 0;
&:focus { &:focus {
border-color: $tertiary; border-color: $tertiary;
box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
outline: 0; outline: 0;
} }
} }
@ -208,7 +208,7 @@ textarea {
border: 1px solid $primary-medium; border: 1px solid $primary-medium;
&:focus { &:focus {
border-color: $tertiary; border-color: $tertiary;
box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
outline: 0; outline: 0;
} }
} }

2
app/assets/stylesheets/common/base/emoji.scss
View File

@ -5,14 +5,12 @@ img.emoji {
} }
.emoji-picker { .emoji-picker {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background-clip: padding-box; background-clip: padding-box;
z-index: z("modal","content"); z-index: z("modal","content");
position: fixed; position: fixed;
display: none; display: none;
flex-direction: row; flex-direction: row;
height: 300px; height: 300px;
border-radius: 3px;
color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%)); color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
background-color: $secondary; background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);

2
app/assets/stylesheets/common/base/header.scss
View File

@ -4,7 +4,7 @@
top: 0; top: 0;
z-index: z("header"); z-index: z("header");
background-color: $header_background; background-color: $header_background;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25); box-shadow: shadow("header");
.docked & { .docked & {
position: fixed; position: fixed;

3
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -1,6 +1,7 @@
.menu-panel.slide-in { .menu-panel.slide-in {
position: fixed; position: fixed;
right: 0; right: 0;
box-shadow: shadow("header");
.panel-body { .panel-body {
position: absolute; position: absolute;
@ -19,7 +20,7 @@
.menu-panel { .menu-panel {
border: 1px solid $primary-low; border: 1px solid $primary-low;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25); box-shadow: shadow("menu-panel");
background-color: $secondary; background-color: $secondary;
z-index: z("header"); z-index: z("header");
padding: 0.5em; padding: 0.5em;

19
app/assets/stylesheets/common/base/modal.scss
View File

@ -17,7 +17,7 @@
overflow: auto; overflow: auto;
height: auto; height: auto;
background-color: $secondary; background-color: $secondary;
box-shadow: 0 2px 2px rgba(0,0,0, .25); box-shadow: shadow("card");
background-clip: padding-box; background-clip: padding-box;
} }
@ -45,8 +45,7 @@
.modal-backdrop, .modal-backdrop,
.modal-backdrop.fade.in { .modal-backdrop.fade.in {
-webkit-animation: fade .3s; animation: fade .3s;
animation: fade .3s;
opacity: .9; opacity: .9;
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
@ -57,22 +56,12 @@
to { opacity: .9 } to { opacity: .9 }
} }
@-webkit-keyframes fade {
from { opacity: 0 }
to { opacity: .9 }
}
// slide in // slide in
@keyframes slidein { @keyframes slidein {
from { transform: translateY(-20%); } from { transform: translateY(-20%); }
to { transform: translateY(0); } to { transform: translateY(0); }
} }
@-webkit-keyframes slidein {
from { -webkit-transform: translateY(-20%); }
to { -webkit-transform: translateY(0); }
}
.modal-outer-container { .modal-outer-container {
display:table; display:table;
table-layout: fixed; table-layout: fixed;
@ -85,6 +74,7 @@
margin: 0 auto; margin: 0 auto;
background-color: $secondary; background-color: $secondary;
background-clip: padding-box; background-clip: padding-box;
box-shadow: shadow("modal");
.select-kit { .select-kit {
width: 220px; width: 220px;
@ -93,8 +83,7 @@
.create-account.in .modal-inner-container, .create-account.in .modal-inner-container,
.login-modal.in .modal-inner-container { .login-modal.in .modal-inner-container {
-webkit-animation: slidein .3s; animation: slidein .3s;
animation: slidein .3s;
} }

2
app/assets/stylesheets/common/base/share_link.scss
View File

@ -4,7 +4,7 @@
position: absolute; position: absolute;
left: 20px; left: 20px;
z-index: z("dropdown"); z-index: z("dropdown");
box-shadow: 0 1px 5px rgba(0,0,0, .4); box-shadow: shadow("card");
background-color: $secondary; background-color: $secondary;
padding: 6px 10px 10px 10px; padding: 6px 10px 10px 10px;
width: 300px; width: 300px;

1
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -14,6 +14,7 @@
padding: 10px; padding: 10px;
border: 1px solid $primary-low; border: 1px solid $primary-low;
z-index: z("dropdown"); z-index: z("dropdown");
box-shadow: shadow("card");
ul { ul {
list-style: none; list-style: none;

6
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -398,7 +398,11 @@ kbd
background-color: $secondary; background-color: $secondary;
border: 1px solid $primary-low; border: 1px solid $primary-low;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0, .8); box-shadow: shadow("kbd");
background: dark-light-choose(#fafafa, #333);
border: 1px solid dark-light-choose(#ccc, #555);
border-bottom: medium none dark-light-choose(#fff, #000);
color: $primary; color: $primary;
display: inline-block; display: inline-block;
font-size: $font-down-1; font-size: $font-down-1;

1
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -124,7 +124,6 @@
background-color: $primary-low; background-color: $primary-low;
margin-right: 5px; margin-right: 5px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 1px 1px 3px rgba(0.0, 0.0, 0.0, 0.2);
.check-display { .check-display {
position: absolute; position: absolute;

4
app/assets/stylesheets/common/components/badges.scss
View File

@ -211,11 +211,9 @@
.badge-group { .badge-group {
@extend %badge; @extend %badge;
padding: 4px 5px 2px 5px; padding: 2px 5px;
color: $primary; color: $primary;
text-shadow: 0 1px 0 rgba($primary, 0.1);
background-color: $primary-low; background-color: $primary-low;
border-color: $primary-low; border-color: $primary-low;
font-size: $font-down-1; font-size: $font-down-1;
box-shadow: inset 0 1px 0 rgba(0,0,0, 0.22);
} }

1
app/assets/stylesheets/common/components/banner.scss
View File

@ -5,7 +5,6 @@
#banner { #banner {
padding: 10px; padding: 10px;
background: $tertiary-low; background: $tertiary-low;
box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
color: $primary; color: $primary;
z-index: z("base") + 1; z-index: z("base") + 1;
overflow: auto; overflow: auto;

2
app/assets/stylesheets/common/components/buttons.scss
View File

@ -119,8 +119,6 @@
.btn-social { .btn-social {
color: #fff; color: #fff;
text-shadow: 0 1px 0 rgba($primary, 0.2);
box-shadow: inset 0 1px 0 rgba(0,0,0, 0.1);
&:hover { &:hover {
color: #fff; color: #fff;
} }

2
app/assets/stylesheets/common/components/keyboard_shortcuts.scss
View File

@ -33,7 +33,7 @@
b { b {
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 0 rgba(0,0,0,0.2),0 0 0 1px dark-light-choose(#fff,#000) inset; box-shadow: shadow("kbd");
background: dark-light-choose(#fafafa, #333); background: dark-light-choose(#fafafa, #333);
border: 1px solid dark-light-choose(#ccc, #555); border: 1px solid dark-light-choose(#ccc, #555);
border-bottom: medium none dark-light-choose(#fff, #000); border-bottom: medium none dark-light-choose(#fff, #000);

20
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -103,6 +103,26 @@ $z-layers: (
@return map-deep-get($z-layers, $layers...); @return map-deep-get($z-layers, $layers...);
} }
// Box-shadow
// --------------------------------------------------
$box-shadow: (
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
"menu-panel": 0 6px 14px rgba(0, 0, 0, 0.15),
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
"kbd": (0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px dark-light-choose(#fff, #000) inset),
"focus": 0 0 6px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger
);
@function shadow($key) {
@return map-get($box-shadow, $key);
}
// Color utilities // Color utilities
// -------------------------------------------------- // --------------------------------------------------

2
app/assets/stylesheets/common/input_tip.scss
View File

@ -9,7 +9,7 @@
&.bad { &.bad {
background: $danger-medium; background: $danger-medium;
color: white; color: white;
box-shadow: 1px 1px 5px rgba(0,0,0, .7); box-shadow: shadow("dropdown");
} }
&.hide, &.good { &.hide, &.good {
display: none; display: none;

6
app/assets/stylesheets/common/select-kit/category-drop.scss
View File

@ -49,8 +49,7 @@
&.is-expanded .category-drop-header { &.is-expanded .category-drop-header {
border: 1px solid $tertiary; border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
box-shadow: $tertiary 0 0 6px 0px;
} }
.select-kit-collection { .select-kit-collection {
@ -82,8 +81,7 @@
width: auto; width: auto;
min-width: 300px; min-width: 300px;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4); box-shadow: shadow("dropdown");
box-shadow: 0 2px 2px rgba(0,0,0,0.4);
} }
.select-kit-row { .select-kit-row {

12
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -32,8 +32,7 @@
&.is-focused { &.is-focused {
border: 1px solid $tertiary; border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
box-shadow: $tertiary 0 0 6px 0px;
} }
} }
@ -47,8 +46,7 @@
&.is-highlighted { &.is-highlighted {
.select-kit-header { .select-kit-header {
border: 1px solid $tertiary; border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
box-shadow: $tertiary 0 0 6px 0px;
} }
} }
@ -56,14 +54,12 @@
.select-kit-wrapper { .select-kit-wrapper {
display: block; display: block;
border: 1px solid $tertiary; border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
box-shadow: $tertiary 0 0 6px 0px;
} }
.select-kit-header { .select-kit-header {
border-color: transparent; border-color: transparent;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
.select-kit-body { .select-kit-body {

3
app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
View File

@ -16,8 +16,7 @@
.select-kit-body { .select-kit-body {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4); box-shadow: shadow("dropdown");
box-shadow: 0 2px 2px rgba(0,0,0,0.4);
max-width: 300px; max-width: 300px;
width: 300px; width: 300px;
} }

2
app/assets/stylesheets/common/select-kit/legacy-combo-box.scss
View File

@ -79,7 +79,7 @@
} }
.select2-container-active { .select2-container-active {
box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
} }
.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit { .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit {

6
app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
View File

@ -7,8 +7,7 @@
&.is-expanded { &.is-expanded {
.select-kit-header { .select-kit-header {
border: 1px solid $tertiary; border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
box-shadow: $tertiary 0 0 6px 0px;
} }
} }
@ -21,7 +20,8 @@
.select-kit-body { .select-kit-body {
max-width: 500px; max-width: 500px;
width: 500px; width: 500px;
border: 1px solid $primary-low; border: 1px solid $tertiary;
box-shadow: shadow("focus")
} }
.select-kit-filter { .select-kit-filter {

7
app/assets/stylesheets/common/select-kit/multi-select.scss
View File

@ -24,7 +24,7 @@
border: 1px solid $primary-medium; border: 1px solid $primary-medium;
&.is-focused { &.is-focused {
box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
border-radius: 0; border-radius: 0;
} }
} }
@ -40,7 +40,7 @@
.multi-select-header { .multi-select-header {
border-radius: 0; border-radius: 0;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
} }
} }
@ -48,7 +48,7 @@
.select-kit-wrapper { .select-kit-wrapper {
display: block; display: block;
border: 1px solid $tertiary; border: 1px solid $tertiary;
box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
border-radius: 0; border-radius: 0;
} }
@ -101,7 +101,6 @@
margin: 0; margin: 0;
outline: 0; outline: 0;
border: 0; border: 0;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
height: 21px; height: 21px;

6
app/assets/stylesheets/common/select-kit/tag-drop.scss
View File

@ -19,8 +19,7 @@
&.is-expanded .tag-drop-header { &.is-expanded .tag-drop-header {
border: 1px solid $tertiary; border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px; box-shadow: shadow("focus");
box-shadow: $tertiary 0 0 6px 0px;
} }
.select-kit-collection { .select-kit-collection {
@ -50,8 +49,7 @@
width: auto; width: auto;
min-width: 150px; min-width: 150px;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4); box-shadow: shadow("dropdown");
box-shadow: 0 2px 2px rgba(0,0,0,0.4);
} }
.select-kit-row { .select-kit-row {

2
app/assets/stylesheets/common/topic-entrance.scss
View File

@ -3,7 +3,7 @@
border: 1px solid $primary-low; border: 1px solid $primary-low;
padding: 5px; padding: 5px;
background: $secondary; background: $secondary;
box-shadow: 0 0 2px rgba(0,0,0, .2); box-shadow: shadow("card");
z-index: z("dropdown"); z-index: z("dropdown");
position: absolute; position: absolute;

2
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -52,7 +52,7 @@
left: 0; left: 0;
right: 0; right: 0;
border-top: 1px solid dark-light-choose($primary-low, $secondary-low); border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25); box-shadow: shadow("composer");
padding-top: 20px; padding-top: 20px;
z-index: z("fullscreen"); z-index: z("fullscreen");
@media screen and (max-height: 425px) { @media screen and (max-height: 425px) {

2
app/assets/stylesheets/desktop/compose.scss
View File

@ -79,7 +79,7 @@
overflow-y: auto; overflow-y: auto;
z-index: z("composer","popover"); z-index: z("composer","popover");
padding: 10px 10px 35px 10px; padding: 10px 10px 35px 10px;
box-shadow: 3px 3px 3px rgba(0,0,0, 0.34); box-shadow: shadow("card");
background: $highlight-medium; background: $highlight-medium;
&.urgent { &.urgent {

4
app/assets/stylesheets/desktop/discourse.scss
View File

@ -244,7 +244,7 @@ input {
&:focus { &:focus {
border-color: scale-color($danger, $lightness: -30%); border-color: scale-color($danger, $lightness: -30%);
box-shadow: 0 0 6px $danger; box-shadow: shadow("focus-danger");
} }
} }
@ -287,7 +287,7 @@ input {
&:focus { &:focus {
border-color: $success; border-color: $success;
box-shadow: 0 0 6px $success; box-shadow: shadow("focus");
} }
} }

5
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -663,7 +663,7 @@ $topic-avatar-width: 45px;
list-style: none; list-style: none;
background-color: $secondary; background-color: $secondary;
border: 1px solid $primary-low; border: 1px solid $primary-low;
box-shadow: 0 1px 5px rgba(0,0,0, .4); box-shadow: shadow("dropdown");
background-clip: padding-box; background-clip: padding-box;
span { span {
font-size: $font-down-1; font-size: $font-down-1;
@ -778,13 +778,12 @@ $topic-avatar-width: 45px;
} }
&:active { &:active {
@include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%)); @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
box-shadow: inset 0 1px 3px rgba(0,0,0, 0.2);
color: $secondary; color: $secondary;
} }
&[disabled] { &[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($tertiary, darken($tertiary, 20%)); @include linear-gradient($tertiary, darken($tertiary, 20%));
@include box-shadow((inset 0 1px 0 rgba(0,0,0, 0.33), inset 0 -1px 2px rgba($primary, 0.2))); @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.33));
} }
} }
} }

2
app/assets/stylesheets/desktop/user-card.scss
View File

@ -10,7 +10,7 @@ $user_card_background: $secondary;
left: -9999px; left: -9999px;
top: -9999px; top: -9999px;
z-index: z("usercard"); z-index: z("usercard");
box-shadow: 1px 2px 6px rgba(0,0,0, .25); box-shadow: shadow("card");
margin-top: -2px; margin-top: -2px;
color: $user_card_primary; color: $user_card_primary;
background: $user_card_background center center; background: $user_card_background center center;

2
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -345,7 +345,7 @@ tr.category-topic-link {
background-color: $secondary; background-color: $secondary;
border: 1px solid dark-light-choose(rgba(0, 0, 0, 0.2), $primary); border: 1px solid dark-light-choose(rgba(0, 0, 0, 0.2), $primary);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: shadow("dropdown");
background-clip: padding-box; background-clip: padding-box;
margin: 1px 0 20px; margin: 1px 0 20px;
.title {font-weight: bold; display: block;} .title {font-weight: bold; display: block;}

4
app/assets/stylesheets/mobile/topic.scss
View File

@ -52,10 +52,6 @@
} }
} }
.docked #topic-progress {
box-shadow: 0 0 3px rbga(0,0,0, .5);
}
#topic-progress-wrapper { #topic-progress-wrapper {
position: fixed; position: fixed;
width: 0; width: 0;