diff --git a/toolkit/scss/toolkit.scss b/toolkit/scss/toolkit.scss index 7411350..4bfbc67 100644 --- a/toolkit/scss/toolkit.scss +++ b/toolkit/scss/toolkit.scss @@ -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; + } } } diff --git a/toolkit/src/button.rs b/toolkit/src/button.rs index 64161e1..1d9c1fd 100644 --- a/toolkit/src/button.rs +++ b/toolkit/src/button.rs @@ -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()); diff --git a/toolkit/src/file_input.rs b/toolkit/src/file_input.rs index 11deb72..6e6eda1 100644 --- a/toolkit/src/file_input.rs +++ b/toolkit/src/file_input.rs @@ -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()); diff --git a/toolkit/src/icon.rs b/toolkit/src/icon.rs index 8dc816d..6a2badd 100644 --- a/toolkit/src/icon.rs +++ b/toolkit/src/icon.rs @@ -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, + size: Size, image: Option>, } @@ -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 { diff --git a/toolkit/src/lib.rs b/toolkit/src/lib.rs index 4b26403..5e4a90e 100644 --- a/toolkit/src/lib.rs +++ b/toolkit/src/lib.rs @@ -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,