Practice/_src/admin/scss/components/_form.scss

.form-control {
  display: block;
  font-size:12px;
  font-weight:400;
  height:24px;
  width: 100%;  ;
  padding: $input-btn-padding-y-sm ( $input-btn-padding-x-sm / 2);
  line-height: (16em / 12);
  color: #333;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #dddddd;
  border-radius: 4px;
  box-shadow:none;
  @include transition();

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &:focus {
    border-color: rgb(51, 122, 183);
    outline: 0;
  }

  &::placeholder {
    color: #6c757d;
    opacity: 1;
  }

  &:disabled,
  &[readonly] {
    background-color: #e9ecef;
    opacity: 1;
  }

  &.form-control-sm {
    height: 34px;
    padding: $input-btn-padding-y-sm ($input-btn-padding-x-sm /2 );
    font-size: $input-btn-font-size-sm;
    line-height: $input-btn-line-height-sm;
    border-radius:$input-btn-border-radius-sm;
  }

  &.form-control-xs {
    height: 26px;
    padding: $input-btn-padding-y-xs ($input-btn-padding-x-xs /2 );
    font-size: $input-btn-font-size-xs;
    line-height: $input-btn-line-height-xs;
    border-radius:$input-btn-border-radius-xs;
  }

  &.form-control-lg {
    height: 48px;
    padding: $input-btn-padding-y-lg ( $input-btn-padding-x-lg / 2);
    font-size: $input-btn-font-size-lg;
    line-height: $input-btn-line-height-lg;
    border-radius:$input-btn-border-radius-lg;
  }
}

.tab-list {
  @include display-flex;
  align-items: center;
  padding:0;
  margin:0;
  list-style:none;

  li {
    display:block;
    & + li {
      margin-left:-1px;
    }
    a {
      display:block;
      padding:5px 7px;
      border:1px solid #ddd;
      border-bottom:0 none;
    }

    &.active {
      a {
        color:#fff;
        background-color:$color-primary;
        border-color:$color-primary;
      }
    }
  }
}

select.form-control {
  background-image:url(../images/admin/frm-select-arrow.png);
  background-position: 95% center;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-top:2.5px;
  padding-bottom:2.5px;

  &::-ms-expand {
    display:none;
  }

  &:focus::-ms-value {
    color: #495057;
    background-color: #fff;
  }
}

input[type="file"].form-control {
  height:36px;
}

.bottom-actions {
  @include display-flex();
  align-items: center;

  .left,
  .right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
  }
  .center {
    -webkit-flex:2;
    -ms-flex:2;
    flex:2;
  }

  .left {
    text-align:left;
  }

  .right {
    text-align:right;
  }
}

textarea.form-control[data-autosize] {
  height:auto;
  resize:none !important;
}

// 체크박스
.w-radio,
.w-check {
  position:relative;
  display:inline-block;
  align-items: center;
  vertical-align: middle;
  margin:0 30px 0 0;

  & + .w-check {
    margin-left:15px;
  }

  span {
    @include display-flex();
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    align-items: center;
    height:24px;

    &:before {
      content:"";
      @include display-flex();
      font-family: "Font Awesome 5 Pro";
      width:18px;
      height:18px;
      border:1px solid #e9e9e9;
      align-items: center;
      justify-content: center;
      margin-right:5px;
    }
  }

  input[type=radio],
  input[type=checkbox] {
    position: absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;

    &:checked + span:before {
      content:"\f00c";
      border-color:$color-primary;
      color:$color-primary;
    }
  }
}

//버튼그룹
.ax-button-group {
  display: table;
  width: 100%;
  min-height: 40px;

  .left,
  .right {
    display: table-cell;
    vertical-align: bottom;
    padding: 0 5px 10px 5px;

    h1, h2, h3, h4, h5, h6 {
      line-height: 26px;
    }
  }

  .left {
    text-align:left;
  }

  .right {
    text-align:right;
  }

  &.ax-button-group-bottom {

    .left, .right {
      padding: 0px;
      vertical-align:middle;
    }

    &.sm {
      min-height: 30px;

      .left, .right {
        padding: 0 5px 7px 5px;
      }
    }

    .pagination {
      margin: 0px;
    }
  }
}

[data-ax-tbl] {
  font-size: 0.9em;
  background: #fff;
  border-top: 1px solid #D8D8D8;
  border-right: 1px solid #D8D8D8;
  border-left: 1px solid #D8D8D8;
  position: relative;

  .caption {
    width:100%;
    display:block;
    background-color:#fbfbfb;
    border-bottom: 1px solid #D8D8D8;
    min-height: 30px;
    line-height:30px;
    font-size:14px;
    font-family: 나눔스퀘어, NanumSquare, sans-serif;
    padding-left:7px;
    text-align:center;
  }

  [data-ax-tr] {
    border-bottom: 1px solid #D8D8D8;
    @include display-flex();

    [data-ax-td] {
      float: left;
      @include display-flex();
      table-layout: fixed;
      width: 300px;
      vertical-align: top;
      min-height: 40px;

      &.width-auto {
        width:auto;
      }
      &.width-100 {
        width:100%;
      }

      &.right {
        margin-left:auto;
        text-align:right;
      }

      [data-ax-td-label] {
        @include display-flex();
        align-items: center;
        justify-content: center;
        width: 100px;
        padding: 7px;
        @include background-gradient(#fbfbfb, #f6f6f6);
        border-right: 1px solid #D8D8D8;
        vertical-align: middle;
        text-align: center;
        color: #363636;

        fieldset[readonly] &,
        fieldset[disabled] & {
          color: #c8c8c8;

        }

        a {
          color: #363636;
        }

        &:empty {
          background:#fff;
          border-right-color:transparent;
        }
      }

      + [data-ax-td] [data-ax-td-label] { border-left: 1px solid #D8D8D8 }

      [data-ax-td-wrap] {
        display:block;
        padding: 7px 7px;
        -webkit-flex:1;
        -ms-flex:1;
        flex:1;
        color: #68717b;
        line-height: 1em;

        a {
          color: #68717b;

          &:after {
            content: ' ';
          }
        }

        .form-control,
        .btn {
          vertical-align: middle;
        }

        .form-control {

          &.inline-block {
            display: inline-block;
            width: auto;
          }
        }

        textarea.form-control {
          resize:vertical;
        }

        .form-control-static {
          padding: 7px;
          min-height:0px;
          line-height:1.5em;
          margin-bottom:0;
        }

        .radio-inline,
        .checkbox-inline {
          line-height: 21px;
          padding: 0;
          display: inline-block;

          input[type="checkbox"],
          input[type="radio"] {
            display: inline-block;
            position: static;
            margin: 0 3px;
            vertical-align: middle;
          }
        }

        .radio-inline {
          margin-top:5px;

          + .radio-inline {
            margin-top:5px;
          }
        }


        fieldset[readonly] &,
        fieldset[disabled] & {
          color: #c8c8c8;
          .form-control {
            background-color: #eee;
            opacity: 1;
          }
        }
      }
    }
  }
}
.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 0px;
  color: #737373;
  font-size:12px;
}
ul.help-block {
  padding:0 0 0 18px;
  line-height:1.4em;
}