[PipingModel] app.scss 작성

/*
   Add additional application styles or override styles provided by the selected theme or widgets.
   You can include SASS syntax, as this file is built to a css file using a SASS processor.

   Available Variables:

   Variable Name      Description
   ----------------------------------------------------
   $resources         References the directory where resources reside (images, etc.), this directory may be different
                      between the design time and the runtime directory structure.

                      Example: background-image: url(#{$resources}/Uploaded/image.png)

   $font-path        References the relative directory where fonts are stored.
*/


.ControlPanel {
  position: fixed;
  top: 20px;
  right: 0px;
  padding: 3px !important;
  & > twx-container-content {
    background: #00273b;
    background: radial-gradient(circle at 0 100%,#00273b 0,#00070b 75%);
  }
  &.step1 {
    background-image: linear-gradient(180deg,#fcc73d,#a75a28 50%),linear-gradient(180deg,#fcc73d 40%,#a75a28 80%);
  }
  &.step2 {
    background-image: linear-gradient(180deg,#6ac24f,#42683c 50%),linear-gradient(180deg,#6ac24f 40%,#42683c 80%);
  }
  &.step3 {
    background-image: linear-gradient(180deg,#0096cd,#012538 50%),linear-gradient(180deg,#0096cd 40%,#012538 80%);
  }
  &.step4 {
    background-image: linear-gradient(180deg,#e54081,#64222b 50%),linear-gradient(180deg,#e54081 40%,#64222b 80%);
    .item-checkbox {
      padding-left: 50px;
      padding-right: 5px;
    }
  }
  .item {
    background: transparent;
    border: none;
    color: #fff;
    padding: 5px 16px;
  }
  .valuedisplay-label,
  .item-note {
    color: #0096cd;
    font-size: 14px;
    text-transform: uppercase;
  }
  .valuedisplay-value {
    color: #fff;
    white-space: normal;
  }
}

.panelTitle {
  position: fixed;
  top: 20px;
  width: 186px;
  right: 0px;
  z-index: 20; 
}
.panelBtn {
  margin-left: 20px;
}
.panelLabel{
  /*border: 1px solid #fff; */
  background-color: #00273b;
  color: #fff;
  padding: 0 10px;
  width: 100%;
}
.stepBtn {
  top: 5px;
  left: 20px;
}
[widget-id="step1Popup"],
[widget-id="step2Popup"],
[widget-id="step3Popup"],
[widget-id="step4Popup"] {
  .twx-popup {
    box-shadow: none;
  }
  .twx-popup-container {
    transition: -webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
    transition: transform .5s cubic-bezier(.455,.03,.515,.955);
    transition: transform .5s cubic-bezier(.455,.03,.515,.955),-webkit-transform .5s cubic-bezier(.455,.03,.515,.955);
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
  .twx-popup-container.hidden {
    display: block !important;
    -webkit-transform: translateX(250px) translateZ(0);
    transform: translateX(250px) translateZ(0);
  }
}
.learn {
    position: absolute;
  width: 72px;
    height: 55px;
    bottom: 0;
    left: 5px;
}

스타일-> 응용프로그램 에서 작성