ilscipio/scipio-erp

@import "node_modules/sass-to-js/sass/sass-to-js";
@import "scipio/chartsjs";
@import "scipio/tiles";
@import "scipio/header";
@import "scipio/layout";
@import "scipio/sidebar";
@import "scipio/login";
@import "scipio/jqueryui";
/********
Variables
*********/

/*
is-rounded
*/

.button {
  margin-bottom: .5em;
  &.is-rounded {
    border-radius: $radius-rounded
  }

  .button {
    padding:0;
    background:none;
    border:none;
    color:inherit;
    margin:0;

    &:hover{
      background:none;
      color:inherit;
      border:none;
    }
  }
}

fieldset{
  legend {
    cursor: pointer;
    transition: all 2s linear;
  }

  .fieldgroup-body{
    padding:1rem;

    &.is-open{
      background: bulmaRgba($grey-lightest,0.4);
      border-radius: $radius;
    }
  }
}

.textarea.readonly {
  background: $grey-lighter;
}

.field{
  &.has-addons {
    flex-wrap: wrap;

    .control {

      :not(.is-checkradio){
        span{
          @include control();
          background: $grey-light;
          color: findColorInvert($grey-light);
        }

        &.CodeMirror{
          span {
            background:inherit;
            color:inherit;
            padding:inherit;
            display:inherit;
            line-height: inherit;
            font-size:inherit;
            border:inherit;
            justify-content: inherit;
            border-radius:inherit;
            height:inherit;
            position:inherit;
            vertical-align:inherit;
          }
        }

        span,.button,.input,.select{
          &:not(:only-child){
            &:not(:first-child){
              margin-left: -4px;
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;

              button,input,select{
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
              }

            }

            &:not(:last-child){
              border-bottom-right-radius: 0;
              border-top-right-radius: 0;

              button,input,select{
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
              }
            }
          }
        }


        &.is-expanded{
          .select{
            width:100%;
          }
        }

        &:first-child {
          .is-rounded {
            border-bottom-left-radius: $radius-rounded;
            border-top-left-radius: $radius-rounded;
          }
        }
        &:last-child {
          .is-rounded {
            border-bottom-right-radius: $radius-rounded;
            border-top-right-radius: $radius-rounded;
          }
        }
      }
    }
  }
}

.field-entry-type-lookup {
  .field.has-addons{
    flex-wrap: nowrap;
  }
}

.block-grid{
  display: flex;
  flex-flow: row wrap;
  list-style: none;

  li {
    list-style-type: none;
    margin: 0 1% 20px;
    width: 30%;
    display:inline-block;
  }
}

@include mobile  {
  .block-grid {
    li {
      display: inline-block; // Don't let them vertically span multiple columns
      width: 100% !important; // Don't let their width change
    }
  }
}

.is-fullheight-100v{
  height: 100vh;
}

/*Content*/
a .title {
  color:inherit;
}

@include mobile  {
  .title{
    &.is-1{font-size: 2.5rem;}
    &.is-2{font-size: 2rem;}
    &.is-3{font-size: 1.8rem;}
    &.is-4{font-size: 1.5rem;}
    &.is-5{font-size: 1.25rem;}
    &.is-6{font-size: 1rem;}
  }
}

#main-content {
  padding: 3rem 1rem;
  max-width: 100vw;

  section{

    @extend .box;
    background-color:$white;
    margin-bottom: 1.5rem;

    &:has(section){
      border: inherit;
      box-shadow: inherit;
      color: inherit;
      display: inherit;
      padding: 0rem;
      background-color: inherit;
    }
  }

  .column {
    &.is-1,&.is-2,&.is-3,&.is-4,&.is-5{

      section{border:1px solid;}
      &:nth-child(1) section{
        border-color: $section-card-column1-border;

      }

      &:nth-child(2) section{
        border-color: $section-card-column2-border;
      }

      &:nth-child(3) section{
        border-color: $section-card-column3-border;

      }

      &:nth-child(4) section{
        border-color: $section-card-column4-border;

      }

      &:nth-child(5) section{
        border-color: $section-card-column5-border;
      }

      :has(section){
        border:none;
      }
    }
  }

}

@include mobile  {
  #main-content{
    padding:2rem 0;
    margin:0px;
  }

}

.label-detail{
  font-size: $size-small;
  padding:0.25rem;
  background-color: $grey-lighter;
  color: $primary;
}

.field-label {
  font-size: $size-small;
  .label {
    font-size: $size-small;
  }
}

.is-horizontal{
  .field-label {
    align-self: center;
  }
}


.field {
    .field-label {
      display:flex;
      align-items: center;
      padding-right: 2.5em;
      padding-left:1em;
      text-align:left;

      &:last-child{
        background-color:$input-background-color;
        height:100%;
        margin-right:0px;
        border: 1px solid transparent;
        border-color: $input-border-color;
        border-radius: $input-radius;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        label {
          display: flex;
          align-items: center;
        }
    }
  }
}

input[type="checkbox"],input[type=radio] {
  width: 1rem;
  height: 1rem;
  margin-right: 0.65rem;
}

input[type="checkbox"] {
  accent-color: $input-checkbox;
}

input[type=radio] {
  accent-color: $input-radio;
}

select {
  width: 100%;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #4c7b9f;
  right: 1.125em;
  z-index: 4;
}



/*Footer*/
footer {
  font-size:0.7rem;
  a {
    color: $grey-light;

    &:focus,
    &:focus-within,
    &:hover,
    .is-active {
      color: $red;
    }
  }
}

/*
table
*/

td,table.dataTable.table td, table.dataTable.table th {
  word-break: break-word;
  box-sizing: border-box;
  clear: both;
  font-size: 1rem;
  position: relative;
  text-align: inherit;

  .button {
    @extend .button.is-small;

  }
}

table {
  &.table,&.dataTable, &.table.dataTable{

    th {
      font-size:.8rem;
      min-width:100px;

      &.sorting{
        padding:0.25rem;
      }

    }
  }

}

@include mobile  {
  table {
    &.table,&.dataTable, &.table.dataTable{

      td {
        &:has(input,button){
          min-width:200px;

        }

      }

    }

  }
}




/*Code*/
// CODE
pre {
  /* original is white background with no border */
  background-color: #fff;
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Mozilla, post millennium */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word;
  padding: 4px;
  color: #333;
  font-size: 11px;
  line-height: 16px;
  margin-bottom: 20px;
  background-color: #f8f8f8;
  border-color: #dfdfdf;
  border-style: solid;
  border-width: 1px;
}

pre, code {
}

code {
  margin:0px;
  padding:0px;
  border:none;
  background:none;
  .INFO {color:$info;}
  .DEBUG {}
  .WARN {color:$warning;}
  .ERROR {color:$danger;}
  .FATAL {color:$danger;font-weight:bold;}
  .TRACE {color:$grey-light;}
}

.modal{
  .modal-card-head{
    background-image: linear-gradient(to left bottom, $modal-card-head-background-color, bulmaDarken($modal-card-head-background-color,10%));
  }
}

pre.scrollable {
  max-height:500px;
  overflow-x:scroll;
}


/*Tab*/
.content-tab{
  .tab-content {
    padding: 1rem;
    display: none;

    &.is-active {
      display: block;
    }
  }
}

/*Tooltip*/
[data-tooltip]:not(.is-disabled)::before, [data-tooltip]:not(.is-loading)::before, [data-tooltip]:not([disabled])::before{
  content: attr(title);
}

/* admin: entity/service index lists (alphabetical) - moved here from _scipio.scss */
.nav-tabs dd {
  display: inline-block;
}