diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.html b/src/app/features/administration/form/steps/step-two/step-two.component.html index f10ecfb8..8607c88a 100644 --- a/src/app/features/administration/form/steps/step-two/step-two.component.html +++ b/src/app/features/administration/form/steps/step-two/step-two.component.html @@ -42,6 +42,7 @@ diff --git a/src/app/features/administration/nav-steps/nav-steps.component.html b/src/app/features/administration/nav-steps/nav-steps.component.html index 45017c9b..8ad7fd3a 100644 --- a/src/app/features/administration/nav-steps/nav-steps.component.html +++ b/src/app/features/administration/nav-steps/nav-steps.component.html @@ -1,7 +1,7 @@ -
+
-
+
-
+
-
-
-
+
+
- + - diff --git a/src/styles/libraries/_overrides.scss b/src/styles/libraries/_overrides.scss index 1f847af9..a55dcb72 100644 --- a/src/styles/libraries/_overrides.scss +++ b/src/styles/libraries/_overrides.scss @@ -19,3 +19,8 @@ $input-shadow: none; display: block !important; width: 80%; } + +html.has-navbar-fixed-top, +body.has-navbar-fixed-top { + padding-top: 68px; +} diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index 3ef8cccc..1a45c662 100644 --- a/src/styles/partials/_forms.scss +++ b/src/styles/partials/_forms.scss @@ -21,7 +21,6 @@ app-step-three, app-step-four, app-step-six, app-step-seven { - padding: 2em 2.5em; display: block; } @@ -83,13 +82,17 @@ textarea { } // radio input structure - +.mat-checkbox-label, +.mat-checkbox-layout .mat-checkbox-label { + max-width: 90vw; +} .button { label { margin-bottom: 0; width: 100%; display: inline-block; text-align: left; + max-width: 90vw; } } input[type='radio'] { @@ -103,11 +106,6 @@ li { list-style-type: none; } -.next { - max-width: 200px; - margin-bottom: 50px; -} - .btn-block { display: block; width: 100%; @@ -138,12 +136,14 @@ option { background-position: right 1rem center; background-clip: border-box; min-width: 10rem; + max-width: 90vw; margin-bottom: 0.25rem; border-bottom: 2px solid $primary_color !important; } select { @extend .select, .input; + max-width: 90vw; } #multi_hours select { @@ -153,11 +153,13 @@ select { input { border-color: #4e4c59 !important; @extend .text-ellipsis; + max-width: 90vw; + display: block; } textarea { width: 100%; - max-width: 100%; + max-width: 90vw; min-height: 213px; padding: 0.5em 1em; margin-bottom: 1em; @@ -198,7 +200,7 @@ mat-checkbox { .admin-form { .step { - max-width: 800px; + max-width: $main-column-width; margin: 0 auto; } } @@ -305,14 +307,16 @@ mat-checkbox { } .step { - padding-top: 8em; - + padding: 1rem 1rem; .title { - color: $primary_color; + color: $d-primary-intense; + margin-bottom: 36px; + font-size: 28px; + line-height: 32px; } .step-counter-text { - color: $primary_color; + color: $d-primary-intense; font-size: 1rem; line-height: 1.25rem; } diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss index 9c54938c..66d9d0a3 100644 --- a/src/styles/partials/global.scss +++ b/src/styles/partials/global.scss @@ -5,6 +5,9 @@ html { color: $font_color; } +form { + margin: 0 !important; +} main { min-height: 90vh; } @@ -37,12 +40,25 @@ main { .columns { &.half-columns { - max-width: 900px; + max-width: $main-column-width; margin: 0 auto; + padding: 0; .column { padding: 0; width: 50% !important; float: left; + &:nth-of-type(1) { + padding-right: 1.5rem; + .step-info & { + padding: 0; + } + } + &:nth-of-type(2) { + padding-left: 1.5rem; + } + } + .button { + width: 100%; } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 95b3fc7b..1a7ded20 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -66,3 +66,7 @@ $success: $d-success; $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; + +// sizes and breakpoints +$main-column-width: 900px; +$mobile-size: 380px;