SpeciesFileGroup/taxonworks

View on GitHub
app/javascript/vue/assets/styles/components/buttons.scss

Summary

Maintainability
Test Coverage
@import '../variables/_sizes.scss';
@import '../variables/_palette.scss';

.btn {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding-left: 0.9em;
  padding-right: 0.9em;
}

.btn-link {
  @extend .btn;
  display: table-cell;
}

@each $key, $value in $tw-input-sizes {
  .btn-#{$key}-size {
    height: #{$value};
  }
}

@each $key, $value in $tw-input-sizes {
  .btn-#{$key}-circle {
    height: #{$value};
    width: #{$value};
    min-width: #{$value};
    min-height: #{$value};
    text-align: center;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
}

.btn-radial {
  background-color: var(--btn-radial-background);
  color: var(--btn-radial-color);
  border: 2px solid #5d9ece;

  &:disabled {
    border: none;
  }
}

@each $key, $value in $tw-colors {
  .btn-#{$key} {
    background-color: #{$value};
    color: white;
  }
}