You are here

recipe.css in Drupal 9

This file is used to style the recipe using the 'full' view mode.

File

core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css
View source
  1. /**
  2. * @file
  3. * This file is used to style the recipe using the 'full' view mode.
  4. */
  5. /* Icons for the recipe meta fields */
  6. .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
  7. .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
  8. .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
  9. .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
  10. align-items: center;
  11. min-height: 40px;
  12. margin-bottom: 0.96em;
  13. padding-left: 48px; /* LTR */
  14. background-repeat: no-repeat;
  15. background-position: left center; /* LTR */
  16. background-size: 40px 40px;
  17. }
  18. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
  19. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
  20. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
  21. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
  22. padding-right: 48px;
  23. padding-left: 0;
  24. background-position: right center;
  25. }
  26. /* Large */
  27. @media screen and (min-width: 60rem) { /* 960px */
  28. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,
  29. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time,
  30. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings,
  31. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty {
  32. padding-top: 64px;
  33. padding-left: 0; /* LTR */
  34. text-align: center;
  35. background-position: center top; /* LTR */
  36. background-size: 56px 56px;
  37. }
  38. [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,
  39. [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time,
  40. [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings,
  41. [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty {
  42. padding-right: 0;
  43. }
  44. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,
  45. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time {
  46. margin-top: 0.96em;
  47. }
  48. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time .field__label,
  49. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time .field__label,
  50. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings .field__label,
  51. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty .field__label,
  52. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time .field__item,
  53. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time .field__item,
  54. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings .field__item,
  55. .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty .field__item {
  56. width: 100%;
  57. padding-right: 0;
  58. }
  59. }
  60. .node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
  61. background-image: url(../../../../images/svg/knife.svg);
  62. }
  63. .node--type-recipe.node--view-mode-full .field--name-field-cooking-time {
  64. background-image: url(../../../../images/svg/timer.svg);
  65. }
  66. .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
  67. background-image: url(../../../../images/svg/serves.svg);
  68. }
  69. .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
  70. background-image: url(../../../../images/svg/difficulty.svg);
  71. }