Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 5bd1dec7fdc8f6a3a20e6c23dc491b3d31392bc5 / . / app / common / styles / base / buttons.scss
blob: f97aa6d0bae0ee5f29c94388bfcd90686c694f07 [file] [log] [blame]
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]1button, .button, .submit, .btn, [type='button'] {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]2 font-size: 1em;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]3 @include fontFamilyBold;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]4 text-transform: none;
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]5 border-radius: 0;
6 padding: .5em 1em;
7 line-height: 1;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]8 &:hover {
9 cursor: pointer;
10 }
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]11 &.disabled {
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]12 pointer-events: none;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]13 color: $btn__disabled-txt;
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]14 background-color: $btn__disabled-bg;
15 border-color: $btn__disabled-bg;
16 border-style: solid;
17 border-width: 2px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]18 &:hover {
19 cursor: default;
20 background: transparent;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]21 text-decoration: none;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]22 }
23 }
24}
25
Michael Davisc96980f2017-06-19 11:47:36 -0500[diff] [blame]26.btn-primary {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]27 color: $primebtn__text;
28 background: $primebtn__bg;
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]29 border: 2px solid $primebtn__bg;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]30 &:hover {
Michael Davis5d014692017-03-02 13:37:40 -0600[diff] [blame]31 background: lighten($primebtn__bg, 8%);
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]32 border-color: lighten($primebtn__bg, 8%);
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]33 @include fastTransition-all;
34 }
35 &.disabled {
dixsie565efda2019-04-16 13:30:30 -0500[diff] [blame]36 background: $primebtn__disabled-bg;
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]37 border-color: $primebtn__disabled-bg;
dixsie565efda2019-04-16 13:30:30 -0500[diff] [blame]38 color: $primebtn__disabled-txt;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]39 @include fastTransition-all;
40 &:hover {
41 cursor: default;
42 }
43 }
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]44 i {
45 //button symbol
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]46 font-style: normal;
47 text-transform: none;
48 font-size: 1.5em;
49 transform: rotate(80deg);
50 display: inline-block;
51 }
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]52 img {
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]53 width: 1.5em;
54 height: 1.5em;
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]55 display: inline-block;
56 }
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]57}
58.btn-secondary {
59 color: $secbtn__text;
Iftekharul Islam4390b022017-06-05 09:44:50 -0500[diff] [blame]60 background: transparent;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]61 border: 2px solid $secbtn__border;
62 &:hover {
beccabroekf6cdacf2019-03-11 13:47:00 -0500[diff] [blame]63 color: $secbtn__text;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]64 cursor: pointer;
65 background: $secbtn__bg;
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]66 border-color: $secbtn__text;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]67 @include fastTransition-all;
68 }
69 &.disabled {
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]70 pointer-events: none;
71 color: $btn__disabled-txt;
72 background-color: $btn__disabled-bg;
73 border-color: $btn__disabled-bg;
74 border-style: solid;
75 border-width: 2px;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]76 &:hover {
77 background: $btn__disabled-bg;
78 }
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]79 }
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]80 i {
81 // button symbol
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]82 font-style: normal;
83 font-weight: 400;
84 text-transform: none;
85 font-size: 1.5em;
86 transform: rotate(80deg) translate(-2px);
87 display: inline-block;
88 vertical-align: middle;
89 }
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]90 img {
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]91 width: 1.5em;
92 height: 1.5em;
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]93 display: inline-block;
Yoshie Muranaka5bd1dec2019-05-16 13:06:32 -0500[diff] [blame^]94 margin-right: .5em;
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame]95 }
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]96}
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]97
98.btn-pop-out {
99 position: relative;
100 padding: 0 0 1em 2em;
101 color: $black;
102 &:hover {
103 text-decoration: underline;
104 }
105 &:before {
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]106 content: "";
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]107 position: absolute;
108 left: 0;
Michael Davisf0504852017-07-27 15:42:39 -0500[diff] [blame]109 top: 0px;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]110 width: 25px;
111 height: 20px;
112 display: inline-block;
113 border: 1px solid $black;
114 border-top: 4px solid $black;
115 }
116 &:after {
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]117 content: "\2794";
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]118 position: absolute;
119 transform: rotate(-45deg);
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]120 font-size: 0.9em;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]121 font-weight: 700;
122 vertical-align: middle;
123 display: inline-block;
124 left: 11px;
Iftekharul Islamdb28a382017-11-02 13:16:17 -0500[diff] [blame]125 top: 0px;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]126 }
beccabroek44da4712019-03-20 13:24:23 -0500[diff] [blame]127}