roll20-character-sheets/Crossed-Fates/source/app/common/sass/shared.scss

@import './common/sass/variables';

@mixin fontbtn() {
  border: 2px solid $dark-gray;
  cursor: pointer;
  display: flex;
  font-size: 8em;
  padding: 0;
  width: -moz-fit-content;
  width: fit-content;
}

@mixin input-highlight($shadow) {
  outline: 3px solid #fd0;
  outline-offset: 0;
  box-shadow: inset 0 0 0 $shadow;
}

@mixin hide() {
  visibility: hidden;
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

@mixin show-hide($time: 0.2s) {
  visibility: visible;
  height: auto;
  opacity: 1;
  transition: $time ease;
}

@mixin borderCommon() {
  border: 2px solid magenta;
}

@mixin dark() {
  background: magenta;
  color: white;
}

@mixin std-font($primary: $text-font) {
  font-family: $primary, $text-font, sans-serif;
}

@mixin fill-available() {
  width: -moz-available;          // WebKit-based browsers will ignore this.
  width: -webkit-fill-available;  // Mozilla-based browsers will ignore this.
  width: fill-available;
}

@mixin fill-available-height() {
  height: -moz-available;          // WebKit-based browsers will ignore this.
  height: -webkit-fill-available;  // Mozilla-based browsers will ignore this.
  height: fill-available;
  height: 40px;
}

@mixin rotate($deg: -90deg) {
  transform: rotate($deg);

  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate($deg);

  /* Firefox */
  -moz-transform: rotate($deg);

  /* IE */
  -ms-transform: rotate($deg);

  /* Opera */
  -o-transform: rotate($deg);
}

.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }

.dotted-number {

  input[type=number], input[type=number].stat-input  {
    border: 2px dotted $dark-gray;
  }
}

.current-max-block {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  border-right: 2px solid $black;
  padding: 2px;

  .current-max-text {
    grid-column-end: span 2;
  }

  .stat-current-col, .stat-max-col {
    flex-direction: column;

    label {
      text-align: center;
      font-size: 0.8em !important;
    }

    input {
      display: block;
      margin: 0 auto;
    }

    input[type=number], input[type=number].stat-input  {
      border: 2px dotted $dark-gray;
    }
  }

  .stat-current-right-border {
    border-right: 2px dotted $dark-gray;
  }
}