Content Header CSS

content-header.css

/* CONTENT HEADERS */

.content-header-row {
  width: 100%;
}

#content-header .mat-form-field {
  max-width: 250px;
  min-width: 50px;
  margin-top: 5px;
}

// All text needs to be Y-aligned
// (prevents from having to use my-auto on all elements in html
#content-header span[class*="font-"]:not(.mt-0) {
  align-self: center;
}

// Prevent labels from line-breaking
#content-header span[class*="font-medium"] {
  white-space: nowrap;
}

// For some reason the buttos sometimes get really tall?
// This is to prevent that:
#content-header button {
  max-height: 37px;
}

@media (max-width: $ss-sm) {
  .content-header-row {
    // Aligns all flex items left when xs
    flex-direction: column;
  }
}

.btn-section {
  height: 20px;
}

.mt-20-minus {
  margin-top: -10px;
}