_AddPanelWidget.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .add-panel-widget-container {
  2. height: 100%;
  3. }
  4. .add-panel-widget {
  5. height: 100%;
  6. }
  7. .add-panel-widget__header {
  8. top: 0;
  9. position: absolute;
  10. padding: 0 15px;
  11. display: flex;
  12. align-items: center;
  13. width: 100%;
  14. cursor: move;
  15. background: $page-header-bg;
  16. box-shadow: $page-header-shadow;
  17. border-bottom: 1px solid $page-header-border-color;
  18. .gicon {
  19. font-size: 30px;
  20. margin-right: $spacer;
  21. }
  22. &:hover {
  23. transition: background-color 0.1s ease-in-out;
  24. background-color: $panel-header-hover-bg;
  25. }
  26. }
  27. .add-panel-widget__title {
  28. font-size: $font-size-md;
  29. font-weight: $font-weight-semi-bold;
  30. margin-right: $spacer * 2;
  31. }
  32. .add-panel-widget__link {
  33. margin: 0 8px;
  34. width: 154px;
  35. }
  36. .add-panel-widget__icon {
  37. margin-bottom: 8px;
  38. .gicon {
  39. color: white;
  40. height: 44px;
  41. width: 53px;
  42. position: relative;
  43. left: 5px;
  44. }
  45. }
  46. .add-panel-widget__close {
  47. margin-left: auto;
  48. background-color: transparent;
  49. border: 0;
  50. font-size: 16px;
  51. margin-right: -10px;
  52. }
  53. .add-panel-widget__create {
  54. display: inherit;
  55. margin-bottom: 24px;
  56. // this is to have the big button appear centered
  57. margin-top: 55px;
  58. }
  59. .add-panel-widget__actions {
  60. display: inherit;
  61. }
  62. .add-panel-widget__action {
  63. margin: 0 4px;
  64. }
  65. .add-panel-widget__btn-container {
  66. height: 100%;
  67. display: flex;
  68. justify-content: center;
  69. align-items: center;
  70. flex-direction: column;
  71. }