badge.css

.umami-badge__container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Large */
@media screen and (min-width: 60rem) {
  /* 960px */
  .umami-badge__container {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-block: 0.96em;
  }
}

.umami-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

/* Large */
@media screen and (min-width: 60rem) {
  /* 960px */
  .umami-badge__icon {
    align-items: start;
    width: 56px;
    height: 64px;
  }
}

.umami-badge__label {
  font-weight: bold;
}

.umami-badge__label::after {
  content: ":";
}

File

View on git.drupalcode.org

core/profiles/demo_umami/themes/umami/components/badge/badge.css

View source 
  1. .umami-badge__container {

  2.   display: flex;

  3.   align-items: center;

  4.   gap: 0.5rem;

  5. }

  6. 

  7. /* Large */

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

  9.   /* 960px */

  10.   .umami-badge__container {

  11.     flex-direction: column;

  12.     gap: 0;

  13.     width: 100%;

  14.     padding-block: 0.96em;

  15.   }

  16. }

  17. 

  18. .umami-badge__icon {

  19.   display: flex;

  20.   align-items: center;

  21.   justify-content: center;

  22.   width: 40px;

  23.   height: 40px;

  24. }

  25. 

  26. /* Large */

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

  28.   /* 960px */

  29.   .umami-badge__icon {

  30.     align-items: start;

  31.     width: 56px;

  32.     height: 64px;

  33.   }

  34. }

  35. 

  36. .umami-badge__label {

  37.   font-weight: bold;

  38. }

  39. 

  40. .umami-badge__label::after {

  41.   content: ":";

  42. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.