MAINHACK

Viewing / Editing File: _formField.scss

/*
 * Component: Form
 * ---------------
 */

/* .form-control::-moz-placeholder,
  .form-control:-ms-input-placeholder,
  .form-control::-webkit-input-placeholder, */

.form-control:not(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .form-group.has-success label {
    color: #00a65a;
  }
  
  .form-group.has-success .form-control,
  .form-group.has-success .input-group-addon {
    border-color: #00a65a;
    box-shadow: none;
  }
  
  .form-group.has-success .help-block {
    color: #00a65a;
  }
  
  .form-group.has-warning label {
    color: #f39c12;
  }
  
  .form-group.has-warning .form-control,
  .form-group.has-warning .input-group-addon {
    border-color: #f39c12;
    box-shadow: none;
  }
  
  .form-group.has-warning .help-block {
    color: #f39c12;
  }
  
  .form-group.has-error label {
    color: #dd4b39;
  }
  
  .form-group.has-error .form-control,
  .form-group.has-error .input-group-addon {
    border-color: #dd4b39;
    box-shadow: none;
  }
  
  .form-group.has-error .help-block {
    color: #dd4b39;
  }
  
  /* Input group */
  .input-group .input-group-addon {
    border-radius: 0;
    border-color: #d2d6de;
    background-color: #fff;
  }
  
  /* button groups */
  .btn-group-vertical .btn.btn-flat:first-of-type,
  .btn-group-vertical .btn.btn-flat:last-of-type {
    border-radius: 0;
  }
  
  .icheck > label {
    padding-left: 0;
  }
  
  /* support Font Awesome icons in form-control */
  .form-control-feedback.fa {
    line-height: 34px;
  }
  
  .input-lg + .form-control-feedback.fa,
  .input-group-lg + .form-control-feedback.fa,
  .form-group-lg .form-control + .form-control-feedback.fa {
    line-height: 46px;
  }
  
  .input-sm + .form-control-feedback.fa,
  .input-group-sm + .form-control-feedback.fa,
  .form-group-sm .form-control + .form-control-feedback.fa {
    line-height: 30px;
  }
  
  .form-group {
    .form-control::file-selector-button {
      padding: 0.49rem 0.75rem;
    }
    label {
      color: #4b5675;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
    }
    input[type="file"].form-control {
      padding: 6px 12px;
    }
    .form-control {
      padding: 0.438rem 1rem;
      background-color: #fcfcfc;
      background-clip: padding-box;
      border: 1px solid #dbdfe9;
      border-radius: 6px;
      display: block;
      width: 100%;
      height: 45px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.45;
      color: #4b5675;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      margin-bottom: 4px;
      &::placeholder {
        color: rgba(187, 187, 187, 1) !important;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s;
      }
      &:focus::placeholder {
        padding-left: 10px;
      }
    }
    .form-label-action {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2px;
      .bg-blue-btn {
        padding: 0 8px !important;
        font-size: 12px;
        height: 25px;
      }
    }
    .tooltip_custom {
      color: $primary-color;
      margin-left: 10px;
      svg {
        width: 20px;
        height: 20px;
      }
    }
    textarea.form-control {
      height: 66px;
    }
    .form-control:focus {
      background-color: #fff;
      border-color: #8b5cf6;
      // box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.2) !important;
      box-shadow: none;
    }
    .radio {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      label {
        display: flex;
        align-items: center;
        vertical-align: middle;
        margin-right: 15px;
        margin-bottom: 10px;
        input {
          margin-right: 8px;
        }
      }
    }
    input[type="radio"] {
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid #d8d6de;
      &:checked {
        background-color: $primary-color;
        border-color: $primary-color;
        box-shadow: 0 2px 5px rgba($primary-color, 0.5);
      }
    }
  
    /*
      ================
      Select2 Modify
    */
  
    .select2-container {
      width: 100% !important;
    }
  
    /*
    ==========================
    Custom-checkbox
  */
  
    .container {
      position: relative;
      padding-left: 35px;
      margin-bottom: 0px;
      cursor: pointer;
      font-size: 14px;
  
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  
    /* Hide the browser's default checkbox */
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
  
    /* Create a custom checkbox */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      width: 18px;
      height: 18px;
      background-color: #fff;
      border: 1px solid #d8d6de;
      border-radius: 3px;
    }
  
    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
      border-color: #8b5cf6;
      background-color: #8b5cf6;
      box-shadow: 0 2px 4px 0 rgba(115, 103, 240, 0.4);
    }
  
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
  
    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
      display: block;
    }
  
    /* Style the checkmark/indicator */
    .container .checkmark:after {
      left: 6px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
  
  /*
      ======================
      Global Select 2 Plugin
  */
  .select2-container--default .select2-selection--single,
  .select2-selection .select2-selection--single {
    height: 45px;
  }
  .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 45px;
    font-size: 14px;
  }
  .select2-container--default .select2-selection--single {
    border-color: #d8d6de;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: $primary-color;
    border-radius: 5px;
  }
  .select2-container--default .select2-results > .select2-results__options {
    li {
      font-size: 14px;
      color: #5e5873;
    }
  }
  
  .select2-container--default
    .select2-results__option--highlighted[aria-selected] {
      background-color: #EEF9FF;
      color: #143157 !important;
  }

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #D9F2FF;
    color: #143157 !important;
  }

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 100%;
  }
  
  .select2-selection.select2-selection--multiple{
    .select2-search__field{
      padding-left: 15px;
      width: auto !important;
    }
  }

.select2-container--default .select2-selection--single {
    background-color: #fcfcfc;
    border: 1px solid #dbdfe9;
    border-radius: 6px;
  }

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: _formField.scss

Server Info

System Features

User Info