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