CSS Built-Ins

CSS Properties.
CSS Classes (Catalog).
Effects.
Themes.

Core Modules

CSS Class

class epyk.core.css.styles.GrpCls.ClassPage(component: Optional[HtmlModel] = None, page: Optional[PageModel] = None)

property add_classes: Catalog: Property to get access to the catalog of CSS classes to be added to the HTML class tag component.

contenteditable() → CssPageContentEditable

Set the border color of the editable content according to the selected theme.

Related Pages:

https://www.w3schools.com/howto/howto_css_contenteditable_border.asp

property css: Body: Property to the underlying CSS definition to be added to the style HTML tag of a component.

property css_class: CatalogDiv

The internal class used to put a custom Style to this object.

Only 1 CSS class can be added to an HTML object.

custom_class(css_attrs: dict, classname: Optional[str] = None, selector: Optional[str] = None, is_class: bool = True, important: bool = False) → dict

This will create dynamic CSS class which will not be added to any component.

The class definition can then be reused in multiple components. The CSS style of the body can only be done using predefined classes or inline CSS.

TODO: Enable the important for nested css_attrs.

Usage:

page.body.style.custom_class(css_attrs={"_attrs": {"fill": 'red'}}, classname='nvd3.nv-pie .nv-pie-title')

Parameters:

css_attrs – Nested dictionary with the different attributes
classname – Optional. The classname in the CSS definition
selector – Optional. The class selector (if it is not a classname using . but a strict definition)
is_class – Optional. Automatically transform the name to a CSS class definition by adding a dot
important – Optional. Specify if the style is important

property defaults: The Default CSS Attributes in the framework.

property define_classes: Catalog

Property to get access to the catalog of CSS classes to be loaded in the page.

Those classes will not be automatically added to any HTML tag and they need to be added manually.

fit_screen_height(margin_size: Optional[int] = None)

Parameters:: margin_size – Optional.

get_classes(): Returns the list of Internal and bespoke classes to be added to the class HTML table on the component.

get_classes_css(): Attach the predefined styles for the scrollbar and selection then return all the classes.

property globals: GlobalStyle

Reference for all the global setting in the page.

This should be changed in order to be the proxy to the Default CSS settings in the framework. Changing this should only impact the report default settings.

TODO: Extend to more than the font

property moz_selection: CssWebkitMozSelection

Selection predefined style (background color based on the selected theme).

Related Pages:

https://www.w3schools.com/howto/howto_css_text_selection.asp

property scrollbar_webkit: CssWebkitScrollbar: Scrollbars predefined styles.

property scrollbar_webkit_thumb: CssWebkitScrollbarThumb: Scrollbars predefined styles.

property scrollbar_webkit_track: Scrollbars predefined styles.

property selection: CssWebkitSelection

Selection predefined style (background color based on the selected theme).

Related Pages:

https://www.w3schools.com/howto/howto_css_text_selection.asp

CSS Style

class epyk.core.css.styles.classes.CssStyle.Style(page: PageModel, css_ovrs: Optional[dict] = None, selector_ovrs: Optional[dict] = None, html_id: Optional[str] = None, component: Optional[HtmlModel] = None)

property active: Data

Selects the active link.

Related Pages:

https://www.w3schools.com/cssref/sel_active.asp

property after: Data

Insert something after the content of each <p> element.

Related Pages:

https://www.w3schools.com/cssref/sel_after.asp

animation(name=None, attrs=None, duration=2, delay=None, iteration='infinite', timing_fnc=None, effect=None, fill_mode=None)

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS classes to another.

Usage:

page.ui.button("Ok").style.css_class.animation('test', {
  "from": {"border-color": "white"},
  "to": {"border-color": "red"},
})

Related Pages:

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp https://www.w3schools.com/css/css3_animations.asp

Parameters:

effect – Effect Class.
name – String. Required. Defines the name of the animation.
attrs – String. Required. Percentage of the animation duration.
duration –
delay –
iteration –
timing_fnc –
fill_mode – String Specify the fill mode (whether the style should go back to its original position or

something else etc…

property before: Data

Insert something before the content of each <p> element.

Related Pages:

https://www.w3schools.com/cssref/sel_before.asp

property checked: Data

Selects every checked <input> element.

Related Pages:

https://www.w3schools.com/cssref/sel_checked.asp

css(key: Union[str, dict], value: Optional[str] = None, important: bool = False, change: bool = True)

Add a CSS attribute to a class.

Parameters:

key (Union[str, dict]) – The CSS attribute.
value (str) – Optional. The CSS value.
important (bool) – Optional. The level of priority for this attribute.
change (bool) – Optional. A flag to specify the state of the CSS class.

customize(): Define for child classes to define some CSS attributes. This parent class is just there to define the structure of all the child ones, it is not used directly.

property disabled: Data

Selects every disabled <input> element.

Related Pages:

https://www.w3schools.com/cssref/sel_disabled.asp

property empty: Data

Selects every <p> element that has no children (including text nodes).

Related Pages:

https://www.w3schools.com/cssref/sel_empty.asp

property enabled: Data

Selects every enabled <input> element.

Related Pages:

https://www.w3schools.com/cssref/sel_enabled.asp

property focus: Data

Selects the input element which has focus.

Related Pages:

https://www.w3schools.com/cssref/sel_focus.asp

get_ref() → str: Get the style class reference.

property has_changed: bool

Set an internal flag to specify if the class has changed from the creation in the framework.

If the state of the class has changed, the class will not be generic anymore so it will change the CSS class reference by adding the Component id in order to make it specific.

This is a trick in order to be able to change common CSS classes for a specific component without impacting the other ones in the page.

property hover: Data

Selects links on mouse over.

Related Pages:

https://www.w3schools.com/cssref/sel_hover.asp

property invalid: Data

Selects all input elements with an invalid value.

Related Pages:

https://www.w3schools.com/cssref/sel_invalid.asp

keyframes(name: str, attrs: dict, effects=None, change: bool = True)

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

Usage:

page.style.keyframes("test", {
  "50%": {"transform": "scale(1.5, 1.5)", "opacity": 0},
  "99%": {"transform": "scale(0.001, 0.001)", "opacity": 0},
  "100%": {"transform": "scale(0.001, 0.001)", "opacity": 1},
})

Related Pages:

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Parameters:

effects – Effect Class.
name (str) – Defines the name of the animation.
attrs (dict) – Percentage of the animation duration.
change (bool) – Optional. A flag to specify the state of the CSS class.

media(attrs: dict, rule=None, media_type=None, media_feature=None, change=True, this_class=False)

The @media is used in media queries to apply different styles for different media types/devices.

Usage:

page.style.media({"body": {"background-color": "lightblue"}}, "only", "screen",
  {'and': [{'height': '100px'}, {'min-width': '600px'}]})

The first key of the attributes can be an Epyk html object.

Related Pages:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Parameters:

attrs (dict) – Percentage of the animation duration.
rule – String. Optional. not or only or and see documentation for more info.
media_type – String. Optional. the media to which the rule will need to be applied.
media_feature – String. Optional. Media features provide more specific details to media queries.
change – Boolean. Optional. A flag to specify the state of the CSS class.
this_class – Boolean. Optional. Specify if this should be applied to this class only.

transition(attribute: str, duration: int = 2, delay: Optional[int] = None, iteration=None, timing_fnc: Optional[str] = None)

Parameters:

attribute (str) –
duration (int) – Optional. The duration of the transition effect.
delay (int) – Optional. The time delay before starting the transition.
iteration (int) – Optional. The count of iteration.
timing_fnc (str) – Optional. The timing function from (“ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out”).

property valid: Data

Selects all input elements with a valid value.

Related Pages:

https://www.w3schools.com/cssref/sel_valid.asp

property visited: Data

Selects all visited links.

Related Pages:

https://www.w3schools.com/cssref/sel_visited.asp

property webkit_slider_thumb: Data

Colors

class epyk.core.css.Colors.HexColors