← All changes | modules/simple-payments/simple-payments.css +172 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,172 @@
	1	+.jetpack-simple-payments-wrapper {
	2	+ margin-bottom: 1.5em;
	3	+}
	4	+
	5	+/* Higher specificity in order to reset paragraph style */
	6	+body .jetpack-simple-payments-wrapper .jetpack-simple-payments-details p {
	7	+ margin: 0 0 1.5em;
	8	+ padding: 0;
	9	+}
	10	+
	11	+.jetpack-simple-payments-product {
	12	+ display: flex;
	13	+ flex-direction: column;
	14	+}
	15	+
	16	+.jetpack-simple-payments-product-image {
	17	+ flex: 0 0 30%;
	18	+ margin-bottom: 1.5em;
	19	+}
	20	+
	21	+.jetpack-simple-payments-image {
	22	+ box-sizing: border-box;
	23	+ min-width: 70px;
	24	+ padding-top: 100%;
	25	+ position: relative;
	26	+}
	27	+
	28	+/* Higher specificity in order to trump theme's style */
	29	+body .jetpack-simple-payments-wrapper .jetpack-simple-payments-product-image .jetpack-simple-payments-image img {
	30	+ border: 0;
	31	+ border-radius: 0;
	32	+ height: auto;
	33	+ left: 50%;
	34	+ margin: 0;
	35	+ max-height: 100%;
	36	+ max-width: 100%;
	37	+ padding: 0;
	38	+ position: absolute;
	39	+ top: 50%;
	40	+ transform: translate(-50%, -50%);
	41	+ width: auto;
	42	+}
	43	+
	44	+.jetpack-simple-payments-title p,
	45	+.jetpack-simple-payments-price p {
	46	+ font-weight: 700;
	47	+}
	48	+
	49	+.jetpack-simple-payments-purchase-box {
	50	+ align-items: flex-start;
	51	+ display: flex;
	52	+}
	53	+
	54	+.jetpack-simple-payments-button {
	55	+ max-width: 340px;
	56	+ width: 100%;
	57	+}
	58	+
	59	+.jetpack-simple-payments-items {
	60	+ flex: 0 0 auto;
	61	+ margin-right: 10px;
	62	+}
	63	+
	64	+input[type="number"].jetpack-simple-payments-items-number {
	65	+ font-size: 16px;
	66	+ line-height: 1;
	67	+ max-width: 60px;
	68	+ padding: 4px 8px;
	69	+}
	70	+
	71	+input[type="number"].jetpack-simple-payments-items-number::-webkit-inner-spin-button,
	72	+input[type="number"].jetpack-simple-payments-items-number::-webkit-outer-spin-button {
	73	+ opacity: 1;
	74	+}
	75	+
	76	+.jetpack-simple-payments-button iframe {
	77	+ margin: 0;
	78	+}
	79	+
	80	+.jetpack-simple-payments-purchase-message {
	81	+ background-color: rgba(255, 255, 255, 0.7);
	82	+ border: 2px solid #fff;
	83	+ border-radius: 2px;
	84	+ box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3;
	85	+ display: none;
	86	+ margin-bottom: 1.5em;
	87	+ min-height: 48px;
	88	+ padding: 1em;
	89	+ position: relative;
	90	+}
	91	+
	92	+.jetpack-simple-payments-purchase-message::before {
	93	+ font-family: dashicons !important;
	94	+ font-size: 48px !important;
	95	+ line-height: 1 !important;
	96	+ position: absolute;
	97	+ speak: none;
	98	+ top: 50%;
	99	+ left: 0;
	100	+ transform: translateY(-50%);
	101	+ -webkit-font-smoothing: antialiased;
	102	+ -moz-osx-font-smoothing: grayscale;
	103	+}
	104	+
	105	+.jetpack-simple-payments-purchase-message.show {
	106	+ display: block;
	107	+}
	108	+
	109	+.jetpack-simple-payments-purchase-message.success::before {
	110	+ color: #4ab866;
	111	+ content: "\f147";
	112	+}
	113	+
	114	+.jetpack-simple-payments-purchase-message.error::before {
	115	+ color: #d94f4f;
	116	+ content: "\f335";
	117	+}
	118	+
	119	+/* Higher specificity in order to reset */
	120	+body .jetpack-simple-payments-wrapper .jetpack-simple-payments-purchase-message p {
	121	+ color: #222;
	122	+ margin: 0 0 0.5em;
	123	+ padding: 0 0 0 40px;
	124	+}
	125	+
	126	+body .jetpack-simple-payments-wrapper .jetpack-simple-payments-purchase-message p:last-child {
	127	+ margin: 0;
	128	+}
	129	+
	130	+.jetpack-simple-payments-description {
	131	+ white-space: pre-wrap;
	132	+}
	133	+
	134	+@media screen and (min-width: 400px) {
	135	+
	136	+ .jetpack-simple-payments-product {
	137	+ flex-direction: row;
	138	+ }
	139	+
	140	+ .jetpack-simple-payments-product-image + .jetpack-simple-payments-details {
	141	+ flex-basis: 70%;
	142	+ padding-left: 1em;
	143	+ }
	144	+}
	145	+
	146	+.is-email .jetpack-simple-payments-product {
	147	+ display: table;
	148	+ width: 100%;
	149	+}
	150	+
	151	+.is-email .jetpack-simple-payments-product-image {
	152	+ display: table-cell;
	153	+ width: 30%;
	154	+ vertical-align: top;
	155	+}
	156	+
	157	+.is-email .jetpack-simple-payments-image {
	158	+ padding-top: 0;
	159	+}
	160	+
	161	+.is-email .jetpack-simple-payments-image figure {
	162	+ margin: 0;
	163	+}
	164	+
	165	+.jetpack-simple-payments-details {
	166	+ width: 100%;
	167	+}
	168	+
	169	+.is-email .jetpack-simple-payments-product-image + .jetpack-simple-payments-details {
	170	+ display: table-cell;
	171	+ width: 70%;
	172	+}