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