Skip to content

Instantly share code, notes, and snippets.

@timsully

timsully/elevation-sui

Created August 25, 2020 20:46
Show Gist options
  • Save timsully/7cbc633ca291b3ff260b33c9dd1c6872 to your computer and use it in GitHub Desktop.
Save timsully/7cbc633ca291b3ff260b33c9dd1c6872 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. timsully created this gist Aug 25, 2020.
    19 changes: 19 additions & 0 deletions elevation-sui
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    // light mode elevation

    // Use for Accordion, Cards, Chip, Slider, Segment
    @emboss: 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 6px rgba(0, 0, 0, 0.07);

    // Use for Dropdown, Message, Snackbar, Tooltip
    @overlay: 0px 1px 7px rgba(0, 0, 0, 0.03), 0px 2px 23px rgba(0, 0, 0, 0.05), 0px 9px 107px rgba(0, 0, 0, 0.08);

    // Dropshadow for dialogs
    @dialog: 0px 1.5px 10px rgba(0, 0, 0, 0.03), 0px 5px 28px rgba(0, 0, 0, 0.05), 0px 10px 66px rgba(0, 0, 0, 0.06), 0px 36px 219px rgba(0, 0, 0, 0.09);

    //Drag and Drop Interactions
    @dragNDrop: 0px 0.5px 3px rgba(0, 0, 0, 0.05), 0px 1px 10px rgba(0, 0, 0, 0.07), 0px 6px 45px rgba(0, 0, 0, 0.12);

    // dark mode elevation
    @darkEmboss: 0px 0px 0.5px rgba(0, 0, 0, 0.09), 0px 1px 5px rgba(0, 0, 0, 0.12);
    @darkOverlay: 0px 1px 7px rgba(0, 0, 0, 0.09), 0px 2px 23px rgba(0, 0, 0, 0.15), 0px 9px 107px rgba(0, 0, 0, 0.24);
    @darkDialog: 0px 1.5px 10px rgba(0, 0, 0, 0.09), 0px 6px 28px rgba(0, 0, 0, 0.15), 0px 10px 66px rgba(0, 0, 0, 0.18), 0px 36px 219px rgba(0, 0, 0, 0.27);
    @darkDragNDrop: 0px 0.5px 3px rgba(0, 0, 0, 0.15), 0px 1px 10px rgba(0, 0, 0, 0.21), 0px 6px 45px rgba(0, 0, 0, 0.36);