1.confirm-wrapper { 2 position: relative; 3 overflow: hidden; 4 border-radius: 2px; 5 box-shadow: $box-shadow, $box-shadow-middle; 6} 7 8.confirm { 9 transition: transform $speed; 10 padding-top: 2px; 11} 12 13.show-confirm { 14 transform: translateX(-100%); 15 transition: transform $speed; 16} 17 18.confirm.show-confirm { 19 visibility: hidden; 20} 21 22.confirm-overlay { 23 position: absolute; 24 background-color: white; 25 top: 0; 26 left: 100%; 27 width: 100%; 28} 29 30.confirm, 31.confirm-overlay { 32 button.link, 33 a { 34 background-color: $white; 35 color: $menu-item-color; 36 37 &:hover { 38 background-color: $menu-item-hover-background-color; 39 color: $menu-item-hover-color; 40 } 41 42 &.is-active { 43 background-color: $menu-item-active-background-color; 44 color: $menu-item-active-color; 45 } 46 47 &.is-destroy { 48 color: $red; 49 50 &:hover { 51 background-color: $red; 52 color: $white; 53 } 54 } 55 56 &.disabled { 57 opacity: 0.5; 58 59 &:hover { 60 background: transparent; 61 cursor: default; 62 } 63 } 64 } 65} 66 67.confirm-action span .button { 68 display: block; 69 margin: 0.25rem auto; 70 width: 95%; 71} 72 73.confirm-action > span { 74 @include from($tablet) { 75 align-items: center; 76 display: flex; 77 } 78 79 * { 80 margin-left: $size-8; 81 } 82 83 .confirm-action-text:not(.is-block) { 84 text-align: right; 85 86 @include until($tablet) { 87 display: block; 88 margin-bottom: $size-8; 89 text-align: left; 90 } 91 } 92 .confirm-action-text.is-block { 93 text-align: left; 94 } 95} 96 97.confirm-action-message { 98 margin: 0; 99 100 .message { 101 border: 0; 102 font-size: $size-8; 103 line-height: 1.33; 104 margin: 0; 105 } 106 107 .message-title { 108 font-size: 1rem; 109 } 110 111 .hs-icon { 112 color: $yellow; 113 } 114 115 p { 116 font-weight: $font-weight-semibold; 117 margin-left: $spacing-l; 118 padding-left: $spacing-xxs; 119 padding-top: 0; 120 } 121 122 .confirm-action-options { 123 border-top: $light-border; 124 display: flex; 125 padding: $spacing-xxs; 126 127 .link { 128 flex: 1; 129 text-align: center; 130 width: auto; 131 padding: $spacing-xs; 132 } 133 } 134} 135