recipe-instruction.css

This file is used to style the 'field-recipe-instruction' field.

File

core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css

View source 
  1. /**

  2.  * @file

  3.  * This file is used to style the 'field-recipe-instruction' field.

  4.  */

  5. 

  6. .field--name-field-recipe-instruction .field__label {

  7.   margin: 0 0 1em 0;

  8.   padding: 0 0 0.6em 0;

  9.   border-bottom: 1px solid #eec2cb;

  10.   font-family: "Scope One", Georgia, serif;

  11.   font-size: 1.266rem;

  12.   font-weight: 400;

  13.   line-height: 1.2;

  14. }

  15. /* Large */

  16. @media screen and (min-width: 60rem) {

  17.   /* 960px */

  18.   .field--name-field-recipe-instruction .field__label {

  19.     margin: 0 0 1.5em 0;

  20.     font-size: 1.77rem;

  21.   }

  22. }

  23. .field--name-field-recipe-instruction ol {

  24.   padding: 0;

  25.   list-style-type: none;

  26. }

  27. .field--name-field-recipe-instruction ol > li {

  28.   position: relative;

  29.   min-height: 1.5em;

  30.   padding: 0 0 0.6em 2.5em; /* LTR */

  31.   list-style: none;

  32.   counter-increment: step-counter;

  33. }

  34. [dir="rtl"] .field--name-field-recipe-instruction ol > li {

  35.   padding: 0 2.5em 0.6em 0;

  36. }

  37. .field--name-field-recipe-instruction ol > li::before {

  38.   position: absolute;

  39.   top: 0;

  40.   left: 0; /* LTR */

  41.   content: counter(step-counter);

  42.   color: #cc2a00;

  43.   font-size: 1.5rem;

  44. }

  45. [dir="rtl"] .field--name-field-recipe-instruction ol > li::before {

  46.   right: 0;

  47.   left: auto;

  48. }