influence/assets/scss/sample.scss

// 샘플 화면의 scss
@charset "UTF-8";
.sample-layout{
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    color:#1A1A1A;   
    vertical-align: baseline;
  }
  
  *{    
    box-sizing:border-box !important;
    &::-webkit-scrollbar {
      height:3px;
      width:3px; 
    }
    &::-webkit-scrollbar-button:start:decrement, 
    &::-webkit-scrollbar-button:end:increment {
      display:none;
    }
    &::-webkit-scrollbar-track {
      background-color:transparent;
      width:3px;
      height:3px;
    }
    &::-webkit-scrollbar-thumb {
      width:3px;
      border-radius:3px;
      background-color:transparent;
    }
  }
  
  body{
    &::-webkit-scrollbar-thumb {
      width:3px;
      border-radius:3px;
      background-color:#3570FF;
    }
  }
  
  
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
  body {line-height: 2;}
  ol, ul {list-style: none;}
  blockquote, q {quotes: none;}
  blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
  table {border-collapse: collapse;border-spacing: 0;}
  input:focus {outline: none;}
  a {color: inherit;text-decoration: none;}
  html{overflow:auto !important;}
  button{outline:0; cursor:pointer;}
  
  .mb--0{margin-bottom:0px!important;}
  .mb--5{margin-bottom:5px!important;}
  .mb--10{margin-bottom:10px!important;}
  .mb--15{margin-bottom:15px!important;}
  .mb--20{margin-bottom: 20px!important;}
  .mb--30{margin-bottom: 30px!important;}
  
  .ml--0{margin-left: 0px!important;}
  .ml--3{margin-left: 3px!important;}
  .ml--5{margin-left: 5px!important;}
  .ml--10{margin-left: 10px!important;}
  .ml--15{margin-left: 15px!important;}
  .ml--20{margin-left: 20px!important;}
  .ml--25{margin-left: 25px!important;}
  .ml--30{margin-left: 30px!important;}
  .ml--35{margin-left: 35px!important;}
  
  .mr--0{margin-right: 0px!important;}
  .mr--3{margin-right: 3px!important;}
  .mr--10{margin-right: 10px!important;}
  .mr--15{margin-right: 15px!important;}
  .mr--20{margin-right:20px!important;}
  .mr--25{margin-right:25px!important;}
  
  .mt--0{margin-top:0px!important;}
  .mt--10{margin-top:10px!important;}
  .mt--15{margin-top:15px!important;}
  .mt--20{margin-top:20px!important;}
  .mt--25{margin-top:25px!important;}
  .mt--30{margin-top:30px!important;}
  .mt--35{margin-top:35px!important;}
  .mt--40{margin-top:40px!important;}
  .mt--45{margin-top:45px!important;}
  .mt--50{margin-top:50px!important;}
  .mt--60{margin-top:60px!important;}
  
  .pt--0{padding-top:0px!important;}
  
  .text-left{text-align:left !important;}
  .text-center{text-align:center !important;}
  .text-right{text-align:right !important;}
  
  @mixin bor($w, $c, $r){
    border:$w solid $c;
    border-radius:$r;
  }
  
  @mixin borBg($border, $bg){
    border-color:$border;
    background-color:$bg;
  }
  
  @mixin wh(
    $w:null,
    $minw:null,
    $maxw:null,
    $h:null,
    $minh:null,
    $maxh:null,
  ){
    width:$w;
    min-width:$minw;
    max-width:$maxw;
    height:$h;
    min-height:$minh;
    max-height:$maxh;
  }
  
  @mixin pm(
    $p:null,
    $pt:null,
    $pr:null,
    $pb:null,
    $pl:null,
    $m:null,
    $mt:null,
    $mr:null,
    $mb:null,
    $ml:null,
  ) {
    padding:$p;
    padding-top:$pt;
    padding-right:$pr;
    padding-bottom:$pb;
    padding-left:$pl;
    margin:$m;
    margin-top:$mt;
    margin-right:$mr;
    margin-bottom:$mb;
    margin-left:$ml;
  }
  
  @mixin flex(
    $dis:flex,
    $align:null,
    $justify:null,
    $dir:null,
    $wrap:null,
  ){
    display:$dis;
    align-items:$align;
    justify-content:$justify;
    flex-direction:$dir;
    flex-wrap:$wrap;
  }
  
  @mixin position(
    $p:absolute,
    $t:null,
    $r:null,
    $b:null,
    $l:null,
  ) {
    position:$p;
    top:$t;
    bottom:$b;
    left:$l;
    right:$r;
  }
  
  @mixin font(
    $s:null,
    $w:null,
    $c:null,
    $a:null,
  ) {
    font-size:$s;
    font-weight:$w;
    color:$c;
    text-align:$a;
  }
  
  // 샘플 메인
  .sample--main--wrap{
    h1{
      text-align: center;
      color: black;
      font-size: 30px;
    }
    .section--wrap{
      display: flex;
      margin-top: 10px;
      
      .left--section{
        background: #eee;
        padding: 10px;
        border: 1px solid #eee;
        width: 50%;
        margin-right: 10px;
      }
      .right--section{
        background: #eee;
        padding: 10px;
        border: 1px solid #eee;
        width: 50%;
        margin-left: 10px;
  
        .result--msg{
          border: 1px solid;
          height: 200px;
          font-size: 20px;
          font-weight: 600;
        }
      }
    }
    .div--wrap{
      border: 1px solid;
      border-radius: 15px;
      background: #eee;
      margin: 20px;
      width: 300px;
      padding: 10px;
      h2{
        font-size: 20px;
        text-align: center;
      }
      .btn--wrap{
        margin-top: 10px;
        text-align: center;
        .v-btn{
          &.actv{
            background-color: #3468E2;
            .v-btn__content{
              color: #eee;
            }
          }
        }
        
      }
    }
    .arrow--wrap{
      margin: -12px;
      display: flex;
      align-items: center;
      justify-items: center;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
  
      &.actv{
        opacity: 1; /* 초기에는 투명하게 설정 */
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
      }
    }
  }
  
  .component--item{
    width: 300px;
    height: 300px;
    border: 1px solid;
  }
  // 게시판 메인
  .board_list_wrapper {
    width: 100%;
    height: 100%;
    padding: 50px;

    .search_wrap {
      display: flex;
      .custom_select {
        max-width: 150px;
      }
      .custom_input {
        max-width: 300px;
      }
    }

    .btn-wrapper {
      display: flex;
      justify-content: space-between;
    }

    .v-table{
      .v-table__wrapper{
        table{
          thead{
            background-color: rgba(230, 230, 230, 0.5);
            th{
              height:44px;
              padding:9px 5px !important;
              border:0;
              vertical-align:middle;
              word-break:keep-all;
              @include font($s:14px !important, $w:500, $c:#777 !important, $a:center !important);
              background:#f7f7fa !important;
            }
          }
          tbody{
            tr{
              td{
                height:44px;
                padding:9px 5px;
                border-bottom:1px solid #E3E6ED;
                vertical-align:middle;
                word-break:keep-all;
                @include font($s:14px, $w:500, $c:#333, $a:center !important);
                background:#fff;
                cursor:pointer;
                
                &.text-left{
                  text-align:left !important;
                }
                span{
                  @include font($w:500, $c:#333);
                  &.color-red{
                    color:#E60000;
                  }
                  &.color-green{
                    color:#4AAC44;
                  }
                  &.color-orange{
                    color:#FF7732;
                  }
                  &.line1{
                    display:block;
                    overflow:hidden;
                    max-width:285px;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  &.text-left{
                    display:block;
                    text-align:left;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  
  // 게시판 타이틀
  .menu-title-wrap{
    @include flex($align:center);
    margin-bottom:24px;
    h2{
      line-height:20px;
      @include font($s:18px, $w:800, $c:#001A58);
    }
    .arrow{
      @include wh($w:30px, $h:30px);
      margin:0 11px;
    }
    .menu-depth2{
      line-height:20px;
      @include font($s:18px, $w:600, $c:#1A1A1A);
    }
    .setting-util{
      display:flex;
      margin-left:auto;
      .btn-style{
        width:120px;
        margin:0 0 0 5px;
      }
    }
  }
  
  .view-area{
    padding:40px 24px;
    @include bor(1px, #E6EBF1, 16px);
    background:#FFF;
  }
  .form-style{
    border-top:1px solid #E3E6ED;
    table{
      width:100%;
      th{
        padding:12px 5px;
        border-bottom:1px solid #E3E6ED;
        vertical-align:middle;
        @include font($s:14px, $w:500, $c:#333, $a:center);
        background:#f7f8fa;
        .star{
          display:inline-block;
          padding-left:3px;
          //color:#F43232;
          color:#3570FF;
        }
      }
      td{
        height:48px;
        padding:6px 0 6px 24px;
        border-bottom:1px solid #E3E6ED;
        vertical-align:middle;
        @include font($s:14px, $w:500, $c:#333, $a:left);
        .view-cont{
          word-break: break-all;
          min-height:459px;
          padding:12px 0;
          @include font($c:#333, $a:left);
        }
        .file-form-list{
          @include flex($wrap:wrap);
          margin-top:8px;
          font-size:0;
          &:empty{
            margin:0;
          }
          .btn-file-download{
            display:inline-block;
            @include wh($w:auto, $h:36px);
            @include pm($p:0 10px, $m:0 8px 0 0);
            line-height:32px;
            @include bor(1px, #EDF1FF, 6px);
            vertical-align:middle;
            @include font($s:14px, $w:400, $c:#000);
            background:#F7F9FF;
            &:last-of-type{
              margin-right:0;
            }
            .ico{
              display:inline-block;
              @include wh($w:10px, $h:13px);
              margin-right:7px;
              vertical-align:middle;
              // background:url("~/assets/img/sample/ico_file_download.png") no-repeat center;
            }
            button{
              @include wh($w:20px, $h:20px);
              margin-left:5px;
              border-radius:100%;
              vertical-align:middle;
              // background:#3468E2 url(~/assets/img/sample/ico_close.png) no-repeat center / 14px;
            }
          }
        }
        .custom-input.v-text-field{
          min-height:36px;
          .v-input__control{
            .v-input__slot{
              height:36px;
              .v-text-field__slot{
                height:34px;
                input{
                  height:34px;
                }
              }
            }
          } 
        }
        .custom-select.v-input{
          min-height:36px;
          .v-input__control{
            .v-input__slot{
              height:34px;
            }
            .v-select__slot{
              .v-select__selection{
                height:34px;
              }
            } 
          }
        }
        .btn-style{
          height:36px;
        }
      }
    }
  }
  
  .btn-wrap{
    @include flex($align:center, $justify:center);
    margin-top:26px;
    @include font($s:0, $a:center);
    &.text-right{
      justify-content:flex-end;
      .btn-style{
        &:first-of-type{
          margin-left:0;
        }
      }
    }
    .left{
      margin-right:auto;
      .btn-style{
        &:first-of-type{
          margin-left:0;
        }
        &:last-of-type{
          margin-right:0;
        }
      }
    }
    .right{
      margin-left:auto;
      .btn-style{
        &:first-of-type{
          margin-left:0;
        }
        &:last-of-type{
          margin-right:0;
        }
      }
    }
  }
  
  .btn-style{
    @include flex($dis:inline-flex, $align:center, $justify:center);
    @include wh($w:152px, $h:44px);
    margin:0 5px;
    letter-spacing:-0.35px;
    border-radius:6px;
    @include font($s:14px, $w:500);
    &.btn-blue{
      color:#fff;
      background:#3468E2;
    }
    &.btn-blue2{
      @include wh($w:auto, $h:40px);
      padding:0 34px;
      color:#fff;
      background:#3468E2;
    }
    &.btn-white{
      border:1px solid #e6ebf1;
      color:#000;
      background:#fff;
    }
    &.btn-white2{
      @include wh($w:auto, $h:40px);
      padding:0 34px;
      line-height:38px;
      border:1.3px solid #D7DBE3;
      color:#333;
      background:#fff;
    }
    &.btn-black{
      color:#fff;
      background:#363636;
    }
    &.full{
      width:100%;
    }
    &.mini{
      @include wh($w:80px, $h:30px);
      border-radius:4px;
      font-size:12px;
    }
    &.mini2{
      height:40px;
    }
    &.w80{
      width:80px;
      padding:0;
    }
    &.btn-comment{
      width:auto;
      padding:0 23px;
      span{
        padding-left:5px;
        letter-spacing:-0.4px;
        @include font($s:16px, $w:700, $c:#3570FF);
      }
    }
  }
  .custom-input{
    .v-input__control{
    }
    &.v-input--error{
      .v-input__details{
        .v-messages{
          .v-messages__message{
            color: red !important;
          }
        }
      }
    }
  }
  .custom-textarea{
    .v-input__control{
    }
    &.v-input--error{
      .v-input__details{
        .v-messages{
          .v-messages__message{
            color: red !important;
          }
        }
      }
    }
  }
  
  .flex--wrap{
    display:flex;
    align-items: center;
    .title--wrap{
      width: 100%;
      position: relative;
      .close--btn{
        position: absolute;
        right: 3px;
        top: 3px;
      }
    }
  }
}