Aucune description

widgets.scss 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. .widget-area {
  2. @extend %responsive-alignwide-width;
  3. margin-top: calc(6 * var(--global--spacing-vertical));
  4. padding-bottom: calc(var(--global--spacing-vertical) / 3);
  5. color: var(--footer--color-text);
  6. font-size: var(--footer--font-size);
  7. font-family: var(--footer--font-family);
  8. @include media(laptop) {
  9. display: grid;
  10. grid-template-columns: repeat(2, 1fr);
  11. column-gap: calc(2 * var(--global--spacing-horizontal));
  12. }
  13. @include media(wide) {
  14. grid-template-columns: repeat(3, 1fr);
  15. }
  16. @include media(mobile-only) {
  17. margin-top: calc(3 * var(--global--spacing-vertical));
  18. }
  19. ul {
  20. list-style-type: none;
  21. padding: 0;
  22. li {
  23. line-height: var(--widget--line-height-list);
  24. }
  25. &.sub-menu,
  26. &.children {
  27. margin-left: var(--widget--spacing-menu);
  28. }
  29. .sub-menu-toggle {
  30. display: none;
  31. }
  32. }
  33. a {
  34. color: var(--footer--color-link);
  35. text-decoration: underline;
  36. text-decoration-style: solid;
  37. text-decoration-color: currentColor;
  38. &:link,
  39. &:visited,
  40. &:active {
  41. color: var(--footer--color-link);
  42. }
  43. &:hover {
  44. color: var(--footer--color-link-hover);
  45. text-decoration-style: dotted;
  46. }
  47. }
  48. .wp-block-social-links {
  49. &.alignright {
  50. margin-top: var(--global--spacing-vertical);
  51. justify-content: flex-end;
  52. }
  53. &.alignleft {
  54. margin-top: var(--global--spacing-vertical);
  55. }
  56. }
  57. &:after {
  58. content: "";
  59. display: table;
  60. clear: both;
  61. }
  62. }
  63. .widget {
  64. h1,
  65. h2,
  66. h3,
  67. h4,
  68. h5,
  69. h6 {
  70. font-weight: var(--widget--font-weight-title);
  71. line-height: var(--widget--line-height-title);
  72. }
  73. h1 {
  74. font-size: var(--global--font-size-md);
  75. }
  76. h2 {
  77. font-size: var(--global--font-size-sm);
  78. }
  79. h3 {
  80. font-size: var(--global--font-size-xs);
  81. }
  82. h4 {
  83. font-size: var(--global--font-size-xs);
  84. }
  85. h5 {
  86. font-size: var(--global--font-size-xs);
  87. }
  88. h6 {
  89. font-size: var(--global--font-size-xs);
  90. }
  91. }
  92. // Search widget styles
  93. .search-form {
  94. display: flex;
  95. flex-wrap: wrap;
  96. margin: auto;
  97. max-width: var(--responsive--aligndefault-width);
  98. > label {
  99. width: 100%;
  100. margin-bottom: 0;
  101. font-weight: var(--form--label-weight);
  102. }
  103. .search-field {
  104. flex-grow: 1;
  105. max-width: inherit;
  106. margin-top: calc(var(--global--spacing-vertical) / 3);
  107. margin-right: calc(0.66 * var(--global--spacing-horizontal));
  108. }
  109. .search-submit {
  110. margin-top: calc(var(--global--spacing-vertical) / 3);
  111. margin-left: 10px;
  112. }
  113. }
  114. .widget_search > .search-form {
  115. .search-field {
  116. margin-right: calc(-1 * var(--button--border-width));
  117. -webkit-appearance: none;
  118. margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  119. }
  120. .search-submit {
  121. margin-left: 0;
  122. margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  123. }
  124. }
  125. .widget_rss a.rsswidget .rss-widget-icon {
  126. display: none;
  127. }