lucuma-css.lucuma-ui.scss Maven / Gradle / Ivy

Go to download
:root {
  // unfortunately, primereact uses `scaling factors` to scala the `lg` and `sm` components. It also 
  // seems to apply these to padding, which we don't want. Change the scaling factors seemed inappropriate
  // because it would affect many more componenents, so I had to copy the padding value for the medium button.
  --button-padding: 0.78571429em;
  --compact-button-padding: 0.39285714em;

  --button-mini-font-size: 0.78571429rem;
  --button-tiny-font-size: 0.85714286rem;
  --button-small-font-size: 0.92857143rem;
  --button-large-font-size: 1.14285714rem;
  --button-big-font-size: 1.28571429rem;
  --button-huge-font-size: 1.42857143rem;
  --button-massive-font-size: 1.71428571rem;
}

// For laying out controls. The "Form*" compoents utilize this, too.
.pl-form-column {
  display: grid;
  justify-items: start;
  align-items: baseline;
  align-self: start;
  grid-template-columns: [label] auto [field] 1fr;
  row-gap: 1em;
  column-gap: 1em;

  &.pl-compact {
    row-gap: 0.5em;
  }

  &.pl-very-compact {
    row-gap: 0.25em;
  }

  .pl-form-field-label {
    grid-column: 1;
  }

  .pl-form-field {
    grid-column: 2;
    justify-self: stretch;
    margin: 0;
  }
}

// For styling of buttons in primereact for different "compactness" and "size"
button.p-component.p-button {
  margin-right: .25em; // this is what the current css does for SUI. Might want to improve.

  &.pl-compact {
    padding: var(--compact-button-padding);
  }

  svg.svg-inline--fa {
    width: 1.5em;
  }

  .p-button-icon-left {
    margin-right: 0.2em;
  }

  .p-button-icon-right {
    margin-left: 0.2em;
  }

  // default size is Medium
  &.pl-mini {
    font-size: var(--button-mini-font-size);
  }

  &.pl-tiny {
    font-size: var(--button-tiny-font-size);
  }

  &.p-button-sm,
  &.pl-small {
    font-size: var(--button-small-font-size);
  }

  &.p-button-lg,
  &.pl-large {
    font-size: var(--button-large-font-size);
  }

  &.p-button-sm,
  &.p-button-lg {
    &:not(.pl-compact) {
      padding: var(--button-padding);
    }

    .p-button-icon {
      font-size: inherit;
    }
  }

  &.pl-big {
    font-size: var(--button-big-font-siz);
  }

  &.pl-huge {
    font-size: var(--button-huge-font-size);
  }

  &.pl-massive {
    font-size: var(--button-massive-font-size);
  }
}

.pl-checkbox-with-label {
  display: inline-block;

  label {
    padding-left: 0.5em;
  }
}

.p-component.p-tooltip.p-tooltip-active {
  &.p-tooltip-right .p-tooltip-arrow {
    border-right-color: var(--text-color);
  }
  
  &.p-tooltip-left .p-tooltip-arrow {
    border-left-color: var(--text-color);
  }
  
  &.p-tooltip-top .p-tooltip-arrow {
    border-top-color: var(--text-color);
  }
  
  &.p-tooltip-bottom .p-tooltip-arrow {
    border-bottom-color: var(--text-color);
  }
  
  .p-tooltip-text {
    font-size: smaller;
    border: 1px solid var(--text-color);
  }
}

.p-component.p-dialog {
  // if the dialog doesn't have a footer, give the content some bottom padding.
  // Note: Padding was removed from the bottom of the content because the scroll bars
  // extend down to the bottom of the padding - which seemed odd in the prescence of a
  // footer. You can also use an empty div for the footer which probably would look
  // better with scrolling content.
  div:last-child.p-dialog-content {
    padding-bottom: 1rem;
  }
  // don't have margin for the last button
  .p-dialog-footer .p-button:last-child {
    margin-right: 0;
  }
}

// fix precedence problem with the Divider
.p-divider.p-component {
  &.p-divider-horizontal {
    &.p-divider-solid:before {
      border-top-style: solid;
    }

    &.p-divider-dashed:before {
      border-top-style: dashed;
    }

    &.p-divider-dotted:before {
      border-top-style: dotted
    }
  }

  &.p-divider-vertical {
    &.p-divider-solid:before {
      border-left-style: solid;
    }

    &.p-divider-dashed:before {
      border-left-style: dashed;
    }

    &.p-divider-dotted:before {
      border-left-style: dotted
    }
  }
}