Integrate Branding
Foreword
It is possible to customize the look of the application (colors, buttons radius, fonts, price format) as well as the logo and icons by editing and uploading three files: style.jsonc, logo.png and icons.svg.
Introduction to the Settings Files
style.jsonc
This file contains the list of all customizable style properties. Note that it doesn't need to inform them all, just the ones to customize are enough, the other ones will be automatically set to the default values.
This is a jsonc format, which is a usual JSON format with javascript-style comments allowed.
The top-level of this object contains 3 root attributes: "colors", "variables" and "rules".
{
"colors": {},
"variables": {},
"rules": {}
}
- colors object
"colors": {
/* BRAND COLORS
primary color set */
"primary-default": "#006699",
"primary-active": "#333366",
/* alt- color set */
"alt-default": "#08a67f",
"alt-active": "#06926f",
/* secondary- color set */
"secondary-default": "#eeeeee",
"secondary-active": "#b6b6b6",
/* TEXT COLORS
primary- color set */
"txt-primary-default": "#ffffff",
"txt-primary-active": "#ffffff",
/* alt- color set */
"txt-alt-default": "#ffffff",
"txt-alt-active": "#ffffff",
/* secondary- color set */
"txt-secondary-default": "#222222",
"txt-secondary-active": "#222222",
/* LINK COLORS
primary- color set */
"link-primary-default": "#006699",
"link-primary-active": "#333366",
/* secondary- color set */
"link-alt-default": "#08a67f",
"link-alt-active": "#06926f",
/* ! --------------------------------------- EVENT COLORS --------------------------------------------
/* MESSAGE
event- color set */
"event-success": "#1a88ab",
"event-error": "#ae2b34",
"event-info": "#eeeeee",
"event-tip": "#1a88ab",
/* txt-event- color set */
"txt-event-success": "#ffffff",
"txt-event-error": "#ffffff",
"txt-event-info": "#212121",
"txt-event-tip": "#ffffff",
/* ! --------------------------------------- CTA COLORS --------------------------------------------
// the 1px wide border is part of the total CTA height calculation
// - If an outline button is wanted, please add "transparent" as the background color value.
// - If an icon is present in the CTA (cta-primary-icon f.e.), the icon will have the same colors as the text
primary cta- color set */
"cta-primary-background-default": "#006699" /* this value can be "transparent" */,
"cta-primary-background-active": "#333366" /* this value can be "transparent" */,
"cta-primary-border-default": "#006699",
"cta-primary-border-active": "#333366",
"cta-primary-txt-default": "#ffffff",
"cta-primary-txt-active": "#ffffff",
/* alt cta- color set */
"cta-alt-background-default": "#08a67f" /* this value can be "transparent" */,
"cta-alt-background-active": "#06926f" /* this value can be "transparent" */,
"cta-alt-border-default": "#08a67f",
"cta-alt-border-active": "#06926f",
"cta-alt-txt-default": "#ffffff",
"cta-alt-txt-active": "#ffffff",
/* secondary cta- color set */
"cta-secondary-background-default": "#eeeeee" /* this value can be "transparent" */,
"cta-secondary-background-active": "#b6b6b6" /* this value can be "transparent" */,
"cta-secondary-border-default": "#eeeeee",
"cta-secondary-border-active": "#b6b6b6",
"cta-secondary-txt-default": "#222222",
"cta-secondary-txt-active": "#222222"
}
These variables define the colors of each customizable UI elements.
Default values are formatted as hexadecimal values: "#rrggbb", 2 hexadecimal digits (0-9+a-f) for each primary color red, green, blue, though it is also possible to format them as "rgb(R, G, B)" where R, G and B are numbers between 0 and 255. In the end, it will all be converted to R, G, B format in the loaded css. Note that keyword "transparent" is also allowed, though only for "CTA background" variables.
For more details about the targeted UI element of each of these variables, please refer to the Global Colors section below.
- variables object
"variables": {
/* CTA CUSTOMIZATION
primary CTA font weight - default: "bold" */
"brand-font-weight-cta-l-primary": "bold",
/* alt CTA font weight - default: "bold" */
"brand-font-weight-cta-l-alt": "bold",
/* secondary CTA font weight - default: "normal" */
"brand-font-weight-cta-l-secondary": "normal",
/* CTA RADIUS */
"brand-radius-cta": "2px",
/* ! --------------------------------------- FONTS --------------------------------------------*/
/* font family - default: "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif" */
"font-family": "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif"
}
These variables define the font family, font weight as well as the border radius of each customizable texts and buttons.
Possible values for weight are the common ones allowed in css, see https://htmldog.com/references/css/properties/font-weight/ Radius is defined in pixel. Possible values for fonts are described in the Family section below.
For more details about the targeted UI element of each of these variables, please refer to the Fonts section below.
- rules object
"rules": {
/* ! --------------------------------------- PRICING CUSTOMIZATION - optional --------------------------------------------*/
/* CASE 1: normal price
/* standard pricing style for .standard-price */
"standard-price": [],
/* ! -----------------------------------------------------------------------------------*/
/* CASE 2: membership price
/* membership pricing style for .standard-price */
/* This setting manages the display of the standard price indicated below the membership price. */
"membership-standard-price": [],
/* membership pricing style for .membership-price */
/* This setting overwrites the display of the value of the membership price defined in membership-standard-price-label-branding. */
"membership-price": [
"color: #ff9d1a"
],
/* membership pricing style for .membership-price-label */
/* This setting manages the display of both label and value of the membership price. */
"membership-price-label": [
"color: #212121"
],
/* ! -----------------------------------------------------------------------------------*/
/* CASE 3: reduced price
/* reduced pricing style for .standard-price */
"reduced-standard-price": [
"position: relative",
"text-decoration: none"
],
"reduced-standard-price-after": [
"background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyI+PGxpbmUgeDE9IjAiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAiIHN0eWxlPSJzdHJva2U6cmdiKDE5OSw3Miw4NSk7IHN0cm9rZS13aWR0aDoxIi8+PC9zdmc+\")",
"content: \"\"",
"display: block",
"height: 100%",
"left: 0",
"position: absolute",
"top: 0",
"width: 100%"
],
"reduced-standard-price-printable": [],
"reduced-standard-price-printable-after": [],
/* reduced pricing style for .reduced-price */
"reduced-price": []
}
These variables define the colors and layout of each customizable price elements.
Allowed values are the same as those commonly allowed by CSS standards. Note that the hexadecimal color values of this category won't be converted in a R, G, B format.
For more details about the targeted UI element of each of these variables, please refer to the Pricing Override section below.
Validation
This style.jsonc file will be validated as application page loads. If it contains any syntax error, unauthaurized variable name or wrongly formatted values, it will be dismissed with console errors/warnings and no customized css will be loaded in the application page, so be careful to properly edit this file before uploading it.
Common errors:
Wrong json syntax (missing closing "}" for instance) -> solution: validate the JSON object with a free online JSON validator such as https://jsonlint.com/. It also necessary to remove comments before validation (jsonc not supported).
Non existing variable name. -> solution: make sure all variable names belong to the lists mentioned above.
Wrong formatted value. -> solution: make sure all values belong to the expected ones, e.g. colors should be either #rrggbb or rgb(R,G,B).
logo.png
This file is the logo that will be displayed at the top left end corner of the application.
It must be a PNG format file, ideally of size 200x80 pixels, though it could be smaller or larger but keeping the same ratio will ensure a nice looking layout.
icons.svg
This file contains the list of all customizable symbols which will be used for displaying icons in the application. Note that it doesn't need to inform them all, just the ones to customize are enough, the other ones will be automatically set to the default ones.
Here is an example of a custom icons.svg file:
<svg>
<symbol id="icon-action-notes" viewBox="0 0 25 25">
<path d="M16,14H8a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Zm0-4H10a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Zm4-6H17V3a1,1,0,0,0-2,0V4H13V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H4A1,1,0,0,0,3,5V19a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V5A1,1,0,0,0,20,4ZM19,19a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V6H7V7A1,1,0,0,0,9,7V6h2V7a1,1,0,0,0,2,0V6h2V7a1,1,0,0,0,2,0V6h2Z"/>
</symbol>
<symbol id="icon-function-product-list" viewBox="0 0 25 25">
<path d="M4 7a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1zm-5 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1zm-5 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1z" fill="#0D0D0D"/>
</symbol>
</svg>
The content of this file is as follow:
- The svg tag is mandatory. No need to specify the XML namespace for svgs, a tag without any attribute will do.
- Inside the svg tag, any number of symbol tags describing the customized icons.
The symbol tag may have two attributes:
- A mandatory id attribute corresponding to the id of the icon you want to customize. The possible ids and their places in the app is listed in the section
Symbols impact on the UI
. - An optional viewBox attribute that defines the coordinate system for the contents of the symbol. It is defined as a list of four values separated by white space or a comma, like this:
<symbol id="the-symbol-id-to-customize" viewBox="min-x min-y width height">
<!-- Symbol contents go here -->
</symbol>
- min-x: The minimum x-coordinate (horizontal) of the viewBox.
- min-y: The minimum y-coordinate (vertical) of the viewBox.
- width: The width of the viewBox.
- height: The height of the viewBox.
If it is not specified, the SVG content will be displayed at its natural size, and the viewport dimensions (specified by the width and height attributes of the <svg> element) will determine how the content is rendered.
- At last, inside the symbol tag, goes the SVG markup describing what your icon should look like. I can be a path tag or any number of line, rect or other svg primitives. You should be able to copy / paste its content from the web or from your Graphic Design Software of choice.
Uploading the Settings Files
Once both style.jsonc and logo.png and/or icons.svg files are created, it is necessary to upload them on the ByMe platform in order for the application to process them at launch. For each asset to upload in our platform there is a succession of 3 network calls to make, that are documented below.
NOTE : The following procedure is for a specific environment. These steps should be followed on every environments based on the target (staging, main, etc.).
- Get a temporary bucket access
The first step is to retrieve a temporary access to the upload bucket. The corresponding call is one of our web services: POST storages/presigned/post/aws. For more details, see documentation here.
It is necessary to provide a key parameter. Need to choose the name, and it doesn't need to have an extension. We advise to use a UUID generator to have a different key each time, but it is also fine to reuse always the same key.
The response of this web-service is in the following form:
{
"url": "string",
"fields": {
"key": "string",
"bucket": "string",
"X-Amz-Algorithm": "string",
"X-Amz-Credential": "string",
"X-Amz-Date": "string",
"Policy": "string",
"X-Amz-Signature": "string"
}
}
It contains all the necessary information in order to upload the asset on the temporary bucket. For the context of this documentation, let's call this return object tmpBucketResponse
- Upload the asset on the temporary bucket
The second call to perform is not a ByMe web-service, but an AWS upload call. Refer to Amazon documentation for a detailed explanation of how to do this.
Need to do a POST call to tmpBucketResponse.url. The body of the request must contain the following fields in a form-data:
key ⮞ tmpBucketResponse.fields.key
acl ⮞ "private" or "public-read". If we indicated an acl value in the first call, it must be the same here.
bucket ⮞ tmpBucketResponse.fields.bucket
X-Amz-Credential ⮞ tmpBucketResponse.fields.X-Amz-Credential
X-Amz-Algorithm ⮞ tmpBucketResponse.fields.X-Amz-Algorithm
X-Amz-Date ⮞ tmpBucketResponse.fields.X-Amz-Date
X-Amz-Signature ⮞ tmpBucketResponse.fields.X-Amz-Signature
policy ⮞ tmpBucketResponse.fields.policy
file ⮞ the file asset to upload. The value given is of type File.
⚠️ Make sure that the "file" attribute is always the last in the form. The reason is that all elements placed after this "file" attribute are ignored.
Fore more details about how to send a request containing a form-data, refer to this MDN resource.
- Copy the settings files to the right place
Now that the asset is uploaded on the temporary bucket, the last step is to copy it to the main bucket. This last step is a call to one of these two web services:
- POST applications/{applicationID}/assets/{path}
- POST applicationdistributions/{distributionID}/assets/{path}
Notes:
- applicationID is 2 for Kitchen. Using the first web-service will target the application level.
- distributionID is the application distribution ID to target. Using the second web-service will target the application-distribution level.
- At runtime, when launching the planner, the application-distribution asset is used in priority, and we use the application asset as a fallback.
- path is the path on the main bucket where the asset will be copied. here are the correct values to use for this path parameter:
logo file | style file | icons file | need mapping file |
---|---|---|---|
branding%2Flogo.png | branding%2Fstyle.jsonc | branding%2Ficons.svg | branding%2Fneedmapping.json |
The formatting is not a mistake here, need to write "%2F" and not "/".
⚠️ Be very careful with the value of this "path" parameter. It is necessary to use exclusively those 2 values. You take the risk of overwritting another asset by using another path.
This web-service call must contain the following body:
{
"tmpUploadKey" : "string"
}
The value of tmpUploadKey must be the generated temporary key. In other words, we need to put the value of tmpBucketResponse.fields.key.
CSS impact on the UI
The JSON file will be converted to a CSS file, which contains all the customizable branding settings in the application. The following documentation will detail how each setting impacts the UI.
Note: the hexadecimal codes and screenshots used in this documentation are based on the default Core theme. These are the fallback settings if no branding file is provided.
Global Colors
Branding Colors
Primary and alt colors are the brand's identity colors. Primary and alt can be similar, but we recommend that the secondary color be different (more neutral, eg. a light grey).
Primary
$brand-clr-primary-default: #006699;
$brand-clr-primary-active: #333366;
The primary color is used in multiple places in the UI (default and active state):
Focused input border color
Checkboxes background
Radio buttons
Focused select box (dropdown menu) border
Icon button's icon on hover, focus, selected state
Icon and label button's text and icon on hover, focus, selected state
Label button's text on hover + label button's background on focus and selected state
Checked toggle buttons background
Button text's text
Arrow button's text on active state
Tab button's background on selected state
Nav button's text on hover
Catalog browser's product cards border on hover and selected state
Room shape's selected state
Sun position's circle
Sun inclination half circle
Viewpoint's slider track and handle + viewpoint label's background
Alt
$brand-clr-alt-default: #08A67F;
$brand-clr-alt-active: #06926F;
The alt color is used in the navigation. Brands can choose to use the same color for primary and alt variables; if so, there will be no difference for the navigation color.
Navigation button's background on focus and selected state
Secondary
$brand-clr-secondary-default: #eee;
$brand-clr-secondary-active: #b6b6b6;
The secondary color is used in multiple places in the UI (default and active state):
Icon button with background's background color and border color
Tab button's background color in default state
Header Colors
$brand-clr-header-border-bottom: #08a67f;
$brand-clr-header-title-idle: #212121;
$brand-clr-header-title-hover: #08a67f;
$brand-clr-header-title-disable: #cbcbcb;
$brand-clr-header-title-active: #08a67f;
$brand-clr-header-hamburger-hover: #bbbbbb;
Header colors are used to set colors for the header of the application.
Branding Text Colors
The branding text colors are used whenever we need to add text above a background with a branding color. Readability is the main concern here. There are 2 states, that match the background color's states: default and active.
Primary
A text in $brand-clr-txt-primary-default must be readable on a $brand-clr-primary-default background.
A text in $brand-clr-txt-primary-active must be readable on a $brand-clr-primary-active background.
Alt
A text in $brand-clr-txt-alt-default must be readable on a $brand-clr-alt-default background.
A text in $brand-clr-txt-alt-active must be readable on a $brand-clr-alt-active background.
Secondary
A text in $brand-clr-txt-secondary-default must be readable on a $brand-clr-secondary-default background.
A text in $brand-clr-txt-secondary-active must be readable on a $brand-clr-secondary-active background.
Link Colors
The link colors are used to style href links. There are no href links in the Kitchen application, therefor the links settings are not used.
Event Colors
The event colors include 4 types: info, success, error and tip. They are used to provide user feedbacks on UI elements, such as: notifications (informative notifications, success notifications, error notifications); recommendations, warnings or tips in the help center; input errors, etc.
Colors
Success
$brand-clr-event-success: #1a88ab;
The event success color is used on success notification's background.
Error
$brand-clr-event-error: #ae2b34;
The event error color is used in multiple places in the UI:
Input's border and input error message when there is an error in a field (input or text area):
Help center's error counter's background:
Help center's expired product's or warning's section icon:
Help center's expired products or warnings card title:
Error notification's background:
Info
$brand-clr-event-info: #eeeeee;
The event info color is used on info notification's background.
Tip
$brand-clr-event-tip: #1a88ab;
The event tip color is used in the help center:
Help center's recommendation's section icon:
Help center's recommendation's card title:
Help center's tool tips' title and icon:
Text Colors
The event text colors are used whenever we need to add text above a background with an event color. Readability is the main concern here.
Success
A text in $brand-clr-txt-event-success must be readable on a $brand-clr-event-success background.
Error
A text in $brand-clr-txt-event-error must be readable on a $brand-clr-event-error background.
Info
A text in $brand-clr-txt-event-info must be readable on a $brand-clr-event-info background.
Tip
A text in $brand-clr-txt-event-tip must be readable on a $brand-clr-event-tip background.
Call to Actions (CTA)
There are 3 types of CTA: primary, alt and secondary.
Each type has different sizes: S, M, L.
There are 2 customizable states for each CTA: default and active (active = on hover, focus and selected state).
The "disabled" state is automatically generated, using the CTA default settings with a 0.5 opacity and default cursor.
The settings file allows to modify multiple parameters:
All Types
Radius
$brand-radius-cta: rem( 2 );
This variable changes the border radius of all CTA (primary, alt, secondary) in the application (buttons, such as navigation or catalog entries, won't be modified by this variable).
Each type of CTA has the same settings: font-weight, background color, border color and text color. Here are the details for the primary CTA.The same is true for Alt and Secondary CTA.
Primary (same logic applies to Alt and Secondary)
Font Weight
$brand-font-weight-cta-l-primary: bold;
This variable changes the font-weight of the primary CTA's text for L size and bigger. To ensure readability, smaller buttons will always have normal font-weight.
Background
$brand-clr-cta-primary-background-default: $brand-clr-primary-default;
$brand-clr-cta-primary-background-active: $brand-clr-primary-active;
These variables change the primary CTA's background color, in default and active state. It can be the same as the branding primary color or any other hexadecimal code. It can be "transparent" for an outline button.
Border
$brand-clr-cta-primary-border-default: $brand-clr-primary-default;
$brand-clr-cta-primary-border-active: $brand-clr-primary-active;
These variables change the primary CTA's border color, in default and active state. It can be the same as the branding primary color or any other hexadecimal code. If no border is wanted, the same color code as the CTA background should be used (do not use "transparent", as the 1px wide border is part of the total CTA height/width calculation).
Text
$brand-clr-cta-primary-txt-default: $brand-clr-txt-primary-default;
$brand-clr-cta-primary-txt-active: $brand-clr-txt-primary-active;
These variables change the primary CTA's text color, in default and active state. It can be the same as the branding primary text color or any other hexadecimal code, as long as it is readable on the chosen CTA primary background color.
Fonts
The different font sizes and line heights in the application are calculated based on those settings.
Family
$font-family : Helvetica, Arial, "Bitstream Vera Sans", sans-serif;
This variable changes the font-family throughout the entire application.
Size
$font-size : 14;
This variable changes the font-size base upon which the different font sizes are scaled.
Line Height
$line-height-base : 18;
This variable changes the line height base upon which the different line-heights are scaled.
Header
$brand-header-height: 51px;
$brand-header-action-height: 51px;
$brand-menu-icon-width: 24px;
$brand-hover-width: 50px;
These variables change the header size based upon the provided values
Header title
$brand-title-padding-side: 15px,
$brand-title-padding-bottom: 13px,
$brand-title-margin-gap: 0px,
$brand-title-margin-bottom: 0px,
$brand-title-border-bottom-width: 4px
These variables change the header title size based upon the provided values
Pricing Override
This section is dedicated to the override styling for each type of price. SASS mixins are available and can be filled with CSS properties to override default price styling. As there is a default style, this override is optional. The branding style will override any CSS property, as it is meant to.
New CSS properties will impact every price displayed in the application, therefore it is not advisable to change properties that can break the layout, such as the font-size, as it will change the visible price in every location (topbar, template info window, catalog browser, etc).
There are 3 possible cases handled:
No Reduction
Only the standard price is visible and its style can be overridden.
// case 1: standard pricing -> overriding style for .standard-price
@mixin standard-price-branding {
}
Default style:
Membership Pricing
Displays the standard price under the fidelity program price. Membership price can have a label before its value. Both prices and the membership label styles can be overridden. Text of membership label is a localized string which is managed by the application translation key kitchen.app.member_price. To know more, refer to Localization.
// case 2: membership pricing -> overriding style for .standard-price
// This setting manages the display of the standard price indicated below the membership price.
@mixin membership-standard-price-branding {
}
// case 2: membership pricing -> overriding style for .membership-price
// This setting overrides the display of the value of the membership price defined in membership-standard-price-label-branding.
@mixin membership-membership-price-branding {
}
// case 2: membership pricing -> overriding style for .membership-price-label
// This setting manages the display of both label and value of the membership price.
@mixin membership-standard-price-label-branding {
}
Default style:
Reduced Pricing
Displays the standard price under the reduced price. Both can be overridden.
// case 3: reduced pricing -> overriding style for .standard-price
@mixin reduced-standard-price-branding {
}
// case 3: reduced pricing -> overriding style for .reduced-price
@mixin reduced-reduced-price-branding {
}
Default style:
Symbols impact on the UI
The following section will describe which symbol ids can be overridden and to which icons it refers in the application.
Symbol id | Default icon | Note |
---|---|---|
icon-action-notes | Note tool icon (in the header) | |
icon-function-product-list | Product list icon (in the header) | |
icon-action-undo | Undo icon (in the header, editors, ...) | |
icon-action-redo | Redo icon (in the header, editors, ...) | |
icon-action-save | Save icon (in the header, popins, ...) | |
icon-view-close | Close icon (in the header, popins, ...) | |
icon-catalog-accessories | Catalog icon used for Accessories category (see Application Distribution parameters catalogEntries) | |
icon-catalog-appliances | Catalog icon used for Appliances category (see Application Distribution parameters catalogEntries) | |
icon-catalog-coverings | Catalog icon used for Covering category (see Application Distribution parameters catalogEntries) | |
icon-catalog-deco | Catalog icon used for Deco category (see Application Distribution parameters catalogEntries) | |
icon-catalog-dining | Catalog icon used for Dining category (see Application Distribution parameters catalogEntries) | |
icon-catalog-doors | Catalog icon used for Doors category (see Application Distribution parameters catalogEntries) | |
icon-catalog-flooring | Catalog icon used for Flooring category (see Application Distribution parameters catalogEntries) | |
icon-catalog-front | Catalog icon used for Front category (see Application Distribution parameters catalogEntries) | |
icon-catalog-furniture | Catalog icon used for Furniture category (see Application Distribution parameters catalogEntries) | |
icon-catalog-furniture-alt | Alternative catalog icon used for Furniture category (see Application Distribution parameters catalogEntries) | |
icon-catalog-handles | Catalog icon used for Handles category (see Application Distribution parameters catalogEntries) | |
icon-catalog-objects | Catalog icon used for Object category (see Application Distribution parameters catalogEntries) | |
icon-catalog-openings | Catalog icon used for Opening category (see Application Distribution parameters catalogEntries) | |
icon-catalog-worktop | Catalog icon used for Worktop category (see Application Distribution parameters catalogEntries) | |
icon-tools-change-room | Initiate plan tool icon (in the toolbar) | |
icon-tools-wall | Draw plan tool icon (in the toolbar) | |
icon-function-water-supply | Water supply tool icon (in the toolbar) | |
icon-action-search | Search icon (in the toolbar, catalog browser, ...) | |
icon-action-edit | Edit icon (in the property window) | |
icon-action-split | Split icon (in the property window) | |
icon-action-opening | Open icon (in the property window) | |
icon-action-zoomTo | Zoom To icon (in the property window) | |
icon-action-position | Position icon (in the property window) | |
icon-action-duplicate | Duplicate icon (in the property window) | |
icon-action-delete | Delete icon (in the property window) | |
icon-action-clean | Empty room icon (in the property window) | |
icon-tools-wall-side | Wall side icon (in the edit property panel) | |
icon-tools-opening-side | Opening side icon (in the edit property panel) | |
icon-tools-background | Background tool icon (in the "Create a realistic image" popin) | |
icon-tools-azimuth | Azimuth tool icon (in the "Create a realistic image" popin) | |
icon-tools-inclination | Inclination tool icon (in the "Create a realistic image" popin) | |
icon-action-download | Download icon (in the "Upload a 2D floorplan" popin) | |
icon-function-document | Document icon (in the "Upload a 2D floorplan" popin) | |
icon-action-rotate-clockwise | Download icon (in the "Upload a 2D floorplan" popin) | |
icon-tools-opacity | Rotate clockwise icon (in the "Upload a 2D floorplan" popin) | |
icon-action-move | Move icon (in the "Upload a 2D floorplan" popin) | |
icon-action-double-arrow | Double arrow icon (in the "Upload a 2D floorplan" popin) | |
icon-worktop-corner-simple | Simple corner tab icon (in the Corner cut overlay of the worktop editor) | |
icon-worktop-corner-double | Double corner tab icon (in the Corner cut overlay of the worktop editor) | |
icon-worktop-corner-invert | Invert corner tab icon (in the Corner cut overlay of the worktop editor) | |
icon-worktop-corner-rounded | Rounded corner tab icon (in the Corner cut overlay of the worktop editor) | |
icon-worktop-cut-out-rectangle | Rectangle cut-out tab icon (in the Cut-out overlay of the worktop editor) | |
icon-worktop-cut-out-circle | Circle cut-out tab icon (in the Cut-out overlay of the worktop editor) | |
icon-worktop-edge-triple | Triple edge cut tab icon (in the Edge cut overlay of the worktop editor) | |
icon-worktop-edge-rounded | Rounded edge cut tab icon (in the Edge cut overlay of the worktop editor) | |
icon-worktop-custom | Custom worktop legend icon (in the overlay of the worktop editor) | |
icon-worktop-grain-direction | Gain direction worktop legend icon (in the overlay of the worktop editor) | |
icon-worktop-front-edge | Front edge worktop legend icon (in the overlay of the worktop editor) | |
icon-worktop-polished-underside | Polished underside legend icon (in the legend of the worktop editor) | |
icon-worktop-illustration | Illustration worktop icon (in the legend of the worktop editor) | |
icon-action-expired | Product expired icon (in the help center, summary step) | |
icon-action-warning | Warning icon (in the help center, summary step) | |
icon-action-tip | Tip icon (in the help center, summary step) | |
icon-global-app | Global app icon (in the summary step) | |
icon-action-info | Info icon (in the Summary step or near the price in the header) | |
icon-loader | Loader icon (in the "Create a 360° image" popin) | |
icon-action-success | Success icon (in the "Create a 360° image" popin) | |
icon-action-fail | Fail icon (in the "Create a 360° image" popin) | |
icon-action-help | Help icon (in the Help Center) | |
icon-action-reload | Reload icon (in the Help Center) | |
icon-action-play | Play icon (in the Help Center) | |
icon-tools-options | Tools options icon (in the navigation tools) | |
icon-view-2d | 2d view icon (in the navigation tools) | |
icon-view-3d | 3d view icon (in the navigation tools) | |
icon-view-fp | First person view icon (in the navigation tools) | |
icon-action-zoom | Zoom icon (in the navigation tools) | |
icon-action-unzoom | Unzoom icon (in the navigation tools) | |
icon-action-viewpoint | Viewpoint icon (in the navigation tools) | |
icon-action-zoom-extend | Extend zoom (in the navigation tools) | |
icon-view-maximize | Maximize icon (in the Catalog) | |
icon-view-minimize | Minimize icon (in the Catalog) | |
icon-favorites-item | Favorites item icon (in the Catalog) | |
icon-favorites-arrow | Favorites arrow icon (in the Catalog) | |
icon-favorites-list | Favorites list icon (in the Catalog) | |
icon-function-favorite | Favorite icon (in the toolbar, Catalog...) | |
icon-function-favorite-filled | Favorite filled icon (in the Catalog) | |
icon-action-360-render | 360 render icon (in the "Images & 2D Plans" media list) | |
icon-action-delivery | Delivery icon (in the Summary step) | |
icon-action-installation | Installation icon (in the Summary step) | |
icon-action-drag | Drag icon (in the "Import your floorplan file" popin) | |
icon-action-electric-warning | Electric warning icon (in the Help Center) | |
icon-action-financial | Financial icon (in the Summary step) | |
icon-action-print | Print icon (in the Summary step) | |
icon-action-share-2 | Share icon (in the Summary step) | |
icon-action-export-hbm-2 | Export hbm icon (in the Summary step) | |
icon-function-coworker | Coworker icon (in the Summary step) | |
icon-function-hq-render | Render hq icon (in the "Images & 2D Plans" media list) | |
icon-function-render | Render icon (in the "Images & 2D Plans" media list) | |
icon-function-4K-render | Render 4K icon (in the "Images & 2D Plans" media list) | |
icon-tags-attic | Attic icon (in Photo Studio) | |
icon-tags-basement | Basement icon (in Photo Studio) | |
icon-tags-bathroom | Bathroom icon (in Photo Studio) | |
icon-tags-bedroom | Bedroom icon (in Photo Studio) | |
icon-tags-boilerroom | Biolerroom icon (in Photo Studio) | |
icon-tags-breakfast | Breakfast icon (in Photo Studio) | |
icon-tags-diningroom | Diningroom icon (in Photo Studio) | |
icon-tags-entertainment | Entertainment icon (in Photo Studio) | |
icon-tags-garage | Garage icon (in Photo Studio) | |
icon-tags-hallway | Hallway icon (in Photo Studio) | |
icon-tags-laundryroom | Laundry room icon (in Photo Studio) | |
icon-tags-library | Library icon (in Photo Studio) | |
icon-tags-livingroom | Living room icon (in Photo Studio) | |
icon-tags-mudroom | Mudroom icon (in Photo Studio) | |
icon-tags-nursery | Nursery icon (in Photo Studio) | |
icon-tags-office | Office icon (in Photo Studio) | |
icon-tags-pantry | Pantry icon (in Photo Studio) | |
icon-tags-winecellar | Wine cellar icon (in Photo Studio) | |
icon-tools-auto | Auto tool icon (in Photo Studio) | |
icon-tools-bulb-alight | Bulb alight tool icon (in Photo Studio) | |
icon-tools-bulb-intensity-1 | Bulb intensity 1 icon (in Photo Studio) | |
icon-tools-bulb-intensity-2 | Bulb intensity 2 icon (in Photo Studio) | |
icon-tools-bulb-intensity-3 | Bulb intensity 3 icon (in Photo Studio) | |
icon-tools-bulb-intensity-4 | Bulb intensity 4 icon (in Photo Studio) | |
icon-tools-bulb-intensity-5 | Bulb intensity 5 icon (in Photo Studio) | |
icon-tools-bulb-off | Bulb off icon (in Photo Studio) | |
icon-tools-bulb-twice | Bulb twice icon (in Photo Studio) | |
icon-tools-camera-full | Camera full icon (in Photo Studio) | |
icon-tools-camera | Auto tool icon (in Photo Studio) | |
icon-tools-ceiling-height | Ceiling height icon (in Flooplan step mobile toolbar) | |
icon-tools-change-room | Change room icon (in Photo Studio) | |
icon-tools-inclination-house | Inclination house icon (in Photo Studio) | |
icon-tools-dots | Dots icon (in Photo Studio) | |
icon-tools-flares | Flares icon (in Photo Studio) | |
icon-tools-kitchen | Kitchen icon (in Photo Studio) | |
icon-tools-lens-14 | Lens 14 icon (in Photo Studio) | |
icon-tools-lens-24 | Lens 24 icon (in Photo Studio) | |
icon-tools-lens-35 | Lens 35 icon (in Photo Studio) | |
icon-tools-lens-60 | Lens 60 icon (in Photo Studio) | |
icon-tools-lens | Lens icon (in Photo Studio) | |
icon-tools-measure | Measure tool icon (in the header) | |
icon-tools-night | Night tool icon (in Photo Studio) | |
icon-tools-picture | Create image tool icon (in the toolbar) and picture icon (in the medias list) | |
icon-tools-plan | Plan icon (in the medias list) | |
icon-tools-sun-outline | Sun outline icon (in Photo Studio) | |
icon-tools-sun | Sun icon (in Photo Studio) | |
icon-tools-tilt | Tilt icon (in Photo Studio) | |
icon-view-front-elevation | Front elevation icon (in the navigation tools -> coming soon!) |