Knocks/FrontEnd/public/css/_create_knok.scss

@import "variables";
@import "functions";
@import "mixins";

.knk-lead-panel {
  width: 100%;
  margin: 0 auto;
  padding: 15px 0;
  @include theming {
    border-bottom: 0.5px solid rgba(theme-get('color-filter-spacer'), 0.6);
    background-color: theme-get('color-background');
  }

  &__tile {
    position: relative;
    margin: 0 20px;
  }

  &__spacer {
    width: 1px;
    transform: scale(1);
    @include theming {
      background-color: rgba(theme-get('color-filter-spacer'), 0.6);
    }
  }

  &__label {
    opacity: 0.5;
    margin-bottom: 15px;
    @include knk-font-default;
    @include theming {
      color: theme-get('color-ongoing-label');
    }
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  &__record {
    @include knk-font-default;
    font-size: 27px;
    letter-spacing: normal;
    @include theming {
      color: theme-get('color-ongoing-label');
    }

    &#{&}--major {
      color: $knk-color-primary;
    }
  }

  &#{&}--sticky {
    z-index: 50;
    position: fixed;
    bottom: 0;
    left: 0;
    @include theming($if: default) {
      box-shadow: 0 2px 9px 0 rgba(theme-get(color-black), 0.05);
    }
    @include theming($if: night) {
      box-shadow: 1px 1px 20px 0px hsla(0, 0%, 0%, 0.46);
    }

    /*&:after {
      content: "";
      position: absolute;
      top: 100%;
      width: 100%;
      height: 60px;
      opacity: 0.15;
      background: linear-gradient(to top, rgba(#fafcfd, 0.15), #000000);
    }*/
  }
}

.knk-create-wizard {
  margin-top: 15px;

  &__heading,
  &__title {
    @include knk-font-default;
    font-size: 20px;
    @include theming {
      color: theme-get('color-font');
    }
  }

  &__heading {
    font-weight: bold;
    @include theming {
      color: theme-get('color-font');
    }
  }

  &__info {
    @include knk-font-default;
    @include theming($if: night) {
      color: #ffffff;
    }

    .material-icons {
      opacity: 0.25;
      font-size: 18px;
    }

    &#{&}--lined {
      padding-bottom: 15px;
      border-bottom: solid 1px #979797;
      font-size: 10px;
    }

    &#{&}--headline {
      font-size: 12px;
    }
  }

  &__message {
    @include knk-font-default;
    font-size: 12px;
    line-height: 1.33;
    @include theming($if: night) {
      color: #ffffff;
    }

    &#{&}--info {
      font-size: 10px;
      line-height: 1.67;
    }
  }
}

.knk-price-card {
  padding: 5px 10px;
  border-radius: 6px;
  @include theming($if: default) {
    border: solid 1px rgba(224, 224, 224, 0.5);
  }
  @include theming($if: night) {
    border: solid 1px rgba(1, 1, 1, 0.5);
  }
  @include theming {
    background-color: theme-get('color-surface');
  }
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.02);
  transition: border-color 0.25s linear;

  &__label {
    opacity: 0.5;
    transition: color 0.25s linear;
    @include knk-font-default;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    @include theming {
      color: theme-get('color-ongoing-label');
    }

    /*&#{&}--success {
      color: $knk-color-success;
    }

    &#{&}--warning {
      color: $knk-color-warning;
    }

    &#{&}--wrong {
      color: $knk-color-wrong;
    }*/

    &#{&}--profit {
      @include theming {
        color: theme-get(color-aqua-marine);
      }
    }
  }

  &__currency {
    @include knk-font-default;
    font-size: 32px;
    @include theming {
      color: theme-get('color-ongoing-label');
    }
  }

  &__error {
    font-size: 10px;
    margin-top: 10px;
  }

  &__switch {
    display: inline-block;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: transparent none;
    cursor: pointer;

    &#{&}--svg {
      width: 24px;
      height: 25px;
      @include theming($not: night) {
        fill: #323C47;
      }
      @include theming($if: night) {
        fill: rgba(255, 255, 255, 0.7);
      }
      fill-opacity: 0.8;
      stroke: none;
      font-size: $knk-font-size-primary;

      &:hover {
        fill: $knk-color-primary;
      }
    }
  }

  /*&#{&}--success {
    border-color: transparentize($knk-color-success, 0.9);
  }

  &#{&}--warning {
    border-color: transparentize($knk-color-warning, 0.9);
  }

  &#{&}--wrong {
    border-color: transparentize($knk-color-wrong, 0.9);
  }*/
}

.knk-nouislider-card {
  &__title {
    @include knk-font-default;
    @include theming($if: default) {
      color: rgba(theme-get('color-font'), 0.5);
    }
    @include theming($if: night) {
      color: theme-get('color-font');
    }
    text-transform: uppercase;
  }

  &__label {
    @include knk-font-default;
    line-height: 2;
    white-space: nowrap;
    @include theming($if: default) {
      color: rgba(theme-get('color-font'), 0.5);
    }
    @include theming($if: night) {
      color: theme-get('color-font');
    }
  }

  &__model {
    max-width: 260px;
  }
}

.knk-feedback-meter {
  @include knk-feedback-meter;

  @media screen and (min-width: 1440px) {
    max-width: 300px;
  }
}

ng-button-distorted.ng-button-distorted--continue.ng-button-distorted {
  max-width: 280px;
  min-width: 280px;
  width: auto;

  .ng-button-distorted__bg {
    border-radius: 50px;
  }

  .ng-button-distorted__label {
    font-weight: bold;
    letter-spacing: 1px;
  }
}

ng-button-distorted.ng-button-distorted--rate.ng-button-distorted,
ng-button-distorted.ng-button-distorted--preview.ng-button-distorted,
ng-button-distorted.ng-button-distorted--cancel.ng-button-distorted,
ng-button-distorted.ng-button-distorted--publish.ng-button-distorted,
ng-button-distorted.ng-button-distorted--back.ng-button-distorted {
  max-width: 200px;
  min-width: 200px;
  width: auto;
  max-height: 30px;
  min-height: 30px;
  height: auto;

  .ng-button-distorted__label {
    font-size: 14px;
    line-height: 2.2;
  }

  .circle {
    width: 15px;
    height: 15px;

    &.top-left {
      top: 8px;
      left: 8px;
    }

    &.bottom-right {
      bottom: 8px;
      right: 8px;
    }
  }
}

ng-button-distorted.ng-button-distorted--preview.ng-button-distorted,
ng-button-distorted.ng-button-distorted--publish.ng-button-distorted {
  margin-bottom: 5px;
}