<div class="box box--red">
    <h3 class="box__heading">Developers</h3>
    <p>For a JSON feed of published datasets visit <a href="http://standard.threesixtygiving.org/en/latest/getdata/" target="_blank">standard.threesixtygiving.org</a></p>
</div>
<div class="box box--red"> 
  <h3 class="box__heading">Developers</h3>
  <p>For a JSON feed of published datasets visit <a href="http://standard.threesixtygiving.org/en/latest/getdata/" target="_blank">standard.threesixtygiving.org</a></p>
</div>
/* No context defined. */
  • Content:
    // We need to add this one in order to raise the specificity of the boxes 
    // that will be used inside the Prose module. 
    // Prose elements (headings, ul, p) are at 0011 and 
    // the regular .box is at 0010. With the ".prose .box" we raise 
    // the specificity to 0020 applying the proper overrides.
    
    .prose .box,
    .box {
      --box-bg-hsl: var(--base-hsl);
      --box-text-hsl: var(--base-hsl);
      background-color: hsla(var(--box-bg-hsl), .1);
      position: relative;
      padding: 24px 24px 24px 24px;
    
      &:before {
        background-color: hsla(var(--box-bg-hsl), 1);
        content: "";
        position: absolute;
        height: 100%;
        width: 4px;
        left: 0;
        top: 0;
    
        @media print {
          display: none;
        }
      }
    
      h3, 
      &__heading {
        margin: 0 0 4px 0;
        font-size: 1rem;
        font-weight: 600;
        color: hsla(var(--box-text-hsl), 1);
      }
    
      a {
        color: hsla(var(--box-text-hsl), 1);
        font-weight: 500;
        text-decoration: underline;
        text-underline-position: under;
      
        &:hover {
          background-color: hsl(var(--box-bg-hsl), 0.1);
        }
      }
    
      @media print {
        break-inside: avoid;
        padding-left: 0;
        padding-right: 0;
        border-top: 4px solid hsl(var(--box-bg-hsl), 1);
        border-bottom: 4px solid hsl(var(--box-bg-hsl), 1);
      }
    }
    
    // Check explanation at the top of this file
    .prose .box:only-child { margin-top: 0; }
    
    .prose .box.box--teal,
    .box--teal {
      --box-bg-hsl: var(--teal-hsl);
      --box-text-hsl: var(--teal-dark-hsl);
    }
    
    .prose .box.box--orange,
    .box--orange {
      --box-bg-hsl: var(--orange-hsl);
      --box-text-hsl: var(--orange-dark-hsl);
    }
    
    .prose .box.box--yellow,
    .box--yellow {
      --box-bg-hsl: var(--yellow-hsl);
      --box-text-hsl: var(--yellow-dark-hsl);
    }
    
    .prose .box.box--red,
    .box--red {
      --box-bg-hsl: var(--red-hsl);
      --box-text-hsl: var(--red-hsl);
    }
    
    
  • URL: /components/raw/box/box.scss
  • Filesystem Path: src/components/03-components/box/box.scss
  • Size: 1.8 KB

No notes defined.