Style the elm area too

This commit is contained in:
Emi Simpson 2022-02-02 18:27:11 -05:00
parent 23bdaffd14
commit 07b0b9ea29
Signed by: Emi
GPG key ID: A12F2C2FFDC3D847
2 changed files with 74 additions and 7 deletions

View file

@ -95,3 +95,64 @@ header {
border-left-color: transparent;
}
}
#elm-area {
display: grid;
grid-template-columns: 50% 50%;
gap: 50px;
margin: 0 -180px;
.module-button > div {
box-sizing: border-box;
display: grid;
grid-template-columns: 0fr 1fr;
grid-template-rows: 0fr 1fr;
gap: 20px;
height: 100%;
padding: 29px;
border: 3px solid var(--color-hi);
& > :last-child {
grid-area: 2/1/3/3;
}
h3 {
margin: 0;
align-self: center;
}
p {
margin: 0;
}
}
.module-button.active > div {
border: 12px double var(--color-hi);
padding: 20px;
}
}
.cooler-checkbox {
height: 40px;
width: 40px;
border: 3px solid #1c87d8;
position: relative;
input {
display: none;
}
label.active &:after {
content: "";
position: absolute;
left: 12px;
top: 0px;
width: 11px;
height: 24px;
border: solid #1c87d8;
border-width: 0 6px 6px 0;
transform: rotate(39deg);
}
}

View file

@ -52,13 +52,19 @@ update msg model =
view_module_button : Set Module -> Module -> Html Msg
view_module_button enabled mod =
label
(if Sort.Set.memberOf enabled mod then [class "active"] else [])
[ input
[ type_ "checkbox"
, onCheck (ToggleModule mod)
] []
, h3 [] [ text (module_property .name mod) ]
, p [] (module_desc mod)
(class "module-button"
:: (if Sort.Set.memberOf enabled mod then [class "active"] else [])
)
[ div []
[ div [class "cooler-checkbox"]
[ input
[ type_ "checkbox"
, onCheck (ToggleModule mod)
] []
]
, h3 [] [ text (module_property .name mod) ]
, p [] (module_desc mod)
]
]
view : Model -> Html Msg