2
0

_footer.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. @use 'sass:math';
  2. @use '../tools' as *;
  3. @use '../settings' as *;
  4. .footer {
  5. @include transition(bottom 0.5s ease 1s);
  6. @include row();
  7. margin-top: $mobile-nice-padding;
  8. margin-inline-start: $mobile-nice-padding;
  9. margin-inline-end: $mobile-nice-padding;
  10. z-index: 20;
  11. @include media-breakpoint-up(sm) {
  12. margin-top: 0;
  13. margin-inline-start: calc(#{$desktop-nice-padding} - 0.75em);
  14. margin-inline-end: $desktop-nice-padding;
  15. width: auto;
  16. position: fixed;
  17. bottom: 0;
  18. }
  19. &__emphasise-span-tags span {
  20. color: theme('colors.warning.100');
  21. }
  22. // Don't apply horizontal margins if nice-padding is applied in the parent
  23. .nice-padding & {
  24. margin-inline: 0;
  25. }
  26. }
  27. .footer__container {
  28. border-radius: theme('borderRadius.sm') theme('borderRadius.sm') 0 0;
  29. background: theme('colors.surface-menus');
  30. color: theme('colors.text-button');
  31. transition: transform 1s;
  32. padding: theme('spacing.1');
  33. @include media-breakpoint-down(xs) {
  34. width: 100%;
  35. &:not(:first-child) {
  36. border-radius: 0;
  37. }
  38. }
  39. @include media-breakpoint-up(sm) {
  40. padding: theme('spacing.[2.5]');
  41. margin-inline-end: 0;
  42. &:not(:first-child) {
  43. margin-inline-start: calc(-1 * theme('borderRadius.sm'));
  44. }
  45. }
  46. &.footer__container--hidden {
  47. transform: translateY(100%);
  48. @include media-breakpoint-down(xs) {
  49. display: none;
  50. }
  51. }
  52. }
  53. .footer__save-warning {
  54. font-size: theme('fontSize.14');
  55. height: 100%;
  56. display: flex;
  57. flex-direction: row;
  58. justify-content: center;
  59. p {
  60. margin: 0;
  61. }
  62. @include media-breakpoint-up(sm) {
  63. margin-inline-end: theme('spacing[1.5]');
  64. align-items: center;
  65. }
  66. }
  67. // Footer control bar for performing actions on the page
  68. .footer .actions {
  69. width: 100%;
  70. @include media-breakpoint-up(sm) {
  71. width: theme('spacing.64');
  72. }
  73. &--primary {
  74. // Support basic layout support for items added via `extra_footer_actions`
  75. align-items: stretch;
  76. display: grid;
  77. gap: theme('spacing.2');
  78. grid-auto-flow: column;
  79. .button {
  80. // There are default .button styles that would:
  81. // - set height responsively
  82. // - add a margin when there is a .button sibling
  83. // Unset these styles in favor of a fixed height and the grid gap
  84. height: $text-input-height;
  85. margin-inline-start: initial;
  86. }
  87. @include media-breakpoint-up(sm) {
  88. min-width: theme('spacing.80');
  89. width: max-content;
  90. > *:first-child {
  91. // Ensure the first child (the dropdown action usually) is always wide
  92. min-width: theme('spacing.56');
  93. }
  94. }
  95. }
  96. }
  97. .actions .button {
  98. @apply w-leading-none w-inline-flex w-items-center;
  99. font-weight: 600;
  100. padding: 0 theme('spacing.3');
  101. white-space: initial;
  102. .icon {
  103. width: theme('spacing.4');
  104. height: theme('spacing.4');
  105. margin-inline-end: theme('spacing.2');
  106. flex-shrink: 0;
  107. }
  108. }
  109. .actions .w-dropdown-button {
  110. width: 100%;
  111. .w-dropdown .button {
  112. font-size: theme('fontSize.14');
  113. font-weight: 500;
  114. }
  115. > .button {
  116. font-size: theme('fontSize.16');
  117. flex-grow: 1;
  118. }
  119. }