ply-css 1.3.0

package/src/scss/components/_buttons.scss

@@ -0,0 +1,452 @@
+@use "sass:color";
+@use "colors";
+@use "mixins";
+@use "variables";
+
+/* =Buttons
+-----------------------------------------------------------------------------*/
+.btn,
+input[type="submit"].btn,
+input[type="button"].btn,
+input[type="reset"].btn,
+button.btn {
+  transition: all 150ms ease-in-out, transform 50ms ease, background 150ms ease-in-out;
+
+  display: inline-block;
+  vertical-align: top;
+
+  font-family: var(--ply-font-body, #{variables.$font-family-controls});
+  font-size: 1em;
+  font-weight: 400;
+
+  line-height: variables.$base-line;
+
+  text-align: center;
+  text-decoration: none;
+  color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
+
+  appearance: none;
+
+  outline: none;
+  margin: 0;
+  border: none;
+  border-radius: var(--ply-btn-border-radius, #{variables.$button-radius});
+  box-shadow: none;
+  cursor: pointer;
+  background: var(--ply-btn-secondary-bg, #393939);
+  padding: variables.$padding-btn;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
+    background: var(--ply-btn-secondary-bg-hover, #303030);
+  }
+
+  &:active {
+    background: var(--ply-btn-secondary-bg-active, #2b2b2b);
+  }
+
+  &:hover {
+    transform: translateY(0) scale(1.05, 1.05);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ply-color-accent, #{colors.$color-blue});
+    outline-offset: 2px;
+  }
+
+  &:active {
+    transform: translateY(0) scale(.95, .95);
+  }
+
+  &[class*='unit-'] {
+    margin: auto variables.$grid-gutter-width;
+  }
+}
+
+.btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.btn-lg,
+input[type="submit"].btn-lg,
+input[type="button"].btn-lg,
+input[type="reset"].btn-lg,
+button.btn-lg {
+  font-size: variables.$font-size-big;
+  padding: 0.875rem 2rem;
+}
+
+.btn-sm,
+input[type="submit"].btn-sm,
+input[type="button"].btn-sm,
+input[type="reset"].btn-sm,
+button.btn-sm {
+  font-size: variables.$font-size-small;
+  padding: 0.375rem 1rem;
+}
+
+.btn-xs,
+input[type="submit"].btn-xs,
+input[type="button"].btn-xs,
+input[type="reset"].btn-xs,
+button.btn-xs {
+  font-size: variables.$font-size-smaller;
+  padding: 0.25rem 0.75rem;
+  vertical-align: baseline;
+}
+
+// Primary — themed via --ply-btn-default-bg (blue by default)
+.btn-primary,
+input[type="submit"].btn-primary,
+input[type="button"].btn-primary,
+input[type="reset"].btn-primary,
+button.btn-primary {
+  background: var(--ply-btn-default-bg);
+  color: var(--ply-btn-default-color, var(--ply-color-text-inverse, #fff));
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    color: var(--ply-btn-default-color, var(--ply-color-text-inverse, #fff));
+  }
+  &:hover { background: var(--ply-btn-default-bg-hover); }
+  &:active { background: var(--ply-btn-default-bg-active); }
+}
+
+// Secondary — themed via --ply-btn-secondary-bg (dark gray by default)
+.btn-secondary,
+input[type="submit"].btn-secondary,
+input[type="button"].btn-secondary,
+input[type="reset"].btn-secondary,
+button.btn-secondary {
+  background: var(--ply-btn-secondary-bg, #393939);
+  color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
+  }
+  &:hover { background: var(--ply-btn-secondary-bg-hover, #303030); }
+  &:active { background: var(--ply-btn-secondary-bg-active, #2b2b2b); }
+}
+
+.btn-outline,
+input[type="submit"].btn-outline,
+input[type="button"].btn-outline,
+input[type="reset"].btn-outline,
+button.btn-outline {
+  background: none;
+  padding: variables.$padding-btn-outline;
+  border: 1px solid var(--ply-color-body, colors.$color-black);
+  color: var(--ply-color-body, colors.$color-black);
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background: var(--ply-color-body, colors.$color-black);
+    border-color: var(--ply-color-body, colors.$color-black);
+    color: var(--ply-color-text-inverse, #fff);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ply-color-accent, #{colors.$color-blue});
+    outline-offset: 2px;
+  }
+}
+
+.btn-outline.btn-active {
+  padding: variables.$padding-btn;
+}
+
+.btn-outline.bold {
+  border-width: 2px;
+  padding: variables.$padding-btn-outline-bold;
+}
+
+// Ghost — transparent, no border, subtle hover background
+.btn-ghost,
+input[type="submit"].btn-ghost,
+input[type="button"].btn-ghost,
+input[type="reset"].btn-ghost,
+button.btn-ghost {
+  background: transparent;
+  color: var(--ply-btn-default-bg);
+  border: none;
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background: var(--ply-bg-muted, rgba(128, 128, 128, 0.1));
+    color: var(--ply-btn-default-bg);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ply-color-accent, #{colors.$color-blue});
+    outline-offset: 2px;
+  }
+}
+
+// Primary outline — border + text from primary color, transparent bg
+.btn-primary-outline,
+input[type="submit"].btn-primary-outline,
+input[type="button"].btn-primary-outline,
+input[type="reset"].btn-primary-outline,
+button.btn-primary-outline {
+  background: transparent;
+  padding: variables.$padding-btn-outline;
+  border: 1px solid var(--ply-btn-default-bg);
+  color: var(--ply-btn-default-bg);
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background: var(--ply-btn-default-bg);
+    border-color: var(--ply-btn-default-bg);
+    color: var(--ply-btn-default-color, var(--ply-color-text-inverse, #fff));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ply-color-accent, #{colors.$color-blue});
+    outline-offset: 2px;
+  }
+}
+
+// Secondary outline — border + text from secondary color, transparent bg
+.btn-secondary-outline,
+input[type="submit"].btn-secondary-outline,
+input[type="button"].btn-secondary-outline,
+input[type="reset"].btn-secondary-outline,
+button.btn-secondary-outline {
+  background: transparent;
+  padding: variables.$padding-btn-outline;
+  border: 1px solid var(--ply-color-muted, #767676);
+  color: var(--ply-color-muted, #767676);
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background: var(--ply-btn-secondary-bg, #393939);
+    border-color: var(--ply-btn-secondary-bg, #393939);
+    color: var(--ply-btn-secondary-color, var(--ply-color-text-inverse, #fff));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ply-color-accent, #{colors.$color-blue});
+    outline-offset: 2px;
+  }
+}
+
+// Icon-only — equal padding, square aspect for buttons with just an icon
+.btn-icon,
+input[type="submit"].btn-icon,
+input[type="button"].btn-icon,
+input[type="reset"].btn-icon,
+button.btn-icon {
+  padding: 0.375rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-active,
+.btn[disabled],
+.btn-disabled {
+  background: var(--ply-bg-muted, colors.$color-gray-dark);
+  color: var(--ply-color-muted, #6f6f6f);
+  cursor: default;
+
+  &:hover {
+    color: var(--ply-color-muted, #6f6f6f);
+    background: var(--ply-bg-muted, colors.$color-gray-dark);
+    transform: none;
+  }
+}
+
+.btn-active {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .4) inset;
+}
+
+.btn-outline.btn[disabled],
+.btn-outline.btn-disabled {
+  background: none;
+  box-shadow: none;
+  color: var(--ply-color-muted, #6f6f6f);
+  border: 1px solid var(--ply-border-color, #e0e0e0);
+}
+
+.btn-outline.btn-active {
+  background: none;
+  color: var(--ply-color-secondary, #525252);
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset;
+}
+
+.btn[disabled],
+.btn-disabled {
+  cursor: default;
+  box-shadow: none;
+}
+
+.btn-straight,
+.btn-square,
+input[type="submit"].btn-straight,
+input[type="button"].btn-straight,
+input[type="reset"].btn-straight,
+button.btn-straight,
+input[type="submit"].btn-square,
+input[type="button"].btn-square,
+input[type="reset"].btn-square,
+button.btn-square {
+  border-radius: 0;
+}
+
+// Static color buttons — hardcoded, immune to theming
+.btn-blue,
+input[type="submit"].btn-blue,
+input[type="button"].btn-blue,
+input[type="reset"].btn-blue,
+button.btn-blue {
+  background: #0f62fe; color: #fff;
+  &:hover, &:active, &:focus-visible { color: #fff; }
+  &:hover { background: #0043ce; }
+  &:active { background: #002d9c; }
+}
+
+.btn-red,
+input[type="submit"].btn-red,
+input[type="button"].btn-red,
+input[type="reset"].btn-red,
+button.btn-red {
+  background: #da1e28; color: #fff;
+  &:hover, &:active, &:focus-visible { color: #fff; }
+  &:hover { background: #ba1b23; }
+  &:active { background: #750e13; }
+}
+
+.btn-green,
+input[type="submit"].btn-green,
+input[type="button"].btn-green,
+input[type="reset"].btn-green,
+button.btn-green {
+  background: #198038; color: #fff;
+  &:hover, &:active, &:focus-visible { color: #fff; }
+  &:hover { background: #0e6027; }
+  &:active { background: #044317; }
+}
+
+.btn-yellow,
+input[type="submit"].btn-yellow,
+input[type="button"].btn-yellow,
+input[type="reset"].btn-yellow,
+button.btn-yellow {
+  background: #f1c21b; color: #000;
+  &:hover, &:active, &:focus-visible { color: #000; }
+  &:hover { background: #d2a106; }
+  &:active { background: #b28600; }
+}
+
+// Static color buttons (don't change between themes)
+.btn-black,
+input[type="submit"].btn-black,
+input[type="button"].btn-black,
+input[type="reset"].btn-black,
+button.btn-black {
+  @include mixins.create-button(colors.$color-black, colors.$color-black-light, #fff, .7);
+}
+
+.btn-white,
+input[type="submit"].btn-white,
+input[type="button"].btn-white,
+input[type="reset"].btn-white,
+button.btn-white {
+  @include mixins.create-button(colors.$color-white, color.adjust(#fff, $lightness: -7%), #000, 1);
+}
+
+.btn-white,
+input[type="submit"].btn-white,
+input[type="button"].btn-white,
+input[type="reset"].btn-white,
+button.btn-white {
+  &.btn-outline {
+    border: 1px solid var(--ply-color-body, colors.$color-black);
+    color: var(--ply-color-body, colors.$color-black);
+  }
+
+  &.btn-outline.btn-active {
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, .3);
+    padding: variables.$padding-btn-outline;
+  }
+}
+
+/*
+  Buttons Group
+*/
+.btn-single,
+.btn-group {
+  display: flex;
+  flex-flow: row wrap;
+  gap: variables.$grid-gutter-width;
+
+  &.align-right {
+    justify-content: flex-end;
+  }
+
+  &.align-left {
+    justify-content: flex-start;
+  }
+
+  &.align-center {
+    justify-content: center;
+  }
+
+  &.fill-width {
+    .btn {
+      flex: 1;
+    }
+  }
+
+  .btn.btn-outline {
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+  }
+
+  .btn,
+  input {
+    margin-left: 0;
+    margin-right: 1px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .btn {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: (variables.$border-radius * 0.5) 0 0 (variables.$border-radius * 0.5);
+    }
+    &:last-child {
+      border-radius: 0 (variables.$border-radius * 0.5) (variables.$border-radius * 0.5) 0;
+    }
+  }
+
+  &.rounded {
+    .btn,
+    .input-search {
+      &:first-child {
+        border-radius: (variables.$border-radius * 2) 0 0 (variables.$border-radius * 2);
+      }
+      &:last-child {
+        border-radius: 0 (variables.$border-radius * 2) (variables.$border-radius * 2) 0;
+      }
+    }
+  }
+}