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.
*/

$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-state-active-bg: $primary;
  $vs-border-radius: $border-radius;
  $vs-border-color: $border;
  $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
  @import "~vue-select/src/scss/vue-select";

  .tabs {
    ul {
      li {
        &.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 {
          i {
            font-size: .75em;

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

            &.fa-times {
              margin: 0 0 0 .5rem;
              transition: color $transition;

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

  .panel {
    margin-top: 0;
    padding: 2rem 0;

    .container {
      padding: 0 1.5rem;
    }

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

  .buttons-group {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .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-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 {
          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-color: $border;
        border-style: solid;
        border-width: 1px 0 1px 1px;
        color: $dark-grey;
        padding: 0 ($margin * 1.5);
      }
    }

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

  .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;
            }
          }
        }
      }
    }
  }

  .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;
      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;
      }
    }
  }
}