panterch/ananas

@import "materialize/components/color";

// Our colors
$color-1: #ffdf8c;
$color-2: #ffbf8c;
$color-3: #ffa48c;
$color-4: #ff8c8c;

$color-dark: #d4846f;
$color-dark-hover: lighten($color-dark, 0.6);
$color-dark-violet: rgba(66, 11, 83, 0.87);

$color-red-dark: hsl(0, 90%, 50%);
$color-green-dark: hsl(84, 90%, 25%);
$color-gray-dark: hsl(0, 0, 50%);

// Materialize overrides
$primary-color: $color-1;
$secondary-color: $color-4;
$link-color: $color-3;

$button-radius: 0;

// Timepicker overrides
$clockpicker-picker-box-date-display-background-color: $color-4;
$clockpicker-primary-color: #fff;
//tick
$clockpicker-tick-background-color-active: $color-4;
//canvas
$clockpicker-canvas-bearing-fill: rgba($color-4, 0.9);
$clockpicker-canvas-fg-fill: $color-4;
$clockpicker-canvas-bg-fill: rgba($color-4, 0.75);
//buttons
$clockpicker-button-background-color: $color-4;

@import "materialize";
@import "font-awesome";
@import "material-icons";
@import "materialize-adaptions";

@import "rating";
@import "attendance";
@import "timeline";
@import "collection-actions";
@import "clockpicker";

// Layout
.section-divider {
  @extend .divider;
  margin: 20px 0 40px;
}

// Helper
.hide {
  position: absolute; left: -9999px; width: 1px; height: 1px;
}

.input-field.has_error {
  p.error-block {
    font-size: 0.8rem;
    color: #F44336;
    margin-top: 0;
  }
}

// construct for read-only display of values analogou to forms
.field {

  .label {
    font-size: 0.8rem;
    color: #9e9e9e;
  }

  .value {
    min-height: 2.2rem;
  }
}

.toast {
  p {
    margin: 0
  }

  i {
    margin-right: 1rem;
    &.alert-danger {
      @extend .red-text
    }
    &.alert-info {
      @extend .light-green-text
    }
  }
}
.fixed-action-btn {
  position: absolute;
  z-index: initial;
}
// Show password button
#new_user {
  i.material-icons::after {
    content: 'visibility';
  }
  i.material-icons.show-pw::after {
    content: 'visibility_off';
  }
}

.card {
  .card-image.full {
    max-height: 100% !important;

    img {
      height: inherit !important;
    }
  }
}
$card-image-factor: 0.4;

.card {
  .card-action .activator {
    cursor: pointer;
  }

  .card-content {
    p {
      margin-bottom: 1em;
    }
  }

  &.small, &.medium, &.large {
    .card-image {
      max-height: $card-image-factor * 100%;

      img {
        object-fit: cover;
        object-position: 0 36%;
      }
    }

    .card-content {
      max-height: (1 - $card-image-factor) * 100%;
    }
  }

  &.small {
    .card-image {
      img {
        height: $card-image-factor * 300px;
      }
    }
  }

  &.medium {
    .card-image {
      img {
        height: $card-image-factor * 400px;
      }
    }
  }

  &.large {
    .card-image {
      img {
        height: $card-image-factor * 500px;
      }
    }
  }
}

// Tabs
.tabs .tab a {
  color: $color-dark;

  &:hover {
    color: $color-dark-hover;
  }
}

.tabs .indicator {
  background-color: $color-dark;
}

.image_preview {
  label.image_preview {
    z-index: 990;
    cursor: pointer;
    color: white;
    font-size: inherit;
  }

  input[type="file"] {
    display: none;
  }
}