znamenica/dneslov

@import "defines";

html {
   main {
      overflow-x: hidden;

      & > .container {
         margin-top: 1.5rem;
         max-width: 95%;
         width: 95% !important;
      }
   }

   p#notice {
      margin: 0;
   }

   a {
      color: $smooth_dark;
   }

   a[href] {
      color: $soft_blue;
   }

   .flex {
      display: flex;
      height: 4.5rem;
   }

   .enrighten {
      margin: auto !important;
      margin-right: 0 !important;
   }

   // buttons
   .col.bar {
      float: right;
   }

   .btn, .btn-large, .btn-small {
      background-color: $darken_terracota;

      &:hover, .btn-large:hover {
         background-color: $terracota;
      }

      &:focus, .btn-large:focus {
         background-color: $lighten_terracota;
      }

      &.disabled, .btn-large.disabled {
         background-color: $grayed_terracota !important;
      }

      &.close {
         background-color: $grayed_terracota;
      }

   }

   .modal {
      .modal-footer {
         .btn, .btn-large, .btn-small {
            margin-right: 0.8rem;
         }

         .btn:last-of-type {
            margin-right: 0;
         }

         .btn-large:last-of-type {
            margin-right: 0;
         }

         .btn-small:last-of-type {
            margin-right: 0;
         }
      }
   }

   .col > .row {
      padding: inherit;
   }

   body > .pickmeup, .row:empty, .chip:empty, .hidden, ul.indicators {
      display: none !important;
   }

   .in-progress {
      cursor: progress;
   }

   .disabled {
      pointer-events: none;
      color: #ccc;
   }

   .terracota {
      background-color: $terracota !important;
   }

   .gold {
      background-color: $gold !important;
   }

   .title {
      font-weight: bold;
   }

   .centering {
      text-align: center;
   }

   .flow-text {
      margin-top: 0;
      font-family: "Source Sans Pro", sans;
      font-size: 100%;
   }

   .material-icons + .toast-wrapper {
      display: none;
   }

   header, main, footer {
      padding-left: 0 !important;
   }

   header {
      height: calc(4vh + 0.5 * 4vh);
      line-height: calc(4vh + 0.5 * 4vh);

      nav {
         height: 100%;
         line-height: inherit;

         .nav-wrapper {
            height: 100%;
            line-height: inherit;
            display: inherit;
            align-items: center;
            overflow: hidden;
            line-height: inherit;

            .brand-logo {
               line-height: inherit;
               height: inherit;
               transform: none;
               left: auto;

               img {
                  height: inherit;
               }
            }

            #nav-mobile {
               height: 100%;
               line-height: inherit;

               li {
                  height: 100%;
                  line-height: inherit;

                  a {
                     font-size: calc(1.25vh + 0.5 * 1.25vh);
                     height: 100%;
                     line-height: inherit;
                  }
               }

               .moon {
                  top: calc((-4vh - 0.5 * 4vh) / 15);
                  right: 0.5vh;
                  position: relative;
                  height: calc(3vh + 0.5 * 4vh);
                  width: calc(3vh + 0.5 * 4vh);
                  pointer-events: none;
                  line-height: inherit;

                  i {
                     line-height: 200%;
                     height: inherit;
                     font-size: calc(1.75vh + 0.5 * 1.75vh);
                  }
               }
            }

            .sign-in.signed {
               top: calc((4vh + 0.5 * 4vh) / 15);
            }

            .sign-in {
               top: calc((-4vh - 0.5 * 4vh) / 15);
               height: calc(3vh + 0.5 * 4vh);
               width: calc(3vh + 0.5 * 4vh);
               right: 0.5vh;
               background-color: $darken_terracota;
               position: relative;

               img {
                  top: calc((4vh + 0.5 * 4vh) / 15);
                  line-height: 200%;
                  width: inherit;
                  height: inherit;
                  font-size: calc(1.75vh + 0.5 * 1.75vh);
                  cursor: pointer;
               }

               i {
                  line-height: 200%;
                  height: inherit;
                  font-size: calc(1.75vh + 0.5 * 1.75vh);
               }

               .tap-target-wrapper {
                  &:not(.open) {
                     img {
                        display: none;
                     }
                  }

                  .tap-target-content {
                     p {
                        padding-left: 2rem;
                        line-height: normal;
                     }
                  }
               }
            }
         }
      }
   }

   .input-field label {
      &[for] {
         pointer-events: none;
      }

      &:not(.label-icon).active {
         height: 4.5rem;
      }
   }

   .select-wrapper + label {
      position: absolute;
      top: 0;
      left: 0;
      height: 4.5rem;
      font-size: 100%;
      cursor: text;
      transition: transform .2s ease-out;
      transform-origin: 0% 100%;
      text-align: initial;
      transform: translateY(1rem);
      pointer-events: none;
   }

   // this should be fixed in various cases
   .error {
      color: #F44336;
      opacity: 1;
      transition: .2s opacity ease-out, .2s color ease-out;
      box-sizing: inherit;
      white-space: nowrap;
      font-size: 80%;
   }

   label.active .error {
      font-size: 100%;
   }

   .col.input-field {
      min-height: 3.5rem;

      & > .material-icons {
         padding-top: 0.8rem;
      }

      // fixed dynamic field
      & > .chip {
         margin-top: 0.7rem;
         width: -webkit-stretch;
         width: -moz-available;
         width: stretch;
      }

      .invalid + label.active:after {
         display: none !important;
      }

      input[type=text]:not(.browser-default):not([readonly]) {
         /* label focus color */
         height: 2rem;
         padding: .8rem 0 0 0;
         font-size: 1rem;

         &:focus + label {
            color: $soft_blue;
         }

         /* label underline focus color */
         &:focus {
            border-bottom: 0.1rem solid $soft_blue;
            box-shadow: 0 0.1rem 0 0 $soft_blue;
         }

         /* valid color */
         &.valid {
            border-bottom: 0.1rem solid $soft_blue;
            box-shadow: 0 0.1rem 0 0 $soft_blue;
         }

         /* invalid color */
         &.invalid {
            border-bottom: 0.1rem solid $error_color;
            box-shadow: 0 0.1rem 0 0 $error_color;
         }

         &.dynamic {
            border-bottom-style: dashed !important;
         }

         &.dynamic.invalid {
            border-bottom-width: 0.15rem !important;
            box-shadow: none;
         }
      }

      textarea.materialize-textarea {
         min-height: 2.7rem;
         height: 2.7rem;
         padding: 0.9rem 0 .4rem 0;
         font-size: 1rem;
      }

      [type="checkbox"] + span:not(.lever) {
         margin-top: .1rem;
      }

      // select input field
      .select-wrapper {

         input.select-dropdown {
            font-size: 1rem;
            height: 2rem;
            padding: .8rem 0 0 0;

            & + label {
               height: 2.7rem;
            }
         }

         .caret {
            top: 0.2rem;
         }

         select {
            display: block;
            height: 0;
            width: 0;
            padding: 0;
            border: none;
         }
      }

      .prefix {
         top: 0.2rem;

         .active {
            /* icon prefix focus color */
            color: $soft_blue;
         }
      }

      input[type="search"] {
         width: calc(100% - 2.5rem);
         padding-left: 0;
         margin-bottom: 0;

         &:focus {
            border-style: none none dotted;
            border-width: medium medium 0.1rem;
         }
      }

      // default color of form labels
      /* label color */
      label {
         color: #555;
         width: 125%;

         &:not(.label-icon).active {
            height: calc(125% - 0.25rem); // NOTE due to 1.25x radio when autoresize textarea
            width: calc(125% - 2rem);
         }

         &:not(.label-icon).active.textarea {
            height: calc(125% - 0.6rem); // NOTE due to 1.25x radio when autoresize textarea
            width: calc(125% - 2rem);
         }

         .popup {
            right: 3rem;
            top: 2rem;
            cursor: pointer;
            position: absolute;
            z-index: 1000;
            pointer-events: all;
         }

         // TODO required to fix npm-pipeline-rails or move to webpacker
         //&:has(+ .character-counter) {
         // width: calc(120% - 2rem);
         //}

         // error block under the field
         .error {
            @extend .error;
            transform: translateY(0.7rem);
            position: absolute;
            top: 100%;
            left: 0;
            word-break: break-word;
            white-space: normal;
            line-height: normal;
            font-size: 1rem;

            &:empty {
               display: none;
            }
         }

      }

      [type="checkbox"] + span:not(.lever) {
         color: #000;
      }

      ul:not(.browser-default) {
         min-height: 4rem;
         &:empty {
            min-height: auto;
         }
      }

      .character-counter {
         font-size: .75rem;
         top: calc(125% - 1.8rem);
         right: 0.8rem;
         position: absolute;
      }
   }

   .fake-input-field {
      position: relative;
      margin-top: 2rem;

      [type="checkbox"]:checked + label:before {
         border-right: 0.15rem solid $soft_blue;
         border-bottom: 0.15rem solid $soft_blue;
      }
   }


   .list {
      tbody {
         td.actions {
            width: 5rem;

            i.material-icons {
               cursor: pointer;
               color: $terracota;
            }
         }
      }
   }

   .form-modal {
      width: 90%;
      left: 5%;
      margin: 0;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;
      filter: alpha(opacity=0.98);
      opacity: 0.98 !important;
      max-height: none;

      // select dropdown
      .select-dropdown.dropdown-content {
         li:first-child {
            background-color: #c0c0c0;
            pointer-events: none;
         }
      }

      .modal-content {
         padding: 1rem;
         overflow-x: hidden;
      }

      .modal-footer {
         padding: 1rem;
         height: 5rem;
      }

      &.open {
         top: 5% !important;
         height: 90%;
         border: outset #e7f3ff 0.1rem;
         border-radius: 0.2rem;
      }

      form {
         h5 {
            line-height: 100%;
            font-size: 125%;
         }

         .row {
            margin-bottom: 0.5rem;
         }
      }

      .block {
         position: relative;

         &.blank {
            height: 3.5rem;
         }

          .block-item {
             z-index: 1000;
             position: absolute;
             right: 0;
             top: 0
         }
      }
   }

   .chip {
      font-size: 90%;
      color: $smooth_dark;
      height: auto;
      margin: 0.2rem;
      line-height: 230%;
      border-radius: 2rem;
      padding: 0 0.8rem;

      &.year-date, &.happened-at {
         padding: 0 0.4rem 0 0.4rem;
         background-color: #f8f8f8 !important;
         &.right {
            margin-top: 0.5rem;
         }
      }

      &.year-date.nearby {
         border: 0.1rem solid #88c5eb;;
      }

      &.date {
         background-color: #f8f8f8 !important;
      }

      &.calendary {
         background-color: #f0f8ff !important;
      }

      .close {
         line-height: inherit;
         font-size: inherit;
      }

      .unfix {
         line-height: inherit;
         font-size: inherit;
         cursor: pointer;
         float: right;
         padding-left: 0.6rem;
      }

      span {
         display: inline;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         margin-left: 0.2rem;
         margin-right: 0.2rem;
         -moz-user-select: auto;
         -webkit-user-select: auto;
         -ms-user-select: auto;

         .plain {
            margin: 0;
            padding: 0;
            white-space: pre-wrap;

            &.selected {
               background-color: aliceblue;
            }
         }
      }

      span.multiline {
         white-space: pre-wrap;
      }
   }

   body {
      .progress {
         display: none;
      }

      &.in-progress {
         .progress {
            position: absolute;
            bottom: 1rem;
            width: 50%;
            left: 25%;
            display: block;
         }
      }
   }

   body > span {
      & > h2, & > h4, & > h5 {
         text-align: center;
      }
   }
}