Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-12 21:10:47 +08:00
Code Packages Activity Actions 7

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
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;
right: 0;
z-index: z("dropdown");
box-shadow: 0 2px 6px rgba(0,0,0, .8);
box-shadow: shadow("card");
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px;
@ -519,7 +519,6 @@ $mobile-breakpoint: 700px;
background-color: $secondary;
border: 1px solid $primary-low;
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;

li.select2-search-choice {

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

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

.reply-area {
display: flex;

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

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

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

@ -165,7 +165,7 @@ textarea {

&:focus:required:invalid:focus {
border-color: $danger;
box-shadow: 0 0 6px $danger;
box-shadow: shadow("focus-danger");
}
}

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

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

@ -5,14 +5,12 @@ img.emoji {
}

.emoji-picker {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background-clip: padding-box;
z-index: z("modal","content");
position: fixed;
display: none;
flex-direction: row;
height: 300px;
border-radius: 3px;
color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
background-color: $secondary;
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;
z-index: z("header");
background-color: $header_background;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
box-shadow: shadow("header");

.docked & {
position: fixed;

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

@ -1,6 +1,7 @@
.menu-panel.slide-in {
position: fixed;
right: 0;
box-shadow: shadow("header");

.panel-body {
position: absolute;
@ -19,7 +20,7 @@

.menu-panel {
border: 1px solid $primary-low;
box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
box-shadow: shadow("menu-panel");
background-color: $secondary;
z-index: z("header");
padding: 0.5em;

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

@ -17,7 +17,7 @@
overflow: auto;
height: auto;
background-color: $secondary;
box-shadow: 0 2px 2px rgba(0,0,0, .25);
box-shadow: shadow("card");
background-clip: padding-box;
}

@ -45,8 +45,7 @@

.modal-backdrop,
.modal-backdrop.fade.in {
-webkit-animation: fade .3s;
animation: fade .3s;
animation: fade .3s;
opacity: .9;
filter: alpha(opacity=90);
}
@ -57,22 +56,12 @@
to { opacity: .9 }
}

@-webkit-keyframes fade {
from { opacity: 0 }
to { opacity: .9 }
}

// slide in
@keyframes slidein {
from { transform: translateY(-20%); }
to { transform: translateY(0); }
}

@-webkit-keyframes slidein {
from { -webkit-transform: translateY(-20%); }
to { -webkit-transform: translateY(0); }
}

.modal-outer-container {
display:table;
table-layout: fixed;
@ -85,6 +74,7 @@
margin: 0 auto;
background-color: $secondary;
background-clip: padding-box;
box-shadow: shadow("modal");

.select-kit {
width: 220px;
@ -93,8 +83,7 @@

.create-account.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;
left: 20px;
z-index: z("dropdown");
box-shadow: 0 1px 5px rgba(0,0,0, .4);
box-shadow: shadow("card");
background-color: $secondary;
padding: 6px 10px 10px 10px;
width: 300px;

3
app/assets/stylesheets/common/base/topic-admin-menu.scss
View file

@ -12,8 +12,9 @@
background-color: $secondary;
width: 205px;
padding: 10px;
border: 1px solid $primary-low;
border: 1px solid $primary-low;
z-index: z("dropdown");
box-shadow: shadow("card");

ul {
list-style: none;

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

@ -398,7 +398,11 @@ kbd
background-color: $secondary;
border: 1px solid $primary-low;
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;
display: inline-block;
font-size: $font-down-1;

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

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

.check-display {
position: absolute;

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

@ -211,11 +211,9 @@

.badge-group {
@extend %badge;
padding: 4px 5px 2px 5px;
padding: 2px 5px;
color: $primary;
text-shadow: 0 1px 0 rgba($primary, 0.1);
background-color: $primary-low;
border-color: $primary-low;
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 {
padding: 10px;
background: $tertiary-low;
box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
color: $primary;
z-index: z("base") + 1;
overflow: auto;

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

@ -119,8 +119,6 @@

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

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

@ -33,7 +33,7 @@
b {
padding: 2px 6px;
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);
border: 1px solid dark-light-choose(#ccc, #555);
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...);
}


// 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
// --------------------------------------------------


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

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

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

@ -49,8 +49,7 @@

&.is-expanded .category-drop-header {
border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}

.select-kit-collection {
@ -82,8 +81,7 @@
width: auto;
min-width: 300px;
border-radius: 0;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
box-shadow: 0 2px 2px rgba(0,0,0,0.4);
box-shadow: shadow("dropdown");
}

.select-kit-row {

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

@ -32,8 +32,7 @@

&.is-focused {
border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}
}

@ -47,8 +46,7 @@
&.is-highlighted {
.select-kit-header {
border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}
}

@ -56,14 +54,12 @@
.select-kit-wrapper {
display: block;
border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}

.select-kit-header {
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
box-shadow: none;
}

.select-kit-body {

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

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

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

@ -79,7 +79,7 @@
}

.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 {

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

@ -7,8 +7,7 @@
&.is-expanded {
.select-kit-header {
border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}
}

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

.select-kit-filter {

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

@ -24,7 +24,7 @@
border: 1px solid $primary-medium;

&.is-focused {
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
border-radius: 0;
}
}
@ -40,7 +40,7 @@
.multi-select-header {
border-radius: 0;
border-bottom: 1px solid transparent;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}
}

@ -48,7 +48,7 @@
.select-kit-wrapper {
display: block;
border: 1px solid $tertiary;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
border-radius: 0;
}

@ -101,7 +101,6 @@
margin: 0;
outline: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
height: 21px;

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

@ -19,8 +19,7 @@

&.is-expanded .tag-drop-header {
border: 1px solid $tertiary;
-webkit-box-shadow: $tertiary 0 0 6px 0px;
box-shadow: $tertiary 0 0 6px 0px;
box-shadow: shadow("focus");
}

.select-kit-collection {
@ -50,8 +49,7 @@
width: auto;
min-width: 150px;
border-radius: 0;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
box-shadow: 0 2px 2px rgba(0,0,0,0.4);
box-shadow: shadow("dropdown");
}

.select-kit-row {

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

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

position: absolute;

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

@ -52,7 +52,7 @@
left: 0;
right: 0;
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;
z-index: z("fullscreen");
@media screen and (max-height: 425px) {