style.scss (7077B)
1 @import "../../variables"; 2 .redux-templates-collection-details-view { 3 padding: 40px 22.5px 60px; 4 width: 100%; 5 justify-content: center; 6 position: relative; 7 display: flex; 8 9 .redux-templates-collection-details-left { 10 width: 600px; 11 margin: 0 37px 0 17px; 12 13 .details-back { 14 height: 32px; 15 line-height: 20px; 16 color: #818a91; 17 font-size: 15px; 18 font-weight: 600; 19 display: -webkit-inline-box; 20 display: -ms-inline-flexbox; 21 display: inline-flex; 22 -webkit-box-align: center; 23 -ms-flex-align: center; 24 align-items: center; 25 cursor: pointer; 26 margin-bottom: 20px; 27 -webkit-transition: color 0.1s ease; 28 transition: color 0.1s ease; 29 } 30 31 .details-preview { 32 background-position: center top; 33 background-size: contain; 34 width: 100%; 35 background-repeat: no-repeat; 36 transition: background 1.5s ease; 37 height: 84.71%; 38 &.has_full { 39 transition: background-position 1.5s linear; 40 background-position: center top; 41 background-size: cover; 42 width: 100%; 43 background-repeat: no-repeat; 44 -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 45 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 46 &:hover { 47 background-position: center bottom; 48 background-size: cover; 49 } 50 } 51 } 52 53 } 54 55 .redux-templates-collection-details-right { 56 width: 520px; 57 58 .details-title { 59 height: 30px; 60 display: -webkit-box; 61 display: -ms-flexbox; 62 display: flex; 63 -webkit-box-align: center; 64 -ms-flex-align: center; 65 align-items: center; 66 -webkit-box-pack: justify; 67 -ms-flex-pack: justify; 68 justify-content: space-between; 69 padding: 2px 25px 0 10px; 70 margin-bottom: 20px; 71 72 h3 { 73 color: rgba(3, 8, 15, 0.92); 74 font-size: 28px; 75 font-weight: 600; 76 line-height: 34px; 77 margin: 0; 78 } 79 80 span { 81 color: #818a91; 82 font-size: 13px; 83 font-weight: 600; 84 line-height: 16px; 85 } 86 } 87 88 .details-list { 89 height: 84.71%; 90 91 .details-inner { 92 height: 100%; 93 overflow-y: auto; 94 } 95 } 96 97 .detail-select { 98 width: 150px; 99 height: 150px; 100 overflow: hidden; 101 margin: 0 8px 15px; 102 -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 103 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); 104 position: relative; 105 display: inline-block; 106 cursor: pointer; 107 -webkit-transition: all 0.1s ease-in-out; 108 transition: all 0.1s ease-in-out; 109 110 111 &::before, 112 &::after { 113 content: ""; 114 width: 100%; 115 height: 100%; 116 position: absolute; 117 top: 0; 118 left: 0; 119 pointer-events: none; 120 opacity: 0; 121 box-sizing: border-box; 122 } 123 124 &::before { 125 opacity: 0.7; 126 z-index: 2; 127 } 128 129 &::after { 130 opacity: 0.7; 131 z-index: 1; 132 } 133 134 .detail-image { 135 width: 100%; 136 height: 150px; 137 background-repeat: no-repeat; 138 background-size: cover; 139 border: 1px solid #ececec; 140 position: relative; 141 142 .pro, 143 .install { 144 position: absolute; 145 background: #f00; 146 padding: 2px 3px; 147 border-radius: 3px; 148 color: #fff; 149 font-size: 9px; 150 right: 5px; 151 top: 5px; 152 text-transform: uppercase; 153 line-height: 1; 154 } 155 .pro { 156 background: #f00; 157 } 158 .install { 159 background: #f2a848; 160 } 161 } 162 163 .detail-label { 164 165 border-top: 1px solid #f2f4f7; 166 width: 100%; 167 height: 30px; 168 opacity: 1; 169 background-color: rgba(255, 255, 255, 0.9); 170 position: absolute; 171 bottom: 0; 172 left: 0; 173 color: #23282d; 174 font-family: pn, "Open Sans", Arial, sans-serif; 175 font-size: 13px; 176 font-weight: 600; 177 line-height: 30px; 178 padding-left: 10px; 179 } 180 181 &:hover { 182 -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 183 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 184 &::before, 185 &::after { 186 opacity: 1; 187 } 188 } 189 190 &.detail-select-active { 191 -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 192 &::before, 193 &::after, 194 .detail-label { 195 opacity: 1; 196 } 197 &::before { 198 border: 3px solid $accent; 199 } 200 201 .detail-label { 202 //background-color: rgba(61, 192, 232, 0.9); 203 //color: rgba(3, 8, 15, 0.92); 204 } 205 206 //.detail-image, .detail-label { 207 // border: none; 208 //} 209 } 210 } 211 } 212 213 .redux-templates-collection-details-footer { 214 width: 100%; 215 height: 60px; 216 background: #fff; 217 position: absolute; 218 bottom: 0; 219 left: 0; 220 z-index: 2; 221 222 .footer-grid { 223 width: 100%; 224 padding: 0 10px; 225 height: 100%; 226 margin: auto; 227 display: flex; 228 align-items: center; 229 justify-content: flex-end; 230 } 231 232 .import-button { 233 margin-left: 11.5px; 234 background-color: #3dbfe8; 235 color: #fff; 236 font-family: pn, "Open Sans", Arial, sans-serif; 237 font-size: 15px; 238 font-weight: 600; 239 line-height: 18px; 240 padding: 9px 32px; 241 border-radius: 3px; 242 cursor: pointer; 243 -webkit-transition: background-color 150ms linear; 244 transition: background-color 150ms linear; 245 246 &:hover { 247 background: rgba(61, 191, 232, 0.8); 248 } 249 } 250 } 251 }