chamilo-lms/assets/css/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    [type='text'],
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [multiple],
    textarea,
    select {
      @apply rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500;
    }

    [type='checkbox'],
    [type='radio'] {
      @apply border-gray-300 text-blue-600 focus:ring-blue-500;
    }
}

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@import '~cropper/dist/cropper.css';
//@import "~flag-icons/sass/flag-icons.scss";
@import "~select2/dist/css/select2.css";
@import "~bootstrap-daterangepicker/daterangepicker.css";
//@import '~jquery-ui/themes/base/all.css';

@layer components {
  .card {
    @apply bg-white rounded shadow-lg w-full;
  }

  // Buttons.

  .btn {
    //@apply inline-block text-black px-4 py-2 text-xs font-medium leading-6 text-center bg-gray-100 uppercase transition rounded shadow hover:shadow-lg focus:outline-none;
    //disabled:cursor-not-allowed
    //@apply block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 ;
    @apply font-bold h-10 inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply text-ch-text-primary bg-ch-primary hover:bg-ch-primary-dark focus:ring-ch-primary-light;
  }

  .btn-secondary {
    @apply text-ch-text-secondary bg-ch-secondary hover:bg-ch-secondary-dark focus:ring-ch-secondary-light;
  }

  .btn-warning {
    @apply text-ch-text-warning bg-ch-warning hover:bg-ch-warning-dark focus:ring-ch-warning-light;
  }

  .btn-success {
    @apply text-ch-text-success bg-ch-success hover:bg-ch-success-dark focus:ring-ch-success-light;
  }

  .btn-danger {
    @apply text-ch-text-error bg-ch-error hover:bg-ch-error-dark focus:ring-ch-error-light;
  }

  // Buttons with icons.
  .btn > .mdi {
    @apply -ml-1 mr-1 h-4 w-5 fill-current ;
  }

  .btn > .svg {
    @apply -ml-1 mr-1 h-4 w-5 fill-current ;
  }

  // Forms.

  .help-block {
    @apply mt-2 text-xs text-gray-500;
  }

  .has-error .ch-form-label {
    @apply h-8 text-red-500;
  }

  .has-error .help-block {
    @apply text-red-500 italic text-xs;
  }

  .has-error .ch-form-control {
    @apply border-red-500;
  }

  legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: calc(1.275rem + 0.3vw);
    line-height: inherit;
  }

  fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  // Tables
  table {
      @apply min-w-full divide-y divide-gray-200;
  }

  table thead {
    @apply bg-gray-50;
  }

  table tbody {
    @apply bg-white divide-y divide-gray-200;
  }

  table thead th,
  table tbody th,
  table tbody td {
    @apply px-2 py-1;
  }

  .table td img {
    display: inline-block;
  }

  // List

  .list-group {
    @apply flex flex-col mr-4;
  }

  .list-group-item {
    @apply flex flex-row justify-start gap-2 border rounded-sm px-3 py-3;
  }

  // Alerts

  .alert {
    @apply px-6 py-4 border-0 rounded relative mb-4;
  }

  .alert-info {
    @apply text-ch-text-info bg-ch-info;
  }

  .alert-warning {
    @apply text-ch-text-warning bg-ch-warning;
  }

  .alert-success {
    @apply text-ch-text-success bg-ch-success;
  }

  .alert-danger {
    @apply text-ch-text-error bg-ch-error;
  }

  // Tabs

  .tab_wrapper nav {
    @apply card flex flex-row justify-between gap-4;
  }

  .tab_wrapper nav a {
    @apply p-4;
  }

  // Calendar

  #calendar .fc-toolbar-chunk {
    @apply flex flex-row;
  }

  // Page header

  .page-header {
    @apply text-gray-500 text-2xl flex flex-row gap-2;
  }

  #no-data-view {
    @apply flex flex-col items-center justify-center p-4 space-y-4 antialiased text-gray-900;
  }

  .pull-right {
    @apply flex flex-row;
  }

  .header-border-bottom {
    border-bottom: 1px solid #e4e9ed !important;
  }

  .ch-tool-icon {
    @apply font-extrabold text-transparent bg-clip-text bg-ch-primary mr-0.5;
  }
  .ch-tool-icon-disabled {
    @apply font-extrabold text-transparent bg-clip-text bg-gray-400 mr-0.5;
  }
  .ch-tool-icon-gradient {
    @apply font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light;
  }
  .ch-tool-icon-button {
    @apply font-extrabold bg-clip-text bg-ch-text;
  }

  // Forms
  input {
    appearance: auto !important;
    border-width: 1px !important;
  }

  .has-error input, .has-error select {
    border-color: red !important;
  }

  // Special

  .badge {
    @apply rounded-sm p-1 font-medium;

    &--error {
      @apply bg-ch-error text-ch-text-error;
    }

    &--success {
      @apply bg-ch-success text-ch-text-success;
    }

    &--warning {
      @apply bg-ch-warning text-ch-text-warning;
    }

    &--info {
      @apply bg-ch-info text-ch-text-info;
    }

    &--primary {
      @apply bg-ch-primary text-ch-text-primary;
    }

    &--secondary {
      @apply bg-ch-secondary text-ch-text-secondary;
    }
  }

  // Progress bars
  .progress {
    @apply rounded-sm ring-1 ring-ch-secondary bg-ch-primary text-sm text-center min-h-full ml-12 mr-4;
  }
  .progress .progress-bar {
    @apply bg-ch-secondary text-ch-text-secondary;
  }

  // Pager
  .pager-bar {
  }
  .pager-bar .pager-select {
  }
  .pager-bar .pager-counter {
    @apply mt-4;
  }
  .pager-bar .pager-jumper {
    @apply mt-4;
  }
  .pager-bar .pager-jumper .btn-link {
    @apply -mt-2 mx-2;
  }

  // free-jqGrid override
  .ui-jqgrid-bootstrap.modal {
    @apply bg-white;
  }
}

@import "scss/index.scss";

// tabs
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}

//@import 'primevue-md-light-indigo/theme.css';
//@import '~primevue/resources/primevue.min.css';
//@import '~primeflex/primeflex.css';
//@import "~primeicons/primeicons.css";

//@import "~jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css";
@import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
@import "~timepicker/jquery.timepicker.min.css";
//@import "~jquery-contextmenu/dist/jquery.contextMenu.css";

// Base Prime components
.p-checkbox {
  width: 16px;
  height: 16px;
}
.p-checkbox .p-checkbox-box {
  border: 2px solid #d4d4d8;
  background: #ffffff;
  width: 16px;
  height: 16px;
  color: #3f3f46;
  border-radius: 0.375rem;
  transition: none;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  transition-duration: 0.2s;
  color: #ffffff;
  font-size: 10px;
}
.p-checkbox .p-checkbox-box.p-highlight {
  border-color: #4F46E5;
  background: #4F46E5;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  border-color: #d4d4d8;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: 0 0 0 1px #6366F1;
  border-color: #4F46E5;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  border-color: #4F46E5;
  background: #4F46E5;
  color: #ffffff;
}
.p-checkbox.p-invalid > .p-checkbox-box {
  border-color: #f0a9a7;
}