Back to UI Shell-guidelines

CSS ComponentThe latest version of this package is: 0.1.1, Opens in new window

The UI Shell is a collection of components shared by all of If's internal applications. It provides a common set of interaction patterns that persist between and across applications.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-relax-core/ui-shell@0.1.1

Table of Contents

Usage

Default markup example

Waypoint
<div class="rlx ui-shell-container">
  <header class="rlx ui-shell">
    <a href="/" class="rlx ui-shell-application-title" aria-label="home">
      <span class="rlx icon-holder">
        <svg
          style="height: 21px; width: 30px;"
          class="rlx icon"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 116 84"
        >
          <path
            fill="none"
            d="M36.044 36.098C36.044 23.894 45.938 14 58.142 14c12.204 0 22.098 9.894 22.098 22.098v9.898l27.595-32.978M35.43 45.996L7.833 13.017M36.044 36.098v39.501"
            stroke="currentColor"
            stroke-width="10"
            stroke-linejoin="round"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M63.142 38.658a5 5 0 11-10.001-.001 5 5 0 0110.001 0z"
            fill="#0054f0"
          />
        </svg>
      </span>
      Waypoint
    </a>
  </header>
</div>

No left or right menubar

Waypoint
3

Drawer

Tokens

All of the tokens can be used as preprocessor and CSS variables

UI Shell tokens

NameValueIs aliased in
rlx-application-title-color-text
rgb(250, 249, 247)
rlx-application-title-size-dimension
3rem
rlx-breadcrumbs-container-spacing-inline
0 auto 0 0
rlx-breadcrumbs-item-spacing-inline
0 0.5rem 0 1.5rem
rlx-breadcrumbs-separator-color-text
rgb(244, 244, 244)
rlx-breadcrumbs-separator-font-size
1rem
rlx-breadcrumbs-dropdown-icon-size-dimension
1.5rem
rlx-breadcrumbs-action-color-text-normal
rgba(244,244,244,0.8)
rlx-breadcrumbs-action-color-text-hover
rgb(167, 192, 242)
rlx-breadcrumbs-action-font-size
1rem
rlx-breadcrumbs-spacing-inline
0 auto
rlx-breadcrumbs-spacing-inset-media-query-base
0.875rem 0
rlx-breadcrumbs-spacing-inset-media-query-smlr
1.25rem 0
rlx-breadcrumbs-color-text
rgb(244, 244, 244)
rlx-count-color-background
rgb(255, 240, 158)
rlx-count-color-text
rgb(51, 30, 17)
rlx-count-position-inset
0.5rem 0.5rem auto auto
rlx-count-size-dimension
1rem
rlx-count-corner-radius
100%
rlx-count-font-size
10px
rlx-count-font-line-height
1rem
rlx-drawer-animation-duration
0.3s
rlx-drawer-container-spacing-inset
0 calc(2rem + 3rem) 0 2rem
rlx-drawer-container-spacing-stack
1rem
rlx-drawer-subtitle-spacing-stack
1rem
rlx-drawer-color-link
rgb(167, 192, 242)
rlx-drawer-color-background
rgba(76,66,61,1)
rlx-drawer-color-text
rgb(250, 249, 247)
rlx-drawer-spacing-inset
2rem 0 0 0
rlx-drawer-position-top
3rem
rlx-drawer-size-width-narrow
20rem
rlx-drawer-size-width-default
30rem
rlx-drawer-size-width-wide
40rem
rlx-ui-shell-action-icon-size-dimension
1.25rem
rlx-ui-shell-action-button-size-dimension
3rem
rlx-ui-shell-action-button-color-text-normal
rgb(250, 249, 247)
rlx-ui-shell-action-button-color-text-hover
rgb(0, 84, 240)
rlx-ui-shell-action-button-color-background-normal
rgba(0, 0, 0, 0)
rlx-ui-shell-action-button-color-background-hover
rgba(0, 0, 0, 0)
rlx-ui-shell-color-background
rgb(51, 42, 38)
rlx-ui-shell-size-height
3rem
rlx-ui-shell-depth-z-index
400
rlx-menubar-action-container-spacing-inset
4rem 0 0 0
rlx-menubar-action-icon-size-dimension
1.25rem
rlx-menubar-action-button-size-dimension
3rem
rlx-menubar-action-button-color-text-normal
rgb(51, 30, 17)
rlx-menubar-action-button-color-text-hover
rgb(0, 84, 240)
rlx-menubar-action-button-color-background-normal
rgba(0, 0, 0, 0)
rlx-menubar-action-button-color-background-hover
rgba(0, 0, 0, 0)
rlx-menubar-color-background
rgb(190, 190, 190)
rlx-menubar-spacing-inset
0 0 2rem 0
rlx-menubar-size-width
3rem
rlx-shell-content-color-background
rgb(244, 244, 244)

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.1.0 (2022-05-03)

Code Refactoring

  • ui-shell: rename Global Header to UI Shell, a name better fitting the usage (83187f2), closes #588267 #327858

Miscellaneous chores

0.0.2 (2022-04-21)

Miscellaneous chores

Contact us, Opens in new window