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