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