88217c5e7d
* Implement a first version of WithFloating and Portal * Add outside slot for Portal * Execute computePosition from WithFloating * Set up a first example of new WithFloating with the Latex menu * Use autoUpdate in WithFloating * Create sveltelib/position * Add event-store * Use event-store in close-on-click * Implement subscribeToUpdates * Introduce sass/elevation * Split close-on-click to closing-click and subscribe-trigger * Have closing-* stores return a symbol - This way they act more of an EventEmitter than a store * Allow passing show store * Remove styling on float on updatePosition removal * Implement a nice border for dropdowns * Apply different border and box-shadow to Popover in dark/light theme * Fix Ctrl+Shift+T not working * Satisfy formatters and tests * Add copyright header * move copyright header to top (dae)
81 lines
1.9 KiB
SCSS
81 lines
1.9 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: 0, $color: black) {
|
|
$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, $other: ()) {
|
|
box-shadow: list.join(box-shadow($level), $other);
|
|
}
|