Onboarding - Fix payment CSS on mobile (#3236)

woocommerce · Nov 15, 2019 · a73cfda · a73cfda
1 parent 2f21173
commit a73cfda
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/client/dashboard/task-list/style.scss b/client/dashboard/task-list/style.scss
@@ -323,6 +323,47 @@
  margin-left: $gap-smallest;
  }
  }
+
+ @include breakpoint( '<600px' ) {
+ .woocommerce-list__item > .woocommerce-list__item-inner {
+ flex-direction: column;
+ }
+
+ .woocommerce-list__item-title {
+ border-top: 0;
+ }
+
+ .woocommerce-list__item .woocommerce-list__item-before {
+ margin-top: 0;
+ order: 1;
+ }
+
+ .woocommerce-task-payments__woocommerce-services-options {
+ margin-top: $gap-smaller;
+ border-top: 0;
+ }
+
+ .woocommerce-task-payments__woocommerce-services-options .muriel-component {
+ margin-left: -$gap-larger;
+ }
+
+ .woocommerce-list__item .woocommerce-list__item-after {
+ margin-left: 0;
+ order: 2;
+ align-self: flex-end;
+ margin-top: -$gap-larger;
+ }
+
+ .woocommerce-list__item .woocommerce-list__item-text {
+ order: 3;
+ margin-top: $gap;
+ }
+
+ .woocommerce-task-payments__woocommerce-services-options .components-checkbox-control__label {
+ margin-left: -$gap-larger;
+ margin-top: -$gap-smaller;
+ }
+ }
 }
 
 .woocommerce-task-appearance {