diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c2f458..9ff5c47 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +- Fixed getting a default price for a Product element. ([#40](https://github.com/craftcms/stripe/pull/40)) +- Fixed an issue that could occur when installing or running migration on MariaDB. ([#51](https://github.com/craftcms/stripe/issues/51)) +- Fixed a styling issue with Stripe’s element’s meta card footer. - Added `stripe/data/reset` CLI command. ([#42](https://github.com/craftcms/stripe/issues/42)) ## 1.2.0.2 - 2024-11-08 diff --git a/composer.lock b/composer.lock index cbb47e0..89cc651 100644 --- a/composer.lock +++ b/composer.lock @@ -3660,16 +3660,16 @@ }, { "name": "symfony/http-client", - "version": "v6.4.13", + "version": "v6.4.15", "source": { "type": "git", "url": "https://github.com/symfony/http-client.git", - "reference": "509d0e8a798bf5e41e0b6317e9bce1140af47376" + "reference": "cb4073c905cd12b8496d24ac428a9228c1750670" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/http-client/zipball/509d0e8a798bf5e41e0b6317e9bce1140af47376", - "reference": "509d0e8a798bf5e41e0b6317e9bce1140af47376", + "url": "https://api.github.com/repos/symfony/http-client/zipball/cb4073c905cd12b8496d24ac428a9228c1750670", + "reference": "cb4073c905cd12b8496d24ac428a9228c1750670", "shasum": "" }, "require": { @@ -3733,7 +3733,7 @@ "http" ], "support": { - "source": "https://github.com/symfony/http-client/tree/v6.4.13" + "source": "https://github.com/symfony/http-client/tree/v6.4.15" }, "funding": [ { @@ -3749,7 +3749,7 @@ "type": "tidelift" } ], - "time": "2024-10-14T18:15:01+00:00" + "time": "2024-11-13T13:40:18+00:00" }, { "name": "symfony/http-client-contracts", @@ -4696,16 +4696,16 @@ }, { "name": "symfony/process", - "version": "v7.1.6", + "version": "v7.1.7", "source": { "type": "git", "url": "https://github.com/symfony/process.git", - "reference": "6aaa189ddb4ff6b5de8fa3210f2fb42c87b4d12e" + "reference": "9b8a40b7289767aa7117e957573c2a535efe6585" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/process/zipball/6aaa189ddb4ff6b5de8fa3210f2fb42c87b4d12e", - "reference": "6aaa189ddb4ff6b5de8fa3210f2fb42c87b4d12e", + "url": "https://api.github.com/repos/symfony/process/zipball/9b8a40b7289767aa7117e957573c2a535efe6585", + "reference": "9b8a40b7289767aa7117e957573c2a535efe6585", "shasum": "" }, "require": { @@ -4737,7 +4737,7 @@ "description": "Executes commands in sub-processes", "homepage": "https://symfony.com", "support": { - "source": "https://github.com/symfony/process/tree/v7.1.6" + "source": "https://github.com/symfony/process/tree/v7.1.7" }, "funding": [ { @@ -4753,7 +4753,7 @@ "type": "tidelift" } ], - "time": "2024-09-25T14:20:29+00:00" + "time": "2024-11-06T09:25:12+00:00" }, { "name": "symfony/property-access", @@ -5549,16 +5549,16 @@ }, { "name": "twig/twig", - "version": "v3.14.0", + "version": "v3.14.2", "source": { "type": "git", "url": "https://github.com/twigphp/Twig.git", - "reference": "126b2c97818dbff0cdf3fbfc881aedb3d40aae72" + "reference": "0b6f9d8370bb3b7f1ce5313ed8feb0fafd6e399a" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/twigphp/Twig/zipball/126b2c97818dbff0cdf3fbfc881aedb3d40aae72", - "reference": "126b2c97818dbff0cdf3fbfc881aedb3d40aae72", + "url": "https://api.github.com/repos/twigphp/Twig/zipball/0b6f9d8370bb3b7f1ce5313ed8feb0fafd6e399a", + "reference": "0b6f9d8370bb3b7f1ce5313ed8feb0fafd6e399a", "shasum": "" }, "require": { @@ -5612,7 +5612,7 @@ ], "support": { "issues": "https://github.com/twigphp/Twig/issues", - "source": "https://github.com/twigphp/Twig/tree/v3.14.0" + "source": "https://github.com/twigphp/Twig/tree/v3.14.2" }, "funding": [ { @@ -5624,7 +5624,7 @@ "type": "tidelift" } ], - "time": "2024-09-09T17:55:12+00:00" + "time": "2024-11-07T12:36:22+00:00" }, { "name": "voku/anti-xss", @@ -8254,5 +8254,5 @@ "php": "^8.2" }, "platform-dev": [], - "plugin-api-version": "2.3.0" + "plugin-api-version": "2.6.0" } diff --git a/src/elements/Product.php b/src/elements/Product.php index 1772352..f33ec74 100644 --- a/src/elements/Product.php +++ b/src/elements/Product.php @@ -596,15 +596,21 @@ public function getData(): array public function getDefaultPrice(): Price|null { if (!isset($this->_defaultPrice)) { - if ($this->getData()['default_price'] === null) { + $defaultPriceId = $this->getData()['default_price']; + if ($defaultPriceId === null) { return null; } + // depending on whether we're expanding a default_price when getting a product from Stripe, this will be a string or an array + if (is_array($defaultPriceId)) { + $defaultPriceId = $defaultPriceId['id']; + } + /** @var ElementCollection $prices */ $prices = $this->getPrices(); $price = $prices - ->filter(fn(Price $price) => $price->stripeId === $this->getData()['default_price']) + ->filter(fn(Price $price) => $price->stripeId === $defaultPriceId) ->first(); if (!$price) { diff --git a/src/migrations/Install.php b/src/migrations/Install.php index f846a00..709e7de 100644 --- a/src/migrations/Install.php +++ b/src/migrations/Install.php @@ -193,7 +193,7 @@ private function createGeneratedColumns(): void // latestInvoiceId $this->execute("ALTER TABLE " . Table::SUBSCRIPTIONDATA . " ADD COLUMN " . $db->quoteColumnName('latestInvoiceId') . " VARCHAR(255) GENERATED ALWAYS AS (" . - $qb->jsonExtract('data', ['latest_invoice']) . ") STORED NULL;"); + $qb->jsonExtract('data', ['latest_invoice']) . ") STORED;"); // startDate $this->execute("ALTER TABLE " . Table::SUBSCRIPTIONDATA . " ADD COLUMN " . $db->quoteColumnName('startDate') . " VARCHAR(255) GENERATED ALWAYS AS (" . diff --git a/src/migrations/m240819_121818_loosen_aux_data_uniq.php b/src/migrations/m240819_121818_loosen_aux_data_uniq.php index f0bb405..6f3fa0f 100644 --- a/src/migrations/m240819_121818_loosen_aux_data_uniq.php +++ b/src/migrations/m240819_121818_loosen_aux_data_uniq.php @@ -27,7 +27,7 @@ public function safeUp(): bool // Step 3: Recreate the virtual column as nullable: https://docs.stripe.com/api/subscriptions/object#subscription_object-latest_invoice $this->execute("ALTER TABLE " . $tableName . " ADD COLUMN " . $this->db->quoteColumnName('[[latestInvoiceId]]') . " VARCHAR(255) GENERATED ALWAYS AS (" . - $this->db->getQueryBuilder()->jsonExtract('data', ['latest_invoice']) . ") STORED NULL"); + $this->db->getQueryBuilder()->jsonExtract('data', ['latest_invoice']) . ") STORED"); // Step 4: Create a new non-unique index $this->createIndex(null, $tableName, ['latestInvoiceId'], unique: false); diff --git a/src/web/assets/stripecp/dist/css/stripecp.css b/src/web/assets/stripecp/dist/css/stripecp.css index 42cb1e9..4822517 100644 --- a/src/web/assets/stripecp/dist/css/stripecp.css +++ b/src/web/assets/stripecp/dist/css/stripecp.css @@ -1,2 +1,2 @@ -.user-customers li{padding:.5em 0}.user-customers a{position:relative}.user-customers a span{position:absolute;top:-.25em}.proxy-element-card{padding-bottom:40px;padding-top:15px;position:relative}.proxy-element-card .pec-header{color:#3f4d5a;display:block;position:relative;width:100%}.proxy-element-card .pec-header:hover{color:#3f4d5a;text-decoration:none}.proxy-element-card .pec-header .pec-external-icon{color:#3f4d5a;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}body.ltr .proxy-element-card .pec-header .pec-external-icon{right:0}body.rtl .proxy-element-card .pec-header .pec-external-icon{left:0}.proxy-element-card .pec-header:hover .pec-external-icon{color:#0b69a3}.proxy-element-card .pec-header .pec-title{margin-bottom:0}.proxy-element-card .pec-header .pec-subtitle{margin:.2em 0}.proxy-element-card .meta ul.elements{width:100%}.proxy-element-card .pec-footer{background-color:#e4edf6;border-bottom-left-radius:5px;border-bottom-right-radius:5px;bottom:0;font-size:12px;padding:10px 24px;position:absolute;width:100%}body.ltr .proxy-element-card .pec-footer{right:0}body.rtl .proxy-element-card .pec-footer{left:0}.proxy-element-card .pec-footer a{color:#3f4d5a;text-decoration:underline}.proxy-element-card .pec-footer a:hover{color:#0b69a3;text-decoration:underline}.proxy-element-card .pec-footer .spinner{position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}body.ltr .proxy-element-card .pec-footer .spinner{right:0}body.rtl .proxy-element-card .pec-footer .spinner{left:0}.proxy-element-card hr{margin-left:var(--neg-padding);margin-right:var(--neg-padding)}#subscriptions-vue-admin-table{overflow:scroll} +.user-customers li{padding:.5em 0}.user-customers a{position:relative}.user-customers a span{position:absolute;top:-.25em}.proxy-element-card{-webkit-padding-before:var(--spacing);display:grid;padding-block-start:var(--spacing);padding-inline:0}.proxy-element-card .pec-header{-webkit-align-items:baseline;align-items:baseline;color:#3f4d5a;display:-webkit-flex;display:flex;grid-column-end:1;grid-column-start:1;-webkit-justify-content:space-between;justify-content:space-between;padding-inline:var(--padding);width:100%}.proxy-element-card .pec-header:hover{color:#3f4d5a;text-decoration:none}.proxy-element-card .pec-header .pec-external-icon{-webkit-margin-end:6px;color:#3f4d5a;margin-inline-end:6px}.proxy-element-card .pec-header:hover .pec-external-icon{color:#0b69a3}.proxy-element-card .pec-header .pec-title{-webkit-margin-after:0;margin-block-end:0}.proxy-element-card .pec-header .pec-subtitle{margin:.2em 0}.proxy-element-card .meta{grid-column-end:1;grid-column-start:1;margin-inline:0}.proxy-element-card .meta ul.elements{width:100%}.proxy-element-card .pec-footer{background-color:#e4edf6;border-bottom-left-radius:5px;border-bottom-right-radius:5px;font-size:12px;grid-column-end:1;grid-column-start:1;padding-block:10px;padding-inline:var(--padding);width:100%}body.ltr .proxy-element-card .pec-footer{right:0}body.rtl .proxy-element-card .pec-footer{left:0}.proxy-element-card .pec-footer a{color:#3f4d5a;text-decoration:underline}.proxy-element-card .pec-footer a:hover{color:#0b69a3;text-decoration:underline}.proxy-element-card .pec-footer .spinner{position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}body.ltr .proxy-element-card .pec-footer .spinner{right:0}body.rtl .proxy-element-card .pec-footer .spinner{left:0}#subscriptions-vue-admin-table{overflow:scroll} /*# sourceMappingURL=stripecp.css.map*/ \ No newline at end of file diff --git a/src/web/assets/stripecp/dist/css/stripecp.css.map b/src/web/assets/stripecp/dist/css/stripecp.css.map index 8f60d16..2211375 100644 --- a/src/web/assets/stripecp/dist/css/stripecp.css.map +++ b/src/web/assets/stripecp/dist/css/stripecp.css.map @@ -1 +1 @@ -{"version":3,"file":"css/stripecp.css","mappings":"AAGE,mBACE,eAEF,kBACE,kBAEA,uBACE,kBACA,WAKN,oBAGE,oBADA,iBADA,iBAEA,CAEA,gCAGE,aCZM,CDWN,cADA,kBAGA,WAEA,sCACE,aChBI,CDiBJ,qBAGF,mDAKE,cAJA,kBACA,QAEA,uGCxBI,CA+OR,4DACE,ODzNiB,CC2NnB,4DACE,MD5NiB,CAMf,yDACE,aCjBE,CDqBN,2CACE,gBAGF,8CACE,cAKF,sCACE,WAIJ,gCAME,wBC/DM,CDgEN,6BCsDgB,CDrDhB,8BCqDgB,CD3DhB,SAGA,eAIA,kBARA,kBAEA,UAMA,CCqLF,yCACE,OD3Le,CC6LjB,yCACE,MD9Le,CAOf,kCACE,aC7DI,CD8DJ,0BAGF,wCACE,aCrDI,CDsDJ,0BAGF,yCACE,kBACA,QAEA,wGCqKJ,kDACE,ODvKiB,CCyKnB,kDACE,MD1KiB,CAKnB,uBACE,+BACA,gCAIJ,+BACE","sources":["webpack:///./scss/stripecp.scss","webpack:///../../../../../node_modules/craftcms-sass/_mixins.scss"],"sourcesContent":["@import \"node_modules/craftcms-sass/_mixins\";\n\n.user-customers {\n li {\n padding: 0.5em 0;\n }\n a {\n position: relative;\n\n span {\n position: absolute;\n top: -0.25em;\n }\n }\n}\n\n.proxy-element-card {\n position: relative;\n padding-top: 15px;\n padding-bottom: 40px;\n\n .pec-header {\n position: relative;\n display: block;\n color: $textColor;\n width: 100%;\n\n &:hover {\n color: $textColor;\n text-decoration: none;\n }\n\n .pec-external-icon {\n position: absolute;\n top: 50%;\n @include right(0px);\n transform: translate(-50%, -50%);\n color: $textColor;\n }\n\n &:hover {\n .pec-external-icon {\n color: $linkColor;\n }\n }\n\n .pec-title {\n margin-bottom: 0;\n }\n\n .pec-subtitle {\n margin: 0.2em 0;\n }\n }\n\n .meta {\n ul.elements {\n width: 100%;\n }\n }\n\n .pec-footer {\n position: absolute;\n bottom: 0;\n width: 100%;\n @include right(0);\n font-size: 12px;\n background-color: $grey100;\n border-bottom-left-radius: $largeBorderRadius;\n border-bottom-right-radius: $largeBorderRadius;\n padding: 10px 24px;\n\n a {\n color: $textColor;\n text-decoration: underline;\n }\n\n a:hover {\n color: $linkColor;\n text-decoration: underline;\n }\n\n .spinner {\n position: absolute;\n top: 50%;\n @include right(0px);\n transform: translate(-50%, -50%);\n }\n }\n\n hr {\n margin-left: var(--neg-padding);\n margin-right: var(--neg-padding);\n }\n}\n\n#subscriptions-vue-admin-table {\n overflow: scroll;\n}\n","$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$blue050: #E3F8FF;\n$blue100: #B3ECFF;\n$blue200: #81DEFD;\n$blue300: #5ED0FA;\n$blue400: #40C3F7;\n$blue500: #2BB0ED;\n$blue600: #1992D4;\n$blue700: #127FBF;\n$blue800: #0B69A3;\n$blue900: #035388;\n\n$cyan050: #E0FCFF;\n$cyan100: #BEF8FD;\n$cyan200: #87EAF2;\n$cyan300: #54D1DB;\n$cyan400: #38BEC9;\n$cyan500: #2CB1BC;\n$cyan600: #14919B;\n$cyan700: #0E7C86;\n$cyan800: #0A6C74;\n$cyan900: #044E54;\n\n$pink050: #FFE3EC;\n$pink100: #FFB8D2;\n$pink200: #FF8CBA;\n$pink300: #F364A2;\n$pink400: #E8368F;\n$pink500: #DA127D;\n$pink600: #BC0A6F;\n$pink700: #A30664;\n$pink800: #870557;\n$pink900: #620042;\n\n$red050: #FFE3E3;\n$red100: #FFBDBD;\n$red200: #FF9B9B;\n$red300: #F86A6A;\n$red400: #EF4E4E;\n$red500: #E12D39;\n$red600: #CF1124;\n$red700: #AB091E;\n$red800: #8A041A;\n$red900: #610316;\n\n$yellow050: #FFFBEA;\n$yellow100: #FFF3C4;\n$yellow200: #FCE588;\n$yellow300: #FADB5F;\n$yellow400: #F7C948;\n$yellow500: #F0B429;\n$yellow600: #DE911D;\n$yellow700: #CB6E17;\n$yellow800: #B44D12;\n$yellow900: #8D2B0B;\n\n$teal050: #EFFCF6;\n$teal100: #C6F7E2;\n$teal200: #8EEDC7;\n$teal300: #65D6AD;\n$teal400: #3EBD93;\n$teal500: #27AB83;\n$teal600: #199473;\n$teal700: #147D64;\n$teal800: #0C6B58;\n$teal900: #014D40;\n\n// submit button colors\n$primaryColor: $red500;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: $blue800;\n\n// hairline colors\n$hairlineColor: transparentize($grey800, 0.9);\n$mediumHairlineColor: transparentize($grey600, 0.75);\n$darkHairlineColor: transparentize($grey400, 0.5);\n\n// focus colors\n$lightFocusColor: $blue600;\n$darkFocusColor: $blue700;\n\n// focus rings\n$lightFocusRing: 0 0 0 1px $lightFocusColor, 0 0 0 3px transparentize($lightFocusColor, 0.5);\n$darkFocusRing: 0 0 0 1px $darkFocusColor, 0 0 0 3px transparentize($darkFocusColor, 0.5);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey600;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$checkboxSize: 16px;\n$radioSize: 16px;\n\n@mixin sans-serif-font {\n font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n font-size: 0.9em !important;\n}\n\n// Other\n\n@mixin svg-mask($color) {\n rect, circle, ellipse, line, polyline, polygon, path, text {\n fill: $color;\n stroke-width: 0;\n transition: fill linear 100ms;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: none;\n -webkit-font-feature-settings: \"liga\", \"dlig\";\n -moz-font-feature-settings: \"liga=1, dlig=1\";\n -moz-font-feature-settings: \"liga\", \"dlig\";\n -ms-font-feature-settings: \"liga\", \"dlig\";\n -o-font-feature-settings: \"liga\", \"dlig\";\n font-feature-settings: \"liga\", \"dlig\";\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n\n opacity: 0.8;\n}\n\n@mixin angle($dir: down, $color: $mediumTextColor) {\n display: block;\n content: '';\n font-size: 0;\n width: 5px;\n height: 5px;\n border: solid $color;\n border-width: 0 2px 2px 0;\n\n @if $dir == up {\n transform: rotate(225deg);\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px transparentize($grey900, 0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow: 0 0 0 1px transparentize($grey200, 0.75), 0 2px 12px transparentize($grey200, 0.5);\n\n &:focus {\n box-shadow: $darkFocusRing\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px transparentize($grey900, 0.5);\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-weight: 500;\n}\n\n// RTL stuff\n\n@mixin left($left) {\n body.ltr & {\n left: $left;\n }\n body.rtl & {\n right: $left;\n }\n}\n\n@mixin right($right) {\n body.ltr & {\n right: $right;\n }\n body.rtl & {\n left: $right;\n }\n}\n\n@mixin alignleft {\n body.ltr & {\n text-align: left;\n }\n body.rtl & {\n text-align: right;\n }\n}\n\n@mixin alignright {\n body.ltr & {\n text-align: right;\n }\n body.rtl & {\n text-align: left;\n }\n}\n\n@mixin border-left($params...) {\n body.ltr & {\n border-left: $params;\n }\n body.rtl & {\n border-right: $params;\n }\n}\n\n@mixin border-right($params...) {\n body.ltr & {\n border-right: $params;\n }\n body.rtl & {\n border-left: $params;\n }\n}\n\n@mixin border-left-width($param) {\n body.ltr & {\n border-left-width: $param;\n }\n body.rtl & {\n border-right-width: $param;\n }\n}\n\n@mixin border-right-width($param) {\n body.ltr & {\n border-right-width: $param;\n }\n body.rtl & {\n border-left-width: $param;\n }\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n body.ltr & {\n border-radius: $tl $tr $br $bl;\n }\n body.rtl & {\n border-radius: $tr $tl $bl $br;\n }\n}\n\n@mixin border-top-left-radius($params...) {\n body.ltr & {\n border-top-left-radius: $params;\n }\n body.rtl & {\n border-top-right-radius: $params;\n }\n}\n\n@mixin border-top-right-radius($params...) {\n body.ltr & {\n border-top-right-radius: $params;\n }\n body.rtl & {\n border-top-left-radius: $params;\n }\n}\n\n@mixin border-bottom-left-radius($params...) {\n body.ltr & {\n border-bottom-left-radius: $params;\n }\n body.rtl & {\n border-bottom-right-radius: $params;\n }\n}\n\n@mixin border-bottom-right-radius($params...) {\n body.ltr & {\n border-bottom-right-radius: $params;\n }\n body.rtl & {\n border-bottom-left-radius: $params;\n }\n}\n\n@mixin floatleft {\n body.ltr & {\n float: left;\n }\n body.rtl & {\n float: right;\n }\n}\n\n@mixin floatright {\n body.ltr & {\n float: right;\n }\n body.rtl & {\n float: left;\n }\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n body.ltr & {\n margin: $t $r $b $l unquote($important);\n }\n body.rtl & {\n margin: $t $l $b $r unquote($important);\n }\n}\n\n@mixin margin-left($margin...) {\n body.ltr & {\n margin-left: $margin;\n }\n body.rtl & {\n margin-right: $margin;\n }\n}\n\n@mixin margin-right($margin...) {\n body.ltr & {\n margin-right: $margin;\n }\n body.rtl & {\n margin-left: $margin;\n }\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n body.ltr & {\n padding: $t $r $b $l unquote($important);\n }\n body.rtl & {\n padding: $t $l $b $r unquote($important);\n }\n}\n\n@mixin padding-left($padding...) {\n body.ltr & {\n padding-left: $padding;\n }\n body.rtl & {\n padding-right: $padding;\n }\n}\n\n@mixin padding-right($padding...) {\n body.ltr & {\n padding-right: $padding;\n }\n body.rtl & {\n padding-left: $padding;\n }\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: darken($grey200, 5%);\n }\n\n &:active,\n &.active {\n background-color: darken($grey200, 10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: darken($grey200, 5%);\n }\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 10px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: 10px;\n padding: 2px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: transparentize($white, 0.5);\n box-shadow: 0 0 0 1px $darkHairlineColor;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $mediumBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow: 0 0 0 1px transparentize($grey900, 0.9), 0 5px 20px transparentize($grey900, 0.75);\n}\n\n@mixin menu-option-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $textColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-option-active-styles {\n color: $textColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid transparentize($inputColor, 0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n border-color: $darkFocusColor;\n box-shadow: 0 0 0 2px transparentize($darkFocusColor, 0.5);\n}\n\n@mixin placeholder-styles($color) {\n ::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder {\n color: $color;\n }\n\n ::-ms-input-placeholder {\n color: $color;\n }\n\n :-moz-placeholder {\n color: $color;\n }\n\n ::-moz-placeholder {\n color: $color;\n }\n\n ::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n top: calc(50% - 5px);\n @include right(9px);\n user-select: none;\n pointer-events: none;\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n @include padding(7px, 22px, 7px, 10px);\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: transparentize($inputColor, 0.75);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: transparentize($inputColor, 0.5);\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1, h2, h3, h4, h5, h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n @include padding-left(2em);\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n @include border-left(4px solid $hairlineColor);\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n @include padding-left(56px);\n border: 1px solid;\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $mediumTextColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n position: absolute;\n top: 12px;\n @include left(16px);\n font-size: 30px;\n width: 24px;\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"css/stripecp.css","mappings":"AAGE,mBACE,eAEF,kBACE,kBAEA,uBACE,kBACA,WAKN,oBAGE,sCAFA,aAEA,mCADA,gBACA,CAEA,gCAQE,kDALA,aCZM,CDeN,kCAJA,kBADA,oBAMA,oEAFA,8BADA,UAIA,CAEA,sCACE,aCpBI,CDqBJ,qBAGF,mDAEE,uBADA,aCzBI,CD0BJ,sBAIA,yDACE,aClBE,CDsBN,2CACE,0CAGF,8CACE,cAIJ,0BAEE,kBADA,oBAEA,gBAEA,sCACE,WAIJ,gCAME,wBCpEM,CDqEN,6BCiDgB,CDhDhB,8BCgDgB,CDnDhB,eAHA,kBADA,oBAQA,mBACA,8BAPA,UAOA,CC+KF,yCACE,ODtLe,CCwLjB,yCACE,MDzLe,CAQf,kCACE,aCnEI,CDoEJ,0BAGF,wCACE,aC3DI,CD4DJ,0BAGF,yCACE,kBACA,QAEA,wGC+JJ,kDACE,ODjKiB,CCmKnB,kDACE,MDpKiB,CAMrB,+BACE","sources":["webpack:///./scss/stripecp.scss","webpack:///../../../../../node_modules/craftcms-sass/_mixins.scss"],"sourcesContent":["@import \"node_modules/craftcms-sass/_mixins\";\n\n.user-customers {\n li {\n padding: 0.5em 0;\n }\n a {\n position: relative;\n\n span {\n position: absolute;\n top: -0.25em;\n }\n }\n}\n\n.proxy-element-card {\n display: grid;\n padding-inline: 0;\n padding-block-start: var(--spacing);\n\n .pec-header {\n grid-column-start: 1;\n grid-column-end: 1;\n color: $textColor;\n width: 100%;\n padding-inline: var(--padding);\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n\n &:hover {\n color: $textColor;\n text-decoration: none;\n }\n\n .pec-external-icon {\n color: $textColor;\n margin-inline-end: 6px;\n }\n\n &:hover {\n .pec-external-icon {\n color: $linkColor;\n }\n }\n\n .pec-title {\n margin-block-end: 0;\n }\n\n .pec-subtitle {\n margin: 0.2em 0;\n }\n }\n\n .meta {\n grid-column-start: 1;\n grid-column-end: 1;\n margin-inline: 0;\n\n ul.elements {\n width: 100%;\n }\n }\n\n .pec-footer {\n grid-column-start: 1;\n grid-column-end: 1;\n width: 100%;\n @include right(0);\n font-size: 12px;\n background-color: $grey100;\n border-bottom-left-radius: $largeBorderRadius;\n border-bottom-right-radius: $largeBorderRadius;\n padding-block: 10px;\n padding-inline: var(--padding);\n\n a {\n color: $textColor;\n text-decoration: underline;\n }\n\n a:hover {\n color: $linkColor;\n text-decoration: underline;\n }\n\n .spinner {\n position: absolute;\n top: 50%;\n @include right(0px);\n transform: translate(-50%, -50%);\n }\n }\n}\n\n#subscriptions-vue-admin-table {\n overflow: scroll;\n}\n","$white: #fff;\n$black: #000;\n\n$grey050: hsl(212, 60%, 97%);\n$grey100: hsl(212, 50%, 93%);\n$grey200: hsl(212, 30%, 85%);\n$grey300: hsl(211, 13%, 65%);\n$grey350: hsl(211, 11%, 59%);\n$grey400: hsl(210, 10%, 53%);\n$grey500: hsl(211, 12%, 43%);\n$grey550: hsl(210, 13%, 40%);\n$grey600: hsl(209, 14%, 37%);\n$grey700: hsl(209, 18%, 30%);\n$grey800: hsl(209, 20%, 25%);\n$grey900: hsl(210, 24%, 16%);\n$grey1000: hsl(210, 24%, 10%);\n\n$blue050: #E3F8FF;\n$blue100: #B3ECFF;\n$blue200: #81DEFD;\n$blue300: #5ED0FA;\n$blue400: #40C3F7;\n$blue500: #2BB0ED;\n$blue600: #1992D4;\n$blue700: #127FBF;\n$blue800: #0B69A3;\n$blue900: #035388;\n\n$cyan050: #E0FCFF;\n$cyan100: #BEF8FD;\n$cyan200: #87EAF2;\n$cyan300: #54D1DB;\n$cyan400: #38BEC9;\n$cyan500: #2CB1BC;\n$cyan600: #14919B;\n$cyan700: #0E7C86;\n$cyan800: #0A6C74;\n$cyan900: #044E54;\n\n$pink050: #FFE3EC;\n$pink100: #FFB8D2;\n$pink200: #FF8CBA;\n$pink300: #F364A2;\n$pink400: #E8368F;\n$pink500: #DA127D;\n$pink600: #BC0A6F;\n$pink700: #A30664;\n$pink800: #870557;\n$pink900: #620042;\n\n$red050: #FFE3E3;\n$red100: #FFBDBD;\n$red200: #FF9B9B;\n$red300: #F86A6A;\n$red400: #EF4E4E;\n$red500: #E12D39;\n$red600: #CF1124;\n$red700: #AB091E;\n$red800: #8A041A;\n$red900: #610316;\n\n$yellow050: #FFFBEA;\n$yellow100: #FFF3C4;\n$yellow200: #FCE588;\n$yellow300: #FADB5F;\n$yellow400: #F7C948;\n$yellow500: #F0B429;\n$yellow600: #DE911D;\n$yellow700: #CB6E17;\n$yellow800: #B44D12;\n$yellow900: #8D2B0B;\n\n$teal050: #EFFCF6;\n$teal100: #C6F7E2;\n$teal200: #8EEDC7;\n$teal300: #65D6AD;\n$teal400: #3EBD93;\n$teal500: #27AB83;\n$teal600: #199473;\n$teal700: #147D64;\n$teal800: #0C6B58;\n$teal900: #014D40;\n\n// submit button colors\n$primaryColor: $red500;\n$secondaryColor: $grey500;\n\n$inputColor: hsl(212, 25%, 50%);\n\n// text colors\n$textColor: $grey700;\n$mediumDarkTextColor: $grey550;\n$mediumTextColor: $grey550;\n$lightTextColor: $grey500;\n$linkColor: $blue800;\n\n// hairline colors\n$hairlineColor: transparentize($grey800, 0.9);\n$mediumHairlineColor: transparentize($grey600, 0.75);\n$darkHairlineColor: transparentize($grey400, 0.5);\n\n// focus colors\n$lightFocusColor: $blue600;\n$darkFocusColor: $blue700;\n\n// focus rings\n$lightFocusRing: 0 0 0 1px $lightFocusColor, 0 0 0 3px transparentize($lightFocusColor, 0.5);\n$darkFocusRing: 0 0 0 1px $darkFocusColor, 0 0 0 3px transparentize($darkFocusColor, 0.5);\n\n// selection colors\n$lightSelColor: $grey200;\n$darkSelColor: $grey600;\n\n// alert/notice colors\n$errorColor: $red600;\n$warningColor: $yellow800;\n$successColor: $teal500;\n$noticeColor: $blue800;\n\n// UI element styles\n$smallBorderRadius: 3px;\n$mediumBorderRadius: 4px;\n$largeBorderRadius: 5px;\n\n$checkboxSize: 16px;\n$radioSize: 16px;\n\n@mixin sans-serif-font {\n font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n@mixin fixed-width-font {\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n font-size: 0.9em !important;\n}\n\n// Other\n\n@mixin svg-mask($color) {\n rect, circle, ellipse, line, polyline, polygon, path, text {\n fill: $color;\n stroke-width: 0;\n transition: fill linear 100ms;\n }\n}\n\n@mixin icon {\n font-family: 'Craft';\n speak: none;\n -webkit-font-feature-settings: \"liga\", \"dlig\";\n -moz-font-feature-settings: \"liga=1, dlig=1\";\n -moz-font-feature-settings: \"liga\", \"dlig\";\n -ms-font-feature-settings: \"liga\", \"dlig\";\n -o-font-feature-settings: \"liga\", \"dlig\";\n font-feature-settings: \"liga\", \"dlig\";\n text-rendering: optimizeLegibility;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n direction: ltr; // Fixes a rendering issue in Chrome/Win\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n display: inline-block;\n text-align: center;\n font-style: normal;\n vertical-align: middle;\n word-wrap: normal !important;\n user-select: none;\n\n opacity: 0.8;\n}\n\n@mixin angle($dir: down, $color: $mediumTextColor) {\n display: block;\n content: '';\n font-size: 0;\n width: 5px;\n height: 5px;\n border: solid $color;\n border-width: 0 2px 2px 0;\n\n @if $dir == up {\n transform: rotate(225deg);\n } @else if $dir == down {\n transform: rotate(45deg);\n } @else if $dir == left {\n body.ltr & {\n transform: rotate(135deg);\n }\n body.rtl & {\n transform: rotate(-45deg);\n }\n } @else if $dir == right {\n body.ltr & {\n transform: rotate(-45deg);\n }\n body.rtl & {\n transform: rotate(135deg);\n }\n }\n}\n\n@mixin clearafter {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n@mixin shadow {\n box-shadow: 0 1px 5px -1px transparentize($grey900, 0.8);\n}\n\n@mixin pane {\n background: $white;\n box-shadow: 0 0 0 1px transparentize($grey200, 0.75), 0 2px 12px transparentize($grey200, 0.5);\n\n &:focus {\n box-shadow: $darkFocusRing\n }\n}\n\n@mixin modal {\n border-radius: $largeBorderRadius;\n background-color: $white;\n box-shadow: 0 25px 100px transparentize($grey900, 0.5);\n}\n\n@mixin light-on-dark-text() {\n // Make light on dark text sharp on Macs\n // (sub-pixel antialiasing looks too bold/blurry with light text on dark background)\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-weight: 500;\n}\n\n// RTL stuff\n\n@mixin left($left) {\n body.ltr & {\n left: $left;\n }\n body.rtl & {\n right: $left;\n }\n}\n\n@mixin right($right) {\n body.ltr & {\n right: $right;\n }\n body.rtl & {\n left: $right;\n }\n}\n\n@mixin alignleft {\n body.ltr & {\n text-align: left;\n }\n body.rtl & {\n text-align: right;\n }\n}\n\n@mixin alignright {\n body.ltr & {\n text-align: right;\n }\n body.rtl & {\n text-align: left;\n }\n}\n\n@mixin border-left($params...) {\n body.ltr & {\n border-left: $params;\n }\n body.rtl & {\n border-right: $params;\n }\n}\n\n@mixin border-right($params...) {\n body.ltr & {\n border-right: $params;\n }\n body.rtl & {\n border-left: $params;\n }\n}\n\n@mixin border-left-width($param) {\n body.ltr & {\n border-left-width: $param;\n }\n body.rtl & {\n border-right-width: $param;\n }\n}\n\n@mixin border-right-width($param) {\n body.ltr & {\n border-right-width: $param;\n }\n body.rtl & {\n border-left-width: $param;\n }\n}\n\n@mixin border-radius($tl, $tr, $br, $bl) {\n body.ltr & {\n border-radius: $tl $tr $br $bl;\n }\n body.rtl & {\n border-radius: $tr $tl $bl $br;\n }\n}\n\n@mixin border-top-left-radius($params...) {\n body.ltr & {\n border-top-left-radius: $params;\n }\n body.rtl & {\n border-top-right-radius: $params;\n }\n}\n\n@mixin border-top-right-radius($params...) {\n body.ltr & {\n border-top-right-radius: $params;\n }\n body.rtl & {\n border-top-left-radius: $params;\n }\n}\n\n@mixin border-bottom-left-radius($params...) {\n body.ltr & {\n border-bottom-left-radius: $params;\n }\n body.rtl & {\n border-bottom-right-radius: $params;\n }\n}\n\n@mixin border-bottom-right-radius($params...) {\n body.ltr & {\n border-bottom-right-radius: $params;\n }\n body.rtl & {\n border-bottom-left-radius: $params;\n }\n}\n\n@mixin floatleft {\n body.ltr & {\n float: left;\n }\n body.rtl & {\n float: right;\n }\n}\n\n@mixin floatright {\n body.ltr & {\n float: right;\n }\n body.rtl & {\n float: left;\n }\n}\n\n@mixin margin($t, $r, $b, $l, $important: '') {\n body.ltr & {\n margin: $t $r $b $l unquote($important);\n }\n body.rtl & {\n margin: $t $l $b $r unquote($important);\n }\n}\n\n@mixin margin-left($margin...) {\n body.ltr & {\n margin-left: $margin;\n }\n body.rtl & {\n margin-right: $margin;\n }\n}\n\n@mixin margin-right($margin...) {\n body.ltr & {\n margin-right: $margin;\n }\n body.rtl & {\n margin-left: $margin;\n }\n}\n\n@mixin padding($t, $r, $b, $l, $important: '') {\n body.ltr & {\n padding: $t $r $b $l unquote($important);\n }\n body.rtl & {\n padding: $t $l $b $r unquote($important);\n }\n}\n\n@mixin padding-left($padding...) {\n body.ltr & {\n padding-left: $padding;\n }\n body.rtl & {\n padding-right: $padding;\n }\n}\n\n@mixin padding-right($padding...) {\n body.ltr & {\n padding-right: $padding;\n }\n body.rtl & {\n padding-left: $padding;\n }\n}\n\n// Misc\n\n@mixin dark-inputs {\n @include placeholder-styles($grey400);\n\n .btn,\n .select:not(.selectize) select {\n background-color: $grey200;\n\n &:focus,\n &:hover {\n background-color: darken($grey200, 5%);\n }\n\n &:active,\n &.active {\n background-color: darken($grey200, 10%);\n }\n }\n\n .text {\n background-color: $grey200;\n\n &:focus {\n background-color: darken($grey200, 5%);\n }\n }\n}\n\n@mixin h6-styles {\n margin: 14px 0 3px;\n font-size: 10px;\n line-height: 1.2;\n color: $lightTextColor;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n@mixin token-styles {\n display: inline-block;\n border-radius: 10px;\n padding: 2px 7px;\n font-size: 12px;\n line-height: 14px;\n color: $textColor;\n background-color: transparentize($white, 0.5);\n box-shadow: 0 0 0 1px $darkHairlineColor;\n}\n\n@mixin menu-styles {\n z-index: 100;\n border-radius: $mediumBorderRadius;\n padding: 0 14px;\n overflow: auto;\n background: $white;\n user-select: none;\n box-shadow: 0 0 0 1px transparentize($grey900, 0.9), 0 5px 20px transparentize($grey900, 0.75);\n}\n\n@mixin menu-option-styles {\n margin: 0 -14px;\n padding: 10px 14px;\n color: $textColor;\n text-decoration: none;\n white-space: nowrap;\n}\n\n@mixin menu-option-active-styles {\n color: $textColor;\n background-color: $grey050;\n}\n\n@mixin input-styles {\n border-radius: $smallBorderRadius;\n border: 1px solid transparentize($inputColor, 0.75);\n background-color: hsl(212, 50%, 99%);\n background-clip: padding-box;\n}\n\n@mixin input-focused-styles {\n border-color: $darkFocusColor;\n box-shadow: 0 0 0 2px transparentize($darkFocusColor, 0.5);\n}\n\n@mixin placeholder-styles($color) {\n ::-webkit-input-placeholder {\n color: $color;\n }\n\n input:-ms-input-placeholder {\n color: $color;\n }\n\n ::-ms-input-placeholder {\n color: $color;\n }\n\n :-moz-placeholder {\n color: $color;\n }\n\n ::-moz-placeholder {\n color: $color;\n }\n\n ::placeholder {\n color: $color;\n }\n}\n\n@mixin select-styles {\n position: relative;\n border-radius: $largeBorderRadius;\n white-space: nowrap;\n}\n\n@mixin select-container-styles {\n max-width: 100%;\n position: relative;\n :not(.flex) > & {\n display: inline-block;\n }\n}\n\n@mixin select-arrow-styles {\n @include angle;\n position: absolute;\n z-index: 1;\n top: calc(50% - 5px);\n @include right(9px);\n user-select: none;\n pointer-events: none;\n}\n\n@mixin select-input-styles {\n display: block;\n position: relative;\n max-width: 100%;\n border: none;\n @include padding(7px, 22px, 7px, 10px);\n font-size: 14px;\n line-height: 20px;\n color: $textColor;\n background-color: transparentize($inputColor, 0.75);\n appearance: none;\n // from https://stackoverflow.com/a/15933790/1688568\n &::-ms-expand {\n display: none;\n }\n}\n\n@mixin select-input-fullwidth-styles {\n min-width: 100%;\n}\n\n@mixin select-input-focused-styles {\n outline-color: transparent;\n background-color: transparentize($inputColor, 0.5);\n}\n\n@mixin readable {\n font-size: 16px;\n line-height: 22px;\n\n h1, h2, h3, h4, h5, h6 {\n margin: 24px 0 16px;\n font-weight: 600;\n }\n\n h1 {\n font-size: 32px;\n line-height: 40px;\n color: #000;\n }\n\n h2 {\n font-size: 24px;\n line-height: 30px;\n }\n\n h3 {\n font-size: 20px;\n line-height: 24px;\n }\n\n h4 {\n font-size: 16px;\n line-height: 20px;\n }\n\n h5 {\n font-size: 14px;\n line-height: 18px;\n }\n\n h6 {\n font-size: 13.6px;\n line-height: 17px;\n color: $mediumTextColor;\n }\n\n ul,\n ol {\n margin: 1em 0;\n @include padding-left(2em);\n }\n\n ul li {\n list-style-type: disc;\n }\n\n li + li {\n margin-top: 0.25em;\n }\n\n blockquote {\n margin: 16px 0;\n\n &:not(.note) {\n padding: 0 16px;\n color: $mediumTextColor;\n @include border-left(4px solid $hairlineColor);\n }\n\n &.note {\n position: relative;\n border-radius: 4px;\n padding: 1em;\n @include padding-left(56px);\n border: 1px solid;\n\n &:not(.tip):not(.warning) {\n border-color: $errorColor;\n color: #bf503f;\n\n &:before {\n content: 'alert';\n color: $errorColor;\n }\n }\n\n &.tip {\n border-color: $linkColor;\n color: $mediumTextColor;\n\n &:before {\n content: 'lightbulb';\n color: $linkColor;\n }\n }\n\n &.warning {\n border-color: $warningColor;\n color: #cf783a;\n\n &:before {\n content: 'alert';\n color: $warningColor;\n }\n }\n\n &:before {\n @include icon;\n position: absolute;\n top: 12px;\n @include left(16px);\n font-size: 30px;\n width: 24px;\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/src/web/assets/stripecp/src/scss/stripecp.scss b/src/web/assets/stripecp/src/scss/stripecp.scss index fda6611..d6bf314 100644 --- a/src/web/assets/stripecp/src/scss/stripecp.scss +++ b/src/web/assets/stripecp/src/scss/stripecp.scss @@ -15,15 +15,19 @@ } .proxy-element-card { - position: relative; - padding-top: 15px; - padding-bottom: 40px; + display: grid; + padding-inline: 0; + padding-block-start: var(--spacing); .pec-header { - position: relative; - display: block; + grid-column-start: 1; + grid-column-end: 1; color: $textColor; width: 100%; + padding-inline: var(--padding); + display: flex; + justify-content: space-between; + align-items: baseline; &:hover { color: $textColor; @@ -31,11 +35,8 @@ } .pec-external-icon { - position: absolute; - top: 50%; - @include right(0px); - transform: translate(-50%, -50%); color: $textColor; + margin-inline-end: 6px; } &:hover { @@ -45,7 +46,7 @@ } .pec-title { - margin-bottom: 0; + margin-block-end: 0; } .pec-subtitle { @@ -54,21 +55,26 @@ } .meta { + grid-column-start: 1; + grid-column-end: 1; + margin-inline: 0; + ul.elements { width: 100%; } } .pec-footer { - position: absolute; - bottom: 0; + grid-column-start: 1; + grid-column-end: 1; width: 100%; @include right(0); font-size: 12px; background-color: $grey100; border-bottom-left-radius: $largeBorderRadius; border-bottom-right-radius: $largeBorderRadius; - padding: 10px 24px; + padding-block: 10px; + padding-inline: var(--padding); a { color: $textColor; @@ -87,11 +93,6 @@ transform: translate(-50%, -50%); } } - - hr { - margin-left: var(--neg-padding); - margin-right: var(--neg-padding); - } } #subscriptions-vue-admin-table {