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.
$ npm i @ids-relax-core/ui-shell@0.1.1
Table of Contents
Usage
Default markup example
Logo
<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
Drawer
Tokens
UI Shell tokens
Name | Value | Is 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 | |
4rem 0 0 0 | ||
1.25rem | ||
3rem | ||
rgb(51, 30, 17) | ||
rgb(0, 84, 240) | ||
rgba(0, 0, 0, 0) | ||
rgba(0, 0, 0, 0) | ||
rgb(190, 190, 190) | ||
0 0 2rem 0 | ||
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
- reinstall (9e6161a)
0.0.2 (2022-04-21)
Miscellaneous chores
- scaffolding: initial import of relevant packages to @ids-relax-core (512ba80), closes #588269