formir/src/less/core/components/button.less

Pure CSS / HTML Framework

.@{button} {
  display: inline-block;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: @button-default-font-size;
  line-height: @button-default-line-height;
  padding: @button-default-padding-vertical @button-default-padding-horizontal;
  border-radius: @button-default-border-radius;
  border: @button-default-border;
  color: @button-default-text;
  & when not (@button-default-outline = none) {
    outline: @button-default-outline;
  }
  & when not (@button-default-shadow = none) {
    box-shadow: @button-default-shadow;
  }
  & when not (@button-set-transparent = true) {
    background: @button-default-background;
  }
  &:hover, &.@{button-hover} {
    & when not (@button-hover-border = none) {
      border: @button-hover-border;
    }
    & when not (@button-hover-outline = none) {
      outline: @button-hover-outline;
    }
    & when not (@button-hover-shadow = none) {
      box-shadow: @button-hover-shadow;
    }
    .button-hover;
  }
  & when (@button-set-focus = true) {
    &:focus, &.@{button-focus} {
      & when not (@button-focus-border = none) {
        border: @button-focus-border;
      }
      & when not (@button-focus-outline = none) {
        outline: @button-focus-outline;
      }
      & when not (@button-focus-shadow = none) {
        box-shadow: @button-focus-shadow;
      }
      .button-focus;
    }
  }
  &:active, &.@{button-active} {
    & when not (@button-active-border = none) {
      border: @button-active-border;
    }
    & when not (@button-active-outline = none) {
      outline: @button-active-outline;
    }
    & when not (@button-active-shadow = none) {
      box-shadow: @button-active-shadow;
    }
    .button-active;
  }
  &:disabled, &.@{button-disabled} {
    pointer-events: none;
    cursor: normal;
    .button-disabled;
  }
  &.@{button-inactive} {
    cursor: normal;
    .button-inactive;
  }
  &.@{button-ellipsis} {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    overflow-wrap: normal;
    word-wrap: normal;
    button& {
      > * {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
        word-wrap: normal;
      }
    }
  }
  &.@{button-circle} {
    border-radius: 1000px;
  }
  &.@{button-block} {
    display: block;
  }
  & when not (@button-set-transparent = true) {
    &.@{button-transparent} {
      background-color: transparent !important;
    }
  }
  & when (@button-set-transparent = true) {
    background-color: transparent;
  }
  &.@{button-as-link} {
    border-color: transparent;
    background: transparent;
    outline: none;
    box-shadow: none;
    color: @color-link;
    &:hover {
      color: @color-hover-link;
      text-decoration: underline;
      border-color: transparent;
      background: transparent;
      outline: none;
      box-shadow: none;
    }
    &:focus {
      .menu-item-anchor-focus-inline();
    }
  }
  &.@{button-inverse} {
    border: @button-inverse-border;
    outline: @button-inverse-outline;
    box-shadow: @button-inverse-shadow;
    &:hover, &.@{button-hover} {
      & when not (@button-inverse-hover-border = none) {
        border: @button-inverse-hover-border;
      }
      & when not (@button-inverse-hover-outline = none) {
        outline: @button-inverse-hover-outline;
      }
      & when not (@button-inverse-hover-shadow = none) {
        box-shadow: @button-hover-shadow;
      }
    }
    & when (@button-set-focus = true) {
      &:focus, &.@{button-focus} {
        & when not (@button-inverse-focus-border = none) {
          border: @button-inverse-focus-border;
        }
        & when not (@button-inverse-focus-outline = none) {
          outline: @button-inverse-focus-outline;
        }
        & when not (@button-inverse-focus-shadow = none) {
          box-shadow: @button-inverse-focus-shadow;
        } 
      }
    }
    &:active, &.@{button-active} {
      & when not (@button-inverse-active-border = none) {
        border: @button-inverse-active-border;
      }
      & when not (@button-inverse-active-outline = none) {
        outline: @button-inverse-active-outline;
      }
      & when not (@button-inverse-active-shadow = none) {
        box-shadow: @button-inverse-focus-shadow;
      } 
    }

    .button-inverse;
  }
  input& {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .button-common;
}

.@{button} {
  .for(@sizes); .-each(@name) {
    &-@{name} {
      font-size: ~"@{button-@{name}-font-size}";
      line-height: ~"@{button-@{name}-line-height}";
      padding: ~"@{button-@{name}-padding}";
      border-radius: ~"@{button-@{name}-border-radius}";
      border-width: ~"@{button-@{name}-border-width}";
      outline-width: ~"@{button-@{name}-outline-width}";
      box-shadow: ~"@{button-@{name}-shadow}";
      input& {
        font-size: ~"@{button-@{name}-font-size}" !important;
        line-height: ~"@{button-@{name}-line-height}" !important;
        padding: ~"@{button-@{name}-padding}" !important;
        border-radius: ~"@{button-@{name}-border-radius}" !important;
        border-width: ~"@{button-@{name}-border-width}" !important;
        outline-width: ~"@{button-@{name}-outline-width}" !important;
        box-shadow: ~"@{button-@{name}-shadow}" !important;
      }
    }
  }
}

.@{buttons}, .@{size} {
  .for(@sizes); .-each(@name) {
    &-@{name} {
      .@{button} {
        font-size: ~"@{button-@{name}-font-size}";
        line-height: ~"@{button-@{name}-line-height}";
        padding: ~"@{button-@{name}-padding}";
        border-radius: ~"@{button-@{name}-border-radius}";
        border-width: ~"@{button-@{name}-border-width}";
        outline-width: ~"@{button-@{name}-outline-width}";
        box-shadow: ~"@{button-@{name}-shadow}";
      }
    }
  }
}

.@{button} {
  .for(@colors); .-each(@name) {
    &-@{name} {
      & when not (@button-set-inverse = true) {
        & when not (@button-set-transparent = true) {
          background: ~"@{button-color-@{name}}";
        }
        color: ~"@{color-@{name}-contrast}";
        border-color: ~"@{button-color-@{name}}";
        & when (@button-set-gradient = true) {
          &.@{button-gradient} {
            .gradient(~"@{button-color-@{name}}", ~"@{button-color-2-@{name}}");
          }
        }
        & when (@button-set-gradient = default) {
          .gradient(~"@{button-color-@{name}}", ~"@{button-color-2-@{name}}");
        }
        &:hover, &.@{button-hover} {
          & when not (@button-set-transparent = true) {
            background: ~"@{button-color-hover-@{name}}";
          }
          border-color: ~"@{button-color-hover-@{name}}";
          & when (@button-set-gradient = true) {
            &.@{button-gradient} {
              .gradient(~"@{button-color-hover-@{name}}", ~"@{button-color-2-hover-@{name}}");
            }
          }
          & when (@button-set-gradient = default) {
            .gradient(~"@{button-color-hover-@{name}}", ~"@{button-color-2-hover-@{name}}");
          }
        }
        & when (@button-set-color-focus = true) {
          &:focus, &.@{button-focus} {
            & when not (@button-set-transparent = true) {
              background: ~"@{button-color-focus-@{name}}";
            }
            border-color: ~"@{button-color-focus-@{name}}";
            & when (@button-gradient = true) {
              &.@{button-set-gradient} {
                .gradient(~"@{button-color-focus-@{name}}", ~"@{button-color-2-focus-@{name}}");
              }
            }
            & when (@button-set-gradient = default) {
              .gradient(~"@{button-color-focus-@{name}}", ~"@{button-color-2-focus-@{name}}");
            }
          }
        }
        &:active, &.@{button-active} {
          & when not (@button-set-transparent = true) {
            background: ~"@{button-color-active-@{name}}";
          }
          border-color: ~"@{button-color-active-@{name}}";
          & when (@button-set-gradient = true) {
            &.@{button-gradient} {
              .gradient(~"@{button-color-active-@{name}}", ~"@{button-color-2-active-@{name}}");
            }
          }
          & when (@button-set-gradient = default) {
            .gradient(~"@{button-color-active-@{name}}", ~"@{button-color-2-active-@{name}}");
          }
        }
        &.@{button-inverse} {
          & when not (@button-set-transparent = true) {
            background: ~"@{color-@{name}-contrast}";
          }
          color: ~"@{button-color-@{name}}";
          border-color: ~"@{button-color-@{name}}";
          outline-color: ~"@{button-color-@{name}}";
          &:hover, &.@{button-hover} {
            color: ~"@{button-color-hover-@{name}}";
          }
          & when (@button-set-color-focus = true) {
            &:focus, &.@{button-focus} {
              color: ~"@{button-color-focus-@{name}}";
            }
          }
          &:active, &.@{button-active} {
            color: ~"@{button-color-active-@{name}}";
          }
        }
      }
      & when (@button-set-inverse = true) {
        & when not (@button-set-transparent = true) {
          background: ~"@{color-@{name}-contrast}";
        }
        color: ~"@{button-color-@{name}}";
        border-color: ~"@{button-color-@{name}}";
        outline-color: ~"@{button-color-@{name}}";
        &:hover, &.@{button-hover} {
          color: ~"@{button-color-hover-@{name}}";
        }
        & when (@button-set-color-focus = true) {
          &:focus, &.@{button-focus} {
            color: ~"@{button-color-focus-@{name}}";
          }
        }
        &:active, &.@{button-active} {
          color: ~"@{button-color-active-@{name}}";
        }
        &.@{button-inverse} {
          background: ~"@{button-color-@{name}}";
          color: ~"@{color-@{name}-contrast}";
          &:hover, &.@{button-hover} {
            background: ~"@{button-color-hover-@{name}}";
            border-color: ~"@{button-color-hover-@{name}}";
            & when (@button-set-gradient = true) {
              &.@{button-gradient} {
                .gradient(~"@{button-color-hover-@{name}}", ~"@{button-color-2-hover-@{name}}");
              }
            }
            & when (@button-set-gradient = default) {
              .gradient(~"@{button-color-hover-@{name}}", ~"@{button-color-2-hover-@{name}}");
            }
          }
          & when (@button-set-color-focus = true) {
            &:focus, &.@{button-focus} {
              background: ~"@{button-color-focus-@{name}}";
              border-color: ~"@{button-color-focus-@{name}}";
              & when (@button-gradient = true) {
                &.@{button-set-gradient} {
                  .gradient(~"@{button-color-focus-@{name}}", ~"@{button-color-2-focus-@{name}}");
                }
              }
              & when (@button-set-gradient = default) {
                .gradient(~"@{button-color-focus-@{name}}", ~"@{button-color-2-focus-@{name}}");
              }
            }
          }
          &:active, &.@{button-active} {
            background: ~"@{button-color-active-@{name}}";
            border-color: ~"@{button-color-active-@{name}}";
            & when (@button-set-gradient = true) {
              &.@{button-gradient} {
                .gradient(~"@{button-color-active-@{name}}", ~"@{button-color-2-active-@{name}}");
              }
            }
            & when (@button-set-gradient = default) {
              .gradient(~"@{button-color-active-@{name}}", ~"@{button-color-2-active-@{name}}");
            }
          }
        }
      }
      &.@{button-border-contrast} {
        &, &:focus, &:hover, &:active, &.@{button-hover},  &.@{button-active}, &.@{button-focus} {
          border-color: ~"@{color-@{name}-contrast}";
        }
      }
    }
  }
}

.@{button-group} {
  .display-inline-flex;
  .flex-wrap(nowrap);
  &.@{button-reverse} {
    .flex-direction(row-reverse);
  }
  .@{button} {
    ~ * {
      &, &:hover, &:focus, &:active, &.@{button-hover}, &.@{button-focus}, &.@{button-active} {
        border-left: 0 none;
      }
    }
    &:first-child, &:first-of-type {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      ~ *:not(:last-child):not(:last-of-type) {
        border-radius: 0;
      }
    }
    &:last-child, &:last-of-type {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.@{button-group-horizontal} {
  .display-inline-flex;
  .flex-direction(column);
  &.@{button-reverse} {
    .flex-direction(column-reverse);
  }
  .@{button} {
    ~ * {
      &, &:hover, &:focus, &:active, &.@{button-hover}, &.@{button-focus}, &.@{button-active} {
        border-top: 0 none;
      }
    }
    &:first-child, &:first-of-type {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      ~ *:not(:last-child):not(:last-of-type) {
        border-radius: 0;
      }
    }
    &:last-child, &:last-of-type {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }
}