From 7a1c2d6ac4ef0fe52035dedda086b471d9df7f7f Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Mon, 27 Aug 2018 13:46:09 -0600 Subject: [PATCH 1/5] Wizard positioning on mobile --- ui/app/styles/components/ui-wizard.scss | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 2f7cf90be2d..3a9d4ab29c7 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/ui/app/styles/components/ui-wizard.scss @@ -9,6 +9,7 @@ flex-direction: column; flex-grow: 1; } + .ui-wizard-container .app-content.wizard-open { padding-right: 324px; @@ -19,7 +20,7 @@ .ui-wizard { z-index: 300; - padding: $size-5 $size-5 $size-11; + padding: $size-5; width: 300px; background: $white; box-shadow: $box-shadow, $box-shadow-highest; @@ -30,7 +31,12 @@ overflow: auto; @include until($tablet) { - display: none; + box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24); + bottom: 0; + left: 0; + right: 0; + top: 50%; + width: auto; } .doc-link { @@ -61,9 +67,20 @@ background: $black; color: $white; box-shadow: $box-shadow-middle; + + @include until($tablet) { + box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24); + bottom: 0; + left: 0; + right: 0; + top: auto; + width: auto; + } + .title { color: $white; } + .wizard-header { margin: 0; } From c1602fa4eac13bc5d3f63302029b36050e2cb421 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Mon, 27 Aug 2018 13:52:07 -0600 Subject: [PATCH 2/5] Adjust spacing from viewport --- ui/app/styles/components/ui-wizard.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 3a9d4ab29c7..9942dfaa434 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/ui/app/styles/components/ui-wizard.scss @@ -25,9 +25,9 @@ background: $white; box-shadow: $box-shadow, $box-shadow-highest; position: fixed; - right: $size-6; - bottom: $size-6; - top: calc(4.5 * #{$size-6}); + right: $size-8; + bottom: $size-8; + top: calc(3.5rem + #{$size-8}); overflow: auto; @include until($tablet) { @@ -58,15 +58,16 @@ } .ui-wizard.collapsed { - position: fixed; - top: 4rem; - right: 2rem; + color: $white; + background: $black; bottom: auto; + box-shadow: $box-shadow-middle; height: auto; min-height: 0; - background: $black; - color: $white; - box-shadow: $box-shadow-middle; + padding-bottom: $size-11; + position: fixed; + right: $size-8; + top: calc(3.5rem + #{$size-8}); @include until($tablet) { box-shadow: $box-shadow, 0 0 20px rgba($black, 0.24); From 4bef355bd64c6e81680b213ed08682a198b9dc76 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Mon, 27 Aug 2018 14:41:20 -0600 Subject: [PATCH 3/5] Styling for select form --- .../styles/components/features-selection.scss | 18 +++++++++++++++++- .../components/wizard/features-selection.hbs | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/components/features-selection.scss b/ui/app/styles/components/features-selection.scss index 353e981fc5b..dd4bb3195e2 100644 --- a/ui/app/styles/components/features-selection.scss +++ b/ui/app/styles/components/features-selection.scss @@ -3,21 +3,37 @@ font-weight: $font-weight-semibold; color: $grey; } + .feature-box { box-shadow: $box-shadow; border-radius: $radius; padding: $size-8; margin: $size-8 0; + + &.is-active { + box-shadow: 0 0 0 1px $grey-light; + } } .feature-box label { font-weight: $font-weight-semibold; + padding-left: $size-10; + + &::before { + top: 3px; + } + + &::after { + top: 5px; + } } .feature-steps { - font-size: 12px; + font-size: $size-8; color: $grey; + line-height: 1.5; margin-left: $size-3; + margin-top: $size-10; li::before { // bullet diff --git a/ui/app/templates/components/wizard/features-selection.hbs b/ui/app/templates/components/wizard/features-selection.hbs index 5d117756c38..db99f44b367 100644 --- a/ui/app/templates/components/wizard/features-selection.hbs +++ b/ui/app/templates/components/wizard/features-selection.hbs @@ -9,7 +9,7 @@
{{#each allFeatures as |feature|}} {{#if feature.show}} -
+
Date: Mon, 27 Aug 2018 14:44:51 -0600 Subject: [PATCH 4/5] Active state for radio-box --- ui/app/styles/components/box-radio.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/components/box-radio.scss b/ui/app/styles/components/box-radio.scss index 5ad2f422cdf..41079d7bf6d 100644 --- a/ui/app/styles/components/box-radio.scss +++ b/ui/app/styles/components/box-radio.scss @@ -25,11 +25,11 @@ line-height: 1; margin: $size-6 $size-3 $size-6 0; font-size: 12px; - transition: box-shadow ease-in-out 250ms; + transition: box-shadow ease-in-out $speed; will-change: box-shadow; &.is-selected { - box-shadow: $box-shadow, $box-shadow-high; + box-shadow: 0 0 0 1px $grey-light, $box-shadow-middle; } input[type=radio].radio { From b3ff629b2f0106f980a16c84d316b0a343f14487 Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Mon, 27 Aug 2018 14:49:03 -0600 Subject: [PATCH 5/5] Alignment for wizard header --- ui/app/styles/components/ui-wizard.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ui/app/styles/components/ui-wizard.scss b/ui/app/styles/components/ui-wizard.scss index 9942dfaa434..694fd7d82ac 100644 --- a/ui/app/styles/components/ui-wizard.scss +++ b/ui/app/styles/components/ui-wizard.scss @@ -48,6 +48,11 @@ .wizard-header { margin-bottom: $size-5; position: relative; + + .icon { + margin-right: $size-11; + vertical-align: -0.33rem; + } } .wizard-dismiss-menu {