organism.section.styl

PROGRESS_WIDTH = 512px

[data-atoms=app]
  > [data-organism-article] > [data-organism-section]
    background-color: BACKGROUND
    color: DARK
    &.active
      &[data-state=pulling], &[data-state=pull]
        &:before
          background: lighten(THEME, 25%)
          transition-property box-shadow
          transition-duration 350ms
      &[data-state=pulling]:before
        box-shadow inset 0 0 rgba(255,255,255,0.25)
      &[data-state=pull]:before
        box-shadow inset PROGRESS_WIDTH 0 rgba(255,255,255,0.25)
      &.loading:before
        animation pulling (ANIMATION_DURATION * 2) infinite linear

@keyframes pulling
  0%
    box-shadow inset 0px 0 rgba(255,255,255,0.25)
    opacity: 0.75
  20%
    opacity: 1
  40%
    opacity: 0.75
  60%
    opacity: 1
  60%
    opacity: 0.75
  100%
    box-shadow inset PROGRESS_WIDTH 0 rgba(255,255,255,0.25)
    opacity: 1