@import './schema.scss';
@import './utils.scss';

/* font */
//fonts
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('/fonts/RobotoCondensed-Regular.ttf');
}


//icons
@font-face {
  font-family: 'icons';
  src: url('/fonts/icons.eot??66524861');
  src: url('/fonts/icons.eot??66524861#iefix') format('embedded-opentype'),
       url('/fonts/icons.woff2??66524861') format('woff2'),
       url('/fonts/icons.woff??66524861') format('woff'),
       url('/fonts/icons.ttf??66524861') format('truetype'),
       url('/fonts/icons.svg??66524861#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icon {
    font-family: "icons";
    font-style: normal;
    font-weight: normal;
    speak: none;
 
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
 
    line-height: 1em;
 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



html, body {
  font-family: $base-font-family;
  font-weight: $base-font-weight;
  font-size: $base-font-size;
  line-height: $base-line-height;
}

* {
	  box-sizing:border-box !important;
  	margin:0;
  	padding:0;
    outline:0;
}

span {
  cursor:default;
}

a {
  text-decoration:none;
  cursor:pointer;
  * {
    cursor:pointer;
  }
}

button {
  cursor:pointer;
  * {
    cursor:pointer;
  }
}

.hidden {
	display:none;
}

.no-margin {
	margin:0px;
	border:0px;
	padding:0px;
}

.left {
	text-align: left;
}

.float-left {
	float:left;
}

.right {
	text-align: right;
}

.float-right {
	float:right;
}

.center {
	text-align: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

// Creates a wrapper for a series of columns
@mixin make-row() {
  @include clearfix();
  margin:0;
}

@mixin make-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@mixin make-col-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    min-height: 1px;
    width:100%;
  }
}


@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }

    .col-height-#{$class} {
      position:relative;
      display: table-cell;
      float: none !important;
      height: 100%;
      vertical-align: top;


      > div {
        width:100%;
        height:100%;
      }

    }


  }
}

@mixin calc-row-height($class) {
    .row-height-#{$class} {
      position:relative;
      display: table;
      table-layout: fixed;
      height: 100%;
      width: 100%;
    }
}


@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
    @include calc-row-height($class);
  }
}


// Create grid for specific class
@mixin make-grid($class) {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class, width);
}


.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none !important;
  height: 100%;
  vertical-align: top;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

@mixin make-container() {
	position:relative;
	width:100%;
	border:0px;
	margin:0px auto;

  @media (max-width: $screen-xs-max) {
    width: $container-xs;
  }
  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
  /*
  @media (min-width: $screen-xl-min) {
    width: $container-xl;
  }
  */
}


.container {
	@include make-container;
}

.container-box {
	@include make-container;
	padding: 15px;
}

.row {
    @include make-row;
    > .col {
      float: left;
    }
}

.row-flex {
    @include make-row;
    display: flex;
    flex-wrap: wrap;
}

.clearfix {
    @include clearfix();
}

@mixin make-margin($class, $margin) {
  .#{$class}-#{abs($margin)} {
    margin-left: #{$margin}px;
    margin-right: #{$margin}px;

    @each $bp in $breakpoints {
      > div {
        padding-left: #{abs($margin)}px;
        padding-right: #{abs($margin)}px;
      }
    }
  }
}

@include make-margin('row-margin', -5);
@include make-margin('row-margin', -10);
@include make-margin('row-margin', -15);
@include make-margin('row-margin', -20);

@include make-grid-columns;

@include make-grid(xs);

@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}

@media (min-width: $screen-md-min) {
  @include make-grid(md);
}

@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}
/*
@media (min-width: $screen-xl-min) {
  @include make-grid(xl);
}
*/

.pos-relative {
    position: relative;
}

.pos-absolute {
    position: absolute;
}

.p10,
.padding-10 {
    padding:10px;
}

.p10-5,
.padding-10-5 {
    padding:10px 5px;
}

.p5,
.padding-5 {
    padding:5px;
}

.m10,
.margin-10 {
    margin-top:10px;
    margin-bottom:10px;
}

.m20,
.margin-20 {
    margin-top:20px;
    margin-bottom:20px;
}

.m5,
.margin-5 {
  margin-top:5px;
  margin-bottom:5px;
}

.mb10,
.margin-bottom-10 {
  margin-bottom: 10px;
}

.mb20,
.margin-bottom-20 {
  margin-bottom: 20px;
}

.min-height-100 {
  min-height:100px;
}

.min-height-75 {
  min-height:100px;
}

.box {
    border:$box-border-size solid $box-border-color;
	  background-color: $box-background-color;
    min-height:$box-min-height;
    height:100%;
    /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.09), 0 2px 3px 0 rgba(0, 0, 0, 0.18);*/

    .box-title {
      h2 {
        text-transform: uppercase;
        font-size:12px;
        font-weight:bolder;
        padding:10px 0px 5px 0px;
        color:#1287ed;
        border-bottom: $box-border-size * 2 solid $box-border-color;
      }
      margin-bottom: 10px;
    }
}

.h100 {
  height: 100%;
}

.h50 {
  height: 50%;
}

.h25 {
  height: 25%;
}

/* Headers - TODO */
@mixin make-header($header, $class, $margin) {
  #{$header} {

  }


  .#{$class}-#{abs($margin)} {
    margin-left: #{$margin}px;
    margin-right: #{$margin}px;
  }
}


h1 {
  font-weight:500;
  color: $header-color;
  text-align: left;
  font-size: $header-h1-normal-font-size;

  &.small {
    font-size: $header-h1-small-font-size;
  }
}
/*
h1:after {
    content: "";
    display: block;
    height: 2px;
    width: 76px;
    margin: 5px auto 10px;
    background-color: $header-line-color;
}
*/
h2 {
  font-weight:500;
  color: $header-color;
  text-align: left;
  font-size: $header-h2-normal-font-size;
  &.small {
    font-size: $header-h2-small-font-size;
  }
}
/*
h2:after {
    content: "";
    display: block;
    height: 2px;
    width: 76px;
    margin: 5px auto 10px;
    background-color: #DADADA;
}
*/
h3 {
  font-size: $header-h3-normal-font-size;
  font-weight:500;
  color: $header-color;
}


/* Filters */


/* Tables */
.table-cell {   
    display:table-cell;
}

.table-row {
    display:table-row;
}


/* alignment */
@mixin make-align($size) {
  .text-#{$size}-left {
    text-align: left;
  }
  .text-#{$size}-center {
    text-align: center;
  }
  .text-#{$size}-right {
    text-align: right;
  }
}


@include make-align(xs);

@media (min-width: $screen-sm-min) {
  @include make-align(sm);
}

@media (min-width: $screen-md-min) {
  @include make-align(md);
}

@media (min-width: $screen-lg-min) {
  @include make-align(lg);
}

/*
@media (min-width: $screen-xl-min) {
  @include make-align(xl);
}
*/


@mixin make-stretch($size) {
  .stretch-#{$size} {
    width:100%;
    position:relative;
  }
}


@include make-stretch(xl);

@media (max-width: $screen-sm-min - 1) {
  @include make-stretch(xs);
}

@media (max-width: $screen-md-min - 1) {
  @include make-stretch(sm);
}

@media (max-width: $screen-lg-min - 1) {
  @include make-stretch(md);
}
/*
@media (max-width: $screen-xl-min - 1) {
  @include make-stretch(lg);
}
*/


@mixin makeSpacing($size) {
  .p#{$size} {
    padding: #{$size}px;
  }
  .pv#{$size} {
    padding-top: #{$size}px;
    padding-bottom: #{$size}px;
  }
  .ph#{$size} {
    padding-left: #{$size}px;
    padding-right: #{$size}px;
  }
  .pt#{$size} {
    padding-top: #{$size}px;
  }
  .pb#{$size} {
    padding-bottom: #{$size}px;
  }

  .m#{$size} {
    margin: #{$size}px;
  }
  .mv#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }
  .mh#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }
  .mt#{$size} {
    margin-top: #{$size}px;
  }
  .mb#{$size} {
    margin-bottom: #{$size}px;
  }
}


@include makeSpacing(5);
@include makeSpacing(10);
@include makeSpacing(15);
@include makeSpacing(20);
@include makeSpacing(25);
@include makeSpacing(30);


.canvas {
  position:relative;
  width:100%;
  height:100%;
}


/*
.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
*/


@mixin make-grid($class, $margin) {
  .#{$class}-#{abs($margin)} {
    margin-left: #{$margin}px;
    margin-right: #{$margin}px;
  }
}


body {
  padding: 5%;
}


div.tiles {
  // Hide superfluous border
  overflow: hidden;

  ul {
    display: flex;
    flex-wrap: wrap;
    
    // Hide superfluous border
    margin: 0 -1px -1px 0;
    
    list-style: none;
    padding: 0;
  
    li {
      flex: 1 0 200px;
      min-height: $tile-min-height;
      border-right: 1px solid $box-border-color;
      border-bottom: 1px solid $box-border-color;
    }
  }
}

$visibility-sizes-list: "xs" "sm" "md" "lg";
@each $size in $visibility-sizes-list {
  .visible-#{$size}-block,
  .visible-#{$size}-inline {
    display: none;
  }
  .hidden-#{$size} {
    display: initial;
  }
}

@mixin responsive-visible($name) {
  .visible-#{$name}-block {
    display: block !important;
  }
  .visible-#{$name}-inline {
    display: inline !important;
  }
  .hidden-#{$name} {
    display: none !important;
  }
  .center-#{$name} {
    text-align: center;
  }
}

@media (max-width: $screen-xs-max) {
  @include responsive-visible("xs");
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  @include responsive-visible("sm");
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  @include responsive-visible("md");
}

@media (min-width: $screen-lg-min) {
  @include responsive-visible("lg");
}


/* boxes */
.summary-panel {

  .title {
    font-weight: bolder;
    padding:5px 0px;
    font-size:1.2em;
    color:#656565;
    white-space: nowrap;

    .label {
      padding-left:20px;
      font-weight: normal;
      color:#ACACAC;
      font-size: 0.8em;
      text-transform: uppercase;
      white-space: nowrap;
    }
  }

  .summary-row {
    padding: 5px 0px;

    .value {
      padding:2px 0px;
      font-size: 1.15em;
      color:#656565;
      white-space: nowrap;
    }

    .value.primary {
      padding:5px 0px;
      font-size: 1.65em;  
      color:#000000;
    }

    .label {
      color:#ACACAC;
      font-size: 0.8em;
      text-transform: uppercase;
    }


  }

}


/* button-bar & buttons */
@mixin btn() {
  display: inline-block;
  font-size: 14px;
  position: relative;
  padding: 7px 15px;
  margin:5px;
  border:0px;
  border-radius: 2px;
  white-space:nowrap;
  font-weight:$button-font-weight;

  background-color:#FFFFFF;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.09), 0 2px 3px 0 rgba(0, 0, 0, 0.18);    

  &:hover {
    cursor:pointer;
    transition: all 0.6s;
    background-color: #e6e6e6;
  }

  &:disabled {
    background: none;
    border-style: none;
    box-shadow: none;
    cursor: default;
  }

  &.primary {
  }
}


.bigbtn.primary:hover {
}

.bigbtn:hover {
    cursor: pointer;
}
.bigbtn.primary {
    background-color: white;
    border: solid 1px #f2f2f2;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.09), 0 2px 3px 0 rgba(0, 0, 0, 0.18);
    transition: all 0.3s;
}
.bigbtn.hasIcon {
    padding: 7px 20px 7px 32px;
}



@mixin button-bar() {
  margin:-5px;
  button {
    @include btn();
  }
}



.btn {
    @include btn();
}

.button-bar-right {
  @include button-bar();
  text-align: right;
}

.button-bar {
  @include button-bar();
}

/*
.form-full {
  .form {
    .form-field {

    }
  }
}
*/
/* forms */
.form {

  //TODO sizes big, normal, small

  .form-field-checkbox {
    margin: 15px 0px;

    input {
      margin-right: 10px;
    }
  }

  .form-field {
    margin: 10px 0px;

    label {
      color: $form-input-label-color;
      display:block;
      margin: 5px 0px;
    }

    .select-modal-field {
      margin:5px 0px;
    }

    input:not([type='checkbox']), textarea, select {
      font-family: $form-input-font-family;
      font-size: $form-input-font-size;
      color: $form-input-text-color;
      display:block;
      padding:5px 10px;
      width:100%;
      border:0px;
      border:1px solid $form-input-border-color;
      background-color: $form-input-background-color;
    }

    &.big {
      input:not([type='checkbox']), textarea, select {
        font-size: $form-input-font-size-big;
        padding:8px 15px;
        font-weight:600;
      }
    }

    textarea {
      height: 78px;
    }
  
    &.error {
      input, textarea, select {
        border-color: $form-input-border-color-error;
        color: $form-input-text-color;
      }

      span {
        color: $form-input-text-color-error;
      }
    }

    &.disabled {
      label {
        color: $form-input-label-color-disabled;
      }

      input, textarea, select {
        border-color: $form-input-border-color-disabled;
        color: $form-input-text-color-disabled;
        //background-color: $form-input-background-color-disabled;
      }
    }

    &.required {
      input:not([type='checkbox']), textarea, select {
        border-width: 2px;
      }
    }
  }


}

.list-row {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  align-content: stretch;
  align-items: stretch;
  flex-wrap: nowrap;

  .row-content {
    flex-grow: 1;
    &:hover {
      background-color: #F6F6F6;
    }

    div.main {
      font-size:1.3em;
      color:#121212;
    }

    div.secondary {
      font-size:1em;
      color:#999999;
    }
  }

  .row-menu {
    flex-shrink: auto;
    vertical-align: middle;

    display: flex;
    align-items: center;    

    border-left: 1px solid #F2F2F2;

    color:#ADADAD;
    font-size:1.33em;

    & > * {
      display: inline-block;
      margin: 10px;
      cursor: pointer;
    }
  }


  &.bottom-border {
    border-bottom:1px solid #DADADA;
  }

}


.small-list {
  .list-row {
    .row-content {
      div.main {
        font-size: 1.15em;
        font-weight:bold;
        color: #212121;
      }
    }
  }
}

.editable-list-inline-form {
  background-color: $theme-editable-list-form-background;
}


// dropdowns
.dropdown {
    display: inline-block;
}

.dropdown__content {
    display: none;
    position: absolute;
}

.dropdown--active .dropdown__content {
    display: block;
    min-width: 320px;
}


.grid {
    display:flex;
    flex-wrap: wrap;
    align-items: stretch;

    .w100 {
        width:100%;
    }

    .w75 {
        width:75%;
    }

    .w25 {
        width:25%;
    }

    .w80 {
        width:80%;
    }

    .w20 {
        width:20%;
    }

    .w50 {
        width:50%;
    }

}

//flex properties classes
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-grow {
  flex-grow: 1;
  flex-shrink: 1;
}

.flex-auto {
  display: flex;
  & > * {
    flex: 1 1 auto;
  }
}

.flex-stretch {
  align-items: stretch;
  align-content: stretch;
}

.flex-space-between {
 align-content: space-between; 
}

//#4ec3e0 //#f79239 //#1287ed
.ToggleButtons {

    button {
        &:hover {
            border-color: #4ec3e0;
            background-color: #4ec3e0;
            color:#FFFFFF;        
        }

        &.selected {
            border-color: #f79239 !important;
            background-color: #f79239 !important;
            color:#FFFFFF;
            font-weight:bolder;
        }    
    }
}

.hover-highlight-light {
  &:hover {
    background-color:#FFFFFF;
  }
}

@mixin makeSpacing($size) {
  .p#{$size} {
    padding: #{$size}px;
  }
  .pv#{$size} {
    padding-top: #{$size}px;
    padding-bottom: #{$size}px;
  }
  .ph#{$size} {
    padding-left: #{$size}px;
    padding-right: #{$size}px;
  }
  .pt#{$size} {
    padding-top: #{$size}px;
  }
  .pr#{$size} {
    padding-right: #{$size}px;
  }
  .pb#{$size} {
    padding-bottom: #{$size}px;
  }
  .pl#{$size} {
    padding-left: #{$size}px;
  }

  .m#{$size} {
    margin: #{$size}px;
  }
  .mv#{$size} {
    margin-top: #{$size}px;
    margin-bottom: #{$size}px;
  }
  .mh#{$size} {
    margin-left: #{$size}px;
    margin-right: #{$size}px;
  }
  .mt#{$size} {
    margin-top: #{$size}px;
  }
  .mr#{$size} {
    margin-right: #{$size}px;
  }
  .mb#{$size} {
    margin-bottom: #{$size}px;
  }
  .ml#{$size} {
    margin-left: #{$size}px;
  }
}

@include makeSpacing(5);
@include makeSpacing(10);
@include makeSpacing(15);
@include makeSpacing(20);
@include makeSpacing(25);
@include makeSpacing(35);
@include makeSpacing(45);



.container-max-900 {

    max-width: 900px;
    margin: 0px auto;

    @media (max-width: 920) {
        width:100%;
        padding-left: 10px;
        padding-right: 10px;
    }

}

.container-max-1200 {

    max-width: 1200px;
    margin: 0px auto;

    @media (max-width: 1220) {
        width:100%;
        padding-left: 10px;
        padding-right: 10px;
    }

}
