baarkerlounger
3 years ago
3 changed files with 110 additions and 0 deletions
@ -0,0 +1,82 @@ |
|||||||
|
|
||||||
|
// Task list pattern |
||||||
|
|
||||||
|
.app-task-list { |
||||||
|
list-style-type: none; |
||||||
|
padding-left: 0; |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
min-width: 550px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__section { |
||||||
|
display: table; |
||||||
|
@include govuk-font($size:24, $weight: bold); |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__section-number { |
||||||
|
display: table-cell; |
||||||
|
|
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
min-width: govuk-spacing(6); |
||||||
|
padding-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__items { |
||||||
|
@include govuk-font($size: 19); |
||||||
|
@include govuk-responsive-margin(9, "bottom"); |
||||||
|
list-style: none; |
||||||
|
padding-left: 0; |
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
padding-left: govuk-spacing(6); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__item { |
||||||
|
border-bottom: 1px solid $govuk-border-colour; |
||||||
|
margin-bottom: 0 !important; |
||||||
|
padding-top: govuk-spacing(2); |
||||||
|
padding-bottom: govuk-spacing(2); |
||||||
|
@include govuk-clearfix; |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__item:first-child { |
||||||
|
border-top: 1px solid $govuk-border-colour; |
||||||
|
} |
||||||
|
|
||||||
|
.app-task-list__task-name { |
||||||
|
display: block; |
||||||
|
@include govuk-media-query($from: 450px) { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// The `app-task-list__task-completed` class was previously used on the task |
||||||
|
// list for the completed tag (changed in 86c90ec) – it's still included here to |
||||||
|
// avoid breaking task lists in existing prototypes. |
||||||
|
.app-task-list__tag, |
||||||
|
.app-task-list__task-completed { |
||||||
|
margin-top: govuk-spacing(2); |
||||||
|
margin-bottom: govuk-spacing(1); |
||||||
|
|
||||||
|
@include govuk-media-query($from: 450px) { |
||||||
|
float: right; |
||||||
|
margin-top: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//custom |
||||||
|
.app-task-list { |
||||||
|
&__item:target { |
||||||
|
} |
||||||
|
&--no-numbers &__items { |
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
@ -1,3 +1,29 @@ |
|||||||
<h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1> |
<h1 class="govuk-heading-xl">Tasklist for log <%= @case_log.id %></h1> |
||||||
|
|
||||||
<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is <%= @case_log.status %></h2> |
<h2 class="govuk-heading-s govuk-!-margin-bottom-2">This submission is <%= @case_log.status %></h2> |
||||||
|
|
||||||
|
<br /> |
||||||
|
|
||||||
|
<ol class="app-task-list app-task-list--no-numbers"> |
||||||
|
<li> |
||||||
|
<h2 class="app-task-list__section"> |
||||||
|
<span class="app-task-list__section-number">About the household</span> |
||||||
|
</h2> |
||||||
|
<ul class="app-task-list__items"> |
||||||
|
<li class="app-task-list__item"> |
||||||
|
<a class="task-name" href="">Household characteristics</a> |
||||||
|
<strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="app-task-list__item"> |
||||||
|
<a class="task-name" href="">Household situation</a> |
||||||
|
<strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="app-task-list__item"> |
||||||
|
<a class="task-name" href="">Household needs</a> |
||||||
|
<strong class="govuk-tag govuk-tag--grey app-task-list__tag">Not started</strong> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
</ol> |
||||||
|
Loading…
Reference in new issue