Custom properties / RWD2

Custom properties in Ueyen are easy to modify, you can change the multiplier variables in the control-panel.scss. Or you can enable/disable the use of custom attributes from the Control Panel.





Enabling/Disabling

You can override any variable in the file control-panel.scss and change the look of Ueyen.

We can easily enable or disable the use of custom properties in control-panel.scss by changing the value of the $custom-properties to true or false.



The enabling/disabling variable in Control Panel

        

Enabling/disabling (true/false)

$custom-properties


Multipliers

There are multiple types of multiplier variables in the Control Panel. Changing those variables will change the custom property values throughout all the breakpoints.





Available multipliers in Control Panel

        

Breakpoint multipliers

$breakpoints-multiplier-small
$breakpoints-multiplier-medium
$breakpoints-multiplier-large
$breakpoints-multiplier-huge

Specific Multipliers 

$global-margin-multiplier 
$global-padding-multiplier
$global-width-multiplier  
$global-height-multiplier


Affected attributes

The following Global attributes are being overridden by the custom attributes. If you change them in the Control Panel.



        

Overridden global-font-size 
$global-font-size-small 
$global-font-size-medium 
$global-font-size-large 
$global-font-size-huge 

Overridden global-header-font-size 
$global-heading-font-size-h1 
$global-heading-font-size-h2 
$global-heading-font-size-h3 
$global-heading-font-size-h4 
$global-heading-font-size-h5 
$global-heading-font-size-h6 

Overridden global-padding
$global-padding-small 
$global-padding-medium 
$global-padding-large 
$global-padding-huge 
$global-padding-no 

Overridden global-width
$global-width-tiny 
$global-width-small 
$global-width-medium 
$global-width-large 
$global-width-huge 

Overridden global-height
$global-height-tiny 
$global-height-small 
$global-height-medium 
$global-height-large 
$global-height-huge 

Overridden global-side
$global-side-padding 

Overridden global margin-small  
$global-margin-small 
$global-margin-medium 
$global-margin-large 
$global-margin-huge 
$global-margin-no 

Overridden global icon-size
$global-icon-size 

Overridden global-button
$global-button-height 
$global-button-height-narrow