Toolkit: Add 'link' button kind
This commit is contained in:
parent
c47a669bdc
commit
0387e09959
|
@ -216,7 +216,7 @@ img {
|
|||
border-radius: 0 3px 3px 0;
|
||||
height: 40px;
|
||||
border-left: 0;
|
||||
box-shadow: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -421,6 +421,10 @@ img {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img:hover {
|
||||
filter: brightness(110%);
|
||||
}
|
||||
}
|
||||
|
||||
&__small {
|
||||
|
@ -431,6 +435,15 @@ img {
|
|||
border-radius: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tiny {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
.toolkit-icon {
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolkit-banner {
|
||||
|
@ -843,6 +856,30 @@ img {
|
|||
}
|
||||
}
|
||||
|
||||
&.toolkit-file__link,
|
||||
&.toolkit-button__link {
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolkit-file__primary-link,
|
||||
&.toolkit-button__primary-link {
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolkit-file__outline,
|
||||
&.toolkit-button__outline {
|
||||
background-color: $white;
|
||||
|
@ -899,6 +936,30 @@ img {
|
|||
}
|
||||
}
|
||||
|
||||
&.toolkit-file__link,
|
||||
&.toolkit-button__link {
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
color: $dark-text;
|
||||
|
||||
&:hover {
|
||||
background-color: $dark-heading-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolkit-file__primary-link,
|
||||
&.toolkit-button__primary-link {
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
color: $dark-primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $dark-heading-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.toolkit-file__outline,
|
||||
&.toolkit-button__outline {
|
||||
background-color: $dark-body;
|
||||
|
@ -1174,6 +1235,11 @@ img {
|
|||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
&__tiny {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1192,5 +1258,10 @@ img {
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&__tiny {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,8 +2,10 @@
|
|||
pub enum ButtonKind {
|
||||
Primary,
|
||||
PrimaryOutline,
|
||||
Outline,
|
||||
PrimaryLink,
|
||||
Secondary,
|
||||
Outline,
|
||||
Link,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, Debug)]
|
||||
|
@ -38,6 +40,14 @@ impl Button {
|
|||
}
|
||||
}
|
||||
|
||||
pub fn primary_link(label: &str) -> Self {
|
||||
Button {
|
||||
label: label.to_owned(),
|
||||
kind: ButtonKind::PrimaryLink,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn outline(label: &str) -> Self {
|
||||
Button {
|
||||
label: label.to_owned(),
|
||||
|
@ -46,6 +56,14 @@ impl Button {
|
|||
}
|
||||
}
|
||||
|
||||
pub fn link(label: &str) -> Self {
|
||||
Button {
|
||||
label: label.to_owned(),
|
||||
kind: ButtonKind::Link,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn secondary(label: &str) -> Self {
|
||||
Button {
|
||||
label: label.to_owned(),
|
||||
|
@ -84,11 +102,15 @@ impl Button {
|
|||
|
||||
let mut classes = self.classes.clone();
|
||||
|
||||
classes.push("toolkit-button".to_owned());
|
||||
|
||||
let static_classes = match self.kind {
|
||||
Primary => "toolkit-button toolkit-button__primary",
|
||||
PrimaryOutline => "toolkit-button toolkit-button__primary-outline",
|
||||
Outline => "toolkit-button toolkit-button__outline",
|
||||
Secondary => "toolkit-button toolkit-button__secondary",
|
||||
Primary => "toolkit-button__primary",
|
||||
PrimaryOutline => "toolkit-button__primary-outline",
|
||||
PrimaryLink => "toolkit-button__primary-link",
|
||||
Secondary => "toolkit-button__secondary",
|
||||
Outline => "toolkit-button__outline",
|
||||
Link => "toolkit-button__link",
|
||||
};
|
||||
|
||||
classes.push(static_classes.to_owned());
|
||||
|
|
|
@ -82,11 +82,15 @@ impl FileInput {
|
|||
|
||||
let mut classes = self.classes.clone();
|
||||
|
||||
classes.push("toolkit-file".to_owned());
|
||||
|
||||
let static_classes = match self.kind {
|
||||
Primary => "toolkit-file toolkit-file__primary",
|
||||
PrimaryOutline => "toolkit-file toolkit-file__primary-outline",
|
||||
Outline => "toolkit-file toolkit-file__outline",
|
||||
Secondary => "toolkit-file toolkit-file__secondary",
|
||||
Primary => "toolkit-file__primary",
|
||||
PrimaryOutline => "toolkit-file__primary-outline",
|
||||
PrimaryLink => "toolkit-file__link",
|
||||
Secondary => "toolkit-file__secondary",
|
||||
Outline => "toolkit-file__outline",
|
||||
Link => "toolkit-file__link",
|
||||
};
|
||||
|
||||
classes.push(static_classes.to_owned());
|
||||
|
|
|
@ -1,11 +1,19 @@
|
|||
use crate::image::Image;
|
||||
use std::rc::Rc;
|
||||
|
||||
#[derive(Clone, Copy, Debug)]
|
||||
pub enum Size {
|
||||
Normal,
|
||||
Small,
|
||||
Tiny,
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct Icon {
|
||||
pub(crate) href: String,
|
||||
pub(crate) small: bool,
|
||||
pub(crate) dark: bool,
|
||||
classes: Vec<String>,
|
||||
size: Size,
|
||||
image: Option<Rc<dyn Image>>,
|
||||
}
|
||||
|
||||
|
@ -13,7 +21,8 @@ impl Icon {
|
|||
pub fn new(href: String) -> Self {
|
||||
Icon {
|
||||
href,
|
||||
small: false,
|
||||
size: Size::Normal,
|
||||
classes: vec![],
|
||||
dark: false,
|
||||
image: None,
|
||||
}
|
||||
|
@ -29,8 +38,13 @@ impl Icon {
|
|||
self
|
||||
}
|
||||
|
||||
pub fn small(mut self, small: bool) -> Self {
|
||||
self.small = small;
|
||||
pub fn size(mut self, size: Size) -> Self {
|
||||
self.size = size;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn class(mut self, class: &str) -> Self {
|
||||
self.classes.push(class.to_owned());
|
||||
self
|
||||
}
|
||||
|
||||
|
@ -39,10 +53,14 @@ impl Icon {
|
|||
}
|
||||
|
||||
pub(crate) fn class_string(&self) -> String {
|
||||
let mut classes = vec!["toolkit-icon--link".to_owned()];
|
||||
let mut classes = self.classes.clone();
|
||||
|
||||
if self.small {
|
||||
classes.push("toolkit-icon--link__small".to_owned());
|
||||
classes.push("toolkit-icon--link".to_owned());
|
||||
|
||||
match self.size {
|
||||
Size::Normal => (),
|
||||
Size::Small => classes.push("toolkit-icon--link__small".to_owned()),
|
||||
Size::Tiny => classes.push("toolkit-icon--link__tiny".to_owned()),
|
||||
}
|
||||
|
||||
if self.dark {
|
||||
|
|
|
@ -20,7 +20,7 @@ pub use self::{
|
|||
button::{Button, ButtonKind, LinkKind},
|
||||
card::Card,
|
||||
file_input::FileInput,
|
||||
icon::Icon,
|
||||
icon::{Icon, Size},
|
||||
image::Image,
|
||||
input::{Input, InputKind},
|
||||
link::Link,
|
||||
|
|
Loading…
Reference in a new issue