Application CSS

CSS classes to target application components.

Overview

With the application CSS you can target the below components with full component coverage:

• Table.

• Sidebar.

• Navigation bar.

• Accordion.

• We will continue to add CSS selectors coverage for smaller components.

Briefly, this is how an branded application looks like with Ubidots native CSS styling:

With the below CSS stylesheet, the application can be changed into this:

Application CSS stylesheet

This example uses the application branding colors via the {{ colors.<colorKey> }} bookmark notation and custom fonts.

/* Ubidots-branded theme */

:root {
   /* Branding Colors */
   --color-icon-color: {{ colors.iconColor }};
   --color-navbar-color: {{ colors.navbarColor }};
   --color-variables-icon: {{ colors.variablesIcon }};
   --color-login-form-color: {{ colors.loginFormColor }};
   --color-sub-header-color: {{ colors.subHeaderColor }};
   --color-widget-background: {{ colors.widgetBackground }};
   --color-widget-title-color: {{ colors.widgetTitleColor }};
   --color-danger-button-color: {{ colors.dangerButtonColor }};
   --color-default-button-color: {{ colors.defaultButtonColor }};
   --color-main-table-item-color: {{ colors.mainTableItemColor }};
   --color-sub-header-text-color: {{ colors.subHeaderTextColor }};
   --color-dashboard-background: {{ colors.dashboardBackground }};
   --color-login-button-form-color: {{ colors.loginButtonFormColor }};
   --color-warning-modal-cover-color: {{ colors.warningModalCoverColor }};
   --color-variable-infobox-cover-color: {{ colors.variableInfoboxCoverColor }};
   --color-information-modal-cover-color: {{ colors.informationModalCoverColor }};
   --color-login-footer-foreground-color: {{ colors.loginFooterForegroundColor }};
   --color-data-source-infobox-cover-color: {{ colors.dataSourceInfoboxCoverColor }};
   --color-variable-infobox-derived-color: {{ colors.variableInfoboxDerivedColor }};

   /* Additional */
   --color-transparent: transparent;
   --color-surface-secondary: #f9f9f9;
   --color-empty: white;
   --ub-color-primary-050: #e8f7ee;

   /* Fonts */
   --font-family-primary: "Poppins", sans-serif;
   --font-weight-normal: 400;
   --font-weight-bold: bold;
   --font-size-small: 13px;

   /* Sizing & Spacing */
   --spacing-xs: 0.25rem;  /* 4px */
   --spacing-sm: 0.5rem;   /* 8px */
   --spacing-md: 1rem;     /* 16px */
   --spacing-lg: 2rem;     /* 32px */

   /* Component-Specific Sizes */
   --sidebar-width: 80px;
   --logo-width: 200px;
   --table-banner-height: 254px;
   --table-content-offset: calc(var(--table-banner-height) / -2);

   /* Borders & Radius */
   --border-radius-sm: 4px;
   --border-radius-md: 8px;

   /* Images */
   --devices-table-banner-image: url(https://d37r24zvv6zb85.cloudfront.net/production/media/ent_login_screen/68a00c069807fa008cab1a53_6a5018ea7f7944619c1fe0be36aee3f1.png);

   /* Box shadows */
   --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Global
============================================================================= */
/* Font */
*:not([role="icon"]) {
   font-family: var(--font-family-primary);
}

/* Padding table viewports */
.core-view__container .ds-table__viewport {
   padding: 0
}

/* ==========================================================================
   Table Component (ds-table)
============================================================================= */
/* Table main components separation */
.ds-table__viewport {
   background-color: var(--color-transparent);
}

.ds-table__toolbar {
   background-color: white;
   border-radius: var(--border-radius-md);
}

.ds-table__wrapper {
   margin-top: var(--spacing-md);
   background-color: white;
   border-radius: var(--border-radius-md);
}

.ds-table__controls {
   margin-top: var(--spacing-md);
   background-color: white;
   border-radius: var(--border-radius-md);
}

/* Enable banner image in Device view */
.devices-table__content {
   transform: translateY(var(--table-content-offset));
}

.devices-table__banner {
   background-image: var(--devices-table-banner-image);
   height: var(--table-banner-height);
}

/* Color intercalation */
.ds-table__body .ds-table__row:nth-child(odd) {
   background-color: rgb(from var(--color-sub-header-color) r g b / 0.1);
}

/* Hover and selected */
.ds-table__body .ds-table__row:hover { 
   background: var(--color-surface-secondary);
}

.ds-table__row--selected {
  box-shadow: inset 4px 0 0 var(--color-sub-header-color);
}

/* ==========================================================================
   Sidebar Component (ds-sidebar, ds-accordion)
============================================================================= */
.ds-sidebar__item,
.ds-accordion__item {
   border-radius: var(--border-radius-sm);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   will-change: transform, box-shadow; // optional: small perf hint
}

/* Hover effect */
.ds-sidebar__item:hover,
.ds-accordion__item:hover,
.ds-accordion__toggle:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-hover);
}

/* Item selection */
.ds-sidebar__item--active,
.ds-accordion__item--active {
   background-color: var(--color-sub-header-color);
   box-shadow: var(--shadow-hover);
   color: var(--color-empty);
}

/* Change icon */
.ds-sidebar__toggle--open i::before {
   content: "\e24e";
}

.ds-sidebar__toggle--closed i::before {
   content: "\f061";
}