blob: b01c576f36c7115f2d8faff08bbdf40bdc8cbb27 [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 Davisc5626182017-03-10 15:48:05 -06006 transform: translateY(-103%);
Michael Davisea5241a2017-07-12 15:56:55 -05007 width: 100%;
Michael Davisc5626182017-03-10 15:48:05 -06008 height: 100%;
Michael Davisea5241a2017-07-12 15:56:55 -05009 z-index: 5;
10 background: $darkbg__primary;
11 color: $white;
12 padding: 2em 2em 1.55em 2em;
13 overflow: hidden;
Michael Davis6af13462017-04-04 14:07:02 -050014 @include fastTransition-all;
Michael Davisea5241a2017-07-12 15:56:55 -050015 &.active {
16 transform: translateY(0);
17 @include fastTransition-all;
18 }
19}
20
21// Power confirmation buttons
22.inline__confirm-buttons {
Michael Davis98276a32017-07-27 14:39:24 -050023 margin-left: 1.8em;
Michael Davisea5241a2017-07-12 15:56:55 -050024 .btn-primary {
25 background: transparent;
26 border: 2px solid $white;
27 padding: 1em 2.2em;
28 margin: 0 10px;
29 border-radius: 4px;
30 &:focus,
31 &:hover {
32 background: $primebtn__bg;
33 border: 2px solid $primebtn__bg;
34 }
35 }
Michael Davis98276a32017-07-27 14:39:24 -050036 @media (min-width: 900px) {
37 position: absolute;
38 right: 0;
39 top: 50%;
40 transform: translateY(-50%);
Michael Davisea5241a2017-07-12 15:56:55 -050041 }
42}
43
44// confirmation message
45.inline__confirm-message {
46 display: inline-block;
Michael Davis7f89fad2017-07-31 18:36:45 -050047 font-weight: 400;
Michael Davisea5241a2017-07-12 15:56:55 -050048}
49
50// Power confirmation message icon
51.inline__confirm-message i::before {
52 content: '\26A0';
Michael Davisc5626182017-03-10 15:48:05 -060053 color: $status-warn;
Michael Davisea5241a2017-07-12 15:56:55 -050054 display: inline-block;
55 font-size: 2em;
56 vertical-align: middle;
57 font-style: normal;
58 margin-right: 15px;
59}