210 lines
6.4 KiB
SCSS
210 lines
6.4 KiB
SCSS
@import '@wordpress/base-styles/_colors.native.scss';
|
|
|
|
/* Tooltip doesn't look exactly like a standard <Tooltip> */
|
|
.woocommerce-marketplace__my-subscriptions {
|
|
.components-tooltip .components-popover__content {
|
|
background: var(--wc-content-bg);
|
|
border: 1px solid var(--wp-admin-theme-color);
|
|
border-radius: 4px;
|
|
color: var(--wc-secondary-text);
|
|
text-align: left;
|
|
|
|
& > * {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__tooltip-external-link::after {
|
|
background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M19.5%204.5h-7V6h4.44l-5.97%205.97%201.06%201.06L18%207.06v4.44h1.5v-7Zm-13%201a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-3H17v3a.5.5%200%200%201-.5.5h-10a.5.5%200%200%201-.5-.5v-10a.5.5%200%200%201%20.5-.5h3V5.5h-3Z%22%20fill%3D%22%230073aa%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
|
|
background-position: 0 3px;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
content: '';
|
|
display: inline-block;
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__header {
|
|
font-size: 20px;
|
|
color: $gray-900;
|
|
font-weight: 400;
|
|
margin-top: $grid-unit-40;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__table-description {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
margin-top: $grid-unit-05;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__table {
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
margin-top: $grid-unit-30;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__product {
|
|
display: flex;
|
|
align-items: center;
|
|
color: $gray-700;
|
|
|
|
&-name {
|
|
margin-left: $grid-unit-15;
|
|
line-height: 18px;
|
|
font-weight: 600;
|
|
color: $gray-900;
|
|
}
|
|
|
|
&-icon {
|
|
border-radius: 4px;
|
|
width: 40px;
|
|
}
|
|
|
|
svg {
|
|
border-radius: 4px;
|
|
padding: $grid-unit-10;
|
|
fill: $gray-600;
|
|
background-color: $gray-200;
|
|
}
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__status-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 2px;
|
|
border: none;
|
|
color: var(--wp-red-red-70, #8a2424);
|
|
background: var(--wp-red-red-0, #fcf0f1);
|
|
padding: 2px 8px;
|
|
|
|
& > svg {
|
|
margin-right: 2px;
|
|
fill: var(--wp-red-red-70, #8a2424);
|
|
}
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__status-popover .components-popover__content {
|
|
border: 1px solid $gray-400;
|
|
width: 300px;
|
|
border-radius: 2px;
|
|
padding: $grid-unit-15;
|
|
color: $gray-900;
|
|
}
|
|
|
|
.components-base-control.woocommerce-marketplace__my-subscriptions__activation {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions-version {
|
|
padding: 6px 12px;
|
|
}
|
|
.woocommerce-marketplace__my-subscriptions__table__header--version > span {
|
|
display: inline-block;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions .components-button.is-link {
|
|
text-decoration: none;
|
|
padding: 6px 12px;
|
|
}
|
|
.woocommerce-marketplace__my-subscriptions .components-button.is-secondary:hover:not(:disabled) {
|
|
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions--connect {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 495px;
|
|
padding: $grid-unit-80 $grid-unit-40;
|
|
margin: 0 auto;
|
|
|
|
.woocommerce-marketplace__my-subscriptions__icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI5NzBfMTA0MzcpIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNzQuMTMyNSAwTDY4LjQ0ODEgMy4yOTQ4NEw2Mi43NTc5IDBMNTcuMDczNCAzLjI5NDg0TDUxLjM4MzIgMEw0NS42OTMxIDMuMjk0ODRMNDAuMDA4NiAwTDM0LjMxODQgMy4yOTQ4NEwyOC42MzM5IDBMMjIuOTQzNyAzLjI5NDg0TDE3LjI1MzYgMEwxMS41NjM0IDMuMjk0ODRMNS44NzMxOCAwTDAgMy40MDIwNlY3Ni41OTc5TDUuODY3NDcgODBMMTEuNTU3NiA3Ni43MDFMMTcuMjQyMSA4MEwyMi45MzIzIDc2LjcwMUwyOC42MTY4IDgwTDM0LjMwNjkgNzYuNzAxTDM5Ljk5NzEgODBMNDUuNjgxNiA3Ni43MDFMNTEuMzcxOCA4MEw1Ny4wNTYzIDc2LjcwMUw2Mi43NDY1IDgwTDY4LjQzNjYgNzYuNzAxTDc0LjEzMjUgODBMODAgNzYuNTk3OVYzLjQwMjA2TDc0LjEzMjUgMFoiIGZpbGw9IiNGMEYwRjAiLz4KPHBhdGggZD0iTTcxLjE5OTIgMTQuNzk5Nkg4LjM5OTE3VjE4Ljc5OTZINzEuMTk5MlYxNC43OTk2WiIgZmlsbD0iI0RERERERCIvPgo8cGF0aCBkPSJNNzEuMTk5MiAyNS4xOTk1SDguMzk5MTdWMjkuMTk5NUg3MS4xOTkyVjI1LjE5OTVaIiBmaWxsPSIjREREREREIi8+CjxwYXRoIGQ9Ik03MS4xOTkyIDM1LjU5OTZIOC4zOTkxN1YzOS41OTk2SDcxLjE5OTJWMzUuNTk5NloiIGZpbGw9IiNEREREREQiLz4KPHBhdGggZD0iTTY4IDUzLjYwMDFINDkuMkM0Ny40MzI3IDUzLjYwMDEgNDYgNTUuMDMyOCA0NiA1Ni44MDAxVjYwLjgwMDFDNDYgNjIuNTY3NCA0Ny40MzI3IDY0LjAwMDEgNDkuMiA2NC4wMDAxSDY4QzY5Ljc2NzMgNjQuMDAwMSA3MS4yIDYyLjU2NzQgNzEuMiA2MC44MDAxVjU2LjgwMDFDNzEuMiA1NS4wMzI4IDY5Ljc2NzMgNTMuNjAwMSA2OCA1My42MDAxWiIgZmlsbD0iI0RERERERCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzI5NzBfMTA0MzciPgo8cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==);
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__header {
|
|
margin-top: $grid-unit-20;
|
|
margin-bottom: $grid-unit-10;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__description {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
font-weight: 400;
|
|
color: var(--gutenberg-gray-700);
|
|
margin-bottom: $grid-unit-30;
|
|
}
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__table__header--actions {
|
|
text-align: right;
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__actions {
|
|
display: flex;
|
|
justify-content: end;
|
|
|
|
.components-button {
|
|
margin-right: $grid-unit-10;
|
|
}
|
|
}
|
|
|
|
.woocommerce-marketplace__my-subscriptions__notices {
|
|
.components-notice {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 6px 0 rgba($gray-100, 0.05);
|
|
border: 1px solid var(--gutenberg-gray-100, #f0f0f0);
|
|
padding-right: $grid-unit-15;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 4px;
|
|
height: 100%;
|
|
background-color: var(--wp-admin-theme-color, #007cba);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
&.is-error::before {
|
|
background-color: $alert-red;
|
|
}
|
|
|
|
.components-notice__content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $grid-unit-15;
|
|
}
|
|
.components-notice__dismiss.has-icon {
|
|
width: 24px;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
align-self: center;
|
|
padding: $grid-unit-05;
|
|
> svg {
|
|
fill: $gray-900;
|
|
}
|
|
}
|
|
}
|
|
.components-notice__action.components-button.is-link {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|