doneit-web/src/style/main.scss

// overflow
.v-application .overflow-auto {overflow: auto !important;}
.overflow-hidden {overflow: hidden !important;}
.overflow-visible {overflow: visible !important;}
.overflow-x-auto {overflow-x: auto !important;}
.overflow-x-hidden {overflow-x: hidden !important;}
.overflow-y-auto {overflow-y: auto !important;}
.overflow-y-hidden {overflow-y: hidden !important;}
// display
.d-none {display: none !important;}
.d-inline {display: inline !important;}
.d-inline-block {display: inline-block !important;}
.d-block {display: block !important;}
.d-table {display: table !important;}
.d-table-row {display: table-row !important;}
.d-table-cell {display: table-cell !important;}
.d-flex {display: flex !important;}
.d-inline-flex {display: inline-flex !important;}
//float
.float-none {float: none !important;}
.float-left {float: left !important;}
.float-right {float: right !important;}
//flex
.flex-fill {flex: 1 1 auto !important;}
.flex-row {flex-direction: row !important;}
.flex-column {flex-direction: column !important;}
.flex-row-reverse {flex-direction: row-reverse !important;}
.flex-column-reverse {flex-direction: column-reverse !important;}
.flex-grow-0 {flex-grow: 0 !important;}
.flex-grow-1 {flex-grow: 1 !important;}
.flex-md-1{ flex: 1;}
.flex-md-0{ flex: 0;}
.flex-shrink-0 {flex-shrink: 0 !important;}
.flex-shrink-1 {flex-shrink: 1 !important;}
.flex-wrap {flex-wrap: wrap !important;}
.flex-nowrap {flex-wrap: nowrap !important;}
.flex-wrap-reverse {flex-wrap: wrap-reverse !important;}
//justify
.justify-start {justify-content: flex-start !important;}
.justify-end {justify-content: flex-end !important;}
.justify-center {justify-content: center !important;}
.justify-space-between {justify-content: space-between !important;}
.justify-space-around {justify-content: space-around !important;}
//align
.align-start {align-items: flex-start !important;}
.align-end {align-items: flex-end !important;}
.align-center {align-items: center !important;}
.align-baseline {align-items: baseline !important;}
.align-stretch {align-items: stretch !important;}
//align-content
.align-content-start {align-content: flex-start !important;}
.align-content-end {align-content: flex-end !important;}
.align-content-center {align-content: center !important;}
.align-content-space-between {align-content: space-between !important;}
.align-content-space-around {align-content: space-around !important;}
.align-content-stretch {align-content: stretch !important;}
// .align-self
.align-self-auto {align-self: auto !important;}
.align-self-start {align-self: flex-start !important;}
.align-self-end {align-self: flex-end !important;}
.align-self-center {align-self: center !important;}
.align-self-baseline {align-self: baseline !important;}
.align-self-stretch {align-self: stretch !important;}
.flex-1{ flex: 1;}
.flex-0{ flex: 0;}


@media only screen and (min-width: 800px) {
  // overflow
  .v-application-md .overflow-md-auto {overflow: auto !important;}
  .overflow-md-hidden {overflow: hidden !important;}
  .overflow-md-visible {overflow: visible !important;}
  .overflow-md-x-auto {overflow-x: auto !important;}
  .overflow-md-x-hidden {overflow-x: hidden !important;}
  .overflow-md-y-auto {overflow-y: auto !important;}
  .overflow-md-y-hidden {overflow-y: hidden !important;}
  //display
  .d-md-flex {display: flex !important;}
  .d-md-inline-flex {display: inline-flex !important;}
  .d-md-none {display: none !important;}
  .d-md-inline {display: inline !important;}
  .d-md-inline-block {display: inline-block !important;}
  .d-md-block {display: block !important;}
  .d-md-table {display: table !important;}
  .d-md-table-row {display: table-row !important;}
  .d-md-table-cell {display: table-cell !important;}
  .d-md-flex {display: flex !important;}
  .d-md-inline-flex {display: inline-flex !important;}
  //float
  .float-md-none {float: none !important;}
  .float-md-left {float: left !important;}
  .float-md-right {float: right !important;}
  //flex
  .flex-md-fill {flex: 1 1 auto !important;}
  .flex-md-row {flex-direction: row !important;}
  .flex-md-column {flex-direction: column !important;}
  .flex-md-row-reverse {flex-direction: row-reverse !important;}
  .flex-md-column-reverse {flex-direction: column-reverse !important;}
  .flex-md-grow-0 {flex-grow: 0 !important;}
  .flex-md-grow-1 {flex-grow: 1 !important;}
  .flex-md-1{ flex: 1;}
  .flex-md-0{ flex: 0;}
  .flex-md-shrink-0 {flex-shrink: 0 !important;}
  .flex-md-shrink-1 {flex-shrink: 1 !important;}
  .flex-md-wrap {flex-wrap: wrap !important;}
  .flex-md-nowrap {flex-wrap: nowrap !important;}
  .flex-md-wrap-reverse {flex-wrap: wrap-reverse !important;}
  // justify
  .justify-md-end{  justify-content: flex-end !important;}
  .justify-md-center{ justify-content: flex-start !important;}
  .justify-md-space-between{ justify-content: space-between !important;}
  .justify-md-space-around{ justify-content: space-around !important;}
  // align
  .align-md-start{ align-items: flex-start !important;}
  .align-md-end{align-items: flex-end !important;}
  .align-md-center{ align-items: center !important;}
  .align-md-baseline{ align-items: baseline !important;}
  .align-md-stretch{align-items: stretch !important;}
  // .align-self
  .align-self-md-start{ align-self: flex-start !important;}
  .align-self-md-end{ align-self: flex-end !important;}
  .align-self-md-center{ align-self: center !important;}
  .align-self-md-baseline{ align-self: baseline !important;}
  .align-self-md-auto{ align-self: auto !important;}
  .align-self-md-stretch{ align-self: stretch !important; }
  // flex wrap
  .flex-md-nowrap{   flex-wrap: nowrap !important;}
  .flex-md-wrap{  flex-wrap: wrap !important;}
  .flex-md-wrap-reverse{ flex-wrap: wrap-reverse !important;}
  // align content
  .align-md-content-start{  align-content: flex-start !important;}
  .align-md-content-end{  align-content: flex-end !important;}
  .align-md-content-center{ align-content: center !important;}
  .align-md-content-space-between{ align-content: space-between !important;}
  .align-md-content-space-around{ align-content: space-around !important;}
  .align-md-content-stretch{ align-content: stretch !important;}

  @for $i from 0 through 50 {
      .font-md-#{$i} {
          font-size: #{$i}px ;
      }
  }
  @for $i from 0 through 10 {

      $size: $i * 5;
      
      $properties:
        "margin" "m",
        "padding" "p";
    
      @each $property, $short in $properties {
        // all directions
        .#{$short}a-md-#{$size} {
          #{$property}-left: #{$size}px !important; 
          #{$property}-right: #{$size}px !important;
          #{$property}-top: #{$size}px !important; 
          #{$property}-bottom: #{$size}px !important;
        }
        // top
        .#{$short}t-md-#{$size} {
          #{$property}-top: #{$size}px !important
        }
        // bottom
        .#{$short}b-md-#{$size} {
          #{$property}-bottom: #{$size}px !important
        }
        // left
        .#{$short}l-md-#{$size} {
          #{$property}-left: #{$size}px!important
        }
        // right
        .#{$short}r-md-#{$size} {
          #{$property}-right: #{$size}px!important
        }
        // left and right
        .#{$short}x-md-#{$size} {
          #{$property}-left: #{$size}px!important;
          #{$property}-right: #{$size}px!important;
        }
        // top and bottom
        .#{$short}y-md-#{$size} {
          #{$property}-top: #{$size}px !important;
          #{$property}-bottom: #{$size}px !important;
        }
    
      }
  }


.width-md-100{width: 100%;}
.width-md-90{width: 90%;}
.width-md-80{width: 80%;}
.width-md-70{width: 70%;}
.width-md-60{width: 60%;}
.width-md-50{width: 50%;}
.width-md-40{width: 40%;}
.width-md-30{width: 30%;}
.width-md-20{width: 20%;}
.width-md-10{width: 10%;}

.width-md-unset{ width: unset;}
.height-md-unset{ height: unset !important;}

.max-width-md-100{max-width: 100%;}
.max-width-md-90{max-width: 90%;}
.max-width-md-80{max-width: 80%;}
.max-width-md-70{max-width: 70%;}
.max-width-md-60{max-width: 60%;}
.max-width-md-50{max-width: 50%;}
.max-width-md-40{max-width: 40%;}
.max-width-md-35{max-width: 35%;}
.max-width-md-30{max-width: 30%;}
.max-width-md-20{max-width: 20%;}
.max-width-md-10{max-width: 10%;}

}

@media only screen and (min-width: 1366px) {
  // overflow
  .v-application-lg .overflow-md-auto {overflow: auto !important;}
  .overflow-lg-hidden {overflow: hidden !important;}
  .overflow-lg-visible {overflow: visible !important;}
  .overflow-lg-x-auto {overflow-x: auto !important;}
  .overflow-lg-x-hidden {overflow-x: hidden !important;}
  .overflow-lg-y-auto {overflow-y: auto !important;}
  .overflow-lg-y-hidden {overflow-y: hidden !important;}
  //display
  .d-lg-flex {display: flex !important;}
  .d-lg-inline-flex {display: inline-flex !important;}
  .d-lg-none {display: none !important;}
  .d-lg-inline {display: inline !important;}
  .d-lg-inline-block {display: inline-block !important;}
  .d-lg-block {display: block !important;}
  .d-lg-table {display: table !important;}
  .d-lg-table-row {display: table-row !important;}
  .d-lg-table-cell {display: table-cell !important;}
  .d-lg-flex {display: flex !important;}
  .d-lg-inline-flex {display: inline-flex !important;}
  //float
  .float-lg-none {float: none !important;}
  .float-lg-left {float: left !important;}
  .float-lg-right {float: right !important;}
  //flex
  .flex-lg-fill {flex: 1 1 auto !important;}
  .flex-lg-row {flex-direction: row !important;}
  .flex-lg-column {flex-direction: column !important;}
  .flex-lg-row-reverse {flex-direction: row-reverse !important;}
  .flex-lg-column-reverse {flex-direction: column-reverse !important;}
  .flex-lg-grow-0 {flex-grow: 0 !important;}
  .flex-lg-grow-1 {flex-grow: 1 !important;}
  .flex-lg-1{ flex: 1;}
  .flex-lg-0{ flex: 0;}
  .flex-lg-shrink-0 {flex-shrink: 0 !important;}
  .flex-lg-shrink-1 {flex-shrink: 1 !important;}
  .flex-lg-wrap {flex-wrap: wrap !important;}
  .flex-lg-nowrap {flex-wrap: nowrap !important;}
  .flex-lg-wrap-reverse {flex-wrap: wrap-reverse !important;}
  // justify
  .justify-lg-end{  justify-content: flex-end !important;}
  .justify-lg-center{ justify-content: flex-start !important;}
  .justify-lg-space-between{ justify-content: space-between !important;}
  .justify-lg-space-around{ justify-content: space-around !important;}
  // align
  .align-lg-start{ align-items: flex-start !important;}
  .align-lg-end{align-items: flex-end !important;}
  .align-lg-center{ align-items: center !important;}
  .align-lg-baseline{ align-items: baseline !important;}
  .align-lg-stretch{align-items: stretch !important;}
  // .align-self
  .align-self-lg-start{ align-self: flex-start !important;}
  .align-self-lg-end{ align-self: flex-end !important;}
  .align-self-lg-center{ align-self: center !important;}
  .align-self-lg-baseline{ align-self: baseline !important;}
  .align-self-lg-auto{ align-self: auto !important;}
  .align-self-lg-stretch{ align-self: stretch !important; }
  // flex wrap
  .flex-lg-nowrap{   flex-wrap: nowrap !important;}
  .flex-lg-wrap{  flex-wrap: wrap !important;}
  .flex-lg-wrap-reverse{ flex-wrap: wrap-reverse !important;}
  // align content
  .align-lg-content-start{  align-content: flex-start !important;}
  .align-lg-content-end{  align-content: flex-end !important;}
  .align-lg-content-center{ align-content: center !important;}
  .align-lg-content-space-between{ align-content: space-between !important;}
  .align-lg-content-space-around{ align-content: space-around !important;}
  .align-lg-content-stretch{ align-content: stretch !important;}

  .width-lg-unset{ width: unset;}
  .height-lg-unset{ height: unset !important;}

  @for $i from 0 through 50 {
    .font-lg-#{$i} {
        font-size: #{$i}px ;
    }
  }
  @for $i from 0 through 10 {

      $size: $i * 5;
      
      $properties:
        "margin" "m",
        "padding" "p";
    
      @each $property, $short in $properties {
        // all directions
        .#{$short}a-lg-#{$size} {
          #{$property}-left: #{$size}px !important; 
          #{$property}-right: #{$size}px !important;
          #{$property}-top: #{$size}px !important; 
          #{$property}-bottom: #{$size}px !important;
        }
        // top
        .#{$short}t-lg-#{$size} {
          #{$property}-top: #{$size}px !important
        }
        // bottom
        .#{$short}b-lg-#{$size} {
          #{$property}-bottom: #{$size}px !important
        }
        // left
        .#{$short}l-lg-#{$size} {
          #{$property}-left: #{$size}px!important
        }
        // right
        .#{$short}r-lg-#{$size} {
          #{$property}-right: #{$size}px!important
        }
        // left and right
        .#{$short}x-lg-#{$size} {
          #{$property}-left: #{$size}px!important;
          #{$property}-right: #{$size}px!important;
        }
        // top and bottom
        .#{$short}y-lg-#{$size} {
          #{$property}-top: #{$size}px !important;
          #{$property}-bottom: #{$size}px !important;
        }
    
      }
  }
}

.m-l-auto {margin-left: auto;}
.m-auto {margin: 0 auto;}
.ml-auto, .mx-auto {margin-left: auto!important;}
.mr-auto, .mx-auto {margin-right: auto!important;}

.text-bold {font-weight: 700;}
.text-bold {font-weight: 700;}

.text-blue {color: #0d89d1;}
.text-red {color: #d30a0a;}
.text-dark-blue {color: #061b52;}
.text-grey {color: #797979;}
.text-white {color: white;}
.text-black {color: black;}

.background-blue {background-color: #0d89d1;}
.background-red {background: #d30a0a;}
.background-dark-blue {background: #061b52;}
.background-grey {background: #797979;}
.background-white {background: white;}
.background-black {background: black;}

.text-center {text-align: center;}
.tex-left{ text-align: left;}
.text-right{text-align: right;}

.width-100{width: 100%;}
.width-90{width: 90%;}
.width-80{width: 80%;}
.width-70{width: 70%;}
.width-60{width: 60%;}
.width-50{width: 50%;}
.width-45{width: 45%;}
.width-40{width: 40%;}
.width-30{width: 30%;}
.width-20{width: 20%;}
.width-10{width: 10%;}


.max-width-100{max-width: 100%;}
.max-width-90{max-width: 90%;}
.max-width-80{max-width: 80%;}
.max-width-70{max-width: 70%;}
.max-width-60{max-width: 60%;}
.max-width-65{max-width: 65%;}
.max-width-50{max-width: 50%;}
.max-width-45{max-width: 45%;}
.max-width-40{max-width: 40%;}
.max-width-35{max-width: 35%;}
.max-width-30{max-width: 30%;}
.max-width-20{max-width: 20%;}
.max-width-10{max-width: 10%;}


.height-100{height: 100%;}
.height-90{height: 90%;}
.height-80{height: 80%;}
.height-70{width: 70%;}
.height-60{height: 60%;}
.height-50{height: 50%;}
.height-40{height: 40%;}
.height-30{height: 30%;}
.height-20{height: 20%;}
.height-10{height: 10%;}

.height-unset{ height: unset;}
.width-unset{ width: unset;}

.height-fit-content{height: fit-content;}


.border-t-radius{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.border-b-radius{
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}



// system spacing


@for $i from 0 through 10 {

    $size: $i * 5;
    
    $properties:
      "margin" "m",
      "padding" "p";
  
    @each $property, $short in $properties {
      // all directions
      .#{$short}a-#{$size} {
        #{$property}-left: #{$size}px !important; 
        #{$property}-right: #{$size}px !important;
        #{$property}-top: #{$size}px !important; 
        #{$property}-bottom: #{$size}px !important;
      }
      // top
      .#{$short}t-#{$size} {
        #{$property}-top: #{$size}px !important
      }
      // bottom
      .#{$short}b-#{$size} {
        #{$property}-bottom: #{$size}px !important
      }
      // left
      .#{$short}l-#{$size} {
        #{$property}-left: #{$size}px!important
      }
      // right
      .#{$short}r-#{$size} {
        #{$property}-right: #{$size}px!important
      }
      // left and right
      .#{$short}x-#{$size} {
        #{$property}-left: #{$size}px!important;
        #{$property}-right: #{$size}px!important;
      }
      // top and bottom
      .#{$short}y-#{$size} {
        #{$property}-top: #{$size}px !important;
        #{$property}-bottom: #{$size}px !important;
      }
  
    }
  }


@for $i from 0 through 50 {
    .font-#{$i} {
        font-size: #{$i}px ;
    }
}

.cursor-pointer {
  cursor: pointer;
}