blob: f2da19e9341ea7ffc9852e16722bdc65099f7a1f [file] [log] [blame]
Michael Davisea5241a2017-07-12 15:56:55 -05001
2// inline confirmation message
3.inline__confirm {
4 position: absolute;
5 top: 0;
Michael Davis6af13462017-04-04 14:07:02 -05006 right: 0;
Michael Davisc5626182017-03-10 15:48:05 -06007 transform: translateY(-103%);
Michael Davisea5241a2017-07-12 15:56:55 -05008 width: 100%;
Michael Davisc5626182017-03-10 15:48:05 -06009 height: 100%;
Michael Davisea5241a2017-07-12 15:56:55 -050010 margin-left: -1.8em;
11 z-index: 5;
12 background: $darkbg__primary;
13 color: $white;
14 padding: 2em 2em 1.55em 2em;
15 overflow: hidden;
Michael Davis6af13462017-04-04 14:07:02 -050016 @include fastTransition-all;
Michael Davisea5241a2017-07-12 15:56:55 -050017 &.active {
18 transform: translateY(0);
19 @include fastTransition-all;
20 }
21}
22
23// Power confirmation buttons
24.inline__confirm-buttons {
Michael Davis6af13462017-04-04 14:07:02 -050025 position: absolute;
26 top: 50%;
27 right: 1em;
28 transform: translateY(-50%);
Michael Davisea5241a2017-07-12 15:56:55 -050029 .btn-primary {
30 background: transparent;
31 border: 2px solid $white;
32 padding: 1em 2.2em;
33 margin: 0 10px;
34 border-radius: 4px;
35 &:focus,
36 &:hover {
37 background: $primebtn__bg;
38 border: 2px solid $primebtn__bg;
39 }
40 }
Michael Davis6af13462017-04-04 14:07:02 -050041 @include mediaQuery(medium) {
Michael Davisea5241a2017-07-12 15:56:55 -050042 float: right;
43 }
44}
45
46// confirmation message
47.inline__confirm-message {
48 display: inline-block;
Michael Davis6af13462017-04-04 14:07:02 -050049 max-width: 50%;
Michael Davisea5241a2017-07-12 15:56:55 -050050}
51
52// Power confirmation message icon
53.inline__confirm-message i::before {
54 content: '\26A0';
Michael Davisc5626182017-03-10 15:48:05 -060055 color: $status-warn;
Michael Davisea5241a2017-07-12 15:56:55 -050056 display: inline-block;
57 font-size: 2em;
58 vertical-align: middle;
59 font-style: normal;
60 margin-right: 15px;
61}