Score summary page

Community feedback

• 

  P

  markus•2,160

  @markuslewinPosted over 1 year ago

  If multiple classes use the same properties, you could move those properties into a new class and apply both classes to the element, like you did with .border-radius!

  Some examples:

  .stack {
    display: flex;
    flex-direction: column;
  }
  
  /* properties can be removed from `body`, `.score`, `.result`, `.summary`, `.summary-list` */
  

  .icon::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 5%;
    width: var(--icon-width);
    height: var(--icon-height);
    z-index: 9;
  }
  
  .reaction::before {
    background-image: url(./assets/images/icon-reaction.svg);
  }
  
  /* using variables: */
  
  .icon::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 5%;
    width: var(--icon-width);
    height: var(--icon-height);
    z-index: 9;
    background-image: var(--icon-image);
  }
  
  .reaction::before {
    --icon-image: url(./assets/images/icon-reaction.svg);
  }
  

  Marked as helpful

  1

  ---

  

  HonkyTonkTP•50

  @HonkyTonkTPPosted over 1 year ago

  @markuslewin Oh, thanks for the example, I will use that in the future. Still new to using variables, I keep forgetting that you can actually change them after they've been set once.

  1