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-megamenu,
.p-menubar {
  @apply bg-white border-b border-solid border-gray-200 text-gray-700 flex py-4 px-6;
}

.p-menu,
.p-megamenu,
.p-menubar {
  .p-menuitem-link {
    @apply rounded-none text-gray-700 py-3 px-4 transition-none select-none;

    .p-menuitem-text {
      @apply text-gray-700;
    }

    .p-menuitem-icon {
      @apply text-gray-500 mr-2;

      &:empty {
        @apply mr-0;
      }
    }

    .p-submenu-icon {
      @apply text-gray-500
    }

    &:not(.p-disabled) {
      &:hover {
        @apply bg-gray-100;

        .p-menuitem-text {
          @apply text-gray-900;
        }

        .p-menuitem-icon {
          @apply text-gray-500
        }

        .p-submenu-icon {
          @apply text-gray-500
        }
      }
    }

    &:focus {
      @apply outline-none outline-offset-0;
      box-shadow: inset 0 0 0 0.15rem #6366F1;
    }
  }
}

.p-megamenu-root-list,
.p-menubar-root-list {
  @apply grow justify-end;

  > .p-menuitem {
    > .p-menuitem-link {
      @apply rounded-md text-gray-700 py-3 px-4 transition-none select-none;

      .p-menuitem-text {
        @apply text-gray-700;
      }

      .p-menuitem-icon {
        @apply text-gray-500 mr-2;

        &:empty {
          @apply mr-0;
        }
      }

      .p-submenu-icon {
        @apply text-gray-500 ml-2;
      }

      &:not(.p-disabled) {
        &:hover {
          @apply bg-gray-100;

          .p-menuitem-text {
            @apply text-gray-900;
          }

          .p-menuitem-icon {
            @apply text-gray-500;
          }

          .p-submenu-icon {
            @apply text-gray-500;
          }
        }
      }

      &:focus {
        @apply outline-none outline-offset-0;
        box-shadow: inset 0 0 0 0.15rem #6366F1;
      }
    }
  }

  > .p-menuitem.p-menuitem-active {
    > .p-menuitem-link {
      @apply bg-gray-100;

      &:not(.p-disabled) {
        &:hover {
          @apply bg-gray-100;

          .p-menuitem-text {
            @apply text-gray-700;
          }

          .p-menuitem-icon {
            @apply text-gray-500;
          }

          .p-submenu-icon {
            @apply text-gray-500;
          }
        }
      }

      .p-menuitem-text {
        @apply text-gray-700;
      }

      .p-menuitem-icon {
        @apply text-gray-500;
      }

      .p-submenu-icon {
        @apply text-gray-500;
      }
    }
  }
}

.p-megamenu {
  .p-megamenu-panel {
    @apply bg-white border-none shadow-md text-gray-700;
  }

  .p-megamenu-submenu-header {
    @apply text-gray-700 bg-white rounded-t-md font-semibold m-0 py-3 px-4;
  }

  .p-megamenu-submenu {
    @apply py-1 px-0 w-52;

    .p-menu-separator {
      @apply border-t border-solid border-gray-100 my-1 mx-0;
    }
  }

  .p-menuitem.p-menuitem-active {
    > .p-menuitem-link {
      @apply bg-gray-100;

      .p-menuitem-text {
        @apply text-gray-700;
      }

      .p-menuitem-icon {
        @apply text-gray-500;
      }

      .p-submenu-icon {
        @apply text-gray-500;
      }
    }
  }
}

.p-megamenu.p-megamenu-vertical {
  @apply py-1 px-0 w-52;
}

.p-menu {
  @apply bg-white border border-solid border-gray-200 rounded-md text-gray-700 py-1 px-0 w-52;

  .p-submenu-header {
    @apply bg-white rounded-t-none text-gray-700 font-semibold m-0 py-3 px-4;
  }

  .p-menu-separator {
    @apply border-t border-solid border-gray-100 my-1 mx-0;
  }
}

.p-menu.p-menu-overlay {
  @apply bg-white border-none shadow-md;
}

.p-menubar {
  .p-submenu-list {
    @apply bg-white border-none shadow-md py-1 px-0 w-52;

    .p-menu-separator {
      @apply border-t border-solid border-gray-100 my-1 mx-0;
    }

    .p-submenu-icon {
      @applt text-sm;
    }
  }

  .p-menuitem.p-menuitem-active {
    > .p-menuitem-link {
      @apply bg-gray-100;

      .p-menuitem-text {
        @apply text-gray-700;
      }

      .p-menuitem-icon {
        @apply text-gray-500;
      }

      .p-submenu-icon {
        @apply text-gray-500;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .p-megamenu,
  .p-menubar {
    @apply px-4;
  }

  .p-menubar {
    @apply relative justify-between;

    .p-menubar-button {
      @apply rounded-full text-gray-500 flex h-8 transition-none w-8;

      &:hover {
        @apply text-gray-500;
      }

      &:focus {
        @apply outline-none outline-offset-0;
      }
    }

    .p-menubar-root-list {
      @apply bg-white border-none shadow-md hidden py-1 px-0 absolute w-full;

      .p-menu-separator {
        @apply border border-solid border-gray-100 my-1 mx-0;
      }

      .p-submenu-icon {
        @apply text-sm;
      }

      > .p-menuitem {
        @apply static w-full;

        > .p-menuitem-link {
          > .p-submenu-icon {
            @apply ml-auto transition-transform duration-200;
          }
        }
      }

      > .p-menuitem.p-menuitem-active {
        > .p-menuitem-link {
          > .p-submenu-icon {
            @apply rotate-180;
          }
        }
      }

      .p-submenu-list {
        @apply border-none shadow-none static w-full;

        .p-submenu-icon {
          @apply rotate-90 transition-transform duration-200;
        }

        .p-menuitem-active {
          > .p-menuitem-link {
            > .p-submenu-icon {
              @apply rotate-90;
            }
          }
        }
      }

      .p-menuitem {
        @apply static w-full;
      }

      ul li {
        a {
          @apply pl-8;
        }

        ul li {
          a {
            @apply pl-12;
          }

          ul li {
            a {
              @apply pl-16;
            }

            ul li {
              a {
                @apply pl-20;
              }

              ul li a {
                @apply pl-24;
              }
            }
          }
        }
      }
    }
  }
  .p-menubar.p-menubar-mobile-active {
    .p-menubar-button {
      .pi.pi-bars {
        &::before {
          content: "\e90b";
        }
      }
    }

    .p-menubar-root-list {
      @apply flex flex-col left-0 top-full;
      z-index: 1;
    }
  }
}