drawer.css 900 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. .drawer {
  2. position: fixed;
  3. z-index: 3;
  4. bottom: 0;
  5. left: 0;
  6. width: 100%;
  7. height: calc(100% - 7rem);
  8. box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.30), 0 2rem 1.5rem rgba(0,0,0,0.22);
  9. transition: transform .3s cubic-bezier(.4,0,.2,1) .2s;
  10. }
  11. .drawer .flex .block:not(.subheader):not(.large) {
  12. flex: 0 1 33.33%;
  13. }
  14. .drawer > section {
  15. height: 100%;
  16. overflow-y: auto;
  17. position: relative;
  18. }
  19. .drawer > section > table,
  20. .drawer > section > ul.flex {
  21. margin: 0 auto;
  22. padding: 2rem 1.5rem;
  23. }
  24. .drawer.empty {
  25. transform: translateY(100%);
  26. pointer-events: none;
  27. }
  28. .drawer form.padded {
  29. padding: 2rem;
  30. }
  31. @media screen and (min-width: 35rem) {
  32. .drawer {
  33. border-radius: 0.5rem 0.5rem 0 0;
  34. width: 70rem;
  35. left: calc(50% - 35rem);
  36. }
  37. .drawer .flex .block:not(.subheader):not(.large) {
  38. flex: 0 1 25%;
  39. }
  40. }