woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss

85 lines
1.4 KiB
SCSS

.ppcp-r {
&-container {
max-width: var(--max-container-width, none);
margin-left: auto;
margin-right: auto;
}
&-inner-container {
margin-left: auto;
margin-right: auto;
padding: 0 16px 48px;
box-sizing: content-box;
@media screen and (max-width: 480px) {
padding-bottom: 36px;
}
}
&-settings {
> * {
margin-bottom: $card-vertical-gap;
}
> *:not(:last-child) {
padding-bottom: $card-vertical-gap;
border-bottom: 1px solid $color-gray-200;
}
}
&-settings-card {
@media screen and (min-width: 960px) {
display: flex;
gap: 48px;
}
@media screen and (max-width: 480px) {
padding: 24px;
}
&__content-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
&__header {
display: flex;
gap: 18px;
padding-bottom: 18px;
border-bottom: 2px solid $color-gray-700;
margin-bottom: 32px;
@media screen and (min-width: 960px) {
width: 280px;
flex-shrink: 0;
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
}
&__content {
border: 1px solid $color-gray-200;
border-radius: 4px;
padding: 24px;
@media screen and (min-width: 960px) {
flex: 1;
}
}
&__title {
@include font(13, 24, 600);
color: $color-text-text;
margin: 0 0 4px 0;
display: block;
}
&__description {
@include font(13, 20, 400);
color: $color-text-tertiary;
margin: 0;
}
}
}