@asi-ngtools/lib/styles/less/asingtools.less

This project is a little components library, simple to use, which will help you to simplify your project.

@import './lessvars';
@import './asi-checkbox';
@import './asi-icon-checkbox';
@import './asi-switch';
@import './asi-select';
@import './asi-autocomplete';
@import './asi-image-chooser';
@import './asi-file-chooser';
@import './asi-menu';
@import './asi-error-messages';
@import './asi-dialog';
@import './asi-notification';
@import './asi-pagination';
@import './asi-table';
@import './asi-code-viewer';
@import './asi-tab-group';
@import './asi-nav-group';
@import './asi-tinymce';
@import './asi-bind-html';
@import './asi-collapse';
@import './asi-fa-icon';
@import './asi-input-number';
@import './asi-input';
@import './asi-input-chips';
@import './asi-input-icon';
@import './asi-autocomplete-multiple';
@import './asi-textarea';
@import './asi-datepicker';
@import './asi-calendar';
@import './asi-radio-group';
@import './asi-radio-button-group';
@import './asi-breadcrumb';
@import './asi-button';
@import './asi-link-button';
@import './asi-dmypicker';
@import './asi-dropdown';
@import './asi-workflow';
@import './asi-ibanfr-input';
@import './asi-tree-select';
@import './asi-tree-view';

.asi-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.asi-flex-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.asi-fix-container {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.asi-component *::-moz-focus-inner {
  border: 0;
}

.base-component {
  display: flex;
  margin: 5px;
  flex: 1 0 auto;

  &.label-top {
    flex-direction: column;

    .input-label {
      margin: 0 0 5px;
    }
  }

  &.label-top-center {
    flex-direction: column;
    align-items: center;

    .input-label {
      margin: 0 0 5px;
    }
  }

  &.label-left {
    flex-direction: row;
    align-items: center;

    .input-label {
      margin: 0 10px 0 0;
    }
  }

  &.label-bottom {
    flex-direction: column;

    .input-label {
      margin: 10px 0 0;
      order: 1;
    }
  }

  &.label-bottom-center {
    flex-direction: column;
    align-items: center;

    .input-label {
      margin: 10px 0 0;
      order: 1;
    }
  }

  &.label-right {
    flex-direction: row;
    align-items: center;

    .input-label {
      margin: 0 0 0 10px;
      order: 1;
    }
  }

  button {
    .clean-button;
  }
}

.clean-button {
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  user-select: none;
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
  padding: 0;
  &:not([disabled]) {
    background: none;
    line-height: initial;
  }
  &:enabled:hover {
    cursor: pointer;
  }
}

.clean-a {
  text-decoration: none;
}

.clickable {
  cursor: pointer;
}

.oneline {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}