Struct khalas::css::style::Style

pub struct Style {
    pub opacity: Option<Opacity>,
    pub gap: Option<Gap>,
    pub flex_wrap: Option<Wrap>,
    pub flex_basis: Option<Basis>,
    pub flex_direction: Option<Direction>,
    pub order: Option<Order>,
    pub flex_grow: Option<Grow>,
    pub flex_shrink: Option<Shrink>,
    pub justify_content: Option<JustifyContent>,
    pub align_content: Option<AlignContent>,
    pub align_items: Option<AlignItems>,
    pub justify_self: Option<JustifySelf>,
    pub align_self: Option<AlignSelf>,
    pub display: Option<Display>,
    pub visibility: Option<Visibility>,
    pub cursor: Option<Cursor>,
    pub background: Option<Background>,
    pub border: Option<Border>,
    pub margin: Option<Margin>,
    pub padding: Option<Padding>,
    pub size: Option<Size>,
    pub transition: Option<Transition>,
    pub position: Option<Position>,
    pub text: Option<Text>,
    pub others: StyleMap,
}

This is the main struct used to build and manipulate css properties, it provieds many methods to do that.

use khalas::css::{Style, Color, unit::{ms, px}, St};

let mut style = Style::default();
style
    .transition(|conf| {
        conf
            .add("opacity", |conf| conf.duration(ms(150.)).ease())
            .add("transform", |conf| conf.duration(ms(150.)).ease())
            .add("visibility", |conf| conf.duration(ms(150.)).ease())
    })
    .position(|conf| conf.absolute())
    .background(|conf| conf.color(Color::white))
    .border(|conf| {
        conf.none()
            .width(px(0.))
            .radius(px(4.))
    })
    .add(St::BoxShadow, "0 2px 8px rgba(0, 35, 11, 0.15)")
    .padding(|conf| conf.x(px(4.)).y(px(2)))
    .margin(|conf| conf.top(px(popover.offset)))
    .config_block(|conf| {
        if popover.is_visible() {
            conf.opacity(1.).visibility(val::Visible)
        } else {
            conf.visibility(val::Hidden).opacity(0.)
        }
    });

div![
    style,
    ...
]

Fields

opacity: Option<Opacity>

gap: Option<Gap>

flex_wrap: Option<Wrap>

flex_basis: Option<Basis>

flex_direction: Option<Direction>

order: Option<Order>

flex_grow: Option<Grow>

flex_shrink: Option<Shrink>

justify_content: Option<JustifyContent>

align_content: Option<AlignContent>

align_items: Option<AlignItems>

justify_self: Option<JustifySelf>

align_self: Option<AlignSelf>

display: Option<Display>

visibility: Option<Visibility>

This method accept any type implemente Into<Visibility>, so we can pass Visible, Hidden, Collapse, Initial, Inherit

use khalas::css::{values as val, Style};

div![
    Style::default()
        .visibility(val::Hidden)
]

cursor: Option<Cursor>

background: Option<Background>

border: Option<Border>

margin: Option<Margin>

padding: Option<Padding>

size: Option<Size>

transition: Option<Transition>

position: Option<Position>

text: Option<Text>

others: StyleMap

Methods

impl Style

pub fn opacity(&mut self, value: impl Into<Opacity>) -> &mut Self

style.opacity(0.75);

pub fn try_opacity(&mut self, value: Option<impl Into<Opacity>>) -> &mut Self

style.try_opacity(Some(0.75));

pub fn unset_opacity(&mut self) -> &mut Self

Set None to self.opacity

pub fn gap(&mut self, value: impl Into<Gap>) -> &mut Self

use khalas::css::unit::{px, em};

style.gap(px(2.))
     // this can take percent value too (.e.g 40%).
     .gap(0.4)
     // and can take row and column each with different value
     .gap((em(4.), em(8.)))

pub fn try_gap(&mut self, value: Option<impl Into<Gap>>) -> &mut Self

fn calc_gap() -> Option<Gap> { .. }

style.try_gap(calc_gap());

pub fn unset_gap(&mut self) -> &mut Self

Set None to self.gap

pub fn flex_wrap(&mut self, value: impl Into<Wrap>) -> &mut Self

This method accept Wrap, Nowrap and WrapReverse.

use khalas::css::values as val;

style.flex_wrap(val::Wrap);

pub fn try_flex_wrap(&mut self, value: Option<impl Into<Wrap>>) -> &mut Self

fn get_wrap() -> Option<Wrap> { .. }

style.try_flex_wrap(get_wrap());

pub fn unset_flex_wrap(&mut self) -> &mut Self

Set None to self.flex_wrap

pub fn flex_basis(&mut self, value: impl Into<Basis>) -> &mut Self

use khalas::css::{values as val, unit::{px, em}};

style
    // pass auto
    .flex_basis(val::Auto)
    // or 4px
    .flex_basis(px(4.))
    // or 80%
    .flex_basis(0.8); // not that f32 get converted to unit::Percent type

pub fn try_flex_basis(&mut self, value: Option<impl Into<Basis>>) -> &mut Self

fn get_basis() -> Option<Basis> { .. }

style.try_flex_basis(get_basis());

pub fn unset_flex_basis(&mut self) -> &mut Self

Set None to self.flex_basis

pub fn flex_direction(&mut self, value: impl Into<Direction>) -> &mut Self

This method accept Row, RowReverse, Column and ColumnReverse.

use khalas::css::values as val;

style.flex_direction(val::Column);

pub fn try_flex_direction(
    &mut self,
    value: Option<impl Into<Direction>>
) -> &mut Self

fn get_direction() -> Option<Direction> { .. }

style.try_flex_direction(get_direction());

pub fn unset_flex_direction(&mut self) -> &mut Self

Set None to self.flex_direction

pub fn order(&mut self, value: impl Into<Order>) -> &mut Self

style.order(3);

pub fn try_order(&mut self, value: Option<impl Into<Order>>) -> &mut Self

fn get_order() -> Option<Order> { .. }

style.try_order(get_order());

pub fn unset_order(&mut self) -> &mut Self

Set None to self.order

pub fn flex_grow(&mut self, value: impl Into<Grow>) -> &mut Self

style.flex_grow(2.0);

pub fn try_flex_grow(&mut self, value: Option<impl Into<Grow>>) -> &mut Self

fn get_grow() -> Option<Order> { .. }

style.try_flex_grow(get_grow());

pub fn unset_flex_grow(&mut self) -> &mut Self

Set None to self.flex_grow

pub fn flex_shrink(&mut self, value: impl Into<Shrink>) -> &mut Self

style.flex_shrink(4.0);

pub fn try_flex_shrink(&mut self, value: Option<impl Into<Shrink>>) -> &mut Self

fn get_shrink() -> Option<Shrink> { .. }

style.try_flex_shrink(get_shrink());

pub fn unset_flex_shrink(&mut self) -> &mut Self

Set None to self.flex_shrink

pub fn justify_content(&mut self, value: impl Into<JustifyContent>) -> &mut Self

use khalas::css::values as val;

style.justify_content(val::Center)

pub fn try_justify_content(
    &mut self,
    value: Option<impl Into<JustifyContent>>
) -> &mut Self

fn get_justify_content() -> Option<JustifyContent> { .. }

style.try_justify_content(get_justify_content());

pub fn unset_justify_content(&mut self) -> &mut Self

Set None to self.justify_content

pub fn align_content(&mut self, value: impl Into<AlignContent>) -> &mut Self

use khalas::css::values as val;

style.align_content(val::Stretch)

pub fn try_align_content(
    &mut self,
    value: Option<impl Into<AlignContent>>
) -> &mut Self

fn get_align_content() -> Option<AlignContent> { .. }

style.try_align_content(get_align_content());

pub fn unset_align_content(&mut self) -> &mut Self

Set None to self.align_content

pub fn align_items(&mut self, value: impl Into<AlignItems>) -> &mut Self

use khalas::css::values as val;

style.align_items(val::Stretch);

pub fn try_align_items(
    &mut self,
    value: Option<impl Into<AlignItems>>
) -> &mut Self

fn get_align_items() -> Option<AlignItems> { .. }

style.try_align_items(get_align_items());

pub fn unset_align_items(&mut self) -> &mut Self

Set None to self.align_items

pub fn justify_self(&mut self, value: impl Into<JustifySelf>) -> &mut Self

use khalas::css::values as val;

style.justify_self(val::Stretch);

pub fn try_justify_self(
    &mut self,
    value: Option<impl Into<JustifySelf>>
) -> &mut Self

fn get_justify_self() -> Option<JustifySelf> { .. }

style.try_justify_self(get_justify_self());

pub fn unset_justify_self(&mut self) -> &mut Self

Set None to self.justify_self

pub fn align_self(&mut self, value: impl Into<AlignSelf>) -> &mut Self

use khalas::css::values as val;

style.align_self(val::Stretch);

pub fn try_align_self(
    &mut self,
    value: Option<impl Into<AlignSelf>>
) -> &mut Self

fn get_align_self() -> Option<AlignSelf> { .. }

style.try_align_self(get_align_self());

pub fn unset_align_self(&mut self) -> &mut Self

Set None to self.align_self

pub fn display(&mut self, value: impl Into<Display>) -> &mut Self

use khalas::css::values as val;

style.display(val::Flex);

pub fn try_display(&mut self, value: Option<impl Into<Display>>) -> &mut Self

fn get_display() -> Option<css::Display> { .. }

style.try_display(get_display());

pub fn unset_display(&mut self) -> &mut Self

Set None to self.display

pub fn visibility(&mut self, value: impl Into<Visibility>) -> &mut Self

use khalas::css::values as val;

style.visibility(val::Hidden);

pub fn try_visibility(
    &mut self,
    value: Option<impl Into<Visibility>>
) -> &mut Self

fn get_visibility() -> Option<Visibility> { .. }

style.try_visibility(get_visibility());

pub fn unset_visibility(&mut self) -> &mut Self

Set None to self.visibility

pub fn cursor(&mut self, value: impl Into<Cursor>) -> &mut Self

use khalas::css::values as val;

style.cursor(val::Progress);

pub fn try_cursor(&mut self, value: Option<impl Into<Cursor>>) -> &mut Self

fn get_cursor() -> Option<Cursor> { .. }

style.try_cursor(get_cursor());

pub fn unset_cursor(&mut self) -> &mut Self

Set None to self.cursor

pub fn and_background(
    &mut self,
    set_value: impl Fn(&mut Background) -> &mut Background
) -> &mut Self where
    Background: Default, 

background properties can be add and configured using this method

style.and_background(|conf| {
        conf.image("/bg/fullpage.png")
            .scroll()
    });

pub fn background(&mut self, value: impl Into<Background>) -> &mut Self

fn get_background() -> Background { .. }

style.background(get_background());

pub fn unset_background(&mut self) -> &mut Self

Set None to self.background

pub fn and_border(
    &mut self,
    set_value: impl Fn(&mut Border) -> &mut Border
) -> &mut Self where
    Border: Default, 

border properties can be add and configured using this method

use khalas::css::{values as val, unit::px, Color};

style
    .and_border(|conf| {
        conf.solid() // or .style(val::Solid)
            .width(px(2.))
            .color(Color::DimGray)
            .radius(px(4.))
    });

pub fn border(&mut self, value: impl Into<Border>) -> &mut Self

fn get_border() -> Border { .. }

style.border(get_border());

pub fn unset_border(&mut self) -> &mut Self

Set None to self.border

pub fn and_margin(
    &mut self,
    set_value: impl Fn(&mut Margin) -> &mut Margin
) -> &mut Self where
    Margin: Default, 

margin properties can be add and manipulated using this method

use khalas::css::{values as val, unit::px};

style
    .and_margin(|conf| {
        conf.x(val::Auto)
            .y(px(4.))
    })
]

pub fn margin(&mut self, value: impl Into<Margin>) -> &mut Self

fn get_margin() -> Margin { .. }

style.margin(get_margin());

pub fn unset_margin(&mut self) -> &mut Self

Set None to self.margin

pub fn and_padding(
    &mut self,
    set_value: impl Fn(&mut Padding) -> &mut Padding
) -> &mut Self where
    Padding: Default, 

padding properties can be add and configured using this method

use khalas::css::{values as val, unit::px};

style
    .and_padding(|conf| {
        conf.x(val::Auto)
            .y(px(4.))
    });

pub fn padding(&mut self, value: impl Into<Padding>) -> &mut Self

fn get_padding() -> Padding { .. }

style.padding(get_padding());

pub fn unset_padding(&mut self) -> &mut Self

Set None to self.padding

pub fn and_size(
    &mut self,
    set_value: impl Fn(&mut Size) -> &mut Size
) -> &mut Self where
    Size: Default, 

size properties can be add and configured using this method

use khalas::css::{values as val, unit::em};

style
    .and_size(|conf| {
        conf.width(em(2.))
            .height(em(1.5))
            .min_width(em(1.5))
            .min_height(em(1.))
            .max_width(em(4.))
            .max_height(em(3.))
    });

pub fn size(&mut self, value: impl Into<Size>) -> &mut Self

fn get_size() -> Size { .. }

style.size(get_size());

pub fn unset_size(&mut self) -> &mut Self

Set None to self.size

pub fn and_transition(
    &mut self,
    set_value: impl Fn(&mut Transition) -> &mut Transition
) -> &mut Self where
    Transition: Default, 

transition properties can be add and configured using this method

use khalas::css::{values as val, unit::{sec, ms}};

style
    .and_transition(|conf| {
        conf
            // transition for all properties
            .all(|conf| {
                conf.duration(sec(0.3))
                    .cubic_bezier(0.645, 0.045, 0.355, 1.)
            })
            // or transition for specific properties opacity only
            .add("opacity", |conf| {
                conf.duration(ms(150.))
                    .ease()
                    .delay(sec(0.5))
            })
        });

pub fn transition(&mut self, value: impl Into<Transition>) -> &mut Self

fn get_transition() -> Transition { .. }

style.transition(get_transition());

pub fn unset_transition(&mut self) -> &mut Self

Set None to self.transition

pub fn and_position(
    &mut self,
    set_value: impl Fn(&mut Position) -> &mut Position
) -> &mut Self where
    Position: Default, 

position properties can be add and configured using this method

use khalas::css::unit::px;

style
    .and_position(|conf| {
        conf.absolute().top(px(top)).left(px(left))
    })

pub fn position(&mut self, value: impl Into<Position>) -> &mut Self

fn get_position() -> Position { .. }

style.position(get_position());

pub fn unset_position(&mut self) -> &mut Self

Set None to self.position

pub fn and_text(
    &mut self,
    set_value: impl Fn(&mut Text) -> &mut Text
) -> &mut Self where
    Text: Default, 

text properties can be add and configured using this method

use khalas::css::{values as val, Color, unit::em};
use palette::Rgb;

style
    .and_text(|conf| {
        conf.line_height(1.7)
            // we can pass Rgb, Rgba, Hsl, Hsla
            .color(Rgb::new(0.5, 0.1, 0.1))
            // or we can use html colors
            .color(color::BlueViolet)
            .align(val::Center)
            .transform(val::Capitalize)
            .indent(em(2.))
    })

pub fn text(&mut self, value: impl Into<Text>) -> &mut Self

fn get_text() -> Text { .. }

style.text(get_text());

pub fn unset_text(&mut self) -> &mut Self

Set None to self.text

pub fn and_others(
    &mut self,
    set_value: impl Fn(&mut StyleMap) -> &mut StyleMap
) -> &mut Self

Here goes other css properties those doesn't have their own method (.e.g custom css properties), css values are stored as String, so you won't get typed values like the ones that have it's own methods.

use khalas::css::{values as val, Color, unit::em};

fn get_color() -> Option<Color> { .. }

style
    .and_others(|conf| {
        conf.try_add(St::from("--box-bg-color"), get_color())
            .add(St::BoxShadow, "0 2px 0 rgba(0, 0, 0, 0.015)")
            .add(St::from("--container-gap"), em(2.))
    })

impl Style

pub fn new() -> Self

pub fn config_block(
    &mut self,
    block: impl FnOnce(&mut Self) -> &mut Self
) -> &mut Self

This method accept closure that configure the style

use khalas::css::{values as val, Style};

style.config_block(|conf| {
    if popover.is_visible() {
        conf.opacity(1.).visibility(val::Visible)
    } else {
        conf.visibility(val::Hidden).opacity(0.)
    }
});

pub fn to_css(&self) -> Option<String>

This method convert this style to html style value

pub fn to_seed_style(&self) -> Option<Style>

this method convert this style to seed Style

pub fn add(&mut self, key: impl Into<St>, value: impl ToString) -> &mut Self

Shortcut for self.others.add()

pub fn try_add(
    &mut self,
    key: impl Into<St>,
    value: Option<impl ToString>
) -> &mut Self

Shortcut for self.others.try_add()

pub fn merge(&mut self, others: &impl ToStyleMap) -> &mut Self

Shortcut for self.others.merge()

pub fn try_merge(&mut self, others: Option<&impl ToStyleMap>) -> &mut Self

Shortcut for self.others.try_merge()

Trait Implementations

impl Clone for Style

fn clone(&self) -> Style

Returns a copy of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for Style

fn fmt(&self, f: &mut Formatter) -> Result

Formats the value using the given formatter.

impl Default for Style

fn default() -> Style

Returns the "default value" for a type.

impl ToStyleMap for Style

fn style_map(&self) -> StyleMap

impl<Msg> UpdateEl<El<Msg>> for Style

fn update(self, el: &mut El<Msg>)