Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / webui-vue / d36ac8a8be8636ddd0e64ce005d507b21bcdeb00 / . / src / assets / styles / bmc / custom / _buttons.scss
blob: 008f08dc1ff0b41392d2fcb828a0240ee7fe6eb8 [file] [log] [blame]
Ed Tanous7d6b44c2024-03-23 14:56:34 -0700[diff] [blame]1@import 'bootstrap/dist/css/bootstrap.css';
2
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]3.btn {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]4 padding-top: calc($spacer / 2);
5 padding-inline-end: $spacer;
6 padding-bottom: calc($spacer / 2);
7 padding-inline-start: $spacer;
Dixsie Wolmers30f11f82020-11-10 16:07:56 -0600[diff] [blame]8 display: inline-flex;
9 align-items: center;
10 justify-content: space-around;
11 svg {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]12 margin-inline-end: calc($spacer / 4);
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]13 }
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]14 &:disabled {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]15 color: $gray-600;
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]16 fill: currentColor;
17 box-shadow: none !important;
18 &:not(.btn-link) {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]19 border-color: $gray-400;
20 background-color: $gray-400;
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]21 }
22 }
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]23}
24
25.btn-primary {
Derick Montague7f970a12020-03-02 17:56:09 -0600[diff] [blame]26 fill: currentColor;
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]27 &:focus,
28 &:not(:disabled):not(.disabled):active:focus {
29 border-color: $white;
30 box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
31 }
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]32}
33
34.btn-secondary {
Derick Montague7f970a12020-03-02 17:56:09 -0600[diff] [blame]35 fill: currentColor;
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]36 &:focus,
37 &:not(:disabled):not(.disabled):active:focus {
38 border-color: $white;
39 box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
40 }
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]41}
42
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]43// Global style for all button link
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]44.btn-link {
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]45 font-weight: $headings-font-weight;
Yoshie Muranaka01da8182020-07-08 15:46:43 -0700[diff] [blame]46 fill: theme-color("primary");
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]47 text-decoration: none !important;
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]48 &:hover {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]49 background-color: $gray-200;
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]50 color: theme-color("primary");
51 }
52 &:active {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]53 background-color: $gray-300;
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]54 }
55 &:focus {
56 box-shadow: inset 0 0 0 2px theme-color("primary");
57 color: theme-color("primary");
58 outline: none;
59 }
60 &:disabled {
61 box-shadow: $btn-focus-box-shadow;
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]62 }
Derick Montague3f6710a2020-03-04 00:59:47 -0600[diff] [blame]63}
64
Dixsie Wolmers30f11f82020-11-10 16:07:56 -0600[diff] [blame]65// Icon only buttons
66.btn-icon-only svg {
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]67 margin-inline-end: 0;
Dixsie Wolmers30f11f82020-11-10 16:07:56 -0600[diff] [blame]68}
69
70// Datepicker, clear search and Password toggle buttons
71.input-action-btn,
72.btn-datepicker {
SurenNewaredc618a82020-08-17 18:42:20 +0530[diff] [blame]73 position: absolute;
jason westoverd36ac8a2025-11-03 20:58:59 -0600[diff] [blame^]74 inset-inline-end: 0;
Dixsie Wolmers30f11f82020-11-10 16:07:56 -0600[diff] [blame]75 top: 0;
suryav972424b377d2025-01-24 15:06:35 +0530[diff] [blame]76 z-index: $zindex-dropdown + 1;
Dixsie Wolmers30f11f82020-11-10 16:07:56 -0600[diff] [blame]77}
78
79// Contain input buttons within input
80.btn-datepicker .dropdown-toggle,
81.input-action-btn {
82 padding: 7px;
83 margin: 1px;
Yoshie Muranaka996d2d52019-12-30 09:06:45 -0800[diff] [blame]84}