nginxconfig.io/src/nginxconfig/scss/style.scss

/*
Copyright 2020 DigitalOcean

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

@import url("https://assets.digitalocean.com/prism/prism.css");

$header: #0071fe;
$highlight: #f2c94c;
@import "~do-bulma/src/style";

.do-bulma {
  $pretty--color-dark: $primary;
  $pretty--color-default: $primary;
  @import "~pretty-checkbox/src/pretty-checkbox";
  $vs-border-color: $border;
  $vs-border-radius: $border-radius;
  $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
  $vs-state-active-bg: $primary;
  @import "~vue-select/src/scss/vue-select";

  .tabs {
    ul {
      li {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        &:hover,
        &:focus {
          a {
            &::after {
              background: $dark-blue;
            }
          }
        }

        &.is-before {
          a {
            color: mix($dark-grey, $primary);

            &::after {
              background: rgba($primary, .5);
            }

            &:hover {
              color: $dark-blue;

              &::after {
                background: $dark-blue;
              }
            }
          }
        }

        &.is-changed {
          a {
            color: $dark-blue;
          }
        }

        a {
          &.domain {
            flex-grow: 1;
            padding-right: .25rem;

            &::after {
              border-bottom-right-radius: 0;
              border-top-right-radius: 0;
            }
          }

          &.remove {
            padding-left: .25rem;
            transition: color $transition;

            &::after {
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;
            }

            &:hover,
            &:focus {
              color: $danger;

              &::after {
                background: $danger;
              }
            }

            i {
              margin: 0;
            }
          }

          i {
            font-size: .75em;

            &.fa-plus {
              margin: 0 .35rem 0 0;
            }
          }
        }
      }
    }
  }

  .panel {
    margin-top: 0;
    padding: 1.5rem 0 2rem;
    text-align: left;

    &.presets {
      .header-group,
      .buttons-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .header-group {
        h3 {
          margin: 0;
        }

        .button {
          &.is-tiny {
            font-size: 20px;
          }
        }
      }

      .message,
      .buttons-group {
        margin: 1rem 0 0;
      }

      .buttons-group {
        align-items: center;
      }
    }

    .container {
      padding: 0 1.5rem;
    }

    .tabs {
      ul {
        padding: 0 1rem;
      }
    }

    .navigation-buttons {
      align-items: center;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin: 1.5rem 1.5rem 0;

      .button {
        margin-left: .5rem;

        i + span,
        span + i {
          margin: 0 0 0 .5rem;
        }
      }
    }
  }

  .field-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -.5rem;

    .field {
      flex-grow: 1;
      margin: 0 .5rem;
      text-align: left;
    }

    + .field-row,
    + .field {
      margin-top: 1rem;
    }
  }

  .field {
    &.is-horizontal {
      align-items: center;

      &.is-aligned-top {
        align-items: flex-start;
      }
    }

    &.is-grouped {
      > .control {
        &:last-child {
          margin: .25rem 0 0;
        }

        &:not(:last-child) {
          margin: .25rem .75rem 0 0;
        }
      }
    }

    .is-changed {
      input {
        &:not(.vs__search) {
          &,
          &:focus {
            background: rgba($highlight, .35);
          }
        }
      }

      .checkbox,
      .radio,
      .text {
        background: rgba($highlight, .35);
      }

      label {
        &.text {
          padding: .25rem .5rem;
        }
      }

      .v-select {
        .vs__dropdown-toggle { // sass-lint:disable-line class-name-format
          background: rgba($highlight, .35);
        }
      }
    }

    label {
      @include sailec-medium;

      color: $dark-blue;
      font-size: 1rem;

      &.text {
        border-radius: $border-radius;
        color: $dark-grey;
        display: inline-block;
        font-size: 14px;
        padding: 0 .5rem;
      }
    }

    .button {
      &.is-static {
        background: $panel;
        border: 1px solid $border;
        color: $dark-grey;
        padding: 0 ($margin * 1.5);
      }
    }

    .control {
      &:not(.is-expanded) {
        + .control {
          &:not(.is-expanded) {
            margin-top: .25rem;
          }
        }
      }
    }
  }

  .field-body {
    &.is-vertical {
      flex-direction: column;

      > .field {
        &:not(:last-child) {
          margin-bottom: .75rem;
        }
      }
    }
  }

  .checkbox,
  .radio {
    border-radius: $border-radius;
    padding: .25rem .5rem;

    .pretty {
      &.p-icon {
        font-size: 18px;
        margin: 0;

        .state {
          .icon {
            &::before {
              color: $panel;
              font-size: 14px;
            }
          }

          label {
            color: $dark-grey;
            font-size: 14px;
            padding-left: calc(#{$margin / 2} + 1.5em);
            text-indent: initial;

            &::before,
            &::after {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  // sass-lint:disable class-name-format
  .v-select {
    &.vs--open {
      > ul {
        opacity: 1;
      }

      .vs__dropdown-toggle {
        border-color: $primary;
        box-shadow: 0 0 2px rgba($success, .5);

        .vs__selected {
          top: .75em;
        }
      }
    }

    > ul {
      display: block !important; // sass-lint:disable-line no-important
      margin: 0;
      opacity: 0;
      transition: opacity $transition;
    }

    .vs__dropdown-toggle {
      box-shadow: none;
      padding: 0 16px;
      transition: border $transition, box-shadow $transition;

      .vs__selected-options {
        padding: 0;

        .vs__selected {
          margin: 0;
          padding: 0;
          transition: opacity $transition;
        }

        .vs__search {
          &,
          &:focus {
            background: none;
            border: 0;
            box-shadow: none;
            margin: 0;
            padding: 0;
            width: 0;
          }
        }
      }

      .vs__actions {
        padding: 0;
      }
    }
  }
  // sass-lint:enable class-name-format

  .modal {
    .modal-card {
      text-align: left;
    }
  }

  .setup {
    .panel {

      p {
        color: $dark-blue;
        overflow-wrap: break-word;

        a {
          text-decoration: none;
        }
      }

      ol {
        margin: 0 1rem;

        li {
          margin: 0 0 1.5rem;
        }
      }
    }

    .buttons {
      margin: 1rem 0;
    }
  }

  pre {
    &[class*="language-"] {
      padding: .5rem 1rem;

      code {
        &[class*="language-"] {
          &,
          .token {
            font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
            font-size: 13.6px;
            font-weight: normal;
            line-height: 1.4em;
          }

          // Fix Bulma interfering with Prism
          .token {
            &.number,
            &.tag {
              background: transparent;
              border-radius: initial;
              color: inherit;
              display: initial;
              font-size: inherit;
              margin: initial;
              padding: initial;
              text-align: initial;
              vertical-align: initial;
            }
          }
        }
      }
    }
  }
}