Skip to content

Commit

Permalink
Consolidate some box-shadow rules, colors, variables
Browse files Browse the repository at this point in the history
Fixes #1537
  • Loading branch information
lyzadanger committed Sep 15, 2020
1 parent a8c4963 commit 06fe03c
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 5 deletions.
8 changes: 6 additions & 2 deletions src/styles/annotator/annotator.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "sass:meta";
@use "sass:color";
@use '../variables' as var;
@use '../mixins/focus';
@use '../mixins/reset';
Expand All @@ -13,6 +14,7 @@
@use './highlights';

$sidebar-collapse-transition-time: 150ms;
$shadow--sidebar: 0px 1px 4px color.scale(var.$color-shadow, $alpha: -50%);

// Sidebar
.annotator-frame {
Expand Down Expand Up @@ -115,8 +117,9 @@ $sidebar-collapse-transition-time: 150ms;
color: var.$grey-semi;
}

/** Visible with clean theme */
.annotator-frame-button--sidebar_close {
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
box-shadow: $shadow--sidebar;
border-radius: 0px;
border-style: solid none solid solid;
width: 27px;
Expand All @@ -126,8 +129,9 @@ $sidebar-collapse-transition-time: 150ms;
}
}

/** Visible with clean theme */
.annotator-frame--drop-shadow-enabled {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
box-shadow: $shadow--sidebar;
}

.annotator-placeholder {
Expand Down
2 changes: 1 addition & 1 deletion src/styles/mixins/forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

@mixin focus-outline {
border-color: var.$color-focus-outline;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset,
box-shadow: 0px 1px 2px var.$color-shadow--base inset,
0px 0px 5px var.$color-focus-shadow;
}

Expand Down
4 changes: 2 additions & 2 deletions src/styles/mixins/utils.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,9 @@
}

@mixin shadow {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px var.$color-shadow--base;
}

@mixin shadow--active {
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 2px 3px 0px var.$color-shadow--active;
}
5 changes: 5 additions & 0 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ $color-error: #d93c3f;
$color-brand: #bd1c2b;
$color-quote: #58cef4;

$color-shadow: #000000;
$color-shadow--base: color.scale($color-shadow, $alpha: -90%);
$color-shadow--active: color.scale($color-shadow, $alpha: -85%);
$color-shadow--sidebar: color.scale($color-shadow, $alpha: -50%);

$color-focus-outline: #51a7e8;
$color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);

Expand Down

0 comments on commit 06fe03c

Please sign in to comment.