diff --git a/bin/assets/layouts/test.css b/bin/assets/layouts/test.css index 00bf9257f..58e89d675 100644 --- a/bin/assets/layouts/test.css +++ b/bin/assets/layouts/test.css @@ -22,14 +22,14 @@ TabWidget { tab-separation: -1dp; line-below-tabs: true; line-below-tabs-color: #2f3030; - line-below-tabs-y-offset: 0dp; + line-below-tabs-y-offset: -1dp; } ProgressBar { display-percent: true; vertical-expand: true; - filler-padding: 2dp; movement-speed: 32 0; + padding: 2dp; } WinMenu { diff --git a/bin/assets/ui/uitheme.css b/bin/assets/ui/uitheme.css index 3df74b0c1..f8bda7c9f 100644 --- a/bin/assets/ui/uitheme.css +++ b/bin/assets/ui/uitheme.css @@ -10,14 +10,14 @@ TabWidget { tab-separation: -1dp; line-below-tabs: true; line-below-tabs-color: #2f3030; - line-below-tabs-y-offset: 0dp; + line-below-tabs-y-offset: -1dp; } ProgressBar { display-percent: true; vertical-expand: true; - filler-padding: 2dp; movement-speed: 32 0; + padding: 2dp; } WinMenu { diff --git a/docs/articles/cssspecification.md b/docs/articles/cssspecification.md index dc1fa6e3c..55f8cccd4 100644 --- a/docs/articles/cssspecification.md +++ b/docs/articles/cssspecification.md @@ -6,21 +6,30 @@ This document is a work in progress. You'll find that many features are currentl ## Introduction -eepp CSS custom implementation is heavily based on the official [CSS standard](https://www.w3.org/TR/CSS/#css). This document will try to explain the shared features and the current differences with the -CSS specification. Since CSS is widely used and documented, every feature that it's shared with the CSS standard will be directly linked to the Mozilla CSS documentation. If you are totally new to CSS please go the -[Mozilla CSS portal](https://developer.mozilla.org/en-US/docs/Web/CSS). +eepp CSS custom implementation is heavily based on the official [CSS standard](https://www.w3.org/TR/CSS/#css). +This document will try to explain the shared features and the current differences with the CSS +specification. Since CSS is widely used and documented, every feature that it's shared with the CSS +standard will be directly linked to the Mozilla CSS documentation. If you are totally new to CSS +please go the [Mozilla CSS portal](https://developer.mozilla.org/en-US/docs/Web/CSS). ## Relevant differences with CSS standard -* Layout properties are not supported (display, float, etc), since eepp layout system differs from the HTML+CSS specification (design decision). +* Layout properties are not supported (display, float, etc), since eepp layout system differs from +the HTML+CSS specification (design decision). -* [inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/Inheritance) is not supported, except for [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (design decision). +* [inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/Inheritance) is not supported, +except for [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) +(design decision). -* [Attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) is not supported (probably will not be supported in the near future, since collides with some implementation decisions). +* [Attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) +is not supported (probably will not be supported in the near future, since collides with some +implementation decisions). -* CSS relative paths start from the process current working directory instead the relative path from the CSS file. +* CSS relative paths start from the process current working directory instead the relative path from +the CSS file. -* eepp CSS supports alternative path methods besides paths (resource locator to previously loaded resources by the process). +* eepp CSS supports alternative path methods besides paths (resource locator to previously loaded +resources by the process). * eepp CSS supports [Device-independent pixel](https://en.wikipedia.org/wiki/Device-independent_pixel) unit `dp`. @@ -37,31 +46,42 @@ CSS selectors define the elements to which a set of CSS rules apply. #### Universal Selector -[Universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. +[Universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) +selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: `* ns|* *|*` Example: `*` will match all the elements of the document. +--- + #### Type Selector -[Type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) selects all elements that have the given node name. +[Type selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) selects all +elements that have the given node name. Syntax: `elementname` Example: `widget` will match any `` element. +--- + #### Class Selector -[Class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) selects all elements that have the given class attribute. +[Class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) selects all +elements that have the given class attribute. Syntax: `.classname` Example: `.index` will match any element that has a class of "index". +--- + #### ID Selector -[ID selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. +[ID selector](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) selects an element +based on the value of its id attribute. There should be only one element with a given ID in a +document. Syntax: `#idname` @@ -73,7 +93,8 @@ Example: `#toc` will match the element that has the ID "toc". #### Selector List -The [selector list](https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list) `,` is a grouping method, it selects all the matching nodes. +The [selector list](https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list) `,` is a +grouping method, it selects all the matching nodes. Syntax: `A, B` @@ -85,31 +106,40 @@ Example: `widget, image` will match both `` and `` elements. #### Descendant combinator -The [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) " " (space) combinator selects nodes that are descendants of the first element. +The [descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) +" " (space) combinator selects nodes that are descendants of the first element. Syntax: `A B` -Example: `LinearLayout image` will match all `` elements that are inside a `` element. +Example: `LinearLayout image` will match all `` elements that are inside a `` +element. #### Child combinator -The [child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) `>` selects nodes that are direct children of the first element. +The [child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) `>` +selects nodes that are direct children of the first element. Syntax: `A > B` -Example: `LinearLayout > listbox` will match all `` elements that are nested directly inside a `` element. +Example: `LinearLayout > listbox` will match all `` elements that are nested directly +inside a `` element. #### General sibling combinator -The [general sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) `~` selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. +The [general sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) +`~` selects siblings. This means that the second element follows the first (though not necessarily +immediately), and both share the same parent. Syntax: `A ~ B` -Example: `TextView ~ image` will match all `` elements that follow a ``, immediately or not. +Example: `TextView ~ image` will match all `` elements that follow a ``, +immediately or not. #### Adjacent sibling combinator -The [adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) `+` selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent. +The [adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) +`+` selects adjacent siblings. This means that the second element directly follows the first, and +both share the same parent. Syntax: `A + B` @@ -119,317 +149,82 @@ Example: `TextView + image` will match all `` elements that directly foll ## CSS Properties -eepp CSS properties can be categorized in two big groups: CSS standard properties and eepp CSS properties. +eepp CSS properties can be categorized in two big groups: CSS standard properties and eepp CSS +properties. -### Standard Properties +**Definitions**: -Properties directly linked to the Mozilla docs are fully supported, otherwise a clarification will appear. +* Property names are *case insensitive*. +* Some properties have aliases. +* All property names that contain dashes (`-`), have aliases without those dashes. + * For example: `animation-delay` also is `animationDelay`. + * Other aliases will be clarified in the properties documentation. +* All properties can be used as attributes of the XML node. + * XML attributes are treated as inline CSS styling. + * For example: + * Something like: + * `LinearLayout { layout-width: match_parent; layout_height: match_parent; orientation: vertical; }` + * is similar to (but not equivalent, since specificity of inline CSS is higher): + * `` +* CSS standard properties directly linked to the Mozilla docs are fully supported, otherwise a clarification will appear. +* _Applicable to_ will link to the EE::UI::UIWidget that can use that property, and betweeen parenthesis is the CSS element name. -#### animation-delay +--- + +### animation-delay Read [animation-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay) docs. --- -#### animation-direction +### animation-direction Read [animation-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) documenation. --- -#### animation-duration +### animation-duration Read [animation-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) documenation. --- -#### animation-fill-mode +### animation-fill-mode Read [animation-fill-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) documentation. --- -#### animation-iteration-count +### animation-iteration-count Read [animation-iteration-count](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) documentation. --- -#### animation-name +### animation-name Read [animation-name](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name) documentation. -#### animation-play-state +### animation-play-state Read [animation-play-state](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state) documentation. --- -#### animation-timing-function +### animation-timing-function Read [animation-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) documentation. -Timing function names are custom, and not the same as the standard, but `cubic-bezier` will be added soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none. +Timing function names are custom, and not the same as the standard, but `cubic-bezier` will be added +soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, +sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, +quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, +cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, +elastic-out, elastic-in-out, none. --- -#### background-color - -Read [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) documentation. - ---- - -#### background-image - -Read [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) documentation. - ---- - -#### background-position-x - -Read [background-position-x](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x) documentation. - ---- - -#### background-position-y - -Read [background-position-y](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y) documentation. - ---- - -#### backtround-repeat - -Read [background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) documentation. - ---- - -#### background-size - -Read [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) documentation. - ---- - -#### border-bottom-color - -Read [border-bottom-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) documentation. - ---- - -#### border-bottom-left-radius - -Read [border-bottom-left-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) documentation. - ---- - -#### border-bottom-right-radius - -Read [border-bottom-right-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) documentation. - ---- - -#### border-bottom-width - -Read [border-bottom-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) documentation. - ---- - -#### border-left-color - -Read [border-left-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) documentation. - ---- - -#### border-left-width - -Read [border-left-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) documentation. - ---- - -#### border-right-color - -Read [border-right-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) documentation. - ---- - -#### border-right-width - -Read [border-right-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) documentation. - ---- - -#### border-top-color - -Read [border-top-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) documentation. - ---- - -#### border-top-left-radius - -Read [border-top-left-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) documentation. - ---- - -#### border-top-right-radius - -Read [border-top-right-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) documentation. - ---- - -#### border-top-width - -Read [border-top-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) documentation. - ---- - -#### color - -Read [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) documentation. - ---- - -#### cursor - -Read [cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) documentation. - -Custom cursors not yet supported (but supported by the engine, only not implemented in the CSS side). - ---- - -#### font-family - -Read [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) documentation. - ---- - -#### font-size - -Read [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) documentation. - ---- - -#### font-style - -Read [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) documentation. - ---- - -#### margin-bottom - -Read [margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) documentation. - ---- - -#### margin-left - -Read [margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) documentation. - ---- - -#### margin-right - -Read [margin-right](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) documentation. - ---- - -#### margin-top - -Read [margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) documentation. - ---- - -#### max-height - -Read [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) documentation. - ---- - -#### max-width - -Read [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) documentation. - ---- - -#### min-height - -Read [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) documentation. - ---- - -#### min-width - -Read [min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) documentation. - ---- - -#### opacity - -Read [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) documentation. - ---- - -#### padding-bottom - -Read [padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) documentation. - ---- - -#### padding-left - -Read [padding-left](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) documentation. - ---- - -#### padding-right - -Read [padding-right](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) documentation. - ---- - -#### padding-top - -Read [padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) documentation. - ---- - -#### text-align - -Read [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) documentation. - ---- - -#### transition-delay - -Read [transition-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay) documentation. - ---- - -#### transition-duration - -Read [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) documentation. - ---- - -#### transition-property - -Read [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property) documentation. - ---- - -#### transition-timing-function - -Read [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) documentation. - -Timing function names are custom, and not the same as the standard, but `cubic-bezier` will be added soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none. - ---- - -### Custom eepp CSS properties - -_Applicable to_ will link to the EE::UI::UIWidget that can use that property, and betweeen parenthesis is the CSS element name. - ---- - -#### allow-editing +### allow-editing Enable or disable editing on input elements. @@ -439,7 +234,7 @@ Enable or disable editing on input elements. --- -#### allow-float +### allow-float On a input that only accept numbers, enables floating point numbers. @@ -449,7 +244,7 @@ On a input that only accept numbers, enables floating point numbers. --- -#### animation-speed +### animation-speed Sets the loader speed animation. @@ -459,7 +254,7 @@ Sets the loader speed animation. --- -#### arc-start-angle +### arc-start-angle The angle value where a loader progress starts rendering. @@ -469,7 +264,13 @@ The angle value where a loader progress starts rendering. --- -#### background-expand +### background-color + +Read [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) documentation. + +--- + +### background-expand Sets if the element skin background should be expanded to the element dimensions. @@ -479,7 +280,40 @@ Sets if the element skin background should be expanded to the element dimensions --- -#### blend-mode +### background-image + +Read [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) documentation. + +--- + +### background-position-x + +Read [background-position-x](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x) documentation. + +--- + +### background-position-y + +Read [background-position-y](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y) documentation. + +--- + +### backtround-repeat + +Read [background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) documentation. +`space` and `round` values are not supported yet. + +* Default value: `no-repeat` (this is different from the CSS standard) + +--- + +### background-size + +Read [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) documentation. + +--- + +### blend-mode Sets the blend mode to the widget. @@ -492,7 +326,79 @@ Sets the blend mode to the widget. * `none` * Default value: `alpha` -#### border-type +### border-bottom-color + +Read [border-bottom-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) documentation. + +--- + +### border-bottom-left-radius + +Read [border-bottom-left-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) documentation. + +--- + +### border-bottom-right-radius + +Read [border-bottom-right-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) documentation. + +--- + +### border-bottom-width + +Read [border-bottom-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) documentation. + +--- + +### border-left-color + +Read [border-left-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) documentation. + +--- + +### border-left-width + +Read [border-left-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) documentation. + +--- + +### border-right-color + +Read [border-right-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) documentation. + +--- + +### border-right-width + +Read [border-right-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) documentation. + +--- + +### border-top-color + +Read [border-top-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) documentation. + +--- + +### border-top-left-radius + +Read [border-top-left-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) documentation. + +--- + +### border-top-right-radius + +Read [border-top-right-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) documentation. + +--- + +### border-top-width + +Read [border-top-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) documentation. + +--- + +### border-type Defines where the border box is drawn. @@ -505,7 +411,7 @@ Defines where the border box is drawn. --- -#### change-page-percent +### change-page-percent Sets the percentage of scroll of a page that triggers a page change in a ViewPager. @@ -515,9 +421,10 @@ Sets the percentage of scroll of a page that triggers a page change in a ViewPag --- -#### click-step +### click-step -For any element that has a stepped value change, this sets the step variation for a click to the element. +For any element that has a stepped value change, this sets the step variation for a click to the +element. * Applicable to: EE::UI::UIScrollBar (ScrollBar), EE::UI::UISlider (Slider), EE::UI::UISpinBox (SpinBox). * Value Type: float @@ -528,7 +435,7 @@ For any element that has a stepped value change, this sets the step variation fo --- -#### clip +### clip Enables/disables clipping to the element box. @@ -538,7 +445,13 @@ Enables/disables clipping to the element box. --- -#### column-mode +### color + +Read [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) documentation. + +--- + +### column-mode Sets the column mode of a grid layout. The column mode defines how the size of the column of a grid layout is measured. @@ -552,7 +465,7 @@ The column mode defines how the size of the column of a grid layout is measured. --- -#### column-margin +### column-margin Sets the horizontal separation between each element in the grid layout. @@ -562,7 +475,7 @@ Sets the horizontal separation between each element in the grid layout. --- -#### column-weight +### column-weight Sets the percentage width of the child elements of a grid layout. `column-mode` must be `weight` in order to work. @@ -573,7 +486,7 @@ Sets the percentage width of the child elements of a grid layout. --- -#### column-width +### column-width Sets the width of the child elements of a grid layout. @@ -583,15 +496,35 @@ Sets the width of the child elements of a grid layout. --- -#### display-percent +### cursor + +Read [cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) documentation. + +Custom cursors not yet supported (but supported by the engine, only not implemented in the CSS side). --- -#### drag-resistance +### display-percent + +Enables/disables displaying the percentage of progress in the progress bar. + +* Applicable to: EE::UI::UIProgressBar (ProgressBar) +* Value Type: boolean +* Default value: `false` --- -#### enabled +### drag-resistance + +Sets the amount of drag that is needed to start dragging an element. + +* Applicable to: EE::UI::UIViewPager (ViewPager) +* Value Type: length +* Default value: `8dp` + +--- + +### enabled Sets if the element is enabled @@ -601,435 +534,791 @@ Sets if the element is enabled --- -#### fill-color +### font-family + +Read [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) documentation. --- -#### filler-padding-bottom +### font-size + +Read [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) documentation. --- -#### filler-padding-left +### font-style + +Read [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) documentation. --- -#### filler-padding-right +### fill-color + +Sets the fill color of a element. + +* Applicable to: EE::UI::UILoader (Loader) +* Value Type: color +* Default value: `white` --- -#### filler-padding-top +### flags + +Allows to set some very specific flags to the element. +Multiple flags can be set, flags are separated by `|`. + +* Applicable to: Any element. +* Value Type: string-list +* Value List: + * `autosize`: This flag allows the widget/element to resize itself to a minimum size that allows the widget to be fully visible. + * `clip`: Enables clipping of the element box. + * `multiselect`: Enables multiple selection on elements that support selection. EE::UI::UIListBox (ListBox) for the moment. + * `autopadding`: Enables the element to calculate the padding based on the skin size. + * `reportsizechangetochilds`: When enabled the element will emmit a event (`OnParentSizeChange`) to its childs reporting the size change of the parent. +* Default value: _No value_ --- -#### flags - ---- - -#### foreground-color +### foreground-color Same as [background-color](#background-color) but for the foreground. --- -#### foreground-image +### foreground-image Same as [background-image](#background-image) but for the foreground. --- -#### foreground-position-x +### foreground-position-x Same as [background-position-x](#background-position-x) but for the foreground. --- -#### foreground-position-y +### foreground-position-y Same as [background-position-y](#background-position-y) but for the foreground. --- -#### foreground-repeat +### foreground-repeat Same as [background-repeat](#background-repeat) but for the foreground. --- -#### foreground-size +### foreground-size Same as [background-size](#background-size) but for the foreground. --- -#### free-editing +### free-editing + +Allows the cursor to move freely in an input. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: boolean +* Default value: `true` + +--- + +### gravity + +Sets the horizontal and vertical align of the inner elements/contents of a widget (for example the +text on a TextView). Vertical and horizontal can be set by using `|` as a separator of each rule. + +* Applicable to: Any element. This applies at the EE::UI::UIWidget (Widget) level, the base element + of all widgets. But every widget has it's own behaviour, based on it's own content. Some may not + do anything. +* Value Type: string-list. +* Value List: + * `left` + * `right` + * `center_horizontal` + * `top` + * `bottom` + * `center_vertical` + * `center`: shorthand of `center_horizontal|center_vertical` +* Default value: Varies on each widget implementation. +* Syntax: + +```CSS +gravity: center; +gravity: left; +gravity: left|top; +gravity: center_horizontal|bottom; +``` + +--- + +### half-slider + +Defines how the slider widget should set its movement limits against the slider. +With `half-slider` enabled the button will start and end from its center (and not its border). + +* Applicable to: EE::UI::UISlider (Slider) +* Value Type: boolean +* Default value: `false` + +--- + +### hint + +Sets the hint text of an input. This is the equivalen of `placeholder` in HTML. +Usually this property will be set not in the CSS file but in the XML or by code, but it's +available as an option. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: string +* Default value: _No value_ + +--- + +### hint-color + +Sets the hint font color. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: color +* Default value: `white` + +--- + +### hint-font-family + +Sets the hint font family. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: string +* Default value: _No value_ + +--- + +### hint-font-size + +Sets the hint font size. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: length +* Default value: `12px` + +--- + +### hint-font-style + +Sets the hint font style. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: string-list +* Value List: + * `underline` + * `bold` + * `italic` + * `strikethrough` + * `shadow`: Drops a shadow to the text. +* Default value: _No value_ + +--- + +### hint-shadow-color + +Sets the hint font shadow color. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: color +* Default value: `#323232E6` + +--- + +### hint-stroke-color + +Sets the hint font stroke (the outline) color. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: color +* Default value: `black` + +--- + +### hint-stroke-width + +Sets the hint font stroke (the outline) width. + +* Applicable to: EE::UI::UITextInput (TextInput) +* Value Type: length +* Default value: `0dp` + +--- + +### hscroll-mode + +Sets the horizontal scroll mode to any scrollable element. +The mode defines the visibility of the horizontal scroll. + +* Applicable to: EE::UI::DropDownList (DropDownList), EE::UI::UIListBox (ListBox), + EE::UI::UIScrollView (ScrollView), EE::UI::UITable (Table), EE::UI::UITextEdit (TextEdit). +* Value Type: string-list +* Value List: + * `auto`: The horizontal scrollbar will be visible only when needed. + * `on`: The horizontal scrollbar will be always visible. + * `off`: The horizontal scrollbar will be always hidden. +* Default value: `auto` + +--- + +### icon + +Sets an icon to an element that support icons. + +* Applicable to: EE::UI::UIImage (Image), EE::UI::UIPushButton (PushButton), EE::UI::UITab (Tab) +* Value Type: resource-path (`url()`) +* Default value: _No value_ + +--- + +### icon-auto-margin + +When enabled automatically calculates the optimal horizontal position of an icon in a push button. + +* Applicable to: EE::UI::UIPushButton (PushButton) +* Value Type: boolean +* Default value: `true` + +--- + +### icon-horizontal-margin + +Manually sets the horizontal position of an icon in a push button. + +* Applicable to: EE::UI::UIPushButton (PushButton) +* Value Type: length +* Default value: `4dp` + +--- + +### indeterminate + +Enables/disables indeterminate mode for a loader. Indeterminate mode is used when the progress of +the load can't be determined. + +* Applicable to: EE::UI::UILoader (Loader) +* Value Type: boolean +* Default value: `true` + +--- + +### layout-gravity + +The layout gravity defines how the element gravitates againts its parent (when possible). Gravity +specifies how a component should be placed in its group of cells. Must be one or more (separated by +`|`) of the _value list_ values. This behaves as the [android:layout_gravity](https://developer.android.com/reference/android/widget/LinearLayout.LayoutParams#attr_android:layout_gravity) +XML attribute (for those who are familiar with). + +* Applicable to: Any element child of a layout element +* Value Type: string-list +* Value List: + * `left`: Push element to the left of its container. + * `right`: Push element to the right of its container. + * `center_horizontal`: Push element to the horizontal center of its container. + * `top`: Push element to the top of its container. + * `bottom`: Push element to the bottom of its container. + * `center_vertical`: Place element in the vertical center of its container. + * `center`: shorthand of `center_horizontal|center_vertical` +* Default value: `left|top` +* Aliases: `layout_gravity` --- -#### gravity +### layout-height + +Specifies the basic height of the element. This is a required attribute for any element inside of a +containing layout element that doesn't use any fixed size for its childs (ej: EE::UI::UILinearLayout, +EE::UI::UIRelativeLayout). Its value may be a length/dimension (such as `12dp`) for a constant height +or one of the special constants. + +* Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) or + EE::UI::UIRelativeLayout (RelativeLayout) +* Value Type: length or string-list +* Value List: (for the constant values) + * `match_parent`: The element must be as big as its parent. + * `wrap_content`: The element should be only big enough to enclose its content (plus padding). +* Default value: `wrap_content` + +--- + +### layout-to-bottom-of + +Positions the top edge of this element below the given anchor element ID. +Accommodates top margin of this element and bottom margin of anchor view. + +* Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout) +* Value Type: string (anchor element ID) +* Default value: _No value_ --- -#### half-slider +### layout-to-left-of + +Positions the right edge of this element to the left of the given anchor element ID. +Accommodates right margin of this element and left margin of anchor element. + +* Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout) +* Value Type: string (anchor element ID) +* Default value: _No value_ --- -#### hint +### layout-to-right-of + +Positions the left edge of this element to the right of the given anchor element ID. Accommodates +left margin of this element and right margin of anchor element. + +* Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout) +* Value Type: string (anchor element ID) +* Default value: _No value_ --- -#### hint-color +### layout-to-top-of + +Positions the bottom edge of this element above the given anchor element ID. +Accommodates bottom margin of this element and top margin of anchor view. + +* Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout) +* Value Type: string (anchor element ID) +* Default value: _No value_ --- -#### hint-font-family +### layout-weight + +Indicates how much of the extra space in the EE::UI::UILinearLayout (LinearLayout) is allocated to +the element. Specify 0 if the element should not be stretched. Otherwise the extra pixels will be +pro-rated among all views whose weight is greater than 0. The weight sum of all elements must be 1 +to fill the whole parent length. The weight is applied to the orientation that the LinearLayout uses. +This property behaves the same as the [android:layout_weight](https://developer.android.com/reference/android/widget/LinearLayout.LayoutParams#attr_android:layout_weight) +XML attribute in Android (for those who are familiar with it). +LinearLayout supports assigning a weight to individual children. This attribute assigns an +"importance" value to a element, and allows it to expand to fill any remaining space in the parent +view. Element/widget default weight is zero. +In order to work properly you must set the [layout-width](#layout-width) or the +[layout-height](#layout-height) to `0` to the element that uses layout weight. If the parent is a +horizontal LinearLayout the [layout-width](#layout-width) must be set to `0`, and if the parent if a +vertical LinearLayout the [layout-height](#layout-height) must be set to `0`, in order to use the +layout weight. + +* Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) +* Value Type: float (normalized from `0` to `1`) +* Default value: `0` --- -#### hint-font-size +### layout-width + +Specifies the basic width of the element. This is a required attribute for any element inside of a +containing layout element that doesn't use any fixed size for its childs (ej: EE::UI::UILinearLayout, +EE::UI::UIRelativeLayout). Its value may be a length/dimension (such as `12dp`) for a constant width +or one of the special constants. + +* Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) or + EE::UI::UIRelativeLayout (RelativeLayout) +* Value Type: length or string-list +* Value List: (for the constant values) + * `match_parent`: The element must be as big as its parent. + * `wrap_content`: The element should be only big enough to enclose its content (plus padding). +* Default value: `wrap_content` --- -#### hint-font-style +### line-below-tabs --- -#### hint-shadow-color +### line-below-tabs-color --- -#### hint-stroke-color +### line-below-tabs-y-offset --- -#### hint-stroke-width +### margin-bottom + +Read [margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) documentation. --- -#### hscroll-mode +### margin-left + +Read [margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) documentation. --- -#### icon +### margin-right + +Read [margin-right](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) documentation. --- -#### icon-auto-margin +### margin-top + +Read [margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) documentation. --- -#### icon-horizontal-margin +### max-height + +Read [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) documentation. --- -#### indeterminate +### max-width + +Read [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) documentation. --- -#### layout-gravity +### max-edge-resistance --- -#### layout-height +### max-length --- -#### layout-to-bottom-of +### max-progress --- -#### layout-to-left-of +### max-tab-width --- -#### layout-to-right-of +### max-text-length --- -#### layout-to-top-of +### max-value --- -#### layout-weight +### max-visible-items --- -#### layout-width +### min-height + +Read [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) documentation. --- -#### line-below-tabs +### min-icon-size --- -#### line-below-tabs-color +### min-icon-space --- -#### line-below-tabs-y-offset +### min-margin-right --- -#### max-edge-resistance +### min-tab-width --- -#### max-length +### min-value --- -#### max-progress +### min-width + +Read [min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) documentation. --- -#### max-tab-width +### movement-speed --- -#### max-text-length +### name --- -#### max-value +### only-numbers --- -#### max-visible-items +### opacity + +Read [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) documentation. --- -#### min-icon-size +### orientation --- -#### min-icon-space +### outline-thickness --- -#### min-margin-right +### owns --- -#### min-tab-width +### padding-bottom + +Read [padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) documentation. --- -#### min-value +### padding-left + +Read [padding-left](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) documentation. --- -#### movement-speed +### padding-right + +Read [padding-right](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) documentation. --- -#### name +### padding-top + +Read [padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) documentation. --- -#### only-numbers +### page-locked --- -#### orientation +### page-step --- -#### outline-thickness +### popup-to-main-control --- -#### owns +### progress --- -#### page-locked +### radius --- -#### page-step +### reverse-draw --- -#### popup-to-main-control +### rotation --- -#### progress +### rotation-origin-point-x --- -#### radius +### rotation-origin-point-y --- -#### reverse-draw +### row-height --- -#### rotation +### row-mode --- -#### rotation-origin-point-x +### row-margin --- -#### rotation-origin-point-y +### row-weight --- -#### row-height +### scale --- -#### row-mode +### scale-origin-point-x --- -#### row-margin +### scale-origin-point-y --- -#### row-weight +### scale-type --- -#### scale +### scrollbar-mode --- -#### scale-origin-point-x +### scrollbar-type --- -#### scale-origin-point-y +### selected --- -#### scale-type +### selected-color --- -#### scrollbar-mode +### selected-index --- -#### scrollbar-type +### selectex-text --- -#### selected +### selection-back-color --- -#### selected-color +### shadow-color --- -#### selected-index +### skin --- -#### selectex-text +### skin-color --- -#### selection-back-color +### span --- -#### shadow-color +### special-border-tabs --- -#### skin +### src --- -#### skin-color +### tab-closable --- -#### span +### tab-separation --- -#### special-border-tabs +### text --- -#### src +### text-align + +Read [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) documentation. --- -#### tab-closable +### text-selection --- -#### tab-separation +### text-stroke-color --- -#### text +### text-stroke-width --- -#### text-selection +### theme --- -#### text-stroke-color +### timing-function --- -#### text-stroke-width +### tint --- -#### theme +### tooltip --- -#### timing-function +### total-steps --- -#### tint +### touch-drag --- -#### tooltip +### touch-drag-deceleration --- -#### total-steps +### transition-delay + +Read [transition-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay) documentation. --- -#### touch-drag +### transition-duration + +Read [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) documentation. --- -#### touch-drag-deceleration +### transition-property + +Read [transition-property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property) documentation. --- -#### value +### transition-timing-function + +Read [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) documentation. + +Timing function names are custom, and not the same as the standard, but `cubic-bezier` will be added +soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, +sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, +quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, +cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, +elastic-out, elastic-in-out, none. + +### value --- -#### vertical-expand +### vertical-expand --- -#### visible +### visible --- -#### vscroll-mode +### vscroll-mode --- -#### window-border-auto-size +### window-border-auto-size Sets if the window border size should be automatically calculated based on the skin size. @@ -1039,7 +1328,7 @@ Sets if the window border size should be automatically calculated based on the s --- -#### window-border-size +### window-border-size Manually sets the size of the window border. @@ -1049,7 +1338,7 @@ Manually sets the size of the window border. --- -#### window-buttons-offset +### window-buttons-offset Sets the window titlebar buttons position offset. @@ -1059,7 +1348,7 @@ Sets the window titlebar buttons position offset. --- -#### window-buttons-separation +### window-buttons-separation Sets the separation between the window titlebar buttons. @@ -1069,9 +1358,10 @@ Sets the separation between the window titlebar buttons. --- -#### window-corner-distance +### window-corner-distance -Sets the minimum distance where the hovering cursor detects an edge of the window to enable edge resizing. +Sets the minimum distance where the hovering cursor detects an edge of the window to enable edge +resizing. * Applicable to: EE::UI::UIWindow (Window) * Value Type: length @@ -1079,7 +1369,7 @@ Sets the minimum distance where the hovering cursor detects an edge of the windo --- -#### window-flags +### window-flags Sets the window flags. Window flags activate a set of different boolean options of the window. Multiple values are separated with a `|` (as a logical or). @@ -1104,7 +1394,7 @@ Multiple values are separated with a `|` (as a logical or). --- -#### window-min-size +### window-min-size Sets the window minimum size. @@ -1114,9 +1404,10 @@ Sets the window minimum size. --- -#### window-opacity +### window-opacity -Sets the base opacity of a window, this is the maximum opacity that the window will be able to have. And the opacity property applied to the window will be multiplied by this value. +Sets the base opacity of a window, this is the maximum opacity that the window will be able to have. +And the opacity property applied to the window will be multiplied by this value. * Applicable to: EE::UI::UIWindow (window) * Value type: float @@ -1124,7 +1415,7 @@ Sets the base opacity of a window, this is the maximum opacity that the window w --- -#### window-titlebar-auto-size +### window-titlebar-auto-size Sets if the window titlebar size should be automatically calculated based on the skin size. @@ -1134,7 +1425,7 @@ Sets if the window titlebar size should be automatically calculated based on the --- -#### window-titlebar-size +### window-titlebar-size Manually sets the size of the window titlebar. @@ -1144,11 +1435,14 @@ Manually sets the size of the window titlebar. --- -#### word-wrap +### word-wrap Enables/disables word-wrap in the text view element. -* Applicable to: EE::UI::UITextVIew (TextView), EE::UI::UITextInput (TextInput), EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UITextInputPassword (TextInputPassword), EE::UI::UIDropDownList (DropDownList). +* Applicable to: EE::UI::UITextVIew (TextView), EE::UI::UITextInput (TextInput), + EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), + EE::UI::UIListBoxItem (ListBox::item), EE::UI::UITextInputPassword (TextInputPassword), + EE::UI::UIDropDownList (DropDownList). * Value type: boolean * Default value: `false` @@ -1156,7 +1450,10 @@ Enables/disables word-wrap in the text view element. ## CSS Shorthands -[Shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy. +[Shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) are +CSS properties that let you set the values of multiple other CSS properties simultaneously. +Using a shorthand property, you can write more concise (and often more readable) style sheets, +saving time and energy. --- @@ -1211,13 +1508,6 @@ box-margin: 10dp 10dp; --- -### filler-padding - -Sets the padding for the filler element of a EE::UI::UIProgressBar (ProgressBar) element. -This follow the same rules than the [padding](#padding) shorthand. - ---- - ### foreground Same as the [background](#background) but for the foreground of the node. @@ -1251,7 +1541,8 @@ Read [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) documen ### rotation-origin-point -The origin point of the rotation expressed as two numeric lengths or percentages separated by a space. +The origin point of the rotation expressed as two numeric lengths or percentages separated by a +space. Default value: `center center`. @@ -1267,7 +1558,8 @@ rotation-origin-point: 100% 0%; ### scale-origin-point -The origin point of the node scale expressed as two numeric lengths or percentages separated by a space. +The origin point of the node scale expressed as two numeric lengths or percentages separated by a +space. Default value: `center center`. @@ -1289,21 +1581,46 @@ Read [transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) d ## At-rules -[At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) are CSS statements that instructs CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first. +[At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) are CSS statements that +instructs CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an +identifier and includes everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS +block, whichever comes first. The following at-rules are currently supported: -* [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) — Tells the CSS engine to include an external style sheet. +* [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) — + Tells the CSS engine to include an external style sheet. -* [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. Media features currently supported: [width](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width), [height](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height), [device-width](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width), [device-height](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-height), [orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation), [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio), [device-aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-aspect-ratio), [color](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color), [color-index](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-index), [monochrome](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/monochrome), [resolution](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution). Also, eepp only uses `screen` media type. +* [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) — A conditional group rule that + will apply its content if the device meets the criteria of the condition defined using a media + query. Media features currently supported: + [width](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width), + [height](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height), + [device-width](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width), + [device-height](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-height), + [orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation), + [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio), + [device-aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-aspect-ratio), + [color](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color), + [color-index](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-index), + [monochrome](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/monochrome), + [resolution](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution). + Also, eepp only uses `screen` media type. -* [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) — Describes the aspect of an external font to be downloaded. Only [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family) and [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) properties are supported at the moment. +* [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) — + Describes the aspect of an external font to be downloaded. + Only [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family) and + [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) properties are supported at + the moment. -* [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) — Describes the aspect of intermediate steps in a CSS animation sequence. +* [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) — Describes the aspect + of intermediate steps in a CSS animation sequence. ## Pseudo-class selectors -A [CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. +A [CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) is a keyword +added to a selector that specifies a special state of the selected element(s). For example, :hover +can be used to change a button's color when the user's pointer hovers over it. Most common pseudo-class selectors are supported. The list is: diff --git a/include/eepp/ui/css/propertydefinition.hpp b/include/eepp/ui/css/propertydefinition.hpp index cdc38c825..930c8c022 100644 --- a/include/eepp/ui/css/propertydefinition.hpp +++ b/include/eepp/ui/css/propertydefinition.hpp @@ -126,10 +126,6 @@ enum class PropertyId : Uint32 { TotalSteps = String::hash( "total-steps" ), VerticalExpand = String::hash( "vertical-expand" ), DisplayPercent = String::hash( "display-percent" ), - FillerPaddingLeft = String::hash( "filler-padding-left" ), - FillerPaddingTop = String::hash( "filler-padding-top" ), - FillerPaddingRight = String::hash( "filler-padding-right" ), - FillerPaddingBottom = String::hash( "filler-padding-bottom" ), MovementSpeed = String::hash( "movement-speed" ), MinValue = String::hash( "min-value" ), MaxValue = String::hash( "max-value" ), diff --git a/include/eepp/ui/css/shorthanddefinition.hpp b/include/eepp/ui/css/shorthanddefinition.hpp index 158a11f9b..7bd0ece48 100644 --- a/include/eepp/ui/css/shorthanddefinition.hpp +++ b/include/eepp/ui/css/shorthanddefinition.hpp @@ -18,7 +18,6 @@ enum class ShorthandId : Uint32 { ForegroundPosition = String::hash( "foreground-position" ), LayoutMargin = String::hash( "layout-margin" ), LayoutMarginUnderscore = String::hash( "layout_margin" ), - FillerPadding = String::hash( "filler-padding" ), RotationOriginPoint = String::hash( "rotation-origin-point" ), ScaleOriginPoint = String::hash( "scale-origin-point" ), BorderColor = String::hash( "border-color" ), diff --git a/include/eepp/ui/uiprogressbar.hpp b/include/eepp/ui/uiprogressbar.hpp index e20b4c4b3..4d02fdcef 100644 --- a/include/eepp/ui/uiprogressbar.hpp +++ b/include/eepp/ui/uiprogressbar.hpp @@ -14,7 +14,6 @@ class EE_API UIProgressBar : public UIWidget { bool DisplayPercent = false; bool VerticalExpand = true; Vector2f MovementSpeed = Vector2f( 64.f, 0 ); - Rectf FillerPadding; }; static UIProgressBar* New(); @@ -49,10 +48,6 @@ class EE_API UIProgressBar : public UIWidget { const bool& getVerticalExpand() const; - void setFillerPadding( const Rectf& padding ); - - const Rectf& getFillerPadding() const; - void setDisplayPercent( const bool& displayPercent ); const bool& getDisplayPercent() const; diff --git a/src/eepp/ui/css/stylesheetspecification.cpp b/src/eepp/ui/css/stylesheetspecification.cpp index 90fd4a372..6c2cb561f 100644 --- a/src/eepp/ui/css/stylesheetspecification.cpp +++ b/src/eepp/ui/css/stylesheetspecification.cpp @@ -267,10 +267,6 @@ void StyleSheetSpecification::registerDefaultProperties() { registerProperty( "total-steps", "" ).setType( PropertyType::NumberInt ); registerProperty( "vertical-expand", "" ).setType( PropertyType::Bool ); registerProperty( "display-percent", "" ).setType( PropertyType::Bool ); - registerProperty( "filler-padding-left", "" ).setType( PropertyType::NumberLength ); - registerProperty( "filler-padding-top", "" ).setType( PropertyType::NumberLength ); - registerProperty( "filler-padding-right", "" ).setType( PropertyType::NumberLength ); - registerProperty( "filler-padding-bottom", "" ).setType( PropertyType::NumberLength ); registerProperty( "movement-speed", "" ).setType( PropertyType::Vector2 ); registerProperty( "min-value", "" ).setType( PropertyType::NumberFloat ); registerProperty( "max-value", "" ).setType( PropertyType::NumberFloat ); @@ -388,10 +384,6 @@ void StyleSheetSpecification::registerDefaultProperties() { "foreground", {"foreground-color", "foreground-image", "foreground-repeat", "foreground-position"}, "background" ); - registerShorthand( "filler-padding", - {"filler-padding-top", "filler-padding-right", "filler-padding-bottom", - "filler-padding-left"}, - "box" ); registerShorthand( "box-margin", {"column-margin", "row-margin"}, "single-value-vector" ); registerShorthand( "background-position", {"background-position-x", "background-position-y"}, "background-position" ); diff --git a/src/eepp/ui/uiloader.cpp b/src/eepp/ui/uiloader.cpp index 237874b11..1207723c4 100644 --- a/src/eepp/ui/uiloader.cpp +++ b/src/eepp/ui/uiloader.cpp @@ -13,7 +13,7 @@ UILoader::UILoader() : UIWidget( "loader" ), mRadius( 0 ), mOutlineThickness( PixelDensity::dpToPx( 8 ) ), - mColor( Color::Transparent ), + mColor( Color::White ), mArcAngle( 0 ), mArcStartAngle( 0 ), mProgress( 0 ), diff --git a/src/eepp/ui/uiprogressbar.cpp b/src/eepp/ui/uiprogressbar.cpp index 7f1a1dc0f..13340c43d 100644 --- a/src/eepp/ui/uiprogressbar.cpp +++ b/src/eepp/ui/uiprogressbar.cpp @@ -42,8 +42,6 @@ void UIProgressBar::draw() { if ( NULL == mFillerSkin ) return; - Rectf fillerPadding = PixelDensity::dpToPx( mStyleConfig.FillerPadding ); - Float Height = (Float)mSize.getHeight(); if ( !mStyleConfig.VerticalExpand ) @@ -52,22 +50,22 @@ void UIProgressBar::draw() { if ( Height > mSize.getHeight() ) Height = mSize.getHeight(); - Sizef fSize( ( ( mSize.getWidth() - fillerPadding.Left - fillerPadding.Right ) * mProgress ) / + Sizef fSize( ( ( mSize.getWidth() - mRealPadding.Left - mRealPadding.Right ) * mProgress ) / mTotalSteps, - Height - fillerPadding.Top - fillerPadding.Bottom ); + Height - mRealPadding.Top - mRealPadding.Bottom ); Sizei rSize( PixelDensity::dpToPxI( mFillerSkin->getSize() ) ); Sizei numTiles( (Int32)eeceil( (Float)fSize.getWidth() / (Float)rSize.getWidth() + 2 ), (Int32)eeceil( (Float)fSize.getHeight() / (Float)rSize.getHeight() ) + 2 ); - clipSmartEnable( mScreenPos.x + fillerPadding.Left, mScreenPos.y + fillerPadding.Top, + clipSmartEnable( mScreenPos.x + mRealPadding.Left, mScreenPos.y + mRealPadding.Top, fSize.getWidth(), fSize.getHeight() ); for ( int y = -1; y < numTiles.y; y++ ) { for ( int x = -1; x < numTiles.x; x++ ) { mFillerSkin->draw( - Vector2f( (Int32)mOffset.x + mScreenPosi.x + fillerPadding.Left + + Vector2f( (Int32)mOffset.x + mScreenPosi.x + mRealPadding.Left + x * rSize.getWidth(), - mOffset.y + mScreenPosi.y + fillerPadding.Top + y * rSize.getHeight() ), + mOffset.y + mScreenPosi.y + mRealPadding.Top + y * rSize.getHeight() ), Sizef( rSize.getWidth(), rSize.getHeight() ) ); } } @@ -106,7 +104,7 @@ void UIProgressBar::setTheme( UITheme* Theme ) { Float meH = (Float)getSkinSize().getHeight(); Float otH = (Float)mFillerSkin->getSize().getHeight(); Float res = Math::roundUp( ( meH - otH ) * 0.5f ); - mStyleConfig.FillerPadding = Rectf( res, res, res, res ); + setPadding( Rectf( res, res, res, res ) ); } } @@ -178,17 +176,6 @@ const bool& UIProgressBar::getVerticalExpand() const { return mStyleConfig.VerticalExpand; } -void UIProgressBar::setFillerPadding( const Rectf& padding ) { - mStyleConfig.FillerPadding = padding; - - onPositionChange(); - onSizeChange(); -} - -const Rectf& UIProgressBar::getFillerPadding() const { - return mStyleConfig.FillerPadding; -} - void UIProgressBar::setDisplayPercent( const bool& DisplayPercent ) { mStyleConfig.DisplayPercent = DisplayPercent; @@ -223,14 +210,6 @@ std::string UIProgressBar::getPropertyString( const PropertyDefinition* property return mStyleConfig.VerticalExpand ? "true" : "false"; case PropertyId::DisplayPercent: return mStyleConfig.DisplayPercent ? "true" : "false"; - case PropertyId::FillerPaddingLeft: - return String::fromFloat( mStyleConfig.FillerPadding.Left, "dp" ); - case PropertyId::FillerPaddingTop: - return String::fromFloat( mStyleConfig.FillerPadding.Top, "dp" ); - case PropertyId::FillerPaddingRight: - return String::fromFloat( mStyleConfig.FillerPadding.Right, "dp" ); - case PropertyId::FillerPaddingBottom: - return String::fromFloat( mStyleConfig.FillerPadding.Bottom, "dp" ); case PropertyId::MovementSpeed: return String::fromFloat( getMovementSpeed().x ) + " " + String::fromFloat( getMovementSpeed().y ); @@ -256,26 +235,6 @@ bool UIProgressBar::applyProperty( const StyleSheetProperty& attribute ) { case PropertyId::DisplayPercent: setDisplayPercent( attribute.asBool() ); break; - case PropertyId::FillerPaddingLeft: - setFillerPadding( Rectf( attribute.asDpDimension(), mStyleConfig.FillerPadding.Top, - mStyleConfig.FillerPadding.Right, - mStyleConfig.FillerPadding.Bottom ) ); - break; - case PropertyId::FillerPaddingTop: - setFillerPadding( Rectf( mStyleConfig.FillerPadding.Left, attribute.asDpDimension(), - mStyleConfig.FillerPadding.Right, - mStyleConfig.FillerPadding.Bottom ) ); - break; - case PropertyId::FillerPaddingRight: - setFillerPadding( Rectf( mStyleConfig.FillerPadding.Left, - mStyleConfig.FillerPadding.Top, attribute.asDpDimension(), - mStyleConfig.FillerPadding.Bottom ) ); - break; - case PropertyId::FillerPaddingBottom: - setFillerPadding( - Rectf( mStyleConfig.FillerPadding.Left, mStyleConfig.FillerPadding.Top, - mStyleConfig.FillerPadding.Right, attribute.asDpDimension() ) ); - break; case PropertyId::MovementSpeed: setMovementSpeed( attribute.asVector2f() ); break; diff --git a/src/eepp/ui/uipushbutton.cpp b/src/eepp/ui/uipushbutton.cpp index 9aa8d285e..5b025ee55 100644 --- a/src/eepp/ui/uipushbutton.cpp +++ b/src/eepp/ui/uipushbutton.cpp @@ -348,7 +348,7 @@ bool UIPushButton::applyProperty( const StyleSheetProperty& attribute ) { setIconMinimumSize( attribute.asSizei() ); break; case PropertyId::IconHorizontalMargin: - setIconHorizontalMargin( attribute.asDpDimensionI() ); + setIconHorizontalMargin( attribute.asDpDimensionI( this ) ); break; case PropertyId::IconAutoMargin: mStyleConfig.IconAutoMargin = attribute.asBool(); diff --git a/src/eepp/ui/uitabwidget.cpp b/src/eepp/ui/uitabwidget.cpp index ed29f60ea..916755d56 100644 --- a/src/eepp/ui/uitabwidget.cpp +++ b/src/eepp/ui/uitabwidget.cpp @@ -17,13 +17,13 @@ UITabWidget::UITabWidget() : UIWidget( "tabwidget" ), mTabSelected( NULL ), mTabSelectedIndex( eeINDEX_NOT_FOUND ) { setHorizontalAlign( UI_HALIGN_CENTER ); - mTabContainer = UIWidget::New(); + mTabContainer = UIWidget::NewWithTag( "tabwidget::tabcontainer" ); mTabContainer->setPixelsSize( mSize.getWidth(), mStyleConfig.TabWidgetHeight ) ->setParent( this ) ->setPosition( 0, 0 ); mTabContainer->clipEnable(); - mCtrlContainer = UIWidget::New(); + mCtrlContainer = UIWidget::NewWithTag( "tabwidget::container" ); mCtrlContainer ->setPixelsSize( mSize.getWidth(), mSize.getHeight() - PixelDensity::dpToPx( mStyleConfig.TabWidgetHeight ) ) @@ -128,7 +128,6 @@ void UITabWidget::setStyleConfig( const StyleConfig& styleConfig ) { mStyleConfig = styleConfig; mStyleConfig.TabWidgetHeight = tabWidgetHeight; setContainerSize(); - setTabContainerSize(); orderTabs(); } diff --git a/src/eepp/ui/uiwidget.cpp b/src/eepp/ui/uiwidget.cpp index fbdd1e292..d15f54cc2 100644 --- a/src/eepp/ui/uiwidget.cpp +++ b/src/eepp/ui/uiwidget.cpp @@ -1291,7 +1291,11 @@ bool UIWidget::applyProperty( const StyleSheetProperty& attribute ) { String::toLowerInPlace( gravity ); std::vector strings = String::split( gravity, '|' ); - if ( strings.size() ) { + if ( strings.empty() ) { + strings = String::split( gravity, ' ' ); + } + + if ( !strings.empty() ) { for ( std::size_t i = 0; i < strings.size(); i++ ) { std::string cur = strings[i]; String::toLowerInPlace( cur ); @@ -1333,7 +1337,7 @@ bool UIWidget::applyProperty( const StyleSheetProperty& attribute ) { notifyLayoutAttrChange(); } else if ( "clip" == cur ) { clipEnable(); - } else if ( "multi" == cur ) { + } else if ( "multiselect" == cur ) { setFlags( UI_MULTI_SELECT ); } else if ( "auto_padding" == cur || "autopadding" == cur ) { setFlags( UI_AUTO_PADDING );