All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
  • --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for Calendar styling:

  • --smart-calendar-header-height: Default height for calendar's header section.
  • --smart-calendar-footer-height: Default height for calendar's footer section.
  • --smart-calendar-title-height: Default height for calendar's title.
  • --smart-calendar-cell-size: Default size of calendar's cell.
  • --smart-calendar-cell-spacing: Defines calendar's cell spacing.
  • --smart-calendar-default-width: Defines calendar's default width.
  • --smart-calendar-default-height: Defines calendar's default height.
  • --smart-calendar-title-text-transform: Defines element's default height.
  • --smart-calendar-week-title-text-transform: Controls the capitalization of the week title.
  • --smart-calendar-header-text-transform: Controls the capitalization of the header text.
  • --smart-calendar-footer-text-transform: Controls the capitalization of the footer text.
  • --smart-calendar-border-top-right-radius: Defines element's top-right border radius.
  • --smart-calendar-border-top-left-radius: Defines element's top-left border radius.
  • --smart-calendar-border-bottom-left-radius: Defines element's bottom-left border radius.
  • --smart-calendar-border-bottom-right-radius: Defines element's bottom-right border radius.
  • --smart-calendar-cell-border-top-right-radius: Defines cell's top-right border radius.
  • --smart-calendar-cell-border-top-left-radius: Defines cell's top-left border radius.
  • --smart-calendar-cell-border-bottom-left-radius: Defines cell's bottom-left border radius.
  • --smart-calendar-cell-border-bottom-right-radius: Defines cell's bottom-right border radius.
  • --smart-calendar-border-width: Defines calendar's border width.
  • --smart-calendar-border: Defines calendar's border.
  • --smart-calendar-background: Defines calendar's background.
  • --smart-calendar-color: Defines calendar's color.
  • --smart-calendar-font-family: Defines calendar's font family.
  • --smart-calendar-font-size: Defines calendar's font size.
  • --smart-calendar-title-background: Defines title's background color.
  • --smart-calendar-title-color: Defines title's color.
  • --smart-calendar-title-font-family: Defines title's font family.
  • --smart-calendar-title-font-size: Defines title's font size.
  • --smart-calendar-title-padding: Defines title's padding
  • --smart-calendar-header-background: Defines header's background color.
  • --smart-calendar-header-color: Defines header's color.
  • --smart-calendar-footer-background :Defines footer's background color.
  • --smart-calendar-footer-color: Defines footer's color.
  • --smart-calendar-cell-background: Defines cell's background color.
  • --smart-calendar-cell-border :Defines cell's border.
  • --smart-calendar-cell-color: Defines header's color.
  • --smart-calendar-cell-background-hover: Defines hovered cell's background color.
  • --smart-calendar-cell-border-hover: Defines hovered cell's border color.
  • --smart-calendar-cell-color-hover: Defines hovered cell's color.
  • --smart-calendar-cell-background-active: Defines active cell's background color.
  • --smart-calendar-cell-border-active: Defines active cell's border color.
  • --smart-calendar-cell-color-active: Defines active cell's color.
  • --smart-calendar-cell-background-focus: Defines focused cell's background color.
  • --smart-calendar-cell-border-focus: Defines focused cell's border color.
  • --smart-calendar-cell-color-focus: Defines focused cell's color.
  • --smart-calendar-cell-today-background: Defines today's cell background color.
  • --smart-calendar-cell-today-border: Defines today's cell border color.
  • --smart-calendar-cell-today-color: Defines today's cell color.
  • --smart-calendar-cell-today-background-hover: Defines today's cell background color on hover.
  • --smart-calendar-cell-today-border-hover: Defines today's cell border color on hover.
  • --smart-calendar-cell-today-color-hover: Defines today's cell color on hover.
  • --smart-calendar-cell-important-background: Defines important cell background color.
  • --smart-calendar-cell-important-border: Defines important cell border color.
  • --smart-calendar-cell-important-color: Defines important cell color.
  • --smart-calendar-cell-today-background-active: Defines today's cell background color when it's in active state.
  • --smart-calendar-cell-today-border-active: Defines today's cell border color when it's in active state.
  • --smart-calendar-cell-today-color-active: Defines today's cell color when it's in active state.
  • --smart-calendar-cell-other-month-background: Defines previous and next mont cell background color.
  • --smart-calendar-cell-other-month-border: Defines previous and next mont cell border color.
  • --smart-calendar-cell-other-month-color: Defines previous and next mont cell color.

The following CSS selectors can be used to style Calendar:

  • smart-calendar - the calendar itself. Can be used to set width, height, font, background, border for the whole element.
    • .smart-container - wraper that is used to hold all of the internal parts of the element. Normally it shoudn't be used for styling purposes.
      • .smart-calendar-title - the title of the calendar. Contains the current selected date devided in two containers. Can be used to style the title section of the element.
        • .smart-calendar-year-container - contains the year of the current selected date.
      • .smart-calendar-date-container - contains the date ( month and day) of the current selected date.
      • .smart-calendar-container - container that hold the three main sections of the Calendar - header, content and footer.
        • .smart-header - the header part of the calendar that sits just below the title. It contains the navigation keys for the Calendar.
        • .smart-calendar-button - a smartRepeatButton used to traverse between months backwards.
        • .smart-calendar-date-element - a container for the two types of date navigation - default and classic. Both are DIV elements. The first one contains a single string date with user interaction. The second is used only in "classic" calendarMode and contains the following elements:
          • .smart-calendar-month-element - a smartDropDownList used as a month chooser. Can be styled like a normal smartDropDownList.
          • .smart-calendar-year-element - an HTML Input element used as an year chooser.
          • .smart-calendar-year-elements - a container that holds the additional navigation buttons for the '.smart-year-element'.
            • .smart-calendar-button - a smartButton used to increment years.
          • .smart-calendar-button - a smartButton used to decrement years.
        • .smart-calendar-button - a smartRepeatButton used to traverse between months forwards.
      • .smart-content .smart-calendar-body - the content of the calendar. Placed in the middle of the element and takes most of the space. Contains the actual months.
        • .smart-calendar-months-container - a container that holds the months of the calendar.
          • .smart-calendar-month - a month. Contains the smaller parts that form a month.
            • .smart-calendar-month-name - the name of the month.
          • .smart-calendar-week-titles - a DIV container with the names of the days of the week.
            • .smart-calendar-week-title - the name of the day of the week.
          • .smart-calendar-weeks - a container that holds the weeks of the month in one place.
            • .smart-calendar-week - a container that holds the days of a single week.
              • .smart-calendar-week-number - contains the number of the current week.
              • .smart-calendar-cell - DIV element representing every single day of the week.
        • .smart-calendar-date-view-container - used as a container for the month, year selection when display mode is other than "month". Only available in "default" calendar mode.
          • .smart-calendar-cell - a simple DIV element containing a month name or an year number in the different date views.
        • .smart-calendar-month-separator - a separator between '.smart-months-container' and '.smart-next-months-container. Used only for the animation during navigation.
        • .smart-calendar-next-months-container - a container for the next or previous month after the one in view. Used for the month animation during navigation. Should always have the same style as the '.smart-months-container' !
        • .smart-calendar-list-view - a smartListBox used for year and month selection when display mode is changed from month to year or decade. Used only in "default" calendar mode.
        • .smart-calendar-animation-panel - a container used only for animation purposes. Shouldn't be used for styling.
      • .smart-calendar-footer - the footer section located at the bottom of the calendar. It has the same height as the header.
      • smart-tooltip - a smartToolTip element used for the tooltips of important dates.