private-dreamnet/dreamtime

/*
 * DreamTime.
 * Copyright (C) DreamNet. All rights reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License 3.0 as published by
 * the Free Software Foundation. See <https://www.gnu.org/licenses/gpl-3.0.html>
 *
 * Written by Ivan Bravo Bravo <ivan@opendreamnet.com>, 2019.
 */

.field {
  @apply mb-4;

  .field-help {
    @apply block text-xs text-gray-600;
  }
}

.label {
  @apply block font-bold mb-2;
}

label[for],
select.input {
  @apply cursor-pointer;
}

input[type="checkbox"] {
  @apply bg-primary;
}

.input {
  @apply border border-input-dark bg-input shadow;
  @apply p-2 rounded w-full;
  @include transition('color, box-shadow', 280ms, cubic-bezier(0.4, 0, 0.2, 1));
  outline: none !important;

  &:not([readonly]):not([disabled]) {
    &:hover {
      @apply text-snow-lighter;
    }

    &:focus {
      @apply shadow-lg;
    }
  }

  &::placeholder {
    @apply text-snow-darker;
  }

  &[disabled] {
    @apply opacity-75 cursor-not-allowed;
  }

  &[readonly] {
    @apply cursor-default;
  }

  &.input--sm {
    @apply text-sm px-2;
  }
}

$checkbox-size: 1.5rem;

.checkbox {
  @apply text-center;

  input[type="checkbox"] {
    @apply opacity-0 pointer-events-none absolute;
  }

  input[type="checkbox"] + label {
    @apply inline-block;
    width: $checkbox-size;
    height: $checkbox-size;
  }

  input[type="checkbox"] + label::before {
    @apply inline-block rounded border-2 border-transparent bg-input;
    @include transition("border-color", 50ms);
    content: "";
    vertical-align: bottom;
    width: $checkbox-size;
    height: $checkbox-size;
  }

  input[type="checkbox"]:hover + label::before {
    @apply border-primary;
  }

  input[type="checkbox"]:checked + label::before {
    @apply text-primary text-center border-primary font-black text-xl;
    content: "✓";
    line-height: 22px;
  }
}