@natlibfi/melinda-ui-commons/src/styles/toolbar.css

Common modules for Melinda UI applications

.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  background-color: var(--color-primary-white);
  color: var(--color-primary-blue);

  .toolbar-actions {
    display: flex;
    gap: 24px;
    height: 50px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;

    .toolbar-action {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 375px;

      .toolbar-action-text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-family-link);
        font-size: var(--font-size-link-extra-large);
        font-weight: var(--font-weight-link);
        padding-left: 12px;
        padding-right: 10px;
      }

      .toolbar-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: var(--font-size-icon-large);
        }

        &.icon-expand {

          span:before {
            content: 'expand_more';
          }

        }

      }

      &.expanded {
        color: var(--color-primary-blue);
        outline-color: var(--color-primary-blue);
        outline-style: solid;
        outline-width: 0.2rem;
        outline-offset: .2rem;
        border-radius: 0.25rem;

        .toolbar-action-icon {

          &.icon-expand {

            span:before {
              content: 'expand_less';
            }

          }

        }

      }

      &.pinned {
        .toolbar-action-icon {

          &.icon-expand {

            span:before {
              content: 'push_pin';
            }

          }
        }
      }

      &:hover {
        color: var(--color-primary-blue);
        cursor: pointer;

        .toolbar-action-text {
          text-decoration: underline;
          text-underline-position: auto;
          text-decoration-thickness: 2px;
          text-underline-offset: 2px;
        }

      }

      &:active:not([disabled]) {
        color: var(--color-primary-blue);
        outline-color: var(--color-primary-blue);
        outline-style: solid;
        outline-width: 0.2rem;
        outline-offset: .2rem;
        border-radius: 0.25rem;
      }

      &[disabled] {
        cursor: default;

        .toolbar-action-text,
        .toolbar-action-icon {
          text-decoration: none;
          color: grey;
        }

      }

    }

  }

  .toolbar-dropdowns {
    display: flex;
    position: relative;
    width: 100%;

    .toolbar-dropdown {
      display: none;
      position: relative;
      flex-direction: row;
      flex-grow: 1;
      justify-content: center;
      align-items: flex-start;
      width: calc(100vw - 95px);
      box-shadow: 0 0.75rem 2rem -2rem rgb(0, 20, 42);
      background-color: var(--color-blue-20);

      .dropdown-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        color: var(--color-primary-blue);
        width: 100%;
        gap: 24px;
        padding-top: 40px;
        padding-bottom: 54px;
        padding-right: 40px;
        padding-left: 40px;

        .dropdown-header {
          display: flex;
          width: 100%;
          border-bottom-color: var(--color-primary-blue);
          border-bottom-style: solid;
          border-bottom-width: 2px;
          padding-left: 6px;
          padding-bottom: 6px;
          align-items: flex-end;
          flex-wrap: wrap;

          .dropdown-header-text {
            font-family: var(--font-family-headline);
            font-size: var(--font-size-headline-medium);
            font-weight: var(--font-weight-headline);
            padding-bottom: 12px;
          }

          .dropdown-header-buttons {
            display: flex;
            flex-direction: row;
            flex-grow: 1;
            justify-content: flex-end;
            align-items: center;

            button.dropdown-pin:before {
              content: 'Kiinnitä';
            }

          }

        }

        .dropdown-action {
          display: flex;
          flex-direction: column;
          width: 100%;
          justify-content: center;
          align-items: center;

          .form-field-container {
            justify-content: center;
            align-items: center;
          }

        }

      }

      &.show {
        width: 100%;
        display: flex;
        position: absolute;
        z-index: 5;
        box-shadow: 0 1.75rem 2rem -2rem rgb(0, 20, 42);

        .dropdown-header {
          display: flex;
        }

      }

      &.pin {
        width: 100%;
        display: flex;
        position: relative;
        z-index: 4;
        box-shadow: 0 0.75rem 2rem -2rem rgb(0, 20, 42);

        .dropdown-header {

          .dropdown-header-buttons {

            button.dropdown-pin:before {
              content: 'Poista kiinnitys';
            }

            button.dropdown-dismiss {
              /* or disable button */
              display: none;
            }

          }

        }

      }

    }

  }

}