landing-pages/site/assets/scss/_buttons.scss

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you 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 "colors";
@import "media";

button {
  cursor: pointer;
  border: 1px solid;
  border-radius: 5px;
  padding: 9px 29px;
  transition: all ease-out 0.2s;

  &:disabled {
    cursor: not-allowed;
  }

  &.btn-filled {
    border-color: map_get($colors, cerulean-blue);
    background-color: map_get($colors, cerulean-blue);

    &:hover {
      border-color: map_get($colors, bright-sky-blue);
      background-color: map_get($colors, bright-sky-blue);
    }
  }

  &.btn-with-icon {
    $icon-height: 30px;

    padding: 14px 20px;

    svg {
      height: $icon-height;
      width: auto;
      padding-right: 15px;
    }

    span {
      display: inline-block;
      line-height: $icon-height;
      vertical-align: middle;
    }
  }

  &.btn-hollow {
    background-color: map_get($colors, white);

    &.btn-blue {
      color: map_get($colors, cerulean-blue);
      border-color: map_get($colors, cerulean-blue);

      &:disabled {
        color: map_get($colors, very-light-pink);
        border-color: map_get($colors, very-light-pink);
      }

      &:hover:enabled {
        color: map_get($colors, white);
        background-color: map_get($colors, cerulean-blue);
      }
    }

    &.btn-brown {
      border-color: map_get($colors, very-light-pink);

      &:hover {
        background-color: map_get($colors, greyish-brown);
        border-color: map_get($colors, greyish-brown);

        span {
          color: map_get($colors, white);
        }

        svg {
          path {
            fill: map_get($colors, white);
          }
        }
      }
    }
  }

  &.with-box-shadow {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
  }

  @media (max-width: $tablet) {
    padding: 4px 17px;
  }
}