soft-components/dist/collection/components/sc-button/sc-button.css

Simple soft flexible set of web components

sc-button {
  /**
    @prop --sc-button-bg-color:
      Background of the button.
      - default: var(--sc-bg-color, #f6f6f8)
    @prop --sc-button-text-color:
      Button text color.
      - default: var(--sc-text-color, #333333)
    @prop --sc-button-border-radius:
      Button border radius.
      - default: var(--sc-border-radius, 1em)
    @prop --sc-button-padding-y:
      Vertical paddings.
      - default: calc(var(--sc-root-spacing, 8px) * 2)
    @prop --sc-button-padding-x:
      Horizontal paddings.
      - default: calc(var(--sc-root-spacing, 8px) * 4)
    @prop --sc-button-icon-size:
      Icon button size.
      - default: calc(var(--sc-root-spacing, 8px) * 6)
    @prop --sc-button-circle-size:
      Circle button size.
      - default: calc(var(--sc-root-spacing, 8px) * 6)
    @prop --sc-button-bordered-border-radius:
      Bordered-style border radius
      - default: var(--sc-button-border-radius)
    @prop --sc-button-bordered-border-width:
      Bordered-style border width
      - default: 2px
    @prop --sc-button-text-hover-color:
      Text color on hover
      - default: var(--sc-secondary-color, #646695)
    @prop --sc-button-text-active-color:
      Text color with active prop
      - default: var(--sc-active-color, #c586c0)
    @prop --sc-button-width:
      Set fixed width for button
      - default: auto
    @prop --sc-button-edge-width:
      Width of the edge
      - default: 4px
    @prop --sc-button-vertical-align:
      vertical align of the button
      - default: top
    */
  --sc-button-bg-color: var(--sc-bg-color, #f6f6f8);
  --sc-button-text-color: var(--sc-text-color, #333333);
  --sc-button-border-radius: var(--sc-border-radius, 1em);
  --sc-button-padding-y: calc(var(--sc-root-spacing, 8px) * 2);
  --sc-button-padding-y: calc(var(--sc-root-spacing, 0.5rem) * 2);
  --sc-button-padding-x: calc(var(--sc-root-spacing, 8px) * 4);
  --sc-button-padding-x: calc(var(--sc-root-spacing, 0.5rem) * 4);
  --sc-button-icon-size: calc(var(--sc-root-spacing, 8px) * 6);
  --sc-button-icon-size: calc(var(--sc-root-spacing, 0.5rem) * 6);
  --sc-button-circle-size: calc(var(--sc-root-spacing, 8px) * 6);
  --sc-button-circle-size: calc(var(--sc-root-spacing, 0.5rem) * 6);
  --sc-button-bordered-border-radius: var(--sc-button-border-radius);
  --sc-button-bordered-border-width: 2px;
  --sc-button-bordered-border-width: 0.125rem;
  --sc-button-text-hover-color: var(--sc-secondary-color, #646695);
  --sc-button-text-active-color: var(--sc-active-color, #c586c0);
  --sc-button-width: auto;
  --sc-button-edge-width: 4px;
  --sc-button-edge-width: 0.25rem;
  --sc-button-vertical-align: top;
  display: inline-block;
  vertical-align: var(--sc-button-vertical-align);
}
sc-button[type] {
  -webkit-appearance: none;
}
sc-button * {
  box-sizing: border-box;
}
sc-button:not(.flat) a,
sc-button:not(.flat) button {
  box-shadow: calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}
sc-button a,
sc-button button {
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: block;
  background-color: var(--sc-button-bg-color);
  color: var(--sc-button-text-color);
  border-radius: var(--sc-button-border-radius);
  position: relative;
  padding: var(--sc-button-edge-width);
  font-size: 1em;
  font-family: inherit;
  width: var(--sc-button-width);
}
sc-button a .button-inner,
sc-button button .button-inner {
  overflow: hidden;
  transition: all 0.4s ease;
  display: block;
  padding: var(--sc-button-padding-y) var(--sc-button-padding-x);
  border-radius: calc(var(--sc-button-border-radius) - 4px);
  border-radius: calc(var(--sc-button-border-radius) - 0.25rem);
  width: var(--sc-button-width);
}
sc-button a:hover, sc-button a:focus,
sc-button button:hover,
sc-button button:focus {
  color: var(--sc-button-text-hover-color);
}
sc-button a:hover .button-inner, sc-button a:focus .button-inner,
sc-button button:hover .button-inner,
sc-button button:focus .button-inner {
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(30px * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.5) calc(var(--sc-highlight-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.5) calc(var(--sc-shadow-dist-y) * 0.5) calc(1.875rem * 0.5) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}
sc-button a:active .button-inner,
sc-button button:active .button-inner {
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}
sc-button.block {
  display: block;
}
sc-button.block a,
sc-button.block button {
  width: 100%;
}
sc-button.block a .button-inner,
sc-button.block button .button-inner {
  width: 100%;
  text-align: center;
  justify-content: center;
}
sc-button.icon a,
sc-button.icon button {
  width: var(--sc-button-icon-size);
  height: var(--sc-button-icon-size);
  padding: var(--sc-button-edge-width);
  font-size: calc(var(--sc-button-icon-size) * 0.4);
}
sc-button.icon a .button-inner,
sc-button.icon button .button-inner {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
sc-button.icon-text .button-inner {
  display: flex;
  align-items: center;
}
sc-button.bordered a,
sc-button.bordered button {
  position: relative;
  padding: calc( var(--sc-button-edge-width) + var(--sc-button-bordered-border-width) );
}
sc-button.bordered a::before,
sc-button.bordered button::before {
  content: "";
  position: absolute;
  top: calc(var(--sc-button-edge-width) - 1px);
  top: calc(var(--sc-button-edge-width) - 0.0625rem);
  left: calc(var(--sc-button-edge-width) - 1px);
  left: calc(var(--sc-button-edge-width) - 0.0625rem);
  bottom: calc(var(--sc-button-edge-width) - 1px);
  bottom: calc(var(--sc-button-edge-width) - 0.0625rem);
  right: calc(var(--sc-button-edge-width) - 1px);
  right: calc(var(--sc-button-edge-width) - 0.0625rem);
  border-radius: var(--sc-button-bordered-border-radius);
  background-image: linear-gradient(to bottom right, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) -10%, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%), linear-gradient(to bottom right, var(--sc-highlight-color, rgba(255, 255, 255, 0.2)) 55%, var(--sc-border-color, var(--sc-shadow-color, rgba(0, 0, 0, 0.2))) 70%);
}
sc-button.bordered a .button-inner,
sc-button.bordered button .button-inner {
  position: relative;
  background-color: var(--sc-button-bg-color);
  border-radius: calc(var(--sc-button-bordered-border-radius) - 1px);
  border-radius: calc(var(--sc-button-bordered-border-radius) - 0.0625rem);
}
sc-button.bordered.icon a,
sc-button.bordered.icon button {
  --sc-button-bordered-border-radius: 50%;
  line-height: calc( var(--sc-button-icon-size) - (var(--sc-button-edge-width) * 2) - var(--sc-button-bordered-border-width) - var(--sc-button-bordered-border-width) );
}
sc-button.circle a,
sc-button.circle button {
  width: var(--sc-button-circle-size);
  height: var(--sc-button-circle-size);
  border-radius: 50%;
  padding: var(--sc-button-edge-width);
}
sc-button.circle a::before,
sc-button.circle button::before {
  border-radius: 50%;
}
sc-button.circle a .button-inner,
sc-button.circle button .button-inner {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 50%;
}
sc-button.circle.bordered a,
sc-button.circle.bordered button {
  padding: calc( var(--sc-button-edge-width) + var(--sc-button-bordered-border-width) );
}
sc-button.active a,
sc-button.active button {
  color: var(--sc-button-text-active-color);
}
sc-button.active a .button-inner,
sc-button.active button .button-inner {
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(30px * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(30px * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 1) calc(var(--sc-highlight-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 1) calc(var(--sc-shadow-dist-y) * 1) calc(1.875rem * 1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
}
sc-button.disabled a,
sc-button.disabled button {
  box-shadow: none;
  color: #999;
}
sc-button.disabled a:hover .button-inner, sc-button.disabled a:focus .button-inner,
sc-button.disabled button:hover .button-inner,
sc-button.disabled button:focus .button-inner {
  box-shadow: none;
}