app.scss

/*
Copyright 2019 ODK Central Developers
See the NOTICE file at the top-level directory of this distribution and at
https://github.com/getodk/central-frontend/blob/master/NOTICE.

This file is part of ODK Central. It is subject to the license terms in
the LICENSE file found in the top-level directory of this distribution and at
https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
including this file, may be copied, modified, propagated, or distributed
except according to the terms contained in the LICENSE file.
*/
@use 'sass:math';
@import './mixins';

html {
  --color-accent-secondary: #{$color-accent-secondary};
  min-height: 100%;
}

body {
  background-color: $color-page-background;
  box-shadow: 0 -2px 0 #777 inset;
  color: $color-text;
  min-height: 100vh;

  // Always show the scrollbar so that content doesn't shift to the left if/when
  // the scrollbar happens to appear.
  overflow: hidden scroll;
  &.modal-open { overflow-y: hidden; }

  &:lang(ja) { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
}

h1, .h1 {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

p { @include text-block; }

dl > * {
  border-bottom: 1px solid #ddd;
  padding-block: $padding-block-dl;

  &:first-of-type { padding-top: 0; }

  &:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
}

// Normal <dl> elements that are not .dl-horizontal are expected to have
// children that are <div> elements. Each <div> must contain a <dt> and a <dd>.
dl:not(.dl-horizontal) {
  > div {
    display: flex;
    flex-direction: column-reverse;
  }

  dt {
    color: #666;
    font-weight: normal;
  }

  dd { font-size: 16px; }
}

// <dl> elements that are .dl-horizontal are expected to have children that are
// <dt> and <dd> elements. That's different from how other <dl> elements work,
// as their children are expected to be <div> elements. The difference comes
// down to the fact that .dl-horizontal uses a CSS grid, while other <dl>
// elements use flexbox.
.dl-horizontal {
  $padding-between: 12px;
  $dt-width: 160px + $padding-panel-body + $padding-between;

  display: grid;
  // Components may override grid-template-columns in order to adjust the width
  // of the <dt>.
  grid-template-columns: $dt-width 1fr;

  dt { padding-left: $padding-panel-body; }
  dd { padding-right: $padding-panel-body; }

  // Equally distribute the padding between the <dt> and the <dd> so that it is
  // easy for components to give the two elements the same width.
  dt { padding-right: $padding-between; }
  dd { padding-left: $padding-between; }
}

.dfn { border-bottom: 2px dotted #999; }

pre {
  background-color: $color-subpanel-background;
  border-color: $color-subpanel-border;
}

code {
  padding: 2px 4px;
  font-size: 90%;

  pre & {
    padding: 0;
    font-size: inherit;
    white-space: pre;
  }
}

.text-monospace { font-family: $font-family-monospace; }

em { @include italic; }

.tooltip {
  /* v-tooltip.aria-describedby tooltips are rendered before they are shown
  on-screen. `display` is not set to `none` for those tooltips. Instead, they
  are transparent. However, we do need to position them: otherwise, they would
  result in extra space at the bottom of the page. I tried using the sr-only
  class, but that resulted in Floating UI miscalculating the position of the
  tooltip. Instead, tooltips will be positioned at the top of the page. */
  top: 0;
  // Move the tooltip to the left so that it doesn't obstruct the navbar.
  left: -1000px;
}
.tooltip-inner {
  border-radius: 2px;
  max-height: 100vh;
  overflow-wrap: break-word;
  padding-bottom: 2px;
  // Allow the text to have line breaks.
  white-space: pre-line;
}



////////////////////////////////////////////////////////////////////////////////
// ICONS

[class^="icon-"] { vertical-align: -1px; }

.btn, a, .label {
  .caret { margin-left: 6px; }

  > [class^="icon-"]:first-child {
    // There should not be white space between an icon and text content that
    // follows it. For a link in particular, the underlining will be off if
    // there is white space.
    margin-right: $margin-right-icon;

    + .caret { margin-left: 0; }
  }
}

/* Bootstrap has an .icon-bar class that is unrelated to IcoMoon, but our
IcoMoon styles end up applying to it, because our IcoMoon selectors select on
the "icon-" class name prefix. To resolve that, we copy the .icon-bar styles for
.navbar-icon-bar and use .navbar-icon-bar wherever we would use .icon-bar. This
should not be an issue for Bootstrap 4, which does not seem to have an .icon-bar
class. */

.navbar-toggle .navbar-icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggle .navbar-icon-bar + .navbar-icon-bar {
  margin-top: 4px;
}

.navbar-default .navbar-toggle .navbar-icon-bar {
  background-color: #888;
}

.title-icon {
  padding-left: 6px;
  font-size: 24px;
  color: #666;
}



////////////////////////////////////////////////////////////////////////////////
// LINKS AND BUTTONS

.btn, a {
  &[aria-disabled="true"], &.disabled, fieldset[disabled] & {
    cursor: not-allowed;
    opacity: 0.65;
  }
}

$btn-focus-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
.btn {
  border: none;
  border-radius: 2px;
  font-size: $font-size-btn;
  // I think we set this for the Spinner component.
  overflow: hidden;
  padding: $padding-top-btn $hpadding-btn $padding-bottom-btn;
  position: relative;

  &:focus, &:active:focus { outline: none; }
  &:focus { box-shadow: $btn-focus-box-shadow; }
  &[aria-disabled="true"], &.disabled, fieldset[disabled] & { box-shadow: none; }
}

.btn-primary {
  background-color: $color-action-background;

  &[aria-disabled="true"], &.disabled, fieldset[disabled] & {
    background-color: $color-action-background-disabled;
  }

  &:hover, &:focus, &:active:focus {
    background-color: $color-action-background-hover;

    &[aria-disabled="true"], &.disabled, fieldset[disabled] & {
      background-color: $color-action-background-disabled;
    }
  }
}

.btn-default {
  background-color: #ddd;

  &:hover, &:focus, &:active:focus {
    background-color: #ccc;
    &[aria-disabled="true"], &.disabled, fieldset[disabled] & { background-color: #ddd; }
  }

  > [class^="icon-"]:first-child { color: $color-action-background; }
}

.btn-danger {
  background-color: $color-danger;

  &:hover, &:focus, &:active:focus {
    background-color: $color-danger-dark;

    &[aria-disabled="true"], &.disabled, fieldset[disabled] {
      background-color: $color-danger;
    }
  }
}

a, .btn-link {
  &:hover, &.disabled, &[aria-disabled="true"], fieldset[disabled] & {
    text-decoration: none;
  }

  > [class^="icon-"]:first-child {
    // Using inline-block so that the icon is not underlined even when the link
    // has `text-decoration: underline`.
    display: inline-block;
  }
}

a:not(.btn), .btn-link {
  &, &:hover { color: $color-action-foreground; }

  &:focus {
    background-color: transparentize(#000, 0.94);
    color: #23527c;
    text-decoration: underline;
  }

  &.disabled, &[aria-disabled="true"], fieldset[disabled] & { color: #888; }
}

a {
  &:focus { outline: none; }

  &, &:visited {
    @media print {
      text-decoration: none;
    }
  }

  > .icon-angle-right:last-child:not(:first-child) {
    color: $color-accent-primary;
  }

  // Not specifying pointer-events if the link is disabled so that the cursor
  // and any tooltip are shown.
}

.btn-link {
  border-radius: 0;

  &, &:active, &[aria-disabled="true"], fieldset[disabled] & {
    background-color: transparent;
  }

  &:focus {
    background-clip: content-box;
    box-shadow: none;
  }
}

.btn-group {
  display: inline-block;
  position: relative;
  vertical-align: middle;

  .dropdown-toggle:active, &.open .dropdown-toggle { outline: none; }
  &.open .dropdown-toggle:focus { box-shadow: $btn-focus-box-shadow; }

  > .btn {
    float: left;

    &:hover, &:focus, &:active { z-index: 2; }
    &:focus { box-shadow: none; }

    + .dropdown-toggle {
      padding-left: 8px;
      padding-right: 8px;
    }
  }

  > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
  }
  > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  > .btn:last-child:not(:first-child), > .dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  > .btn-default + .btn-default { border-left: 1px solid #ccc; }
}



////////////////////////////////////////////////////////////////////////////////
// DROPDOWN MENUS

.dropdown-menu {
  font-size: $font-size-dropdown-menu;
  min-width: $min-width-dropdown-menu;

  .divider {
    margin-bottom: 5px;
    margin-top: 5px;
  }
}



////////////////////////////////////////////////////////////////////////////////
// FORMS

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;

  &[disabled] {
    opacity: 0.5;
    // Do not additionally dim a nested disabled fieldset.
    fieldset[disabled] & { opacity: 1; }
  }
}

input[type="radio"], input[type="checkbox"], input[type="file"] {
  &:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
}

select[multiple] { height: auto; }

.help-block {
  color: #737373;
  margin-bottom: 10px;
  margin-top: 5px;
}

$form-group-padding-bottom: 15px;
.form-group {
  display: block;
  font-weight: normal;
  margin-bottom: 15px;
  padding-bottom: $form-group-padding-bottom;
  position: relative;

  $form-control-z-index: 1;
  .form-control {
    @include form-control-background;
    border: none;
    border-bottom: 1px solid $color-input-inactive;
    border-radius: 0;
    color: $color-input;
    position: relative;
    z-index: $form-control-z-index;

    &, &:focus { box-shadow: none; }

    &:focus:not([aria-disabled="true"]) {
      border-bottom-color: $color-action-foreground;
    }

    &::placeholder { color: $color-text; }

    &[aria-disabled="true"], &[readonly], fieldset[disabled] & {
      &, &::placeholder { color: $color-input-inactive; }
    }

    &[aria-disabled="true"], fieldset[disabled] & { cursor: not-allowed; }
  }

  .form-label {
    color: $color-input-inactive;
    display: block;
    font-size: 11px;
    height: 0;
    padding-left: 12px;
    transform: translateY(2px);
    transition: 0.15s transform, 0.15s color;
  }
  &:focus-within .form-label { color: $color-action-foreground; }
  .form-control {
    &:placeholder-shown ~ .form-label { transform: translateY(-15px); }
    &[aria-disabled="true"] ~ .form-label { color: $color-input-inactive; }
  }

  .close {
    float: none;
    opacity: 0.5;
    position: absolute;
    right: 3px;
    top: 5px;
    z-index: $form-control-z-index + 1;

    &:hover, &:focus { opacity: 0.2; }
  }
}

input[type="radio"], input[type="checkbox"] {
  margin: 4px 0 0;
  line-height: normal;

  &[disabled], fieldset[disabled] & { cursor: not-allowed; }
}

.radio, .checkbox {
  @include text-block;
  display: block;
  margin-bottom: 10px;
  position: relative;

  label {
    font-weight: normal;
    margin-bottom: 0;
    min-height: 20px;
    padding-left: 20px;

    + .help-block {
      margin-left: 20px;
      margin-top: 0;
    }
  }

  &.disabled label, fieldset[disabled] & label {
    cursor: not-allowed;
    color: $color-input-inactive;
  }
}

.form-group + .radio,
.checkbox + .radio,
.form-group + .checkbox,
.radio + .checkbox {
  margin-top: 10px;
}

.radio + .radio, .checkbox + .checkbox { margin-top: -5px; }

.radio input[type="radio"], .checkbox input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
}

.checkbox label { cursor: pointer; }

select {
  // We want to specify `appearance: auto;` for Chrome and Firefox and
  // `-webkit-appearance: none;` for Safari. Safari does not support `auto`, so
  // it will ignore the second `appearance`.
  appearance: none;
  appearance: auto;
}

.form-inline {
  margin-bottom: 15px;
  padding-bottom: $form-group-padding-bottom;

  .form-group, .radio, .checkbox {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-group {
    padding-bottom: 0;

    + .form-group { margin-left: 10px; }
  }

  .form-control {
    display: inline-block;
    vertical-align: middle;
    width: auto;
  }

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

    label { padding-left: 0; }

    input {
      margin-left: 0;
      position: relative;
    }
  }

  .icon-filter {
    color: #999;
    margin-right: $margin-right-icon;
  }
}

.has-error {
  .form-control {
    border-color: $color-danger;

    &:focus {
      box-shadow: none;

      &:not([aria-disabled="true"]) { border-color: $color-danger-dark; }
    }
  }

  .form-label,
  .radio,
  .checkbox,
  &.radio label,
  &.checkbox label,
  .help-block {
    color: $color-danger;
  }

  .form-control:focus:not([aria-disabled="true"]) ~ .form-label {
    color: $color-danger-dark;
  }
}

// In Safari, the effect of .uncommitted-change is not visible on input and
// select elements.
input.uncommitted-change,
select.uncommitted-change,
// Including .form-control.uncommitted-change in addition to
// input.uncommitted-change for specificity reasons, in order to override the
// styles on .form-group .form-control.
.form-control.uncommitted-change,
.btn.uncommitted-change {
  &, &:focus { box-shadow: 0 0 0 3px #ffef67; }
}
tr.uncommitted-change { background-color: #ffef67; }



////////////////////////////////////////////////////////////////////////////////
// TABLES

.table {
  margin-bottom: $margin-bottom-table;

  > thead {
    background-color: $color-table-heading-background;

    > tr > th {
      border-bottom: $border-bottom-table-heading;
      font-size: $font-size-table-heading;
      padding: $padding-table-heading;
    }
  }

  > tbody {
    > tr > th, > tr > td {
      border-top: $border-top-table-data;
      padding: $padding-top-table-data $padding-right-table-data
               $padding-bottom-table-data $padding-left-table-data;
    }
  }

  > thead > tr.success > th,
  > thead > tr > th.success,
  > tbody > tr.success > td,
  > tbody > tr > td.success {
    background-color: $color-success-light;
  }

  > thead > tr.info > th,
  > thead > tr > th.info,
  > tbody > tr.info > td,
  > tbody > tr > td.info {
    background-color: $color-info-light;
  }

  > thead > tr.highlight > th,
  > thead > tr > th.highlight,
  > tbody > tr.highlight > td,
  > tbody > tr > td.highlight {
    background-color: $color-highlight;
  }
}

.data-loading {
  opacity: 0.5;
  pointer-events: none;
}

.row-number {
  color: #999;
  font-size: 11px;
  padding-top: 11px;
  text-align: right;
  vertical-align: middle;
}

.empty-table-message {
  color: #555;
  font-size: 15px;
}



////////////////////////////////////////////////////////////////////////////////
// LABELS

.label-default { background-color: #777; }
.label-primary { background-color: $color-action-background; }
.label-warning { background-color: $color-warning; }



////////////////////////////////////////////////////////////////////////////////
// PAGE STRUCTURE

/*
Most pages render a PageHead and a PageBody. The PageBody will often contain one
or more PageSection components. Some pages use .panel-simple, but this is an
older pattern: try to use PageSection instead.

The PageBody component may show a heading at the top. Right now we implement
this using the page-body-heading class, but we may create a component if it
becomes more complicated.
*/

// .heading-with-button is deprecated: use .page-body-heading instead.
.page-body-heading, .heading-with-button {
  margin-bottom: 25px;

  > .btn {
    float: right;
    margin-left: 20px;
  }

  ul { @include text-list; }
}



////////////////////////////////////////////////////////////////////////////////
// PANELS

.panel {
  border: none;
  border-radius: 0;

  .panel-heading {
    border-radius: 0;

    .panel-title {
      font-weight: bold;
      letter-spacing: normal;
    }
  }

  .panel-footer {
    background: $color-subpanel-background;
    border-top-color: $color-subpanel-border;
    margin: -15px;
    margin-bottom: -25px;
    margin-top: 20px;
  }
}

.panel-default {
  .panel-heading {
    background-color: $color-accent-primary;
    color: #fff;

    .panel-title {
      font-size: 18px;
      letter-spacing: -0.02em;
    }
  }
}

.panel-main {
  box-shadow: $box-shadow-panel-main;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  // A .panel-main element is a child of a .col-sm-6 element. .col-sm-6 has
  // left + right padding of 30px.
  max-width: #{math.div($max-width-page-body, 2) - 30px};

  .panel-body {
    padding-bottom: 25px;
    padding-top: 25px;
  }
}

// Intended to be styled similarly to .table.
.panel-simple {
  background-color: transparent;
  box-shadow: none;

  .panel-heading {
    background-color: $color-table-heading-background;
    border-bottom: $border-bottom-table-heading;
    padding: $padding-table-heading;

    .panel-title {
      font-size: $font-size-table-heading;
      line-height: inherit;
    }
  }

  .panel-body {
    padding: 14px $padding-right-table-data
             $padding-bottom-table-data $padding-left-table-data;

    hr {
      // An <hr> styles the break between two sections of a
      // .panel-simple .panel-body similarly to the space between two rows of a
      // .table. We want the <hr> to stretch across the entire width of the
      // .panel-body, hence the negative left and right margins.
      margin: $padding-bottom-table-data (-$padding-right-table-data)
              $padding-top-table-data (-$padding-left-table-data);
      border-top: $border-top-table-data;
    }
  }
}

.panel-simple-danger {
  @extend .panel-simple;

  .panel-heading {
    border: none;
  }

  .panel-body {
    border: 1px solid $color-danger;
  }
}

.panel-danger {
  // This is needed in case a component adds a border radius to the bottom of
  // .panel-body.
  background-color: transparent;

  &> .panel-heading {
    color: white;
    background-color: $color-danger;
    border-bottom-color: $color-danger;

    .btn-danger { border: 1px solid #fff; }
  }

  &> .panel-body {
    background-color: #fff;
    border: 1px solid $color-danger;
    border-top: none;

    &> .panel-footer {
      margin: 0 -15px -15px -15px;
      background-color: #585858;
      color: white;
    }
  }
}

.panel-dialog {
  border: 2px solid $color-accent-primary;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 5px;
  background-color: #fff;
  max-width: 77ch;

  .panel-heading {
    border: none;

    .panel-title {
      font-size: 16px;
      font-weight: bold;
      line-height: inherit;
      color: $color-accent-primary;
    }
  }
  .panel-body {
    padding: 0 15px;
  }
}


////////////////////////////////////////////////////////////////////////////////
// NAVS

.nav-tabs {
  border-bottom: none;

  > li {
    margin-bottom: -1px;
    margin-right: 10px;

    > a, &.active > a {
      &, &:hover, &:focus {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: $color-text;
        padding: 7px $hpadding-nav-tab 6px;
      }

      &:focus {
        outline: none;
      }
    }

    > a {
      &, &:hover, &:focus {
        background-color: transparent;
      }

      &:hover {
        border-bottom-color: $color-accent-primary;
      }

      &:focus {
        border-bottom-color: $color-action-foreground;
      }
    }

    &.active > a {
      &, &:hover, &:focus {
        background-color: $color-subpanel-background;
        border-bottom-color: $color-accent-primary;
      }
    }

    &.disabled {
      &:hover {
        cursor: not-allowed;
      }

      > a {
        &, &:hover, &:focus {
          color: #999;
        }

        &:hover, &:focus {
          border-bottom-color: transparent;
        }
      }
    }
  }

  .badge {
    background-color: #999;
    vertical-align: baseline;
  }
}

.chip {
  font-size: 10px;
  top: -2px;
  position: relative;
  color: white;
  padding: 4px 7px;
  margin-left: 2px;
  background: $color-accent-primary;
  border-radius: 5px;
}



////////////////////////////////////////////////////////////////////////////////
// markRowsChanged(), markRowsDeleted()

[data-mark-rows-changed="true"] { background-color: $color-highlight; }
[data-mark-rows-changed="false"] { transition: background-color 0.6s 6s; }

[data-mark-rows-deleted="true"] {
  opacity: 0;
  // If these numbers change, then markRowsDeleted() will need to change as
  // well.
  transition: opacity 0.6s 0.15s;
}
[data-mark-rows-deleted="false"] { display: none; }


////////////////////////////////////////////////////////////////////////////////
// Don't let styles defined in Central bleed into new Web Forms Component

.odk-form :not(svg|*) {
  all: revert;
}