/* ========================================================================== Techmin buttons light: Figma node 8:50056 · dark: Figma node 8:65125 Everything is expressed through Bootstrap's own --bs-btn-* API, so the markup stays untouched: `.btn .btn-primary`, `.btn-outline-*`, `.btn-sm`, `.btn-lg` and `.rounded-pill` all keep working and simply render as the mockup draws them. Load this file LAST in — the variant rules are plain single-class selectors, same specificity as bootstrap-extended.css, so they win on stylesheet order alone. ========================================================================== */ /* -------------------------------------------------------------------------- Base geometry Mockup: a 84.8 x 37.4 button around a 54 x 21 label, stroke drawn inside. In CSS terms that is a 1px border plus 7.2px / 14.4px padding: 54 + 2*14.4 + 2*1 = 84.8 and 21 + 2*7.2 + 2*1 = 37.4. Square corners, Poppins 400 — same as the table and sidebar templates. -------------------------------------------------------------------------- */ .btn { --bs-btn-padding-y: 7.2px; --bs-btn-padding-x: 14.4px; --bs-btn-font-family: Poppins, "Noto Sans", sans-serif; --bs-btn-font-size: 14px; --bs-btn-font-weight: 400; --bs-btn-line-height: 1.5; --bs-btn-border-width: 1px; --bs-btn-border-radius: 0; --bs-btn-disabled-opacity: .65; } /* 89 x 47.17 around a 55 x 30 label */ .btn-lg { --bs-btn-padding-y: 8px; --bs-btn-padding-x: 16px; --bs-btn-font-size: 19.5px; --bs-btn-border-radius: 0; } /* 65.6 x 31.33 around a 38 x 20.4 label */ .btn-sm { --bs-btn-padding-y: 4.47px; --bs-btn-padding-x: 12.8px; --bs-btn-font-size: 13.6px; --bs-btn-border-radius: 0; } /* -------------------------------------------------------------------------- Solid variants The mockup draws one derived state: the "Active toggle button" at #006ee6 next to a #007aff primary — exactly shade(10%). Hover and active therefore both use shade(10%); `.btn-dark` is the one exception, its #0a0a0a cannot go darker, so it lightens by tint(10%) instead. -------------------------------------------------------------------------- */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #007aff; --bs-btn-border-color: #007aff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #006ee6; --bs-btn-hover-border-color: #006ee6; --bs-btn-focus-shadow-rgb: 0, 122, 255; --bs-btn-active-color: #fff; --bs-btn-active-bg: #006ee6; --bs-btn-active-border-color: #006ee6; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #007aff; --bs-btn-disabled-border-color: #007aff; } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: #737373; --bs-btn-border-color: #737373; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #686868; --bs-btn-hover-border-color: #686868; --bs-btn-focus-shadow-rgb: 115, 115, 115; --bs-btn-active-color: #fff; --bs-btn-active-bg: #686868; --bs-btn-active-border-color: #686868; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #737373; --bs-btn-disabled-border-color: #737373; } .btn-success { --bs-btn-color: #fff; --bs-btn-bg: #47ad77; --bs-btn-border-color: #47ad77; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #409c6b; --bs-btn-hover-border-color: #409c6b; --bs-btn-focus-shadow-rgb: 71, 173, 119; --bs-btn-active-color: #fff; --bs-btn-active-bg: #409c6b; --bs-btn-active-border-color: #409c6b; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #47ad77; --bs-btn-disabled-border-color: #47ad77; } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #d03f3f; --bs-btn-border-color: #d03f3f; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #bb3939; --bs-btn-hover-border-color: #bb3939; --bs-btn-focus-shadow-rgb: 208, 63, 63; --bs-btn-active-color: #fff; --bs-btn-active-bg: #bb3939; --bs-btn-active-border-color: #bb3939; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d03f3f; --bs-btn-disabled-border-color: #d03f3f; } .btn-warning { --bs-btn-color: #fff; --bs-btn-bg: #edc755; --bs-btn-border-color: #edc755; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d5b34c; --bs-btn-hover-border-color: #d5b34c; --bs-btn-focus-shadow-rgb: 237, 199, 85; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d5b34c; --bs-btn-active-border-color: #d5b34c; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #edc755; --bs-btn-disabled-border-color: #edc755; } .btn-info { --bs-btn-color: #fff; --bs-btn-bg: #33b0e0; --bs-btn-border-color: #33b0e0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2e9eca; --bs-btn-hover-border-color: #2e9eca; --bs-btn-focus-shadow-rgb: 51, 176, 224; --bs-btn-active-color: #fff; --bs-btn-active-bg: #2e9eca; --bs-btn-active-border-color: #2e9eca; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #33b0e0; --bs-btn-disabled-border-color: #33b0e0; } .btn-light { --bs-btn-color: #0a0a0a; --bs-btn-bg: #e5e5e5; --bs-btn-border-color: #e5e5e5; --bs-btn-hover-color: #0a0a0a; --bs-btn-hover-bg: #cecece; --bs-btn-hover-border-color: #cecece; --bs-btn-focus-shadow-rgb: 229, 229, 229; --bs-btn-active-color: #0a0a0a; --bs-btn-active-bg: #cecece; --bs-btn-active-border-color: #cecece; --bs-btn-disabled-color: #0a0a0a; --bs-btn-disabled-bg: #e5e5e5; --bs-btn-disabled-border-color: #e5e5e5; } .btn-dark { --bs-btn-color: #fff; --bs-btn-bg: #0a0a0a; --bs-btn-border-color: #0a0a0a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #222222; --bs-btn-hover-border-color: #222222; --bs-btn-focus-shadow-rgb: 10, 10, 10; --bs-btn-active-color: #fff; --bs-btn-active-bg: #222222; --bs-btn-active-border-color: #222222; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #0a0a0a; --bs-btn-disabled-border-color: #0a0a0a; } .btn-pink { --bs-btn-color: #fff; --bs-btn-bg: #f24f7c; --bs-btn-border-color: #f24f7c; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #da4770; --bs-btn-hover-border-color: #da4770; --bs-btn-focus-shadow-rgb: 242, 79, 124; --bs-btn-active-color: #fff; --bs-btn-active-bg: #da4770; --bs-btn-active-border-color: #da4770; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #f24f7c; --bs-btn-disabled-border-color: #f24f7c; } .btn-purple { --bs-btn-color: #fff; --bs-btn-bg: #a855f7; --bs-btn-border-color: #a855f7; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #974cde; --bs-btn-hover-border-color: #974cde; --bs-btn-focus-shadow-rgb: 168, 85, 247; --bs-btn-active-color: #fff; --bs-btn-active-bg: #974cde; --bs-btn-active-border-color: #974cde; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #a855f7; --bs-btn-disabled-border-color: #a855f7; } /* Flat link button: coloured label, no fill, transparent border. */ .btn-link { --bs-btn-color: #007aff; --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: #006ee6; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-color: #006ee6; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: #007aff; --bs-btn-disabled-border-color: transparent; text-decoration: none; } /* -------------------------------------------------------------------------- Outline variants — border and label in the accent, filled on hover -------------------------------------------------------------------------- */ .btn-outline-primary { --bs-btn-color: #007aff; --bs-btn-bg: transparent; --bs-btn-border-color: #007aff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #007aff; --bs-btn-hover-border-color: #007aff; --bs-btn-focus-shadow-rgb: 0, 122, 255; --bs-btn-active-color: #fff; --bs-btn-active-bg: #007aff; --bs-btn-active-border-color: #007aff; --bs-btn-disabled-color: #007aff; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #007aff; --bs-gradient: none; } .btn-outline-secondary { --bs-btn-color: #737373; --bs-btn-bg: transparent; --bs-btn-border-color: #737373; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #737373; --bs-btn-hover-border-color: #737373; --bs-btn-focus-shadow-rgb: 115, 115, 115; --bs-btn-active-color: #fff; --bs-btn-active-bg: #737373; --bs-btn-active-border-color: #737373; --bs-btn-disabled-color: #737373; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #737373; --bs-gradient: none; } .btn-outline-success { --bs-btn-color: #47ad77; --bs-btn-bg: transparent; --bs-btn-border-color: #47ad77; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #47ad77; --bs-btn-hover-border-color: #47ad77; --bs-btn-focus-shadow-rgb: 71, 173, 119; --bs-btn-active-color: #fff; --bs-btn-active-bg: #47ad77; --bs-btn-active-border-color: #47ad77; --bs-btn-disabled-color: #47ad77; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #47ad77; --bs-gradient: none; } .btn-outline-danger { --bs-btn-color: #d03f3f; --bs-btn-bg: transparent; --bs-btn-border-color: #d03f3f; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d03f3f; --bs-btn-hover-border-color: #d03f3f; --bs-btn-focus-shadow-rgb: 208, 63, 63; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d03f3f; --bs-btn-active-border-color: #d03f3f; --bs-btn-disabled-color: #d03f3f; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #d03f3f; --bs-gradient: none; } .btn-outline-warning { --bs-btn-color: #edc755; --bs-btn-bg: transparent; --bs-btn-border-color: #edc755; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #edc755; --bs-btn-hover-border-color: #edc755; --bs-btn-focus-shadow-rgb: 237, 199, 85; --bs-btn-active-color: #fff; --bs-btn-active-bg: #edc755; --bs-btn-active-border-color: #edc755; --bs-btn-disabled-color: #edc755; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #edc755; --bs-gradient: none; } .btn-outline-info { --bs-btn-color: #33b0e0; --bs-btn-bg: transparent; --bs-btn-border-color: #33b0e0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #33b0e0; --bs-btn-hover-border-color: #33b0e0; --bs-btn-focus-shadow-rgb: 51, 176, 224; --bs-btn-active-color: #fff; --bs-btn-active-bg: #33b0e0; --bs-btn-active-border-color: #33b0e0; --bs-btn-disabled-color: #33b0e0; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #33b0e0; --bs-gradient: none; } .btn-outline-light { --bs-btn-color: #e5e5e5; --bs-btn-bg: transparent; --bs-btn-border-color: #e5e5e5; --bs-btn-hover-color: #0a0a0a; --bs-btn-hover-bg: #e5e5e5; --bs-btn-hover-border-color: #e5e5e5; --bs-btn-focus-shadow-rgb: 229, 229, 229; --bs-btn-active-color: #0a0a0a; --bs-btn-active-bg: #e5e5e5; --bs-btn-active-border-color: #e5e5e5; --bs-btn-disabled-color: #e5e5e5; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #e5e5e5; --bs-gradient: none; } .btn-outline-dark { --bs-btn-color: #0a0a0a; --bs-btn-bg: transparent; --bs-btn-border-color: #0a0a0a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0a0a0a; --bs-btn-hover-border-color: #0a0a0a; --bs-btn-focus-shadow-rgb: 10, 10, 10; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a0a0a; --bs-btn-active-border-color: #0a0a0a; --bs-btn-disabled-color: #0a0a0a; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #0a0a0a; --bs-gradient: none; } .btn-outline-pink { --bs-btn-color: #f24f7c; --bs-btn-bg: transparent; --bs-btn-border-color: #f24f7c; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #f24f7c; --bs-btn-hover-border-color: #f24f7c; --bs-btn-focus-shadow-rgb: 242, 79, 124; --bs-btn-active-color: #fff; --bs-btn-active-bg: #f24f7c; --bs-btn-active-border-color: #f24f7c; --bs-btn-disabled-color: #f24f7c; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #f24f7c; --bs-gradient: none; } .btn-outline-purple { --bs-btn-color: #a855f7; --bs-btn-bg: transparent; --bs-btn-border-color: #a855f7; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a855f7; --bs-btn-hover-border-color: #a855f7; --bs-btn-focus-shadow-rgb: 168, 85, 247; --bs-btn-active-color: #fff; --bs-btn-active-bg: #a855f7; --bs-btn-active-border-color: #a855f7; --bs-btn-disabled-color: #a855f7; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #a855f7; --bs-gradient: none; } /* -------------------------------------------------------------------------- Dark theme Only two variants change: `light` and `dark` swap round so they stay readable against a dark page. Everything else is identical in both mockups, so it needs no override here. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .btn-light { --bs-btn-color: #fff; --bs-btn-bg: #525252; --bs-btn-border-color: #525252; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #4a4a4a; --bs-btn-hover-border-color: #4a4a4a; --bs-btn-focus-shadow-rgb: 82, 82, 82; --bs-btn-active-color: #fff; --bs-btn-active-bg: #4a4a4a; --bs-btn-active-border-color: #4a4a4a; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #525252; --bs-btn-disabled-border-color: #525252; } [data-bs-theme="dark"] .btn-dark { --bs-btn-color: #0a0a0a; --bs-btn-bg: #fafaf9; --bs-btn-border-color: #fafaf9; --bs-btn-hover-color: #0a0a0a; --bs-btn-hover-bg: #e1e1e0; --bs-btn-hover-border-color: #e1e1e0; --bs-btn-focus-shadow-rgb: 250, 250, 249; --bs-btn-active-color: #0a0a0a; --bs-btn-active-bg: #e1e1e0; --bs-btn-active-border-color: #e1e1e0; --bs-btn-disabled-color: #0a0a0a; --bs-btn-disabled-bg: #fafaf9; --bs-btn-disabled-border-color: #fafaf9; } [data-bs-theme="dark"] .btn-outline-light { --bs-btn-color: #525252; --bs-btn-bg: transparent; --bs-btn-border-color: #525252; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #525252; --bs-btn-hover-border-color: #525252; --bs-btn-focus-shadow-rgb: 82, 82, 82; --bs-btn-active-color: #fff; --bs-btn-active-bg: #525252; --bs-btn-active-border-color: #525252; --bs-btn-disabled-color: #525252; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #525252; --bs-gradient: none; } [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #fafaf9; --bs-btn-bg: transparent; --bs-btn-border-color: #fafaf9; --bs-btn-hover-color: #0a0a0a; --bs-btn-hover-bg: #fafaf9; --bs-btn-hover-border-color: #fafaf9; --bs-btn-focus-shadow-rgb: 250, 250, 249; --bs-btn-active-color: #0a0a0a; --bs-btn-active-bg: #fafaf9; --bs-btn-active-border-color: #fafaf9; --bs-btn-disabled-color: #fafaf9; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #fafaf9; --bs-gradient: none; } /* -------------------------------------------------------------------------- Icons inside buttons The mockup puts a 14px icon leaf on the same 21px line as the 14px label — icon size equals label size. Expressing that as `inherit` keeps it true for `.btn-sm` and `.btn-lg` as well, and keeps the icon-font glyph boxes from reintroducing their own default (Material Icons ships 24px). -------------------------------------------------------------------------- */ .btn > i, .btn > .material-icons-outlined { font-size: inherit; line-height: inherit; vertical-align: middle; }