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