1
2// inline confirmation message
3.inline__confirm {
4  position: absolute;
5  top: 0;
6  transform: translateY(-103%);
7  width: 100%;
8  height: 100%;
9  margin-left: -1.8em;
10  z-index: 5;
11  background: $darkbg__primary;
12  color: $white;
13  padding: 2em 2em 1.55em 2em;
14  overflow: hidden;
15  &.active {
16    transform: translateY(0);
17    @include fastTransition-all;
18  }
19}
20
21// Power confirmation buttons
22.inline__confirm-buttons {
23  .btn-primary {
24    background: transparent;
25    border: 2px solid $white;
26    padding: 1em 2.2em;
27    margin: 0 10px;
28    border-radius: 4px;
29    &:focus,
30    &:hover {
31      background: $primebtn__bg;
32      border: 2px solid $primebtn__bg;
33    }
34  }
35  @include mediaQuery(large) {
36    float: right;
37  }
38}
39
40// confirmation message
41.inline__confirm-message {
42  display: inline-block;
43}
44
45// Power confirmation message icon
46.inline__confirm-message i::before {
47  content: '\26A0';
48  color: $status-warn;
49  display: inline-block;
50  font-size: 2em;
51  vertical-align: middle;
52  font-style: normal;
53  margin-right: 15px;
54}