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:
parent
c6562da430
commit
f008ca5fb9
|
@ -108,15 +108,15 @@ body {
|
||||||
border: 1px solid $border-light;
|
border: 1px solid $border-light;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
|
h6, h5, h4, h3, h2, h1 {
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.toolkit-card--title {
|
.toolkit-card--title {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|
||||||
h6, h5, h4, h3, h2, h1 {
|
|
||||||
font-weight: 400;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolkit-card--body {
|
.toolkit-card--body {
|
||||||
|
@ -125,7 +125,7 @@ body {
|
||||||
border-top: 1px solid $border-light;
|
border-top: 1px solid $border-light;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
padding: 0;
|
padding: 8px 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -144,6 +144,7 @@ body {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
|
|
|
@ -9,6 +9,7 @@ pub struct FileInput {
|
||||||
pub(crate) accept: String,
|
pub(crate) accept: String,
|
||||||
pub(crate) classes: Vec<String>,
|
pub(crate) classes: Vec<String>,
|
||||||
pub(crate) multiple: bool,
|
pub(crate) multiple: bool,
|
||||||
|
pub(crate) group: bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl FileInput {
|
impl FileInput {
|
||||||
|
@ -17,6 +18,7 @@ impl FileInput {
|
||||||
name: name.to_owned(),
|
name: name.to_owned(),
|
||||||
label: label.to_owned(),
|
label: label.to_owned(),
|
||||||
id: id.to_owned(),
|
id: id.to_owned(),
|
||||||
|
group: true,
|
||||||
..Default::default()
|
..Default::default()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,6 +29,7 @@ impl FileInput {
|
||||||
label: label.to_owned(),
|
label: label.to_owned(),
|
||||||
id: id.to_owned(),
|
id: id.to_owned(),
|
||||||
kind: ButtonKind::PrimaryOutline,
|
kind: ButtonKind::PrimaryOutline,
|
||||||
|
group: true,
|
||||||
..Default::default()
|
..Default::default()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -37,6 +40,7 @@ impl FileInput {
|
||||||
label: label.to_owned(),
|
label: label.to_owned(),
|
||||||
id: id.to_owned(),
|
id: id.to_owned(),
|
||||||
kind: ButtonKind::Outline,
|
kind: ButtonKind::Outline,
|
||||||
|
group: true,
|
||||||
..Default::default()
|
..Default::default()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -47,6 +51,7 @@ impl FileInput {
|
||||||
label: label.to_owned(),
|
label: label.to_owned(),
|
||||||
id: id.to_owned(),
|
id: id.to_owned(),
|
||||||
kind: ButtonKind::Secondary,
|
kind: ButtonKind::Secondary,
|
||||||
|
group: true,
|
||||||
..Default::default()
|
..Default::default()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -66,6 +71,11 @@ impl FileInput {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn no_group(&mut self) -> &mut Self {
|
||||||
|
self.group = false;
|
||||||
|
self
|
||||||
|
}
|
||||||
|
|
||||||
pub(crate) fn class_string(&self) -> String {
|
pub(crate) fn class_string(&self) -> String {
|
||||||
use ButtonKind::*;
|
use ButtonKind::*;
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,29 @@
|
||||||
|
|
||||||
@(file: &FileInput)
|
@(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()">
|
<div class="@file.class_string()">
|
||||||
<span id="@file.id">@file.label</span>
|
<span id="@file.id">@file.label</span>
|
||||||
@if file.multiple {
|
@if file.multiple {
|
||||||
|
@ -22,4 +44,4 @@
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
|
|
Loading…
Reference in a new issue