mirror of
https://github.com/ankitects/anki.git
synced 2025-11-19 11:07:12 -05:00
68fa661b53
* Move up MathjaxOverlay to be initialized only once
* Move ImageOverlay to NoteEditor root
* Move Symbols Overlay to NoteEditor root
* Refactor image overlay to not require second mutation observer
* Use elevation + overflow:hidden in Editorfield
* Make it possible to show input next to each other again
* Set handle background color to code bg
* Make Collapsible unmount the component
* Simplify how decorated elements are mounted
* Set RichTextInput background to frame-bg again
* Strip out FocusTrap code
* Revert "Make Collapsible unmount the component"
This reverts commit 52722065ea.
* Allow clicking on label container to unfocus field
* Fix mathjax overlay resetting too its api too soon
* Allow scrolling on overlays
* Set focus-border border-color in focused field
* Fix background color of fields
* Add back grid-gap
removed it during merge to see if margin-top would behave any differently - which is not the case.
* Fix double border issue within Collapsible.svelte
* Format
* Edit appearance of focused fields a bit
* Remove unused properties
* Include elevation in button_mixins_lib
* Give label-container a background color
Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
84 lines
2 KiB
SCSS
84 lines
2 KiB
SCSS
// Heavily inspired by https://github.com/material-components/material-components-web/tree/master/packages/mdc-elevation
|
|
@use "sass:map";
|
|
@use "sass:list";
|
|
|
|
/**
|
|
* The maps correspond to dp levels:
|
|
* 0: 0dp
|
|
* 1: 1dp
|
|
* 2: 2dp
|
|
* 3: 3dp
|
|
* 4: 4dp
|
|
* 5: 6dp
|
|
* 6: 8dp
|
|
* 7: 12dp
|
|
* 8: 16dp
|
|
* 9: 24dp
|
|
*/
|
|
|
|
$umbra-map: (
|
|
0: "0px 0px 0px 0px",
|
|
1: "0px 2px 1px -1px",
|
|
2: "0px 3px 1px -2px",
|
|
3: "0px 3px 3px -2px",
|
|
4: "0px 2px 4px -1px",
|
|
5: "0px 3px 5px -1px",
|
|
6: "0px 5px 5px -3px",
|
|
7: "0px 7px 8px -4px",
|
|
8: "0px 8px 10px -5px",
|
|
9: "0px 11px 15px -7px",
|
|
);
|
|
|
|
$penumbra-map: (
|
|
0: "0px 0px 0px 0px",
|
|
1: "0px 1px 1px 0px",
|
|
2: "0px 2px 2px 0px",
|
|
3: "0px 3px 4px 0px",
|
|
4: "0px 4px 5px 0px",
|
|
5: "0px 6px 10px 0px",
|
|
6: "0px 8px 10px 1px",
|
|
7: "0px 12px 17px 2px",
|
|
8: "0px 16px 24px 2px",
|
|
9: "0px 24px 38px 3px",
|
|
);
|
|
|
|
$ambient-map: (
|
|
0: "0px 0px 0px 0px",
|
|
1: "0px 1px 3px 0px",
|
|
2: "0px 1px 5px 0px",
|
|
3: "0px 1px 8px 0px",
|
|
4: "0px 1px 10px 0px",
|
|
5: "0px 1px 18px 0px",
|
|
6: "0px 3px 14px 2px",
|
|
7: "0px 5px 22px 4px",
|
|
8: "0px 6px 30px 5px",
|
|
9: "0px 9px 46px 8px",
|
|
);
|
|
|
|
$umbra-opacity: 0.2;
|
|
$penumbra-opacity: 0.14;
|
|
$ambient-opacity: 0.12;
|
|
|
|
@function box-shadow($level, $opacity-boost, $color) {
|
|
$umbra-z-value: map.get($umbra-map, $level);
|
|
$penumbra-z-value: map.get($penumbra-map, $level);
|
|
$ambient-z-value: map.get($ambient-map, $level);
|
|
|
|
$umbra-color: rgba($color, $umbra-opacity + $opacity-boost);
|
|
$penumbra-color: rgba($color, $penumbra-opacity + $opacity-boost);
|
|
$ambient-color: rgba($color, $ambient-opacity + $opacity-boost);
|
|
|
|
@return (
|
|
#{"#{$umbra-z-value} #{$umbra-color}"},
|
|
#{"#{$penumbra-z-value} #{$penumbra-color}"},
|
|
#{$ambient-z-value} $ambient-color
|
|
);
|
|
}
|
|
|
|
@mixin elevation($level, $opacity-boost: 0, $color: black) {
|
|
box-shadow: box-shadow($level, $opacity-boost, $color);
|
|
}
|
|
|
|
@mixin elevation-transition() {
|
|
transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
|
|
}
|