# Common Styles
All the essential elements may be rendered using CSS stylesheets. This section shows the common CSS properties that could be applied to all the elements.
- Common CSS Properties
- width
- height
- padding
- padding-[top|right|bottom|left]
- margin
- margin-[top|right|bottom|left]
- border
- border-[top|right|bottom|left]
- border-style
- border-width
- border-color
- border-[left|top|right|bottom]-width
- border-[left|top|right|bottom]-color
- border-radius
- border-[top|bottom]-[left|right]-radius
- background
- background-color
- background-image
- background-size
- background-repeat
- background-position
- opacity
- display
- visibility
- flex
- flex-grow
- flex-shrink
- flex-basis
- position
- [left|top|right|bottom]
- Styles for Animations
- Gradient Styles
- @font-face
# Common CSS Properties
# width
The width
CSS property sets an element's width. If this style is not set, the width will be adjusted to the element content width.
Values:
<length>
: Defines the width as an absolute value.<percentage>
: Defines the width as a percentage of the containing block's width
TIP
The display width
for the flex
element is affected by the parent container.
# height
The height
CSS property specifies the height of an element. If this style is not set, the height will be adjusted to the element content height.
Values:
<length>
: Defines the height as an absolute value.<percentage>
: Defines the height as a percentage of the containing block's width
TIP
The actual display height for the flex element is affected by the parent container.
# padding
The padding
shorthand property sets the padding area on all four sides of an element at once.
This property is a shorthand for the following CSS properties:
Values:
<length>
: The size of the padding as a fixed value (initial value:0
)
# padding-[top|right|bottom|left]
This property sets the padding area of a specific side of the element. This attribute cannot be negative.
Values:
<length>
: The size of the padding of the specific side of the element as a fixed value (initial value:0
)
# margin
The margin
CSS shorthand property sets the margin area on all four sides of an element.
Values:
<length>
: The size of the margin area of the element as a fixed value (initial value:0
)auto
: The system selects a suitable margin to use.
This property is a shorthand for the following CSS properties:
# margin-[top|right|bottom|left]
This property sets the margin area of a specific side of the element. This attribute cannot be negative.
Values:
<length>
: The size of the margin of the specific side of the element as a fixed value (initial value:0
)auto
: The system selects a suitable margin to use for this side of the element.
# border
The border
shorthand property sets an element's border. It sets the values of border-width
, border-style
, and border-color
.
Values:
<line-width>
: Sets the thickness of the border.<line-style>
: Sets the style of the border.<color>
: Sets the color of the border.
This property is a shorthand for the following properties:
# border-[top|right|bottom|left]
This property sets the values of border-width
, border-style
, and border-color
of the border in a specific side of the element.
Values:
<line-width>
: Sets the thickness of the border.<line-style>
: Sets the style of the border.<color>
: Sets the color of the border.
# border-style
This shorthand property sets the line style of an element's bottom border.
Values:
dotted
|dashed
|solid
# border-width
This shorthand property sets the width of an element's border.
Values:
<length>
: The width of the border (initial value:0
)
# border-color
This shorthand CSS property sets the color of an element's border.
Values:
<color>
(black
by default).
# border-[left|top|right|bottom]-width
This property sets the width of one side of the element's border.
Values:
<length>
: (initial value:0
)
# border-[left|top|right|bottom]-color
This property sets the color of one side of the element's border.
Values:
<color>
(black
by default).
# border-radius
This shortcut property rounds the corners of an element's border.
Values:
<length>
|<percentage>
This property is a shorthand for the following properties:
WARNING
For rounded corners only border-width
and border-[left|top|right|bottom]-width
may be used.
For other types of corners, you only can use border-color
. border-[left|top|right|bottom]-color
cannot be applied.
# border-[top|bottom]-[left|right]-radius
This property rounds a specific corner of an element's border.
Values:
<length>
|<percentage>
# background
This property allows to apply gradient styles.
Values:
linear-gradient
# background-color
This property sets the background color of an element.
Values:
<color>
.
# background-image
This property sets the background image of an element.
Values:
<uri>
. You can use both external and local resources. You can precompile PNG images using the Android Asset Packaging Tool (AAPT).
WARNING
This style cannot be used together with background-color or border-color.
# background-size
This property sets the size of the background image in an element.
Values:
contain
|cover
|auto
|<length>
|<percentage>
(100%
by default)
# background-repeat
This property defines the repetition pattern of a background image in an element.
Values:
repeat
|repeat-x
|repeat-y
|no-repeat
(repeat
by default)
By default, a background image is repeated horizontally and vertically.
# background-position
This property sets the initial position for each background image.
Values:
left top
|center top
|right top
|left center
|center center
|right center
|left bottom
|center bottom
|right bottom
. If only one keyword is specified, the second value iscenter
by default.<length> <length>
(0px 0px
by default). (onlypx
units) The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is0 0
. If only one value is specified, the other value is50%
.<percentage> <percentage>
. The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is0% 0%
. For the lower right corner, the value is100% 100%
. If only one value is specified, the other value is50%
.
# opacity
The opacity
property sets the opacity of an element.
Values:
<decimal>
(1
by default) Range0
to1
.
# display
This property sets the display type.
Values:
flex
|none
(flex
by default)
WARNING
Quick apps only support flex
. If the value is none
, the element will not be rendered.
# visibility
This property shows or hides an element without changing the layout of a document.
Values:
visible
|hidden
(visible
by default)
# flex
This property sets how an item will grow or shrink to fit the space available in its container.
Values:
<number>
WARNING
This style is only valid when the parent container is div
, list-item
, or tabs
.
# flex-grow
This property sets the flex grow factor of the element size.
Values:
<number>
(0
by default)
WARNING
This style is only valid when the parent container is div
or list-item
.
# flex-shrink
This property sets the flex shrink factor of an element.
Values:
<number>
(1
by default)
WARNING
This style is only valid when the parent container is div
or list-item
.
# flex-basis
This property sets the initial main size of an element.
Values:
<length>
(-1
by default)
WARNING
This style is valid when the parent container is div
or list-item
.
# position
This property sets how an element is positioned on a page.
Values:
relative
|absolute
|fixed
(relative
by default)
WARNING
position
cannot be applied when the parent container is list
or swiper
.
# [left|top|right|bottom]
These properties specify the horizontal and vertical position of an element in the page.
Values:
<number>
(1
by default)
TIP
Read more details about CSS properties in the MDN CSS reference guide (opens new window).
# Styles for Animations
This section includes the CSS properties you can use to create animations on your components.
# transform-origin
This property sets the origin for an element's transformations.
Values:
<position>
(50% 50%
by default)
This style allows you to change the origin of a transformation. The two values correspond to the horizontal (X) and vertical axis (Y), respectively. The units can be px
or %
(e.g., 50px 100px
, 50% 50%
).
Read more about the transform-origin property (opens new window).
# transform
This property lets you rotate, scale, skew, or translate an element.
Values:
string
with the function to apply:translate(<length-percentage>, <length-percentage>?)
translateX(<length-percentage>)
translateY(<length-percentage>)
scale(<number>, <number>?)
scaleX(<number>)
scaleY(<number>)
rotate((<deg|rad>))
rotateX(<deg|rad>)
rotateY(<deg|rad>)
Read more about the transform property (opens new window) and the transform functions (opens new window).
# animation-name
This property specifies the names of one or more @keyframes
at-rules describing the animation or animations to apply to the element.
Values:
string
with the type of animation:
# animation-delay
This property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
Values:
<time>
Value in seconds (s
) or millisecond (ms
) (0
by default)
Read more about the animation-delay property (opens new window).
# animation-duration
This property sets the length of time that an animation takes to complete one cycle.
Values:
<time>
Value in seconds (s
) or millisecond (ms
) (0
by default)
Read more about the animation-duration property (opens new window).
# animation-iteration-count
This property sets the number of times an animation sequence is played before stopping.
Values:
<integer>
|infinite
(1
by default)
Read more about the animation-iteration-count property (opens new window).
# animation-timing-function
This property sets how an animation progresses through the duration of each cycle.
Values:
linear
|ease
|ease-in
|ease-out
|ease-in-out
(ease
by default)
Read more about the animation-timing-function property (opens new window).
# animation-fill-mode
This function sets how a CSS animation applies styles to its target before and after its execution.
Values:
none
|forwards
(none
by default)
Read more about the animation-fill-mode property (opens new window).
# @keyframes
The @keyframes
is a CSS at-rule (opens new window) controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
Keyframes will be identified by unique names and can specify the position of the elements of the animation sequence, using from
for the starting offset of 0%
and to
for the ending offset of 100%
.
Example:
@keyframes go {
from {
background-color:#f76160;
}
to {
background-color: #09ba07;
}
}
You can also specify intermediate waypoints as percentages:
@keyframes gradient1 {
0% {
background-color: black;
}
33% {
background-color: red;
}
66% {
background-color: blue;
}
100% {
background-color: green;
}
}
@keyframes translation {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(90px);
}
100% {
transform: translateX(180px);
}
}
You can include the following properties in the steps of the sequence:
background-color
opacity
width
height
(only in absolute units)transform
(translate
andscale
do not support percentages).
Read more about the @keyframes at-rule (opens new window).
# Gradient Styles
Gradients are smooth transitions between two or more specified colors. For that, you can apply CSS gradients (opens new window).
The quick app platform supports two gradient options:
linear-gradient()
repeating-linear-gradient
To create a linear gradient, you need to define both the transition direction and colors.
- Transition direction, as a direction or an angle
- Transition colors, in any of the following formats:
<color-name>
,<#RRGGBB>
,rgb(R,G,B)
, andrgba(R,G,B,A)
.
# linear-gradient()
background: linear-gradient(<direction>, <color-stop>, <color-stop>, ...);
background: linear-gradient(<angle>, <color-stop>, <color-stop>);
Values:
<direction>
=to
[left
|right
] [top
|bottom
] (to bottom
by default)<angle>
= (Optional) Angle indeg
between the gradient line and the Y axis (clockwise direction), with the geometric center of the element as the origin, and considering X as the horizontal axis.<color-stop>
=<color>
[<length-percentage>
] (Mandatory) value of the background color at the different steps.
to right: /* gradient from left to right */
to bottom right /* gradient from the upper left corner to the lower right corner */
# repeating-linear-gradient()
background: repeating-linear-gradient(<direction>, <color-stop>, <color-stop>, ...);
background: repeating-linear-gradient(<angle>, <color-stop>, <color-stop>);
Values:
<direction>
=to
[left
|right
] [top
|bottom
] (to bottom
by default)<angle>
= (Optional) Angle indeg
between the gradient line and the Y axis (clockwise direction), with the geometric center of the element as the origin, and considering X as the the horizontal axis.<color-stop>
=<color>
[<length-percentage>
] (Mandatory) value of the background color at the different steps.
# @font-face
This CSS at-rule (opens new window) specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally installed font on the user's own computer.
If you want to customize the style of the text in components, you can define the @font-face
in the stylesheets and use the custom font in the font-family
properties for element styles.
Examples:
@font-face {
font-family: 'myLocalFont'; /* using a local ttf file */
src: url('/Common/fonts/font.ttf');
}
@font-face {
font-family: 'myExternalFont'; /* using an external ttf file. */
src: url('https://example.org/font.ttf');
}
@font-face {
font-family: 'Arial';
src: local('Arial');
}
This at-rule supports the following properties:
font-family
: name of the custom font.src
: source of the font file. The source could be: − a relative local path (absolute path of a project file). − a public URL to the font file.
To apply the defined custom font family to specific elements, you must use the font-family
property with the name of your customized style. For instance:
<text class="txt">
<span style="font-family:myLocalFont">Hi Quick Apps</span>
</text>