diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss index 8888bf2c0..551770bb1 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss @@ -133,10 +133,6 @@ .ppcp-r-settings-block__content { margin-top: 24px; } - - .ppcp-r-connection-status__data { - margin-bottom: 20px; - } } &--connect-sandbox { diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings.scss b/modules/ppcp-settings/resources/css/components/screens/_settings.scss index 0b8802138..d55496843 100644 --- a/modules/ppcp-settings/resources/css/components/screens/_settings.scss +++ b/modules/ppcp-settings/resources/css/components/screens/_settings.scss @@ -1,5 +1,5 @@ @import './settings/input'; -@import './settings/connection-status'; +@import './settings/setting-rows'; @import './settings/tab-styling'; @import './settings/tab-paylater-configurator'; diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss deleted file mode 100644 index 2bf1417e6..000000000 --- a/modules/ppcp-settings/resources/css/components/screens/settings/_connection-status.scss +++ /dev/null @@ -1,78 +0,0 @@ -// Connection Status -.ppcp-r-connection-status { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 12px; - - &__status-status { - margin: 0 0 8px 0; - - strong { - @include font(14, 24, 700); - color: $color-black; - } - } - - &__status-label { - @include font(11, 22, 600); - color: $color-gray-900; - display: block; - text-transform: uppercase; - } - - &__status-value { - @include font(13, 26, 400); - color: $color-text-tertiary; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &__data { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; - } - - &__status-toggle--toggled { - .ppcp-r-connection-status__show-all-data { - transform: rotate(180deg); - } - } - - &__status-row { - display: flex; - flex-direction: column; - - strong { - @include font(14, 24, 600); - color: $color-gray-800; - margin-right: 12px; - white-space: nowrap; - } - - .ppcp-r-connection-status__status-toggle { - line-height: 0; - } - } - - @media screen and (max-width: 767px) { - flex-wrap: wrap; - &__status { - width: 100%; - } - &__status-row { - flex-wrap: wrap; - - strong { - width: 100%; - } - - span { - word-break: break-all; - } - } - } -} diff --git a/modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss b/modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss new file mode 100644 index 000000000..57981c459 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss @@ -0,0 +1,28 @@ +.ppcp-r-setting-value-rows { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + width: 100%; +} + +.ppcp-r-setting-value-row { + display: flex; + flex-direction: column; + width: 100%; + + .ppcp-r-setting-label { + @include font(11, 22, 600); + color: $color-gray-900; + display: block; + text-transform: uppercase; + } + + .ppcp-r-setting-value { + @include font(13, 26, 400); + color: $color-text-tertiary; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +}