IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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