style.scss (5072B)
1 .redux-templates-two-sections { 2 position: absolute; 3 width: 85.9375%; 4 height: 89.537037%; 5 max-width: 1650px; 6 max-height: 967px; 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 margin: auto; 12 border-radius: 5px; 13 overflow: hidden; 14 -webkit-box-shadow: 0 45px 10px rgba(3, 8, 15, 0.2); 15 box-shadow: 0 0 45px 10px rgba(3, 8, 15, 0.2); 16 } 17 18 .redux-templates-two-sections__grid { 19 width: 100%; 20 height: 100%; 21 padding: 40px 22.5px; 22 position: relative; 23 display: -webkit-box; 24 display: -ms-flexbox; 25 display: flex; 26 } 27 28 .redux-templates-two-sections__grid__column { 29 width: 100%; 30 } 31 32 .redux-templates-two-sections__grid-clear { 33 -webkit-box-orient: vertical; 34 -webkit-box-direction: normal; 35 -ms-flex-direction: column; 36 flex-direction: column; 37 -webkit-box-align: center; 38 -ms-flex-align: center; 39 align-items: center; 40 -webkit-box-pack: center; 41 -ms-flex-pack: center; 42 justify-content: center; 43 height: 100%; 44 } 45 46 .redux-templates-two-sections__grid-clear-text { 47 opacity: 0.9; 48 color: #818a91; 49 font-family: pn, "Open Sans", Arial, sans-serif; 50 font-size: 14px; 51 font-weight: 600; 52 line-height: 17px; 53 margin: 0 0 20px; 54 } 55 56 .redux-templates-two-sections__grid-clear-image-saved { 57 width: 322px; 58 height: 145px; 59 margin-top: -21px; 60 pointer-events: none; 61 } 62 63 .redux-templates-two-sections__grid-clear-image-global { 64 width: 524px; 65 height: 207px; 66 margin-top: -28px; 67 pointer-events: none; 68 } 69 70 .redux-templates-two-section { 71 position: relative; 72 margin: 0 17.5px 35px; 73 cursor: pointer; 74 outline: 3px solid transparent; 75 -webkit-transition: outline 0.3s ease-in-out; 76 transition: outline 0.3s ease-in-out; 77 -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 78 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 79 border-radius: 3px; 80 81 &:last-child { 82 margin-bottom: 0; 83 } 84 85 .redux-templates-two-section-remove { 86 position: absolute; 87 z-index: 4; 88 top: -7px; 89 right: -7px; 90 opacity: 0; 91 -webkit-transform: scale(0.7); 92 transform: scale(0.7); 93 -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 94 transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 95 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 96 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 97 width: 28px; 98 height: 28px; 99 display: -webkit-box; 100 display: -ms-flexbox; 101 display: flex; 102 -webkit-box-align: center; 103 -ms-flex-align: center; 104 align-items: center; 105 -webkit-box-pack: center; 106 -ms-flex-pack: center; 107 justify-content: center; 108 font-size: 12px; 109 border-radius: 28px; 110 background-color: #fff; 111 color: #03080f; 112 -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25); 113 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25); 114 cursor: pointer; 115 } 116 117 &:hover { 118 .redux-templates-two-section-remove { 119 opacity: 1; 120 -webkit-transform: scale(1); 121 transform: scale(1); 122 -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 123 transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 124 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 125 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 126 127 &:hover { 128 color: #f00; 129 } 130 } 131 132 .redux-templates-two-section-item { 133 &::before { 134 border-color: #3dbfe8; 135 } 136 137 &::after { 138 border-color: #ececec; 139 } 140 } 141 } 142 } 143 144 145 .redux-templates-two-section { 146 .preview-image-wrapper { 147 transition: all 0.05s ease-in-out; 148 width: 100%; 149 min-height: 130px; 150 max-height: 300px; 151 overflow: hidden; 152 153 img { 154 animation-name: fadeIn; 155 animation-fill-mode: both; 156 animation-delay: 200ms; 157 animation-duration: 200ms; 158 width: 100%; 159 height: auto; 160 } 161 } 162 163 .saved-section-title { 164 border-top: 1px solid #f2f4f7; 165 background: rgba(255, 255, 255, 0.9); 166 position: absolute; 167 bottom: 0; 168 width: 100%; 169 margin: 0; 170 color: #23282d; 171 padding: 13px 15px; 172 font-size: 15px; 173 text-align: center; 174 display: flex; 175 justify-content: center; 176 align-items: center; 177 } 178 } 179 180 .no-section { 181 display: flex; 182 width: 100%; 183 align-items: center; 184 justify-content: center; 185 font-size: 16px; 186 } 187 188 .preview-image-wrapper { 189 .block-editor-block-preview__container { 190 transition: all 0.05s ease-in-out; 191 background: #fff; 192 margin: 0 auto; 193 min-height: 130px; 194 } 195 } 196