You are here

Home » API reference » Drupal 8

recipe.css in Drupal 8

Same filename and directory in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css

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. 

  6. /* Icons for the recipe meta fields */

  7. .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,

  8. .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,

  9. .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,

  10. .node--type-recipe.node--view-mode-full .field--name-field-difficulty {

  11.   align-items: center;

  12.   min-height: 40px;

  13.   margin-bottom: 0.96em;

  14.   padding-left: 48px; /* LTR */

  15.   background-repeat: no-repeat;

  16.   background-position: left center; /* LTR */

  17.   background-size: 40px 40px;

  18. }

  19. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,

  20. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,

  21. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,

  22. [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-difficulty {

  23.   padding-right: 48px;

  24.   padding-left: 0;

  25.   background-position: right center;

  26. }

  27. /* Large */

  28. @media screen and (min-width: 60rem) {  /* 960px */

  29.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,

  30.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time,

  31.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings,

  32.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty {

  33.     padding-top: 64px;

  34.     padding-left: 0; /* LTR */

  35.     text-align: center;

  36.     background-position: center top; /* LTR */

  37.     background-size: 56px 56px;

  38.   }

  39.   [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,

  40.   [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time,

  41.   [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings,

  42.   [dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty {

  43.     padding-right: 0;

  44.   }

  45.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,

  46.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time {

  47.     margin-top: 0.96em;

  48.   }

  49. 

  50.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time .field__label,

  51.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time .field__label,

  52.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings .field__label,

  53.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty .field__label,

  54.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time .field__item,

  55.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time .field__item,

  56.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings .field__item,

  57.   .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty .field__item {

  58.     width: 100%;

  59.     padding-right: 0;

  60.   }

  61. }

  62. 

  63. .node--type-recipe.node--view-mode-full .field--name-field-preparation-time {

  64.   background-image: url(../../../../images/svg/knife.svg);

  65. }

  66. .node--type-recipe.node--view-mode-full .field--name-field-cooking-time {

  67.   background-image: url(../../../../images/svg/timer.svg);

  68. }

  69. .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {

  70.   background-image: url(../../../../images/svg/serves.svg);

  71. }

  72. .node--type-recipe.node--view-mode-full .field--name-field-difficulty {

  73.   background-image: url(../../../../images/svg/difficulty.svg);

  74. }