apostrophe/lib/modules/apostrophe-ui/public/css/components/buttons.less

The Apostrophe Content Management System.

.apos-buttons
{
  background: @apos-white;
  white-space: nowrap;
  .apos-glow;
  .apos-rounded;
  .apos-button-border(@apos-green);
  .apos-button-group
  {
    display: inline-block;
    margin: 0 (@apos-padding-1 / 2);
  }
  .apos-button
  {
    border-radius: 0;
  }
}

[data-apos-trash-item].apos-button { color: @apos-red; }

.apos-button
{
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  .apos-inline-block;
  padding: @apos-padding-1 @apos-padding-2;
  .apos-rounded;
  .apos-button-border;
  // .apos-text-small;
  font-size: 14px;
  line-height: inherit;
  letter-spacing: 1px;
  @media @apos-breakpoint-desktop-xl { .apos-text-small; }
  background-color: @apos-white;
  color: @apos-dark;
  cursor: pointer;
  text-decoration: none;
  .apos-no-select;
  .apos-transition--bounce;

  .apos-button-label
  {
    opacity: 1;
    .apos-transition();
  }

  .fa-caret-right {
    margin-left: 10px;
    position: relative;
    top: 1px;
  }


  &:hover
  {
    .apos-glow;
    cursor: pointer;
  }
  &:focus
  {
    outline: none;
  }
  &:active,
  &:focus
  {
    .apos-drop-shadow(0px, 0px, 13px, 4px, fade(@apos-base, 30%));
  }
  &.apos-button--square
  {
    border-radius: 0px;
  }

  &.ui-draggable-handle
  {
    cursor: move;
  }

  &[data-busy="1"]
  {
    .apos-button-label { opacity: 0; }
    &:after
    {
      opacity: 1;
      .apos-rotate();
    }
  }

  // i { margin-left: 4px; }
}

// SPINNER =====================

.apos-button:after
{
  position: absolute;
  left: ~'calc(50% - 12px)';
  top: 8px;
  width: 24px;
  height: 24px;

  color: @apos-green;
  font-size: 24px;
  .fa;
  content: '\f110';
  opacity: 0;
  line-height: 100%;
  .apos-transition();
}

.apos-button--group:after
{
  display: none;
}

// TYPES =======================

.apos-button--small {
  .apos-button {
    padding: 8px;
    font-size: 12px;
  }
}

.apos-button--in-context
{
  .apos-glow;

  &:hover
  {
    .apos-drop-shadow(0px, 0px, 13px, 4px, fade(@apos-base, 30%));
  }
  &:active
  {
    .apos-drop-shadow(0px, 0px, 20px, 6px, fade(@apos-base, 30%));
  }
}

.apos-button--global
{
  .apos-button-border(@apos-white);
  background-color: @apos-base;
  color: @apos-white;
  .apos-drop-shadow;
  &:hover
  {
    .apos-drop-shadow(0px, 0px, 13px, 4px, fade(@apos-black, 20%));
  }
  &:after
  {
    color: @apos-white;
  }
  &[apos--danger]
  {
    background-color: @apos-red;
  }
}

.apos-button--more
{
  .apos-arrow-right;
  &:hover
  {

  }
}

.apos-button--major
{
  background-color: @apos-base;
  color: @apos-white;
  padding: @apos-padding-1 @apos-padding-4;
  border: none;
  &:after
  {
    color: @apos-white;
  }
}

.apos-button--minor
{
  padding: @apos-padding-1 @apos-padding-4;
  border: none;
  &:hover
  {
    .apos-drop-shadow(@spread:0;);
  }
}

.apos-button--action
{
  background-color: @apos-white;
  color: @apos-dark;
  padding: @apos-padding-1 @apos-padding-2;
  .apos-button-border(@apos-green);
}

.apos-button--danger
{
  .apos-button--major;
  background-color: @apos-red;
  &:hover
  {
    .apos-drop-shadow(@color:@apos-red, @spread:0);
  }
}

.apos-button--group
{
  padding: 0 @apos-padding-1;
  white-space: nowrap;
}

.apos-button--in-group
{
  padding: @apos-padding-1;
  background-color: transparent;
  border: none;
  .apos-transition;
  &:hover
  {
    color: @apos-primary;
    .apos-drop-shadow(0, 0, 0, 0);
    &[data-apos-trash-item] {
      color: darken(@apos-red, 20%);
    }
  }
}

.apos-button--circular
{
  line-height: 0;
  font-size: 12px;
  padding: 9px;
  .apos-rounded(@apos-padding-3);
  i
  {
    position: absolute;
    margin-left: 0px;
    margin-left: 0.5px;
    transform: translateX(-50%);
    .apos-transition--bounce;
  }

}

.apos-button--disabled
{
  border: none;
  opacity: 0.5;
  cursor: not-allowed;
  &:hover, &:active
  {
    box-shadow: none;
  }
}

.apos-button--inline {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding: 0;

  .apos-button {
    color: @apos-dark;
    padding: 4px 5px;
    font-size: 12px;
    &:hover { color: @apos-white; }
  }
}

.apos-button-group {
  margin-bottom: @apos-margin-2;
}