tuomas2/serviceform

@import "../assets/stylesheets/bootstrap";
@import "../assets/stylesheets/bootstrap/mixins";
@import "../Font-Awesome/scss/font-awesome";

$category-1-background: rgba(0, 255, 229, 0.18);
$category-2-background: rgba(0, 247, 0, 0.18);
$activity-background: rgba(0, 247, 0, 0.08);

$border-radius-category-menu: 10px;
$border-radius-participations: 10px;
$border-radius-preview: 10px;
$show-sidebar-width: 768px; // does not affect bs-sidebar in all_activities view
//$show-sidebar-width: 1440px;

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 0;
  font-size: 12pt;
}

.page-footer-text {
  text-align: center;
  font-size: 10pt;
  img {
    width: 40pt;
  }
  hr {
    margin-bottom: 3pt;
    margin-right: 5%;
    margin-left: 5%;
    border-style: dashed;
  }
}

// COMMON STYLES

.checkbox, .radio {
  margin-top: 0;
  margin-bottom: 0;
}

.activity-choice-id {
  position: relative;
  top: -2pt;
  left: -30pt;
  font-weight: bold;
  display: inline-block;
  min-width: 14pt;
}

//.choice-input {
//}
//
//.choice-radio-input {
// @extend .choice-input;
//}

a.tooltip-only {
  text-decoration: underline;
  color: black;
}

.serviceform-title {
  margin-left: -5pt;
}

.form-error {
  color: red;
  font-weight: bold;
  font-size: 120%;
  background: rgba(255, 0, 0, 0.09);
}

.category-nav {
  @extend .nav, .nav-tabs;
  > li {
    &.active > a {
      color: black;
      background-color: transparent;
      font-weight: bold;
      &:hover {
      }
    }
    > a {
      margin-bottom: 0;
      &:hover,
      &:focus {
      }
    }
    // Disabled state sets text to gray and nukes hover/tab effects
    &.disabled > a {
      &:hover,
      &:focus {
      }
    }
  }
}

.participation-flow-nav {
  > ul {
    @extend .nav, .nav-pills;
  }
  display: flex;
  justify-content: center;
}

// SERVICEFORM STYLES

.helptext {
  @extend .panel, .panel-default, .panel-body;
  span.title {
    font-weight: bold;
  }
  .fa {
    color: #0069ff;
  }
  font-size: 120%;
  //margin: 24pt;

  color: #000070;
  background: rgba(0, 0, 255, 0.05);
}



.serviceform-description {
}

.extra-info-row {
  padding: 12pt;
  background-color: rgba(169, 216, 211, 0.35);
}

.extra-info-column {
  @extend .col-xs-9
}

.categories-2-background {
  @include make-row();

}

.categories-2{
  //padding-left: 20pt;
}

.activity-row {
  @include make-row();
  margin-left: -$border-radius-category-menu;
  margin-right: -$border-radius-category-menu;
  padding-left: 5pt;
  padding-right: 5pt;
  padding-top: 2pt;
  padding-bottom: 2pt;
  background: $activity-background;
}

.last-row {
  border-radius: 0 0 $border-radius-participations $border-radius-participations;
  margin-bottom: 30px;
}

.btn-participation-continue {
  @extend .btn, .btn-primary;
  position: absolute;
  right: 50pt;
}

.activity-choices-row {
  @extend .activity-row;
}

.activity-header-row {
  @extend .activity-row;
  font-weight: bold;
}

.activity-title {
  position: relative;
  left: 20pt;
}

.activity-choice-title {
  position: relative;
  left: 40pt;
}

.activity-checkbox-column {
  @include make-sm-column(8);
  @include make-xs-column(11);
  padding-left: 30pt;
}

/*
.activity-title-column {
  @include make-sm-column(4);
  @include make-xs-column(5);
}
*/
.choices-column {
  @include make-sm-column(8);
  @include make-xs-column(11);
  padding-left: 30pt;
}

.responsible-column {
  @include make-sm-column(2);
  @include make-sm-column-offset(0);
  @include make-xs-column(6);
  @include make-xs-column-offset(6)
}

.info-column {
  @include make-sm-column(2);
  @include make-xs-column(1);
  text-align: center;
}

.level-1-category-row {
  @extend .activity-row;
  background: $category-1-background;
  padding-top: 1.5em;
  border-radius: $border-radius-participations $border-radius-participations 0 0;
}

.level-2-category-row {
  @extend .activity-row;
  background: $category-2-background;
}


.level-1-category-column {
  @include make-xs-column(5);
  @include make-sm-column(8);
}

.level-2-category-column {
  @include make-xs-column(5);
  @include make-sm-column(8);
}

.category-responsible-column {
  @include make-xs-column(5);
  @include make-sm-column(2);
}

.category-titles {
  margin-left: -1pt;
}

.category-2-title {
  @extend .category-titles;
  font-size: 130%;
}

.category-1-title {
  @extend .category-titles;
  font-size: 160%;
}

.level-1-category-description-column {
  @include make-xs-column(12);
  padding-top: 5pt;
  padding-left: 15pt;
  padding-right: 10%;
}

.level-2-category-description-column {
  @include make-xs-column(12);
  padding-top: 5pt;
  padding-left: 15pt;
  padding-right: 10%;
}

.prt-activity-id-column {
  @include make-xs-column(1);
  text-align: right;
  padding-right: 0;
}

.prt-activity-choice-id-column {
  @include make-xs-column(1);
  text-align: right;
  //@extend .prt-activity-id-column;
  // @include make-xs-column-offset(1);
}

// QUESTION STYLES

.questions-label-column {
  @extend .col-xs-5;
}

.questions-field-column {
  @extend .col-xs-6;
}

.question-checkbox {
  margin-left: 24px;
}

// PREVIEW STYLES
.activity-btn {

  //@extend .col-xs-4, .col-xs-offset-8;
  float: right;
  margin-right: 20px;
}

.activity-preview-row {
  padding: 4pt;
}

.activity-preview-header-row {
  @extend .activity-preview-row;
  font-weight: bold;
}

.preview-box {
  border-radius: $border-radius-preview;
  padding: 10px;
  padding-left: 25px;
  margin-bottom: 20px;
}

.preview-activities {
  @extend .preview-box;
  background: rgba(27, 255, 10, 0.07);
}

.preview-questions {
  @extend .preview-box;
  background: rgba(0, 246, 255, 0.07);
}

.preview-contactdetails {
  @extend .preview-box;
  background: rgba(0, 0, 255, 0.07);
}

.preview-submitform {
  @extend .preview-box;
  background: rgba(255, 0, 72, 0.07);
}

.preview-otherdata {
  @extend .preview-box;
  background: rgba(255, 223, 0, 0.07);
}

.preview-log {
  @extend .preview-box;
  background: rgba(255, 0, 97, 0.07);
  padding-bottom:25px;
}
.staff-functions {
  @extend .preview-box;
  background: rgba(255, 0, 14, 0.38);
  padding-bottom:25px;
}

ul.participation-flow {
  li {
    float: left;
    display: inline;
    a {
      display: block;
      padding: 8px;
      background-color: rgba(0, 61, 255, 0.14);
    }
  }
  li.current {
    a {
      background-color: rgba(99, 0, 238, 0.2);
    }
  }
  li.disabled {
    a {
      color: black;
      pointer-events: none;
      cursor: default;
    }
  }
  li.greyed a {
    background-color: rgba(0, 0, 0, 0.06);

  }

}

// REPORT STYLES

.report-title {
  @extend .panel, .panel-body, .panel-default;
  margin-bottom: 0;
  padding: 5px;
  font-weight: bold;
}

.report-category-1-title {
  @extend .report-title;
  font-size: 150%;
  background: $category-1-background;
}

.report-category-2-title {
  @extend .report-title;
  font-size: 120%;
  background: $category-2-background;
}

.report-activity-title {
  @extend .report-title;
  background: $activity-background;
}

.report-choice-title {
  @extend .report-title;
  background: $activity-background;
  margin-left: 20px;
}

$indent-participant: 25pt;

.row-report {
  @extend .row;
}

.row-report-participant {
  @extend .row-report;
  margin-left: $indent-participant;

}

.old {
  background: rgba(0, 0, 0, 0.12);
  display: none;
}

.row-report-extra {
  @extend .row, .panel, .panel-body;
  //margin-left: $indent-participant;
  background: rgba(203, 0, 255, 0.06);
}
/*

.revision-link {
}

.revision-link-current {
  font-weight: bold;
}

.form-revisions {
  background: rgba(0, 0, 255, 0.11);
}

.form-revisions-title {
}
*/
.col-report-revision {
  @extend .col-xs-2;
  @extend .col-md-1;
}

.col-report-participant {
  @extend .col-xs-6;
  @extend .col-md-3;
}

.col-report-phone {
  @extend .col-xs-4;
  @extend .col-md-2;
}


.col-report-email {
  @extend .col-xs-8;
  @extend .col-md-3;
}


.col-items {
  @extend .col-xs-4;
  @extend .col-md-3;

  .col-report-count {
    @extend .col-xs-3;
    text-align: center;


    span.color-count {
      float: left;
      width: 24pt;
      text-align: center;
      border-radius:20px;
    }

  }
  .col-age {
    @extend .col-xs-3;
    text-align: center;
  }

  .col-report-extra-link {
    @extend .col-xs-6;
    //@extend .col-md-1;
    text-align: center;
  }
}


.col-report-address {
  @extend .col-xs-3;
}

.col-report-extra {
  @extend .col-xs-9;
}


.report-question-title {

  @extend .panel, .panel-default, .panel-body;
  background: rgba(255, 0, 0, 0.11);
}

// Old revision

.col-report-old-revision {
  @extend .col-xs-1;
}

.col-report-old-participant {
  @extend .col-xs-2;
}

.col-report-old-email {
  @extend .col-xs-3;
}

.col-report-old-phone {
  @extend .col-xs-2;
}

.col-report-old-address {
  @extend .col-xs-2;
}

.col-report-old-extra {
  @extend .col-xs-1;
}

.report-back-button {
  @extend .btn, .btn-primary;
  margin-top: 12pt;
}

.report-go-to-btn {
  @extend .btn, .btn-primary;
  margin-top: 12pt;
}

.responsible-contact-details {
  background: rgba(255, 186, 0, 0.07);
  width: 400pt;
  font-size: 130%;
}

.responsible-configuration {
  @extend .responsible-contact-details;
  background: rgba(255, 0, 179, 0.06);

}

.add-entry-input {
  width: 80%;
}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}

@media (min-width: $show-sidebar-width) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}

.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

/*
 * Main content
 */

.main {
  padding: 20px;
}

@media (min-width: $show-sidebar-width) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}

.main .page-header {
  margin-top: 0;
}

/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}

.placeholders h4 {
  margin-bottom: 0;
}

.placeholder {
  margin-bottom: 20px;
}

.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

.alert-error {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

// sidebar

/* sidebar */
.bs-docs-sidebar {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;

  .nav {
    > li {
      /* all links */
      > a {
        color: #999;
        border-left: 2px solid transparent;
        padding: 4px 20px;
        font-size: 13px;
        font-weight: 400;
      }
    }
    /* active & hover links */
    > .active > a,
    > li > a:hover,
    > li > a:focus {
      color: #563d7c;
      text-decoration: none;
      background-color: transparent;
      border-left-color: #563d7c;
    }
    /* all active links */
    > .active > a,
    > .active:hover > a,
    > .active:focus > a {
      font-weight: 700;
    }

    /* hide inactive nested list */
    ul.nav {
      display: none;
    }

    /* show active nested list */
    > .active > ul.nav {
      display: block;
    }
    .nav {
      /* nested links */
      > li > a {
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 30px;
        font-size: 12px;
      }

      /* nested active links */
      > .active > a,
      > .active:hover > a,
      > .active:focus > a {
        font-weight: 500;
      }

      /* 2nd nested */
      .nav {
        > li > a {
          padding-left: 40px;
        }
      }
    }

  }
}

ul#sidebar {
  top: 20px;
  &.affix {
    width: 25%;
  }
}