Enable removing a file input's group div

Always style headings inside a card
Add vertical padding to paragraphs in a card
This commit is contained in:
asonix 2021-01-06 23:38:52 -06:00
parent c6562da430
commit f008ca5fb9
3 changed files with 42 additions and 9 deletions

View file

@ -108,15 +108,15 @@ body {
border: 1px solid $border-light;
border-radius: 3px;
h6, h5, h4, h3, h2, h1 {
font-weight: 400;
padding: 0;
margin: 0;
}
.toolkit-card--title {
padding: 16px;
font-size: 18px;
h6, h5, h4, h3, h2, h1 {
font-weight: 400;
padding: 0;
margin: 0;
}
}
.toolkit-card--body {
@ -125,7 +125,7 @@ body {
border-top: 1px solid $border-light;
p {
padding: 0;
padding: 8px 0;
margin: 0;
}
@ -144,6 +144,7 @@ body {
position: relative;
overflow: hidden;
font-family: sans-serif;
font-size: 16px;
padding: 8px 16px;
margin: 0 4px;

View file

@ -9,6 +9,7 @@ pub struct FileInput {
pub(crate) accept: String,
pub(crate) classes: Vec<String>,
pub(crate) multiple: bool,
pub(crate) group: bool,
}
impl FileInput {
@ -17,6 +18,7 @@ impl FileInput {
name: name.to_owned(),
label: label.to_owned(),
id: id.to_owned(),
group: true,
..Default::default()
}
}
@ -27,6 +29,7 @@ impl FileInput {
label: label.to_owned(),
id: id.to_owned(),
kind: ButtonKind::PrimaryOutline,
group: true,
..Default::default()
}
}
@ -37,6 +40,7 @@ impl FileInput {
label: label.to_owned(),
id: id.to_owned(),
kind: ButtonKind::Outline,
group: true,
..Default::default()
}
}
@ -47,6 +51,7 @@ impl FileInput {
label: label.to_owned(),
id: id.to_owned(),
kind: ButtonKind::Secondary,
group: true,
..Default::default()
}
}
@ -66,6 +71,11 @@ impl FileInput {
self
}
pub fn no_group(&mut self) -> &mut Self {
self.group = false;
self
}
pub(crate) fn class_string(&self) -> String {
use ButtonKind::*;

View file

@ -2,7 +2,29 @@
@(file: &FileInput)
<div class="toolkit-button-group">
@if file.group {
<div class="toolkit-button-group">
<div class="@file.class_string()">
<span id="@file.id">@file.label</span>
@if file.multiple {
<input
type="file"
class="toolkit-file--action"
name="@file.name"
accept="@file.accept"
multiple
/>
} else {
<input
type="file"
class="toolkit-file--action"
name="@file.name"
accept="@file.accept"
/>
}
</div>
</div>
} else {
<div class="@file.class_string()">
<span id="@file.id">@file.label</span>
@if file.multiple {
@ -22,4 +44,4 @@
/>
}
</div>
</div>
}