| @@ -1,4 +1,319 @@ | ||
| 1 | +.merchant-pcr-app * { | |
| 2 | + outline: none; | |
| 3 | + border: none; | |
| 4 | + -webkit-box-sizing: border-box; | |
| 5 | + box-sizing: border-box; | |
| 6 | +} | |
| 7 | + | |
| 8 | +.merchant-pcr-app input:focus, | |
| 9 | +.merchant-pcr-app input.pcr-active, | |
| 10 | +.merchant-pcr-app button:focus, | |
| 11 | +.merchant-pcr-app button.pcr-active { | |
| 12 | + -webkit-box-shadow: none; | |
| 13 | + box-shadow: none; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.merchant-pcr-app .pcr-palette:focus, | |
| 17 | +.merchant-pcr-app .pcr-slider:focus { | |
| 18 | + -webkit-box-shadow: none; | |
| 19 | + box-shadow: none; | |
| 20 | +} | |
| 21 | + | |
| 22 | +.merchant-pcr-app { | |
| 23 | + position: fixed; | |
| 24 | + z-index: 999999; | |
| 25 | + top: 0; | |
| 26 | + left: 0; | |
| 27 | + display: -webkit-box; | |
| 28 | + display: -ms-flexbox; | |
| 29 | + display: flex; | |
| 30 | + -webkit-box-orient: vertical; | |
| 31 | + -webkit-box-direction: normal; | |
| 32 | + -ms-flex-direction: column; | |
| 33 | + flex-direction: column; | |
| 34 | + border-radius: 0.1em; | |
| 35 | + opacity: 0; | |
| 36 | + visibility: hidden; | |
| 37 | + -webkit-transition: opacity 0.2s, visibility 0s 0.2s; | |
| 38 | + transition: opacity 0.2s, visibility 0s 0.2s; | |
| 39 | + -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03); | |
| 40 | + box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03); | |
| 41 | + background: #fff; | |
| 42 | +} | |
| 43 | + | |
| 44 | +.merchant-pcr-app.visible { | |
| 45 | + visibility: visible; | |
| 46 | + opacity: 1; | |
| 47 | + -webkit-transition: opacity 0.2s; | |
| 48 | + transition: opacity 0.2s; | |
| 49 | +} | |
| 50 | + | |
| 51 | +.merchant-pcr-app .pcr-swatches { | |
| 52 | + display: -webkit-box; | |
| 53 | + display: -ms-flexbox; | |
| 54 | + display: flex; | |
| 55 | + -webkit-box-pack: justify; | |
| 56 | + -ms-flex-pack: justify; | |
| 57 | + justify-content: space-between; | |
| 58 | +} | |
| 59 | + | |
| 60 | +.merchant-pcr-app .pcr-swatches > button { | |
| 61 | + cursor: pointer; | |
| 62 | + font-size: 1em; | |
| 63 | + position: relative; | |
| 64 | + z-index: 1; | |
| 65 | + width: 20px; | |
| 66 | + height: 20px; | |
| 67 | + margin: 0; | |
| 68 | + padding: 0; | |
| 69 | + background: none; | |
| 70 | +} | |
| 71 | + | |
| 72 | +.merchant-pcr-app .pcr-swatches > button::before { | |
| 73 | + position: absolute; | |
| 74 | + content: ""; | |
| 75 | + top: 0; | |
| 76 | + left: 0; | |
| 77 | + bottom: 0; | |
| 78 | + right: 0; | |
| 79 | + background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 80 | + background-size: 6px; | |
| 81 | + border-radius: 20px; | |
| 82 | + border: 1px solid transparent; | |
| 83 | + z-index: -1; | |
| 84 | +} | |
| 85 | + | |
| 86 | +.merchant-pcr-app .pcr-swatches > button::after { | |
| 87 | + content: ""; | |
| 88 | + position: absolute; | |
| 89 | + z-index: 1; | |
| 90 | + top: 0; | |
| 91 | + left: 0; | |
| 92 | + right: 0; | |
| 93 | + bottom: 0; | |
| 94 | + border-radius: 20px; | |
| 95 | + border: 1px solid rgba(0, 0, 0, 0.3); | |
| 96 | + background: var(--pcr-color); | |
| 97 | +} | |
| 98 | + | |
| 99 | +.merchant-pcr-app .pcr-interaction { | |
| 100 | + display: -webkit-box; | |
| 101 | + display: -ms-flexbox; | |
| 102 | + display: flex; | |
| 103 | + grid-gap: 5px; | |
| 104 | +} | |
| 105 | + | |
| 106 | +.merchant-pcr-app .pcr-interaction input { | |
| 107 | + font-size: 11px; | |
| 108 | + border-radius: 3px; | |
| 109 | +} | |
| 110 | +.merchant-pcr-app .pcr-interaction input:focus { | |
| 111 | + border-color: #3858E9; | |
| 112 | +} | |
| 113 | + | |
| 114 | +.merchant-pcr-app .pcr-interaction .pcr-result { | |
| 115 | + -webkit-box-flex: 1; | |
| 116 | + -ms-flex: 1; | |
| 117 | + flex: 1; | |
| 118 | + margin: 0; | |
| 119 | + width: 100%; | |
| 120 | + max-width: 100%; | |
| 121 | +} | |
| 122 | + | |
| 123 | +.merchant-pcr-app .pcr-interaction .pcr-clear { | |
| 124 | + cursor: pointer; | |
| 125 | + margin: 0; | |
| 126 | + padding: 0 10px; | |
| 127 | + border-radius: 3px; | |
| 128 | + color: #fff; | |
| 129 | + background-color: #3858E9; | |
| 130 | + text-transform: uppercase; | |
| 131 | +} | |
| 132 | + | |
| 133 | +.merchant-pcr-app .pcr-selection .pcr-picker { | |
| 134 | + -webkit-user-select: none; | |
| 135 | + -moz-user-select: none; | |
| 136 | + -ms-user-select: none; | |
| 137 | + user-select: none; | |
| 138 | + position: absolute; | |
| 139 | + height: 16px; | |
| 140 | + width: 16px; | |
| 141 | + border-radius: 16px; | |
| 142 | + background-color: #fff !important; | |
| 143 | + -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); | |
| 144 | + box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); | |
| 145 | +} | |
| 146 | + | |
| 147 | +.merchant-pcr-app .pcr-selection .pcr-color-palette, | |
| 148 | +.merchant-pcr-app .pcr-selection .pcr-color-chooser, | |
| 149 | +.merchant-pcr-app .pcr-selection .pcr-color-opacity { | |
| 150 | + -webkit-user-select: none; | |
| 151 | + -moz-user-select: none; | |
| 152 | + -ms-user-select: none; | |
| 153 | + user-select: none; | |
| 154 | + position: relative; | |
| 155 | + display: -webkit-box; | |
| 156 | + display: -ms-flexbox; | |
| 157 | + display: flex; | |
| 158 | + -webkit-box-orient: vertical; | |
| 159 | + -webkit-box-direction: normal; | |
| 160 | + -ms-flex-direction: column; | |
| 161 | + flex-direction: column; | |
| 162 | + cursor: -webkit-grab; | |
| 163 | + cursor: grab; | |
| 164 | +} | |
| 165 | + | |
| 166 | +.merchant-pcr-app .pcr-selection .pcr-color-palette:active, | |
| 167 | +.merchant-pcr-app .pcr-selection .pcr-color-chooser:active, | |
| 168 | +.merchant-pcr-app .pcr-selection .pcr-color-opacity:active { | |
| 169 | + cursor: -webkit-grabbing; | |
| 170 | + cursor: grabbing; | |
| 171 | +} | |
| 172 | + | |
| 173 | +.merchant-pcr-app[data-theme=merchant] { | |
| 174 | + width: 250px; | |
| 175 | + max-width: 95vw; | |
| 176 | + padding: 10px; | |
| 177 | + -webkit-box-sizing: border-box; | |
| 178 | + box-sizing: border-box; | |
| 179 | + display: -webkit-box; | |
| 180 | + display: -ms-flexbox; | |
| 181 | + display: flex; | |
| 182 | + grid-gap: 10px; | |
| 183 | + -webkit-box-orient: vertical; | |
| 184 | + -webkit-box-direction: normal; | |
| 185 | + -ms-flex-direction: column; | |
| 186 | + flex-direction: column; | |
| 187 | +} | |
| 188 | + | |
| 189 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection { | |
| 190 | + display: grid; | |
| 191 | + grid-gap: 10px; | |
| 192 | + grid-template-columns: 1fr 4fr; | |
| 193 | + grid-template-rows: 5fr auto auto; | |
| 194 | + -webkit-box-align: center; | |
| 195 | + -ms-flex-align: center; | |
| 196 | + align-items: center; | |
| 197 | + height: 150px; | |
| 198 | + width: 100%; | |
| 199 | + align-self: flex-start; | |
| 200 | +} | |
| 201 | + | |
| 202 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview { | |
| 203 | + grid-area: 2/1/4/1; | |
| 204 | + height: 100%; | |
| 205 | + width: 100%; | |
| 206 | + display: -webkit-box; | |
| 207 | + display: -ms-flexbox; | |
| 208 | + display: flex; | |
| 209 | + -webkit-box-align: center; | |
| 210 | + -ms-flex-align: center; | |
| 211 | + align-items: center; | |
| 212 | + -webkit-box-pack: center; | |
| 213 | + -ms-flex-pack: center; | |
| 214 | + justify-content: center; | |
| 215 | +} | |
| 216 | + | |
| 217 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color { | |
| 218 | + display: none; | |
| 219 | +} | |
| 220 | + | |
| 221 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color { | |
| 222 | + position: relative; | |
| 223 | + width: 32px; | |
| 224 | + height: 32px; | |
| 225 | + border-radius: 32px; | |
| 226 | + overflow: hidden; | |
| 227 | + border: 1px solid rgba(0, 0, 0, 0.3); | |
| 228 | + background-color: var(--pcr-color); | |
| 229 | +} | |
| 230 | + | |
| 231 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before { | |
| 232 | + position: absolute; | |
| 233 | + content: ""; | |
| 234 | + top: 0; | |
| 235 | + left: 0; | |
| 236 | + width: 100%; | |
| 237 | + height: 100%; | |
| 238 | + background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 239 | + background-size: 6px; | |
| 240 | + border-radius: 100%; | |
| 241 | + z-index: -1; | |
| 242 | +} | |
| 243 | + | |
| 244 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette { | |
| 245 | + grid-area: 1/1/2/3; | |
| 246 | + width: 100%; | |
| 247 | + height: 100%; | |
| 248 | + z-index: 1; | |
| 249 | +} | |
| 250 | + | |
| 251 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker { | |
| 252 | + width: 18px; | |
| 253 | + height: 18px; | |
| 254 | + border: 2px solid #fff; | |
| 255 | + -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000; | |
| 256 | + box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000; | |
| 257 | + background-color: transparent !important; | |
| 258 | +} | |
| 259 | + | |
| 260 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette { | |
| 261 | + width: 100%; | |
| 262 | + height: 100%; | |
| 263 | +} | |
| 264 | + | |
| 265 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before { | |
| 266 | + position: absolute; | |
| 267 | + content: ""; | |
| 268 | + top: 0; | |
| 269 | + left: 0; | |
| 270 | + width: 100%; | |
| 271 | + height: 100%; | |
| 272 | + background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 273 | + background-size: 8px; | |
| 274 | + z-index: -1; | |
| 275 | +} | |
| 276 | + | |
| 277 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser { | |
| 278 | + grid-area: 2/2/2/2; | |
| 279 | +} | |
| 280 | + | |
| 281 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity { | |
| 282 | + grid-area: 3/2/3/2; | |
| 283 | +} | |
| 284 | + | |
| 285 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser, | |
| 286 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity { | |
| 287 | + height: 12px; | |
| 288 | + margin-right: 10px; | |
| 289 | +} | |
| 290 | + | |
| 291 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker, | |
| 292 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker { | |
| 293 | + top: 50%; | |
| 294 | + -webkit-transform: translateY(-50%); | |
| 295 | + transform: translateY(-50%); | |
| 296 | +} | |
| 297 | + | |
| 298 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider, | |
| 299 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider { | |
| 300 | + -webkit-box-flex: 1; | |
| 301 | + -ms-flex-positive: 1; | |
| 302 | + flex-grow: 1; | |
| 303 | +} | |
| 304 | + | |
| 305 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider { | |
| 306 | + background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red)); | |
| 307 | + background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red); | |
| 308 | +} | |
| 309 | + | |
| 310 | +.merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider { | |
| 311 | + background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 312 | + background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); | |
| 313 | + background-size: 100%, 6px; | |
| 314 | +} | |
| 315 | + | |
| 1 | 316 | .merchant-metabox { |
| 2 | 317 | display: -webkit-box; |
| 3 | 318 | display: -ms-flexbox; |
| 4 | 319 | display: flex; |
| @@ -15,9 +330,8 @@ | ||
| 15 | 330 | flex-direction: column; |
| 16 | 331 | width: 225px; |
| 17 | 332 | margin-left: -20px; |
| 18 | 333 | } |
| 19 | - | |
| 20 | 334 | .merchant-metabox-tabs a { |
| 21 | 335 | position: relative; |
| 22 | 336 | display: -webkit-box; |
| 23 | 337 | display: -ms-flexbox; |
| @@ -27,14 +341,13 @@ | ||
| 27 | 341 | font-weight: 600; |
| 28 | 342 | color: #1a1a1a; |
| 29 | 343 | padding: 9px 16px; |
| 30 | 344 | text-decoration: none; |
| 31 | - -webkit-transition: all .1s; | |
| 32 | - transition: all .1s; | |
| 345 | + -webkit-transition: all 0.1s; | |
| 346 | + transition: all 0.1s; | |
| 33 | 347 | } |
| 34 | - | |
| 35 | 348 | .merchant-metabox-tabs a:before { |
| 36 | - content: ''; | |
| 349 | + content: ""; | |
| 37 | 350 | position: absolute; |
| 38 | 351 | top: 0; |
| 39 | 352 | left: 0; |
| 40 | 353 | width: 4px; |
| @@ -44,9 +357,8 @@ | ||
| 44 | 357 | visibility: hidden; |
| 45 | 358 | -webkit-transition: ease opacity 200ms; |
| 46 | 359 | transition: ease opacity 200ms; |
| 47 | 360 | } |
| 48 | - | |
| 49 | 361 | .merchant-metabox-tabs a:focus, .merchant-metabox-tabs a:active, .merchant-metabox-tabs a:hover { |
| 50 | 362 | color: #757575; |
| 51 | 363 | outline: none; |
| 52 | 364 | -webkit-box-shadow: none; |
| @@ -51,19 +363,16 @@ | ||
| 51 | 363 | outline: none; |
| 52 | 364 | -webkit-box-shadow: none; |
| 53 | 365 | box-shadow: none; |
| 54 | 366 | } |
| 55 | - | |
| 56 | 367 | .merchant-metabox-tabs a:focus:before, .merchant-metabox-tabs a:active:before, .merchant-metabox-tabs a:hover:before { |
| 57 | 368 | background-color: #e1e1e1; |
| 58 | 369 | opacity: 1; |
| 59 | 370 | visibility: visible; |
| 60 | 371 | } |
| 61 | - | |
| 62 | 372 | .merchant-metabox-tabs a.active { |
| 63 | 373 | color: #3858E9; |
| 64 | 374 | } |
| 65 | - | |
| 66 | 375 | .merchant-metabox-tabs a.active:before { |
| 67 | 376 | background-color: #3858E9; |
| 68 | 377 | opacity: 1; |
| 69 | 378 | visibility: visible; |
| @@ -92,9 +401,8 @@ | ||
| 92 | 401 | -webkit-box-direction: normal; |
| 93 | 402 | -ms-flex-direction: column; |
| 94 | 403 | flex-direction: column; |
| 95 | 404 | } |
| 96 | - | |
| 97 | 405 | .merchant-metabox-content:not(.active) { |
| 98 | 406 | display: none; |
| 99 | 407 | } |
| 100 | 408 | |
| @@ -111,16 +419,18 @@ | ||
| 111 | 419 | display: -ms-flexbox; |
| 112 | 420 | display: flex; |
| 113 | 421 | -ms-flex-wrap: wrap; |
| 114 | 422 | flex-wrap: wrap; |
| 115 | - grid-gap: 20px; | |
| 423 | + grid-gap: 0; | |
| 116 | 424 | padding: 20px; |
| 425 | + -webkit-box-orient: vertical; | |
| 426 | + -webkit-box-direction: normal; | |
| 427 | + -ms-flex-direction: column; | |
| 428 | + flex-direction: column; | |
| 117 | 429 | } |
| 118 | - | |
| 119 | 430 | .merchant-metabox-field:first-child { |
| 120 | 431 | border-top: none; |
| 121 | 432 | } |
| 122 | - | |
| 123 | 433 | .merchant-metabox-field:last-child { |
| 124 | 434 | border-bottom: none; |
| 125 | 435 | } |
| 126 | 436 | |
| @@ -143,10 +453,10 @@ | ||
| 143 | 453 | flex-direction: column; |
| 144 | 454 | } |
| 145 | 455 | |
| 146 | 456 | .merchant-metabox-field-title { |
| 147 | - width: 30%; | |
| 148 | - max-width: 275px; | |
| 457 | + width: 100%; | |
| 458 | + max-width: none; | |
| 149 | 459 | display: -webkit-box; |
| 150 | 460 | display: -ms-flexbox; |
| 151 | 461 | display: flex; |
| 152 | 462 | -ms-flex-wrap: wrap; |
| @@ -155,19 +465,19 @@ | ||
| 155 | 465 | -webkit-box-orient: vertical; |
| 156 | 466 | -webkit-box-direction: normal; |
| 157 | 467 | -ms-flex-direction: column; |
| 158 | 468 | flex-direction: column; |
| 469 | + margin-bottom: 10px; | |
| 159 | 470 | } |
| 160 | - | |
| 161 | 471 | .merchant-metabox-field-title h4 { |
| 162 | 472 | margin: 0; |
| 163 | 473 | color: #1e1e1e; |
| 474 | + font-size: 13px; | |
| 475 | + font-weight: 500; | |
| 164 | 476 | } |
| 165 | - | |
| 166 | 477 | .merchant-metabox-field-title small { |
| 167 | 478 | opacity: 0.75; |
| 168 | 479 | } |
| 169 | - | |
| 170 | 480 | .merchant-metabox-field-title small code { |
| 171 | 481 | font-size: 1em; |
| 172 | 482 | } |
| 173 | 483 | |
| @@ -177,35 +487,57 @@ | ||
| 177 | 487 | flex: 1; |
| 178 | 488 | } |
| 179 | 489 | |
| 180 | 490 | .merchant-metabox-field-description { |
| 181 | - font-size: 80%; | |
| 182 | - opacity: 0.75; | |
| 183 | - margin-top: 10px; | |
| 491 | + font-size: 12px; | |
| 492 | + color: #666; | |
| 493 | + opacity: 1; | |
| 494 | + margin-top: 5px; | |
| 184 | 495 | } |
| 185 | - | |
| 186 | 496 | .merchant-metabox-field-description code { |
| 187 | 497 | font-size: 1em; |
| 188 | 498 | } |
| 189 | - | |
| 190 | 499 | .merchant-metabox-field-description a { |
| 191 | 500 | color: #3858E9; |
| 192 | 501 | } |
| 193 | - | |
| 194 | 502 | .merchant-metabox-field-description a:focus { |
| 195 | 503 | -webkit-box-shadow: none; |
| 196 | 504 | box-shadow: none; |
| 197 | 505 | } |
| 198 | 506 | |
| 507 | +.merchant-metabox-datetime-field input, | |
| 199 | 508 | .merchant-metabox-field-text input { |
| 200 | - width: 50%; | |
| 509 | + padding: 12px; | |
| 510 | + line-height: 1.3em; | |
| 511 | + width: 100%; | |
| 201 | 512 | max-width: 100%; |
| 513 | + min-height: auto; | |
| 514 | + border: 1px solid #D6D6D6; | |
| 515 | + border-radius: 4px; | |
| 202 | 516 | } |
| 517 | +.merchant-metabox-datetime-field input:focus, | |
| 518 | +.merchant-metabox-field-text input:focus { | |
| 519 | + outline: none; | |
| 520 | + -webkit-box-shadow: none; | |
| 521 | + box-shadow: none; | |
| 522 | + border-color: #3858E9; | |
| 523 | +} | |
| 203 | 524 | |
| 204 | 525 | .merchant-metabox-field-number input { |
| 205 | - width: 100px; | |
| 526 | + padding: 12px; | |
| 527 | + line-height: 1.3em; | |
| 528 | + width: 100%; | |
| 206 | 529 | max-width: 100%; |
| 530 | + min-height: auto; | |
| 531 | + border: 1px solid #D6D6D6; | |
| 532 | + border-radius: 4px; | |
| 207 | 533 | } |
| 534 | +.merchant-metabox-field-number input:focus { | |
| 535 | + outline: none; | |
| 536 | + -webkit-box-shadow: none; | |
| 537 | + box-shadow: none; | |
| 538 | + border-color: #3858E9; | |
| 539 | +} | |
| 208 | 540 | |
| 209 | 541 | .merchant-metabox-field-textarea textarea { |
| 210 | 542 | width: 100%; |
| 211 | 543 | max-width: 100%; |
| @@ -225,9 +557,8 @@ | ||
| 225 | 557 | -moz-user-select: none; |
| 226 | 558 | -ms-user-select: none; |
| 227 | 559 | user-select: none; |
| 228 | 560 | } |
| 229 | - | |
| 230 | 561 | .merchant-metabox-field-checkbox label input { |
| 231 | 562 | margin: 0; |
| 232 | 563 | } |
| 233 | 564 | |
| @@ -243,9 +574,8 @@ | ||
| 243 | 574 | -moz-user-select: none; |
| 244 | 575 | -ms-user-select: none; |
| 245 | 576 | user-select: none; |
| 246 | 577 | } |
| 247 | - | |
| 248 | 578 | .merchant-metabox-field-switcher i { |
| 249 | 579 | position: relative; |
| 250 | 580 | overflow: hidden; |
| 251 | 581 | display: -webkit-box; |
| @@ -257,9 +587,8 @@ | ||
| 257 | 587 | border-radius: 20px; |
| 258 | 588 | -webkit-transition: all 0.2s; |
| 259 | 589 | transition: all 0.2s; |
| 260 | 590 | } |
| 261 | - | |
| 262 | 591 | .merchant-metabox-field-switcher i:before { |
| 263 | 592 | content: ""; |
| 264 | 593 | position: absolute; |
| 265 | 594 | display: block; |
| @@ -271,21 +600,126 @@ | ||
| 271 | 600 | border-radius: 20px; |
| 272 | 601 | -webkit-transition: all 0.1s; |
| 273 | 602 | transition: all 0.1s; |
| 274 | 603 | } |
| 275 | - | |
| 276 | 604 | .merchant-metabox-field-switcher input { |
| 277 | 605 | display: none; |
| 278 | 606 | } |
| 279 | - | |
| 280 | 607 | .merchant-metabox-field-switcher input:checked + i { |
| 281 | 608 | background-color: #3858E9; |
| 282 | 609 | } |
| 283 | - | |
| 284 | 610 | .merchant-metabox-field-switcher input:checked + i:before { |
| 285 | 611 | left: 26px; |
| 286 | 612 | } |
| 287 | 613 | |
| 614 | +.merchant-metabox-radio-field { | |
| 615 | + display: -webkit-box; | |
| 616 | + display: -ms-flexbox; | |
| 617 | + display: flex; | |
| 618 | + -ms-flex-wrap: wrap; | |
| 619 | + flex-wrap: wrap; | |
| 620 | + -webkit-box-align: center; | |
| 621 | + -ms-flex-align: center; | |
| 622 | + align-items: center; | |
| 623 | + gap: 30px; | |
| 624 | + /* Hide the hardcoded <br> tags */ | |
| 625 | +} | |
| 626 | +.merchant-metabox-radio-field br { | |
| 627 | + display: none; | |
| 628 | +} | |
| 629 | +.merchant-metabox-radio-field label { | |
| 630 | + display: -webkit-inline-box; | |
| 631 | + display: -ms-inline-flexbox; | |
| 632 | + display: inline-flex; | |
| 633 | + -webkit-box-align: center; | |
| 634 | + -ms-flex-align: center; | |
| 635 | + align-items: center; | |
| 636 | + gap: 12px; | |
| 637 | + margin: 0; | |
| 638 | + cursor: pointer; | |
| 639 | +} | |
| 640 | +.merchant-metabox-radio-field label span { | |
| 641 | + font-size: 14px; | |
| 642 | + font-weight: 400; | |
| 643 | + color: #1D2327; | |
| 644 | + opacity: 0.8; | |
| 645 | +} | |
| 646 | +.merchant-metabox-radio-field label input:checked + span { | |
| 647 | + opacity: 1; | |
| 648 | +} | |
| 649 | +.merchant-metabox-radio-field label input { | |
| 650 | + -ms-flex-negative: 0; | |
| 651 | + flex-shrink: 0; | |
| 652 | + margin: 0; | |
| 653 | + width: 20px; | |
| 654 | + height: 20px; | |
| 655 | + border: 1px solid #D6D6D6; | |
| 656 | + background-color: #fff; | |
| 657 | + display: -webkit-inline-box; | |
| 658 | + display: -ms-inline-flexbox; | |
| 659 | + display: inline-flex; | |
| 660 | + -webkit-box-align: center; | |
| 661 | + -ms-flex-align: center; | |
| 662 | + align-items: center; | |
| 663 | + -webkit-box-pack: center; | |
| 664 | + -ms-flex-pack: center; | |
| 665 | + justify-content: center; | |
| 666 | + -webkit-transition: none; | |
| 667 | + transition: none; | |
| 668 | + -webkit-box-sizing: border-box; | |
| 669 | + box-sizing: border-box; | |
| 670 | + -webkit-box-shadow: none; | |
| 671 | + box-shadow: none; | |
| 672 | + border-radius: 100%; | |
| 673 | + -moz-appearance: none; | |
| 674 | + appearance: none; | |
| 675 | + -webkit-appearance: none; | |
| 676 | +} | |
| 677 | +.merchant-metabox-radio-field label input:focus { | |
| 678 | + border-color: #fff; | |
| 679 | + -webkit-box-shadow: none; | |
| 680 | + box-shadow: none; | |
| 681 | + outline: none; | |
| 682 | +} | |
| 683 | +.merchant-metabox-radio-field label input:checked { | |
| 684 | + border-color: #3858E9; | |
| 685 | + background-color: #fff; | |
| 686 | + -webkit-box-shadow: 0 0 0 1px #3858E9; | |
| 687 | + box-shadow: 0 0 0 1px #3858E9; | |
| 688 | +} | |
| 689 | +.merchant-metabox-radio-field label input:checked::before { | |
| 690 | + content: ""; | |
| 691 | + width: 12px; | |
| 692 | + height: 12px; | |
| 693 | + border-radius: 12px; | |
| 694 | + background-color: #3858E9; | |
| 695 | + display: block; | |
| 696 | +} | |
| 697 | + | |
| 698 | +.merchant-metabox-field-select select { | |
| 699 | + padding: 12px 20px 12px 12px; | |
| 700 | + line-height: 1.3em; | |
| 701 | + width: 100%; | |
| 702 | + max-width: 100%; | |
| 703 | + min-height: auto; | |
| 704 | + border-radius: 6px; | |
| 705 | + color: #2F2F2F; | |
| 706 | + border: 1px solid #D6D6D6; | |
| 707 | + background-color: #fff; | |
| 708 | +} | |
| 709 | +.merchant-metabox-field-select select:hover { | |
| 710 | + color: #2F2F2F; | |
| 711 | +} | |
| 712 | +.merchant-metabox-field-select select:focus { | |
| 713 | + outline: none; | |
| 714 | + -webkit-box-shadow: none; | |
| 715 | + box-shadow: none; | |
| 716 | + border-color: #3858E9; | |
| 717 | +} | |
| 718 | +.merchant-metabox-field-select select option { | |
| 719 | + color: #2F2F2F; | |
| 720 | +} | |
| 721 | + | |
| 288 | 722 | .merchant-metabox-field-choices-images { |
| 289 | 723 | display: -webkit-box; |
| 290 | 724 | display: -ms-flexbox; |
| 291 | 725 | display: flex; |
| @@ -292,9 +726,8 @@ | ||
| 292 | 726 | -ms-flex-wrap: wrap; |
| 293 | 727 | flex-wrap: wrap; |
| 294 | 728 | grid-gap: 2px; |
| 295 | 729 | } |
| 296 | - | |
| 297 | 730 | .merchant-metabox-field-choices-images label { |
| 298 | 731 | display: -webkit-box; |
| 299 | 732 | display: -ms-flexbox; |
| 300 | 733 | display: flex; |
| @@ -302,33 +735,28 @@ | ||
| 302 | 735 | -moz-user-select: none; |
| 303 | 736 | -ms-user-select: none; |
| 304 | 737 | user-select: none; |
| 305 | 738 | } |
| 306 | - | |
| 307 | 739 | .merchant-metabox-field-choices-images figure { |
| 308 | 740 | padding: 4px; |
| 309 | 741 | margin: 0; |
| 310 | 742 | border: 2px solid transparent; |
| 311 | 743 | border-radius: 4px; |
| 312 | - -webkit-transition: all .2s; | |
| 313 | - transition: all .2s; | |
| 744 | + -webkit-transition: all 0.2s; | |
| 745 | + transition: all 0.2s; | |
| 314 | 746 | max-width: 80px; |
| 315 | 747 | max-height: 80px; |
| 316 | 748 | } |
| 317 | - | |
| 318 | 749 | .merchant-metabox-field-choices-images figure img { |
| 319 | 750 | width: 100%; |
| 320 | 751 | vertical-align: top; |
| 321 | 752 | } |
| 322 | - | |
| 323 | 753 | .merchant-metabox-field-choices-images input { |
| 324 | 754 | display: none; |
| 325 | 755 | } |
| 326 | - | |
| 327 | 756 | .merchant-metabox-field-choices-images input:checked + figure { |
| 328 | 757 | border-color: #1e1e1e; |
| 329 | 758 | } |
| 330 | - | |
| 331 | 759 | .merchant-metabox-field-choices-images input:checked + figure:before { |
| 332 | 760 | left: 26px; |
| 333 | 761 | } |
| 334 | 762 | |
| @@ -349,9 +777,8 @@ | ||
| 349 | 777 | font-size: 18px; |
| 350 | 778 | width: 18px; |
| 351 | 779 | height: 18px; |
| 352 | 780 | } |
| 353 | - | |
| 354 | 781 | .merchant-metabox-field-uploads-thumbnail-remove:hover { |
| 355 | 782 | color: #a00; |
| 356 | 783 | } |
| 357 | 784 | |
| @@ -374,9 +801,8 @@ | ||
| 374 | 801 | font-size: 25px; |
| 375 | 802 | font-weight: 200; |
| 376 | 803 | text-decoration: none; |
| 377 | 804 | } |
| 378 | - | |
| 379 | 805 | .merchant-metabox-field-uploads-thumbnail-upload img { |
| 380 | 806 | width: 100%; |
| 381 | 807 | height: 100%; |
| 382 | 808 | -o-object-fit: cover; |
| @@ -398,12 +824,11 @@ | ||
| 398 | 824 | -ms-user-select: none; |
| 399 | 825 | user-select: none; |
| 400 | 826 | color: #1e1e1e; |
| 401 | 827 | opacity: 0.5; |
| 402 | - -webkit-transition: all .2s; | |
| 403 | - transition: all .2s; | |
| 828 | + -webkit-transition: all 0.2s; | |
| 829 | + transition: all 0.2s; | |
| 404 | 830 | } |
| 405 | - | |
| 406 | 831 | .merchant-metabox-field-repeater-move:hover, |
| 407 | 832 | .merchant-metabox-field-repeater-remove:hover, |
| 408 | 833 | .merchant-metabox-field-flexible-content-move:hover, |
| 409 | 834 | .merchant-metabox-field-flexible-content-remove:hover { |
| @@ -428,9 +853,8 @@ | ||
| 428 | 853 | -webkit-box-align: start; |
| 429 | 854 | -ms-flex-align: start; |
| 430 | 855 | align-items: flex-start; |
| 431 | 856 | } |
| 432 | - | |
| 433 | 857 | .merchant-metabox-field-uploads-content ul, |
| 434 | 858 | .merchant-metabox-field-repeater-content ul { |
| 435 | 859 | margin: 0; |
| 436 | 860 | padding: 0; |
| @@ -436,9 +860,8 @@ | ||
| 436 | 860 | padding: 0; |
| 437 | 861 | list-style: none; |
| 438 | 862 | width: 100%; |
| 439 | 863 | } |
| 440 | - | |
| 441 | 864 | .merchant-metabox-field-uploads-content ul li, |
| 442 | 865 | .merchant-metabox-field-repeater-content ul li { |
| 443 | 866 | margin: 0; |
| 444 | 867 | padding: 0; |
| @@ -452,14 +875,12 @@ | ||
| 452 | 875 | -ms-flex-pack: start; |
| 453 | 876 | justify-content: flex-start; |
| 454 | 877 | margin-bottom: 10px; |
| 455 | 878 | } |
| 456 | - | |
| 457 | 879 | .merchant-metabox-field-uploads-content ul li.hidden, |
| 458 | 880 | .merchant-metabox-field-repeater-content ul li.hidden { |
| 459 | 881 | display: none; |
| 460 | 882 | } |
| 461 | - | |
| 462 | 883 | .merchant-metabox-field-uploads-content ul li span, |
| 463 | 884 | .merchant-metabox-field-repeater-content ul li span { |
| 464 | 885 | font-size: 20px; |
| 465 | 886 | padding: 5px; |
| @@ -469,9 +890,8 @@ | ||
| 469 | 890 | -moz-user-select: none; |
| 470 | 891 | -ms-user-select: none; |
| 471 | 892 | user-select: none; |
| 472 | 893 | } |
| 473 | - | |
| 474 | 894 | .merchant-metabox-field-uploads-content input, |
| 475 | 895 | .merchant-metabox-field-repeater-content input { |
| 476 | 896 | width: 50%; |
| 477 | 897 | max-width: 100%; |
| @@ -477,9 +897,8 @@ | ||
| 477 | 897 | max-width: 100%; |
| 478 | 898 | max-width: 100%; |
| 479 | 899 | margin-right: 5px; |
| 480 | 900 | } |
| 481 | - | |
| 482 | 901 | .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field, |
| 483 | 902 | .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field { |
| 484 | 903 | display: -webkit-box; |
| 485 | 904 | display: -ms-flexbox; |
| @@ -485,19 +904,16 @@ | ||
| 485 | 904 | display: -ms-flexbox; |
| 486 | 905 | display: flex; |
| 487 | 906 | margin-right: 5px; |
| 488 | 907 | } |
| 489 | - | |
| 490 | 908 | .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field input, |
| 491 | 909 | .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field input { |
| 492 | 910 | width: 100%; |
| 493 | 911 | } |
| 494 | - | |
| 495 | 912 | .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field span, |
| 496 | 913 | .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field span { |
| 497 | 914 | font-size: 14px; |
| 498 | 915 | } |
| 499 | - | |
| 500 | 916 | .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-fields, |
| 501 | 917 | .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-fields { |
| 502 | 918 | display: -webkit-box; |
| 503 | 919 | display: -ms-flexbox; |
| @@ -514,17 +930,14 @@ | ||
| 514 | 930 | margin: 0; |
| 515 | 931 | padding: 0; |
| 516 | 932 | list-style: none; |
| 517 | 933 | } |
| 518 | - | |
| 519 | 934 | .merchant-metabox-field-size-chart ul li { |
| 520 | 935 | margin-bottom: 20px; |
| 521 | 936 | } |
| 522 | - | |
| 523 | 937 | .merchant-metabox-field-size-chart ul li.hidden { |
| 524 | 938 | display: none; |
| 525 | 939 | } |
| 526 | - | |
| 527 | 940 | .merchant-metabox-field-size-chart table { |
| 528 | 941 | width: 100%; |
| 529 | 942 | border-spacing: 0; |
| 530 | 943 | border-collapse: collapse; |
| @@ -529,25 +942,21 @@ | ||
| 529 | 942 | border-spacing: 0; |
| 530 | 943 | border-collapse: collapse; |
| 531 | 944 | background-color: #fff; |
| 532 | 945 | } |
| 533 | - | |
| 534 | 946 | .merchant-metabox-field-size-chart table th, |
| 535 | 947 | .merchant-metabox-field-size-chart table td { |
| 536 | 948 | padding: 15px; |
| 537 | 949 | border: 1px solid rgba(0, 0, 0, 0.1); |
| 538 | 950 | } |
| 539 | - | |
| 540 | 951 | .merchant-metabox-field-size-chart table th:last-child, |
| 541 | 952 | .merchant-metabox-field-size-chart table td:last-child { |
| 542 | 953 | width: 1%; |
| 543 | 954 | min-width: 75px; |
| 544 | 955 | } |
| 545 | - | |
| 546 | 956 | .merchant-metabox-field-size-chart table thead { |
| 547 | 957 | text-align: center; |
| 548 | 958 | } |
| 549 | - | |
| 550 | 959 | .merchant-metabox-field-size-chart table thead label { |
| 551 | 960 | display: -webkit-inline-box; |
| 552 | 961 | display: -ms-inline-flexbox; |
| 553 | 962 | display: inline-flex; |
| @@ -558,23 +967,19 @@ | ||
| 558 | 967 | -webkit-box-align: center; |
| 559 | 968 | -ms-flex-align: center; |
| 560 | 969 | align-items: center; |
| 561 | 970 | } |
| 562 | - | |
| 563 | 971 | .merchant-metabox-field-size-chart table tbody input { |
| 564 | 972 | width: 100%; |
| 565 | 973 | max-width: 100%; |
| 566 | 974 | text-align: center; |
| 567 | 975 | } |
| 568 | - | |
| 569 | 976 | .merchant-metabox-field-size-chart table tbody tr:nth-child(2) td:not(:last-child) { |
| 570 | 977 | background-color: #eee; |
| 571 | 978 | } |
| 572 | - | |
| 573 | 979 | .merchant-metabox-field-size-chart table tfoot { |
| 574 | 980 | text-align: right; |
| 575 | 981 | } |
| 576 | - | |
| 577 | 982 | .merchant-metabox-field-size-chart .merchant-buttons { |
| 578 | 983 | display: -webkit-box; |
| 579 | 984 | display: -ms-flexbox; |
| 580 | 985 | display: flex; |
| @@ -585,9 +990,8 @@ | ||
| 585 | 990 | -webkit-box-align: center; |
| 586 | 991 | -ms-flex-align: center; |
| 587 | 992 | align-items: center; |
| 588 | 993 | } |
| 589 | - | |
| 590 | 994 | .merchant-metabox-field-size-chart .merchant-buttons a { |
| 591 | 995 | display: -webkit-box; |
| 592 | 996 | display: -ms-flexbox; |
| 593 | 997 | display: flex; |
| @@ -611,46 +1015,38 @@ | ||
| 611 | 1015 | -webkit-box-shadow: none; |
| 612 | 1016 | box-shadow: none; |
| 613 | 1017 | text-decoration: none; |
| 614 | 1018 | } |
| 615 | - | |
| 616 | 1019 | .merchant-metabox-field-size-chart .merchant-buttons a:active { |
| 617 | 1020 | opacity: 0.5; |
| 618 | 1021 | } |
| 619 | - | |
| 620 | 1022 | .merchant-metabox-field-size-chart .merchant-add-col, |
| 621 | 1023 | .merchant-metabox-field-size-chart .merchant-add-row { |
| 622 | 1024 | color: #27ae60; |
| 623 | 1025 | background-color: #d5f5e3; |
| 624 | 1026 | } |
| 625 | - | |
| 626 | 1027 | .merchant-metabox-field-size-chart .merchant-del-col, |
| 627 | 1028 | .merchant-metabox-field-size-chart .merchant-del-row { |
| 628 | 1029 | color: #e74c3c; |
| 629 | 1030 | background-color: #f2d7d5; |
| 630 | 1031 | } |
| 631 | - | |
| 632 | 1032 | .merchant-metabox-field-size-chart .merchant-remove { |
| 633 | 1033 | color: #fff; |
| 634 | 1034 | border-color: #d50204; |
| 635 | 1035 | background: #d50204; |
| 636 | 1036 | } |
| 637 | - | |
| 638 | 1037 | .merchant-metabox-field-size-chart .merchant-remove:hover, .merchant-metabox-field-size-chart .merchant-remove:focus { |
| 639 | 1038 | border-color: #b32d2e; |
| 640 | 1039 | background: #b32d2e; |
| 641 | 1040 | } |
| 642 | - | |
| 643 | 1041 | .merchant-metabox-field-size-chart .merchant-remove:focus { |
| 644 | 1042 | -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e; |
| 645 | 1043 | box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e; |
| 646 | 1044 | } |
| 647 | - | |
| 648 | 1045 | .merchant-metabox-field-size-chart .merchant-remove:active { |
| 649 | 1046 | border-color: #b32d2e; |
| 650 | 1047 | background: #b32d2e; |
| 651 | 1048 | } |
| 652 | - | |
| 653 | 1049 | .merchant-metabox-field-size-chart .merchant-duplicate { |
| 654 | 1050 | display: -webkit-box; |
| 655 | 1051 | display: -ms-flexbox; |
| 656 | 1052 | display: flex; |
| @@ -667,16 +1063,14 @@ | ||
| 667 | 1063 | -webkit-box-shadow: none; |
| 668 | 1064 | box-shadow: none; |
| 669 | 1065 | text-decoration: none; |
| 670 | 1066 | color: #000; |
| 671 | - -webkit-transition: all .2s; | |
| 672 | - transition: all .2s; | |
| 1067 | + -webkit-transition: all 0.2s; | |
| 1068 | + transition: all 0.2s; | |
| 673 | 1069 | } |
| 674 | - | |
| 675 | 1070 | .merchant-metabox-field-size-chart .merchant-duplicate:hover, .merchant-metabox-field-size-chart .merchant-duplicate:active { |
| 676 | 1071 | opacity: 0.5; |
| 677 | 1072 | } |
| 678 | - | |
| 679 | 1073 | .merchant-metabox-field-size-chart .merchant-duplicate i { |
| 680 | 1074 | width: auto; |
| 681 | 1075 | height: auto; |
| 682 | 1076 | font-size: 20px; |
| @@ -700,30 +1094,25 @@ | ||
| 700 | 1094 | background-color: #fff; |
| 701 | 1095 | -webkit-box-sizing: border-box; |
| 702 | 1096 | box-sizing: border-box; |
| 703 | 1097 | } |
| 704 | - | |
| 705 | 1098 | .merchant-metabox-field-media figure img { |
| 706 | 1099 | max-width: 100%; |
| 707 | 1100 | height: auto; |
| 708 | 1101 | } |
| 709 | - | |
| 710 | 1102 | .merchant-metabox-field-media input { |
| 711 | 1103 | display: none; |
| 712 | 1104 | } |
| 713 | - | |
| 714 | 1105 | .merchant-metabox-field-media .merchant-button-remove { |
| 715 | 1106 | color: #b32d2e; |
| 716 | 1107 | border-color: #b32d2e; |
| 717 | 1108 | background: #fff8f8; |
| 718 | 1109 | } |
| 719 | - | |
| 720 | 1110 | .merchant-metabox-field-media .merchant-button-remove:hover, .merchant-metabox-field-media .merchant-button-remove:focus, .merchant-metabox-field-media .merchant-button-remove:active { |
| 721 | 1111 | color: #b32d2e; |
| 722 | 1112 | border-color: #b32d2e; |
| 723 | 1113 | background: #fff0f0; |
| 724 | 1114 | } |
| 725 | - | |
| 726 | 1115 | .merchant-metabox-field-media .merchant-button-remove:focus { |
| 727 | 1116 | -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e; |
| 728 | 1117 | box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e; |
| 729 | 1118 | } |
| @@ -731,9 +1120,8 @@ | ||
| 731 | 1120 | .merchant-metabox-field-select-ajax select { |
| 732 | 1121 | display: none; |
| 733 | 1122 | width: 100%; |
| 734 | 1123 | } |
| 735 | - | |
| 736 | 1124 | .merchant-metabox-field-select-ajax ul { |
| 737 | 1125 | margin: 0; |
| 738 | 1126 | padding: 0; |
| 739 | 1127 | list-style: none; |
| @@ -738,43 +1126,35 @@ | ||
| 738 | 1126 | padding: 0; |
| 739 | 1127 | list-style: none; |
| 740 | 1128 | vertical-align: top; |
| 741 | 1129 | } |
| 742 | - | |
| 743 | 1130 | .merchant-metabox-field-select-ajax ul li { |
| 744 | 1131 | margin: 0; |
| 745 | 1132 | padding: 0; |
| 746 | 1133 | } |
| 747 | - | |
| 748 | 1134 | .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple .select2-selection__rendered { |
| 749 | 1135 | width: auto; |
| 750 | 1136 | display: inline; |
| 751 | 1137 | padding: 0; |
| 752 | 1138 | } |
| 753 | - | |
| 754 | 1139 | .merchant-metabox-field-select-ajax .select2-container .select2-search--inline .select2-search__field { |
| 755 | 1140 | margin: 0; |
| 756 | 1141 | padding: 0; |
| 757 | 1142 | } |
| 758 | - | |
| 759 | 1143 | .merchant-metabox-field-select-ajax .select2-container--default.select2-container--focus .select2-selection--multiple { |
| 760 | 1144 | border-color: #aaa; |
| 761 | 1145 | } |
| 762 | - | |
| 763 | 1146 | .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple { |
| 764 | 1147 | padding: 0 5px; |
| 765 | 1148 | } |
| 766 | - | |
| 767 | 1149 | .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple .select2-selection__choice { |
| 768 | 1150 | margin-left: 0; |
| 769 | 1151 | } |
| 770 | - | |
| 771 | 1152 | .merchant-metabox-field-select-ajax .merchant-select2-clear { |
| 772 | 1153 | display: block; |
| 773 | 1154 | width: 100%; |
| 774 | 1155 | clear: both; |
| 775 | 1156 | } |
| 776 | - | |
| 777 | 1157 | .merchant-metabox-field-select-ajax .merchant-metabox-field-content { |
| 778 | 1158 | min-height: 32px; |
| 779 | 1159 | } |
| 780 | 1160 | |
| @@ -790,9 +1170,8 @@ | ||
| 790 | 1170 | -webkit-box-direction: normal; |
| 791 | 1171 | -ms-flex-direction: column; |
| 792 | 1172 | flex-direction: column; |
| 793 | 1173 | } |
| 794 | - | |
| 795 | 1174 | .merchant-metabox-field-wc-attributes ul li { |
| 796 | 1175 | margin: 0; |
| 797 | 1176 | padding: 0; |
| 798 | 1177 | display: -webkit-box; |
| @@ -805,13 +1184,11 @@ | ||
| 805 | 1184 | border: 1px solid #e5e5e5; |
| 806 | 1185 | background-color: #fdfdfd; |
| 807 | 1186 | border-radius: 3px; |
| 808 | 1187 | } |
| 809 | - | |
| 810 | 1188 | .merchant-metabox-field-wc-attributes ul li:hover { |
| 811 | 1189 | border-color: #ccc; |
| 812 | 1190 | } |
| 813 | - | |
| 814 | 1191 | .merchant-metabox-field-wc-attributes ul li label { |
| 815 | 1192 | display: -webkit-box; |
| 816 | 1193 | display: -ms-flexbox; |
| 817 | 1194 | display: flex; |
| @@ -827,13 +1204,11 @@ | ||
| 827 | 1204 | -moz-user-select: none; |
| 828 | 1205 | -ms-user-select: none; |
| 829 | 1206 | user-select: none; |
| 830 | 1207 | } |
| 831 | - | |
| 832 | 1208 | .merchant-metabox-field-wc-attributes ul li label input { |
| 833 | 1209 | margin: 0; |
| 834 | 1210 | } |
| 835 | - | |
| 836 | 1211 | .merchant-metabox-field-wc-attributes ul li .merchant-sortable-move { |
| 837 | 1212 | cursor: pointer; |
| 838 | 1213 | padding: 8px; |
| 839 | 1214 | } |
| @@ -874,14 +1249,12 @@ | ||
| 874 | 1249 | |
| 875 | 1250 | #side-sortables .merchant-metabox-tabs { |
| 876 | 1251 | display: none; |
| 877 | 1252 | } |
| 878 | - | |
| 879 | 1253 | #side-sortables .merchant-metabox-content-title, |
| 880 | 1254 | #side-sortables .merchant-metabox-content:not(.active) { |
| 881 | 1255 | display: block; |
| 882 | 1256 | } |
| 883 | - | |
| 884 | 1257 | #side-sortables .merchant-metabox-field { |
| 885 | 1258 | grid-gap: 8px; |
| 886 | 1259 | padding: 10px 15px; |
| 887 | 1260 | -webkit-box-orient: vertical; |
| @@ -888,27 +1261,22 @@ | ||
| 888 | 1261 | -webkit-box-direction: normal; |
| 889 | 1262 | -ms-flex-direction: column; |
| 890 | 1263 | flex-direction: column; |
| 891 | 1264 | } |
| 892 | - | |
| 893 | 1265 | #side-sortables .merchant-metabox-field-title { |
| 894 | 1266 | width: auto; |
| 895 | 1267 | font-size: 12px; |
| 896 | 1268 | } |
| 897 | - | |
| 898 | 1269 | #side-sortables .merchant-metabox-field-title:empty { |
| 899 | 1270 | display: none; |
| 900 | 1271 | } |
| 901 | - | |
| 902 | 1272 | #side-sortables .merchant-metabox-contents { |
| 903 | 1273 | border-left: none; |
| 904 | 1274 | border-right: none; |
| 905 | 1275 | } |
| 906 | - | |
| 907 | 1276 | #side-sortables #merchant_metabox .postbox-header { |
| 908 | 1277 | border-top: none; |
| 909 | 1278 | } |
| 910 | - | |
| 911 | 1279 | #side-sortables #merchant_metabox .postbox-header h2 { |
| 912 | 1280 | color: #1e1e1e; |
| 913 | 1281 | padding: 0 0 0 15px; |
| 914 | 1282 | font-size: 13px; |
| @@ -913,13 +1281,11 @@ | ||
| 913 | 1281 | padding: 0 0 0 15px; |
| 914 | 1282 | font-size: 13px; |
| 915 | 1283 | font-weight: 500; |
| 916 | 1284 | } |
| 917 | - | |
| 918 | 1285 | #side-sortables #merchant_metabox .inside { |
| 919 | 1286 | padding: 0; |
| 920 | 1287 | } |
| 921 | - | |
| 922 | 1288 | #side-sortables .merchant-metabox-field-text input, |
| 923 | 1289 | #side-sortables .merchant-metabox-field-uploads-content input, |
| 924 | 1290 | #side-sortables .merchant-metabox-field-repeater-content input { |
| 925 | 1291 | width: 100%; |
| @@ -935,9 +1301,8 @@ | ||
| 935 | 1301 | flex-direction: column; |
| 936 | 1302 | width: 100%; |
| 937 | 1303 | grid-gap: 10px; |
| 938 | 1304 | } |
| 939 | - | |
| 940 | 1305 | .merchant-metabox-field-flexible-content-list.empty { |
| 941 | 1306 | border: 2px dashed #dcdcde; |
| 942 | 1307 | min-height: 100px; |
| 943 | 1308 | } |
| @@ -945,9 +1310,8 @@ | ||
| 945 | 1310 | .merchant-metabox-field-flexible-content-item { |
| 946 | 1311 | border: 1px solid #c3c4c7; |
| 947 | 1312 | border-left: 3px solid #3858e9; |
| 948 | 1313 | } |
| 949 | - | |
| 950 | 1314 | .merchant-metabox-field-flexible-content-item:first-child { |
| 951 | 1315 | display: none; |
| 952 | 1316 | } |
| 953 | 1317 | |
| @@ -961,9 +1325,8 @@ | ||
| 961 | 1325 | flex-direction: column; |
| 962 | 1326 | grid-gap: 10px; |
| 963 | 1327 | padding: 15px; |
| 964 | 1328 | } |
| 965 | - | |
| 966 | 1329 | .merchant-metabox-field-flexible-content-item-content > div { |
| 967 | 1330 | display: -webkit-box; |
| 968 | 1331 | display: -ms-flexbox; |
| 969 | 1332 | display: flex; |
| @@ -968,18 +1331,15 @@ | ||
| 968 | 1331 | display: -ms-flexbox; |
| 969 | 1332 | display: flex; |
| 970 | 1333 | grid-gap: 10px; |
| 971 | 1334 | } |
| 972 | - | |
| 973 | 1335 | .merchant-metabox-field-flexible-content-item-content > div:not(:last-child) > div { |
| 974 | 1336 | border-bottom: 1px solid #f3f3f3; |
| 975 | 1337 | padding-bottom: 15px; |
| 976 | 1338 | } |
| 977 | - | |
| 978 | 1339 | .merchant-metabox-field-flexible-content-item-content > div label { |
| 979 | 1340 | width: 200px; |
| 980 | 1341 | } |
| 981 | - | |
| 982 | 1342 | .merchant-metabox-field-flexible-content-item-content > div > div { |
| 983 | 1343 | width: calc(100% - 200px); |
| 984 | 1344 | } |
| 985 | 1345 | |
| @@ -1042,10 +1402,10 @@ | ||
| 1042 | 1402 | position: absolute; |
| 1043 | 1403 | background-color: #ffffff; |
| 1044 | 1404 | border: 1px solid #c3c4c7; |
| 1045 | 1405 | border-left: 3px solid #3858e9; |
| 1046 | - -webkit-box-shadow: 0 2px 10px 0 #0000001a; | |
| 1047 | - box-shadow: 0 2px 10px 0 #0000001a; | |
| 1406 | + -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843); | |
| 1407 | + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843); | |
| 1048 | 1408 | width: 180px; |
| 1049 | 1409 | bottom: 100%; |
| 1050 | 1410 | display: -webkit-box; |
| 1051 | 1411 | display: -ms-flexbox; |
| @@ -1058,9 +1418,8 @@ | ||
| 1058 | 1418 | -webkit-transform: translate(-50%, 10px); |
| 1059 | 1419 | transform: translate(-50%, 10px); |
| 1060 | 1420 | padding: 3px 3px 3px 5px; |
| 1061 | 1421 | } |
| 1062 | - | |
| 1063 | 1422 | .merchant-metabox-field-flexible-content-add-list.active { |
| 1064 | 1423 | z-index: 10; |
| 1065 | 1424 | opacity: 1; |
| 1066 | 1425 | visibility: visible; |
| @@ -1068,9 +1427,8 @@ | ||
| 1068 | 1427 | transform: translate(-50%, -15px); |
| 1069 | 1428 | -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97); |
| 1070 | 1429 | transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97); |
| 1071 | 1430 | } |
| 1072 | - | |
| 1073 | 1431 | .merchant-metabox-field-flexible-content-add-list:before, .merchant-metabox-field-flexible-content-add-list:after { |
| 1074 | 1432 | position: absolute; |
| 1075 | 1433 | z-index: -1; |
| 1076 | 1434 | content: ""; |
| @@ -1081,9 +1439,8 @@ | ||
| 1081 | 1439 | transition-property: -webkit-transform; |
| 1082 | 1440 | transition-property: transform; |
| 1083 | 1441 | transition-property: transform, -webkit-transform; |
| 1084 | 1442 | } |
| 1085 | - | |
| 1086 | 1443 | .merchant-metabox-field-flexible-content-add-list:before { |
| 1087 | 1444 | right: calc(50% - 12px); |
| 1088 | 1445 | bottom: -14px; |
| 1089 | 1446 | border-width: 14px 14px 0 15px; |
| @@ -1088,9 +1445,8 @@ | ||
| 1088 | 1445 | bottom: -14px; |
| 1089 | 1446 | border-width: 14px 14px 0 15px; |
| 1090 | 1447 | border-color: #c3c4c7 transparent transparent transparent; |
| 1091 | 1448 | } |
| 1092 | - | |
| 1093 | 1449 | .merchant-metabox-field-flexible-content-add-list:after { |
| 1094 | 1450 | content: ""; |
| 1095 | 1451 | right: calc(50% - 10px); |
| 1096 | 1452 | bottom: -12px; |
| @@ -1104,9 +1460,8 @@ | ||
| 1104 | 1460 | flex-shrink: 0; |
| 1105 | 1461 | padding: 10px; |
| 1106 | 1462 | text-decoration: none; |
| 1107 | 1463 | } |
| 1108 | - | |
| 1109 | 1464 | .merchant-metabox-field-flexible-content-add:hover { |
| 1110 | 1465 | background: #f0f0f1; |
| 1111 | 1466 | } |
| 1112 | 1467 | |
| @@ -1115,9 +1470,10 @@ | ||
| 1115 | 1470 | display: -ms-flexbox; |
| 1116 | 1471 | display: flex; |
| 1117 | 1472 | } |
| 1118 | 1473 | |
| 1119 | -.merchant-metabox-field-append, .merchant-metabox-field-prepend { | |
| 1474 | +.merchant-metabox-field-append, | |
| 1475 | +.merchant-metabox-field-prepend { | |
| 1120 | 1476 | background: #f0f0f1; |
| 1121 | 1477 | border: 1px solid #8c8f94; |
| 1122 | 1478 | -webkit-box-align: center; |
| 1123 | 1479 | -ms-flex-align: center; |
| @@ -1146,8 +1502,126 @@ | ||
| 1146 | 1502 | border-top-left-radius: 5px; |
| 1147 | 1503 | border-bottom-left-radius: 5px; |
| 1148 | 1504 | } |
| 1149 | 1505 | |
| 1506 | +.merchant-pcr-app { | |
| 1507 | + position: absolute; | |
| 1508 | + top: 100% !important; | |
| 1509 | + left: 0 !important; | |
| 1510 | + z-index: 9999; | |
| 1511 | + margin-top: 10px; | |
| 1512 | +} | |
| 1513 | + | |
| 1514 | +.merchant-metabox-color-field { | |
| 1515 | + display: -webkit-box; | |
| 1516 | + display: -ms-flexbox; | |
| 1517 | + display: flex; | |
| 1518 | + -webkit-box-align: center; | |
| 1519 | + -ms-flex-align: center; | |
| 1520 | + align-items: center; | |
| 1521 | + gap: 10px; | |
| 1522 | + position: relative; | |
| 1523 | +} | |
| 1524 | +.merchant-metabox-color-field .merchant-color-picker { | |
| 1525 | + cursor: pointer; | |
| 1526 | + width: 36px; | |
| 1527 | + height: 36px; | |
| 1528 | + min-width: 36px; | |
| 1529 | + min-height: 36px; | |
| 1530 | + border: 1px solid rgba(0, 0, 0, 0.1); | |
| 1531 | + border-radius: 4px; | |
| 1532 | + -webkit-transition: border-color 0.2s ease; | |
| 1533 | + transition: border-color 0.2s ease; | |
| 1534 | +} | |
| 1535 | +.merchant-metabox-color-field .merchant-color-picker:hover { | |
| 1536 | + border-color: rgba(0, 0, 0, 0.3); | |
| 1537 | +} | |
| 1538 | +.merchant-metabox-color-field .merchant-color-input { | |
| 1539 | + width: 100px; | |
| 1540 | + max-width: 100%; | |
| 1541 | + padding: 4px 10px; | |
| 1542 | + border: 1px solid #8c8f94; | |
| 1543 | + border-radius: 4px; | |
| 1544 | + display: block; | |
| 1545 | + text-align: center; | |
| 1546 | +} | |
| 1547 | + | |
| 1548 | +.merchant-range { | |
| 1549 | + display: -webkit-box; | |
| 1550 | + display: -ms-flexbox; | |
| 1551 | + display: flex; | |
| 1552 | + -webkit-box-align: center; | |
| 1553 | + -ms-flex-align: center; | |
| 1554 | + align-items: center; | |
| 1555 | + gap: 15px; | |
| 1556 | + width: 100%; | |
| 1557 | +} | |
| 1558 | +.merchant-range .merchant-range-input { | |
| 1559 | + -webkit-appearance: none; | |
| 1560 | + width: 100%; | |
| 1561 | + height: 4px; | |
| 1562 | + border-radius: 5px; | |
| 1563 | + background: #e2e2e2; | |
| 1564 | + outline: none; | |
| 1565 | + padding: 0; | |
| 1566 | + margin: 0; | |
| 1567 | +} | |
| 1568 | +.merchant-range .merchant-range-input::-webkit-slider-thumb { | |
| 1569 | + -webkit-appearance: none; | |
| 1570 | + appearance: none; | |
| 1571 | + width: 14px; | |
| 1572 | + height: 14px; | |
| 1573 | + border-radius: 50%; | |
| 1574 | + background: #3858e9; | |
| 1575 | + cursor: pointer; | |
| 1576 | + -webkit-transition: background 0.15s ease-in-out; | |
| 1577 | + transition: background 0.15s ease-in-out; | |
| 1578 | + -webkit-box-shadow: 0 0 0 1px #3858e9; | |
| 1579 | + box-shadow: 0 0 0 1px #3858e9; | |
| 1580 | +} | |
| 1581 | +.merchant-range .merchant-range-input::-moz-range-thumb { | |
| 1582 | + width: 14px; | |
| 1583 | + height: 14px; | |
| 1584 | + border: 0; | |
| 1585 | + border-radius: 50%; | |
| 1586 | + background: #3858e9; | |
| 1587 | + cursor: pointer; | |
| 1588 | + -moz-transition: background 0.15s ease-in-out; | |
| 1589 | + transition: background 0.15s ease-in-out; | |
| 1590 | + box-shadow: 0 0 0 1px #3858e9; | |
| 1591 | +} | |
| 1592 | +.merchant-range .merchant-range-number-input { | |
| 1593 | + width: 70px; | |
| 1594 | + min-width: 70px; | |
| 1595 | + padding: 5px 10px; | |
| 1596 | + text-align: center; | |
| 1597 | + border: 1px solid #d6d6d6; | |
| 1598 | + border-radius: 4px; | |
| 1599 | + font-size: 13px; | |
| 1600 | + color: #1e1e1e; | |
| 1601 | +} | |
| 1602 | +.merchant-range .merchant-range-number-input:focus { | |
| 1603 | + border-color: #3858e9; | |
| 1604 | + outline: none; | |
| 1605 | +} | |
| 1606 | +.merchant-range .merchant-range-number-input::-webkit-inner-spin-button, .merchant-range .merchant-range-number-input::-webkit-outer-spin-button { | |
| 1607 | + -webkit-appearance: none; | |
| 1608 | + margin: 0; | |
| 1609 | +} | |
| 1610 | +.merchant-range .merchant-range-number-input { | |
| 1611 | + -moz-appearance: textfield; | |
| 1612 | +} | |
| 1613 | +.merchant-range .merchant-range-unit { | |
| 1614 | + color: #757575; | |
| 1615 | + font-size: 13px; | |
| 1616 | + margin-left: -10px; | |
| 1617 | +} | |
| 1618 | + | |
| 1619 | +body.rtl .merchant-range .merchant-range-unit { | |
| 1620 | + margin-left: 0; | |
| 1621 | + margin-right: -10px; | |
| 1622 | +} | |
| 1623 | + | |
| 1150 | 1624 | @media only screen and (max-width: 991px) { |
| 1151 | 1625 | .merchant-metabox-tabs { |
| 1152 | 1626 | display: none; |
| 1153 | 1627 | } |
| @@ -1181,4 +1655,23 @@ | ||
| 1181 | 1655 | .merchant-metabox-field-repeater-content input { |
| 1182 | 1656 | width: 100%; |
| 1183 | 1657 | } |
| 1184 | 1658 | } |
| 1659 | +.rtl .merchant-metabox-tabs a:before { | |
| 1660 | + right: 0; | |
| 1661 | + left: unset; | |
| 1662 | +} | |
| 1663 | +.rtl .merchant-metabox-tabs { | |
| 1664 | + margin-left: unset; | |
| 1665 | + margin-right: -20px; | |
| 1666 | +} | |
| 1667 | +.rtl .merchant-metabox-field-append { | |
| 1668 | + border-radius: 5px; | |
| 1669 | +} | |
| 1670 | +.rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item { | |
| 1671 | + border-left: 1px solid #c3c4c7; | |
| 1672 | + border-right: 3px solid #3858e9; | |
| 1673 | +} | |
| 1674 | +.rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item-title { | |
| 1675 | + margin-left: unset; | |
| 1676 | + margin-right: 10px; | |
| 1677 | +} | |
