diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss')
-rw-r--r-- | plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss b/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss new file mode 100644 index 00000000..e138c863 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss @@ -0,0 +1,93 @@ +@import '../../shared/styles/jetpack-variables.scss'; + +.simple-payments__loading { + animation: simple-payments-loading 1600ms ease-in-out infinite; +} + +@keyframes simple-payments-loading { + 0% { + opacity: 0.5; + } + 50% { + opacity: 0.7; + } + 100% { + opacity: 0.5; + } +} + +.jetpack-simple-payments-wrapper { + margin-bottom: $jetpack-block-margin-bottom; +} + +/* Higher specificity in order to reset paragraph style */ +body .jetpack-simple-payments-wrapper .jetpack-simple-payments-details p { + margin: 0 0 $jetpack-block-margin-bottom; + padding: 0; +} + +.jetpack-simple-payments-product { + display: flex; + flex-direction: column; +} + +.jetpack-simple-payments-product-image { + flex: 0 0 30%; + margin-bottom: $jetpack-block-margin-bottom; +} + +.jetpack-simple-payments-image { + box-sizing: border-box; + min-width: 70px; + padding-top: 100%; + position: relative; +} + +.jetpack-simple-payments-image img { + border: 0; + border-radius: 0; + height: auto; + left: 50%; + margin: 0; + max-height: 100%; + max-width: 100%; + padding: 0; + position: absolute; + top: 50%; + transform: translate( -50%, -50% ); + width: auto; +} + +.jetpack-simple-payments-title p, +.jetpack-simple-payments-price p { + font-weight: bold; +} + +.jetpack-simple-payments-purchase-box { + align-items: flex-start; + display: flex; +} + +.jetpack-simple-payments-items { + flex: 0 0 auto; + margin-right: 10px; +} + +input[type='number'].jetpack-simple-payments-items-number { + background: var( --color-white ); + font-size: 16px; + line-height: 1; + max-width: 60px; + padding: 4px 8px; +} + +@media screen and ( min-width: 400px ) { + .jetpack-simple-payments-product { + flex-direction: row; + } + + .jetpack-simple-payments-product-image + .jetpack-simple-payments-details { + flex-basis: 70%; + padding-left: 1em; + } +} |