@porscheinformatik/clr-addons 12.1.0 → 12.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/back-button/back-button.scss +7 -0
- package/src/brand-avatar/brand-avatar.scss +26 -0
- package/src/breadcrumb/breadcrumb.scss +21 -0
- package/src/collapse-expand-section/collapse-expand-section.scss +32 -0
- package/src/components.clr-addons.scss +395 -0
- package/src/components.variables.clr-addons.scss +42 -0
- package/src/content-panel/content-panel.scss +90 -0
- package/src/date-time-container/date-time-container.scss +18 -0
- package/src/dot-pager/dot-pager.scss +11 -0
- package/src/flow-bar/flow-bar.scss +95 -0
- package/src/generic-quick-list/generic-quick-list.scss +219 -0
- package/src/header.clr-addons.scss +377 -0
- package/src/history/history.scss +25 -0
- package/src/letter-avatar/letter-avatar.scss +27 -0
- package/src/location-bar/location-bar-node/location-bar-node.component.scss +54 -0
- package/src/main-nav-group/main-nav-group.scss +156 -0
- package/src/mixins.scss +38 -0
- package/src/mobile.scss +103 -0
- package/src/multilingual/multilingual.scss +39 -0
- package/src/notification/notification.scss +94 -0
- package/src/numericfield/numeric-field.scss +18 -0
- package/src/paged-search-result-list/paged-search-result-list.scss +10 -0
- package/src/pager/pager.scss +22 -0
- package/src/progress-spinner/progress-spinner.scss +15 -0
- package/src/quick-list/quick-list.scss +23 -0
- package/src/searchfield/search-field.scss +33 -0
- package/src/themes/phs/css.overrides.scss +148 -0
- package/src/themes/phs/phs-theme.scss +13 -0
- package/src/themes/phs/theme.clarity.scss +262 -0
- package/src/themes/phs/variables.color.scss +41 -0
- package/src/treetable/treetable.scss +338 -0
- package/src/view-edit-section/view-edit-section.scss +38 -0
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@include exports('letter-avatar.clr-addons') {
|
|
2
|
+
.avatar-circle {
|
|
3
|
+
display: flex;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.avatar-initials {
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
align-items: center;
|
|
10
|
+
|
|
11
|
+
background-color: #707070;
|
|
12
|
+
border-radius: 100%;
|
|
13
|
+
color: var(--white);
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
letter-spacing: normal;
|
|
16
|
+
text-transform: uppercase;
|
|
17
|
+
font-size: 0.8em;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:hover,
|
|
21
|
+
:focus-within {
|
|
22
|
+
> .clr-avatar .avatar-initials {
|
|
23
|
+
background-color: var(--clr-btn-link-color);
|
|
24
|
+
cursor: default;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@include exports('location-bar-node.clr-addons') {
|
|
2
|
+
.location-bar-node {
|
|
3
|
+
.btn {
|
|
4
|
+
margin-top: 0;
|
|
5
|
+
margin-bottom: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.dropdown {
|
|
9
|
+
.dropdown-menu {
|
|
10
|
+
max-width: 12.5rem;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.unselectable-node {
|
|
15
|
+
display: inline-block;
|
|
16
|
+
padding: 0 0.5rem;
|
|
17
|
+
text-transform: uppercase;
|
|
18
|
+
font-size: 0.458333rem;
|
|
19
|
+
font-weight: 500;
|
|
20
|
+
letter-spacing: 0.073em;
|
|
21
|
+
max-width: 15rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.last-level {
|
|
25
|
+
font-weight: 700;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.btn {
|
|
29
|
+
min-width: unset;
|
|
30
|
+
|
|
31
|
+
&:focus {
|
|
32
|
+
outline: none;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
color: var(--clr-btn-default-hover-color);
|
|
35
|
+
|
|
36
|
+
.unselected {
|
|
37
|
+
color: var(--clr-btn-default-hover-color);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.dropdown .dropdown-toggle .caret-icon {
|
|
43
|
+
top: 30%;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.unselected {
|
|
47
|
+
margin-top: -0.14rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.selected-child {
|
|
51
|
+
background: var(--clr-global-selection-color);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
@include exports('main-nav-group.clr-addons') {
|
|
2
|
+
header,
|
|
3
|
+
.header {
|
|
4
|
+
.header-nav .nav-link {
|
|
5
|
+
text-align: left;
|
|
6
|
+
|
|
7
|
+
&:first-of-type::before,
|
|
8
|
+
&:last-of-type::after {
|
|
9
|
+
display: none;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.main-container:not(.open-hamburger-menu) .header-nav {
|
|
15
|
+
@media screen and (max-width: map-get($clr-grid-breakpoints, lg)) {
|
|
16
|
+
.header-overflow {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.collapsible {
|
|
22
|
+
opacity: 1;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
|
|
25
|
+
&:hover .nav-text {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.nav-text {
|
|
30
|
+
opacity: 0.65;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
|
|
33
|
+
& clr-icon {
|
|
34
|
+
position: relative;
|
|
35
|
+
transform: unset;
|
|
36
|
+
top: 0;
|
|
37
|
+
left: 0.2rem;
|
|
38
|
+
width: 0.5rem;
|
|
39
|
+
height: 0.5rem;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.nav-list {
|
|
44
|
+
display: none;
|
|
45
|
+
|
|
46
|
+
.nav-link {
|
|
47
|
+
color: var(--clr-dropdown-item-color);
|
|
48
|
+
opacity: 1;
|
|
49
|
+
padding: 1px 1rem 0;
|
|
50
|
+
height: 1.25rem;
|
|
51
|
+
line-height: 1.25rem;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
text-overflow: ellipsis;
|
|
54
|
+
|
|
55
|
+
&:hover {
|
|
56
|
+
background-color: var(--clr-dropdown-bg-hover-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&.active {
|
|
60
|
+
background: var(--clr-dropdown-selection-color);
|
|
61
|
+
color: var(--clr-dropdown-active-text-color);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
input[type='checkbox']:checked ~ .nav-list {
|
|
67
|
+
visibility: visible;
|
|
68
|
+
display: flex;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.main-container.open-hamburger-menu .header .header-nav {
|
|
74
|
+
&.clr-nav-level-1 .header-overflow {
|
|
75
|
+
overflow-y: auto;
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
height: 100vh;
|
|
79
|
+
|
|
80
|
+
.nav-link .nav-text {
|
|
81
|
+
font-weight: var(--clr-font-weight-bold);
|
|
82
|
+
padding-right: 1.5rem;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.nav-link {
|
|
87
|
+
padding: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.collapsible {
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
display: flex;
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
|
|
95
|
+
.nav-text {
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&.nav-link:hover {
|
|
100
|
+
background-color: transparent;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
clr-icon {
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 0.4rem;
|
|
106
|
+
right: 0.5rem;
|
|
107
|
+
left: unset;
|
|
108
|
+
transform: rotate(-90deg);
|
|
109
|
+
width: 0.666667rem;
|
|
110
|
+
height: 0.666667rem;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.nav-list {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
input[type='checkbox']:checked {
|
|
118
|
+
~ label clr-icon {
|
|
119
|
+
transform: unset;
|
|
120
|
+
}
|
|
121
|
+
~ .nav-list {
|
|
122
|
+
display: flex;
|
|
123
|
+
visibility: visible;
|
|
124
|
+
position: relative;
|
|
125
|
+
background: transparent;
|
|
126
|
+
border: 0;
|
|
127
|
+
box-shadow: 0 0;
|
|
128
|
+
padding: 0;
|
|
129
|
+
|
|
130
|
+
.nav-link {
|
|
131
|
+
padding: 0 1.5rem 0 2rem;
|
|
132
|
+
height: 1.5rem;
|
|
133
|
+
line-height: 1.5rem;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.main-nav-group {
|
|
141
|
+
&.active .collapsible.active .nav-text {
|
|
142
|
+
opacity: 0.99;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.collapsible {
|
|
146
|
+
&:active,
|
|
147
|
+
&:hover {
|
|
148
|
+
outline-width: 0;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
> input[type='checkbox'] {
|
|
152
|
+
display: none;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
package/src/mixins.scss
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
$imported-modules: () !default;
|
|
2
|
+
@mixin exports($name) {
|
|
3
|
+
//check if they have been imported
|
|
4
|
+
@if (index($imported-modules, $name) == null) {
|
|
5
|
+
$imported-modules: append($imported-modules, $name) !global;
|
|
6
|
+
@content;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@function deHexColorString($colorStr) {
|
|
11
|
+
@if str-index($colorStr, 'white') != null {
|
|
12
|
+
@return 'ffffff';
|
|
13
|
+
}
|
|
14
|
+
@if str-index($colorStr, 'black') != null {
|
|
15
|
+
@return '000000';
|
|
16
|
+
}
|
|
17
|
+
@if str-index($colorStr, '#') == null {
|
|
18
|
+
@return $colorStr;
|
|
19
|
+
}
|
|
20
|
+
@return str-slice($colorStr, 2);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
$svg_data: 'data:image/svg+xml;charset=utf8';
|
|
24
|
+
|
|
25
|
+
@function generateSpinnerIcon($fillBgColor: #000000, $fillSnakeColor: #0077b8, $opacityBg: 0.15) {
|
|
26
|
+
$spinner-icon: '%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23' +
|
|
27
|
+
deHexColorString($fillBgColor + '') + '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%20' +
|
|
28
|
+
$opacityBg +
|
|
29
|
+
'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23' +
|
|
30
|
+
deHexColorString($fillSnakeColor + '') /* the blue, smaller part of the ring*/ +
|
|
31
|
+
'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A';
|
|
32
|
+
@return url('#{$svg_data},#{$spinner-icon}');
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@function generateEmptyTreetablePlaceholder() {
|
|
36
|
+
$placeholder-image: '%3Csvg%20viewBox%3D%220%200%2060%2072%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22path-1%22%20cx%3D%2230%22%20cy%3D%2261.7666667%22%20rx%3D%2215.4512904%22%20ry%3D%224.73333333%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20maskContentUnits%3D%22userSpaceOnUse%22%20maskUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2230.9025808%22%20height%3D%229.46666667%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Artboard%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Oval-10%22%20stroke%3D%22%23C1DFEF%22%20mask%3D%22url(%23mask-2)%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22square%22%20stroke-dasharray%3D%223%2C6%2C3%2C5%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M38.4613647%2C18.1642456%20L30.9890137%2C34.9141846%20L31%2C47%20L32.5977783%2C46.5167236%20L32.5977783%2C34.9141846%20L51.0673218%2C15.7560425%20C51.0673218%2C15.7560425%2048.6295166%2C16.6542969%2044.9628906%2C17.3392334%20C41.2962646%2C18.0241699%2038.4613647%2C18.1642456%2038.4613647%2C18.1642456%20Z%22%20id%3D%22Path-195%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.74639226%2C12.5661855%20L4.62065726%2C12.1605348%20L5.3515414%2C11.1625044%20L5.77622385%2C11.159939%20L6.20936309%2C12.5573481%20L4.74639226%2C12.5661855%20Z%20M6.20936309%2C12.5573481%20L6.32542632%2C12.9317954%20L28.4963855%2C34.8796718%20L28.4963855%2C47.8096691%20L32.6%2C46.4836513%20L32.6%2C34.8992365%20L53.973494%2C12.7035813%20L53.973494%2C12.2688201%20L6.20936309%2C12.5573481%20Z%20M55.373494%2C10.8603376%20L55.373494%2C13.2680664%20L34%2C35.4637216%20L34%2C47.5025401%20L27.0963855%2C49.7333333%20L27.0963855%2C35.4637219%20L5.09179688%2C13.680542%20L4.31325301%2C11.1687764%20L55.373494%2C10.8603376%20Z%22%20id%3D%22Path-149%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22Oval-9%22%20fill%3D%22%23FFFFFF%22%20cx%3D%2230%22%20cy%3D%2211.785654%22%20rx%3D%2226%22%20ry%3D%226.78565401%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M30%2C17.171308%20C36.8772177%2C17.171308%2043.3112282%2C16.4610701%2048.0312371%2C15.2292106%20C50.2777611%2C14.6428977%2052.0507619%2C13.9579677%2053.2216231%2C13.2354973%20C54.1938565%2C12.6355886%2054.6%2C12.1175891%2054.6%2C11.785654%20C54.6%2C11.4537189%2054.1938565%2C10.9357194%2053.2216231%2C10.3358107%20C52.0507619%2C9.61334032%2050.2777611%2C8.92841034%2048.0312371%2C8.34209746%20C43.3112282%2C7.11023795%2036.8772177%2C6.4%2030%2C6.4%20C23.1227823%2C6.4%2016.6887718%2C7.11023795%2011.9687629%2C8.34209746%20C9.72223886%2C8.92841034%207.94923814%2C9.61334032%206.77837689%2C10.3358107%20C5.8061435%2C10.9357194%205.4%2C11.4537189%205.4%2C11.785654%20C5.4%2C12.1175891%205.8061435%2C12.6355886%206.77837689%2C13.2354973%20C7.94923814%2C13.9579677%209.72223886%2C14.6428977%2011.9687629%2C15.2292106%20C16.6887718%2C16.4610701%2023.1227823%2C17.171308%2030%2C17.171308%20Z%20M30%2C18.571308%20C15.6405965%2C18.571308%204%2C15.5332672%204%2C11.785654%20C4%2C8.03804078%2015.6405965%2C5%2030%2C5%20C44.3594035%2C5%2056%2C8.03804078%2056%2C11.785654%20C56%2C15.5332672%2044.3594035%2C18.571308%2030%2C18.571308%20Z%22%20id%3D%22Oval-9-Copy%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.2608643%2C7.14562988%20L22.727356%2C16.9047241%20C22.727356%2C16.9047241%2015.3006592%2C16.3911743%2010.276001%2C14.7511597%20C5.25134277%2C13.111145%205.38031006%2C11.8284302%205.38031006%2C11.6882935%20C5.38031006%2C10.4832831%208.16633152%2C9.41877716%2011.114563%2C8.57324219%20C14.549319%2C7.58817492%2018.2608643%2C7.14562988%2018.2608643%2C7.14562988%20Z%22%20id%3D%22Path-196%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E';
|
|
37
|
+
@return url('#{$svg_data},#{$placeholder-image}');
|
|
38
|
+
}
|
package/src/mobile.scss
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
@media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
|
|
2
|
+
.open-overflow-menu {
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.header {
|
|
7
|
+
position: fixed;
|
|
8
|
+
width: 100%;
|
|
9
|
+
z-index: map-get($clr-layers, sidepanel);
|
|
10
|
+
top: 0;
|
|
11
|
+
left: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.content-header {
|
|
15
|
+
padding: 0 0.5rem;
|
|
16
|
+
|
|
17
|
+
.command-bar {
|
|
18
|
+
margin-right: 0;
|
|
19
|
+
align-items: center;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.main-container .content-container .content-area,
|
|
24
|
+
.content-container .content-area-footer,
|
|
25
|
+
.content-panel-content-wrapper {
|
|
26
|
+
padding: 0.5rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
//prevents the upper body part from being hidden by the fixed header
|
|
30
|
+
body {
|
|
31
|
+
padding-top: var(--clr-header-height);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
//main-container needs the display:block property in order to work properly on safari
|
|
35
|
+
.main-container {
|
|
36
|
+
display: block;
|
|
37
|
+
overflow-y: auto;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.u-main-container {
|
|
41
|
+
min-height: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
//every container which contains .content-area-footer class needs padding-bottom
|
|
45
|
+
//due to fixed positioning of the .content-area-footer
|
|
46
|
+
.content-container-fixed-footer {
|
|
47
|
+
padding-bottom: var(--clr-footer-height);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
//Make footer sticky on sm screen size as the .main-container class gets the property display:block (instead of display:flex)
|
|
51
|
+
.content-container {
|
|
52
|
+
.content-area-footer {
|
|
53
|
+
position: fixed;
|
|
54
|
+
width: 100%;
|
|
55
|
+
height: var(--clr-footer-height);
|
|
56
|
+
// Sticky footer should be shown above datagrid-host but below column-switch
|
|
57
|
+
z-index: map-get($clr-layers, datagrid-host) + 5;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.modal {
|
|
64
|
+
.modal-header,
|
|
65
|
+
.modal-footer {
|
|
66
|
+
padding-right: 0;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.card {
|
|
71
|
+
margin-top: 0.5rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.signpost {
|
|
75
|
+
.signpost-content {
|
|
76
|
+
width: max-content;
|
|
77
|
+
min-width: 5rem;
|
|
78
|
+
max-width: calc(100% - 2rem);
|
|
79
|
+
margin: auto;
|
|
80
|
+
position: fixed !important;
|
|
81
|
+
top: 0 !important;
|
|
82
|
+
bottom: 0 !important;
|
|
83
|
+
left: 0 !important;
|
|
84
|
+
right: 0 !important;
|
|
85
|
+
height: max-content !important;
|
|
86
|
+
transform: unset !important;
|
|
87
|
+
|
|
88
|
+
.popover-pointer {
|
|
89
|
+
display: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.signpost-action.close {
|
|
93
|
+
width: 1rem;
|
|
94
|
+
height: 1rem;
|
|
95
|
+
|
|
96
|
+
clr-icon {
|
|
97
|
+
width: 20px;
|
|
98
|
+
height: 20px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@include exports('multilingual.clr-addons') {
|
|
2
|
+
.clr-multilingual {
|
|
3
|
+
.clr-control-container {
|
|
4
|
+
display: flex;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.clr-multilingual-button {
|
|
8
|
+
line-height: 0.458333rem;
|
|
9
|
+
height: 1rem;
|
|
10
|
+
min-width: 3.2rem;
|
|
11
|
+
max-width: 3.2rem;
|
|
12
|
+
--clr-btn-border-radius: 0.5rem;
|
|
13
|
+
|
|
14
|
+
&:focus {
|
|
15
|
+
outline: none;
|
|
16
|
+
color: var(--clr-btn-default-outline-hover-color);
|
|
17
|
+
background-color: var(--clr-btn-default-outline-hover-bg-color);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.clr-multilingual-dd-entry {
|
|
22
|
+
padding-left: 0.5rem;
|
|
23
|
+
padding-right: 0.5rem;
|
|
24
|
+
|
|
25
|
+
.label {
|
|
26
|
+
text-transform: uppercase;
|
|
27
|
+
width: 2rem;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
clr-multilingual-selector {
|
|
32
|
+
margin-right: 0.3rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.clr-multi-input-wrapper {
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
@mixin progress-color($alertLevel, $color) {
|
|
2
|
+
&.#{$alertLevel} {
|
|
3
|
+
progress {
|
|
4
|
+
color: $color;
|
|
5
|
+
|
|
6
|
+
&::-webkit-progress-value {
|
|
7
|
+
background-color: $color;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&::-moz-progress-bar {
|
|
11
|
+
background-color: $color;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@include exports('notification.clr-addons') {
|
|
18
|
+
.notification {
|
|
19
|
+
&__wrapper {
|
|
20
|
+
position: fixed;
|
|
21
|
+
z-index: map-get($clr-layers, tooltips) + 1;
|
|
22
|
+
top: 36px;
|
|
23
|
+
width: 400px;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
border-radius: 4px;
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
|
|
30
|
+
@media screen and (max-width: map-get($clr-grid-breakpoints, sm)) {
|
|
31
|
+
width: calc(100% - 2rem);
|
|
32
|
+
margin: 0 1rem;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.progress {
|
|
37
|
+
height: 0.5em;
|
|
38
|
+
position: absolute;
|
|
39
|
+
z-index: 1;
|
|
40
|
+
|
|
41
|
+
@include progress-color('info', var(--clr-notification-progress-info-bar-color));
|
|
42
|
+
@include progress-color('success', var(--clr-progress-alt-color-1));
|
|
43
|
+
@include progress-color('warning', var(--clr-progress-alt-color-3));
|
|
44
|
+
@include progress-color('danger', var(--clr-progress-alt-color-2));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.alert-items {
|
|
48
|
+
padding: 0.333333rem calc(0.75rem - 1px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.alert-app-level {
|
|
52
|
+
font-size: 14px;
|
|
53
|
+
|
|
54
|
+
.alert-icon {
|
|
55
|
+
height: 1.4rem;
|
|
56
|
+
width: 1.4rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.alert-items {
|
|
60
|
+
padding-top: 0.86rem;
|
|
61
|
+
padding-bottom: 0.86rem;
|
|
62
|
+
|
|
63
|
+
.alert-item {
|
|
64
|
+
justify-content: left;
|
|
65
|
+
|
|
66
|
+
.alert-text {
|
|
67
|
+
white-space: pre-wrap;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.alert-icon-wrapper {
|
|
73
|
+
margin-top: 0.05rem;
|
|
74
|
+
height: 1.2rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.close {
|
|
78
|
+
flex: 0 0 2.266667rem;
|
|
79
|
+
height: 3rem;
|
|
80
|
+
width: 2rem;
|
|
81
|
+
|
|
82
|
+
&:focus {
|
|
83
|
+
box-shadow: none;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
clr-icon {
|
|
87
|
+
margin: auto 0;
|
|
88
|
+
height: calc(1.3rem - 1px);
|
|
89
|
+
width: calc(1.3rem - 1px);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@include exports('numericfield.clr-addons') {
|
|
2
|
+
.numeric-input-wrapper {
|
|
3
|
+
position: relative;
|
|
4
|
+
|
|
5
|
+
.unit {
|
|
6
|
+
position: absolute;
|
|
7
|
+
font-size: 13px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.unit-left {
|
|
11
|
+
left: 0.25rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.unit-right {
|
|
15
|
+
right: 0.25rem;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@include exports('pager.clr-addons') {
|
|
2
|
+
.pager {
|
|
3
|
+
.btn {
|
|
4
|
+
min-width: 1.5rem;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
button:disabled {
|
|
8
|
+
border-color: var(--clr-btn-default-color);
|
|
9
|
+
opacity: 1;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
@media (hover: none) {
|
|
13
|
+
.pager .btn:not(.btn-primary):hover {
|
|
14
|
+
background-color: var(--clr-btn-default-bg-color);
|
|
15
|
+
color: var(--clr-btn-default-color);
|
|
16
|
+
}
|
|
17
|
+
.pager .btn.btn-primary:hover {
|
|
18
|
+
background-color: var(--clr-btn-primary-bg-color);
|
|
19
|
+
color: var(--clr-btn-primary-color);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@include exports('spinner.clr-addons') {
|
|
2
|
+
.progress-spinner-overlay {
|
|
3
|
+
background-color: var(--white);
|
|
4
|
+
opacity: 0.8;
|
|
5
|
+
position: absolute;
|
|
6
|
+
top: 0;
|
|
7
|
+
left: 0;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
align-items: center;
|
|
13
|
+
z-index: 99999;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@include exports('quick-list.clr-addons') {
|
|
2
|
+
.quick-list {
|
|
3
|
+
.quick-list-option {
|
|
4
|
+
display: flex;
|
|
5
|
+
margin-bottom: 0.25rem;
|
|
6
|
+
.quick-list-trash {
|
|
7
|
+
margin-top: -0.25rem;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
.quick-list-input {
|
|
11
|
+
flex: 1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.quick-list-select {
|
|
15
|
+
width: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.quick-list-add {
|
|
19
|
+
padding: 0;
|
|
20
|
+
text-align: left;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@include exports('searchfield.clr-addons') {
|
|
2
|
+
.search-input-wrapper {
|
|
3
|
+
position: relative;
|
|
4
|
+
|
|
5
|
+
.search-input {
|
|
6
|
+
padding-left: 1.4rem;
|
|
7
|
+
padding-right: 1.2rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&.has-value {
|
|
11
|
+
.delete-button {
|
|
12
|
+
display: inline-block;
|
|
13
|
+
position: absolute;
|
|
14
|
+
right: 0;
|
|
15
|
+
top: 0.25rem;
|
|
16
|
+
height: 16px;
|
|
17
|
+
line-height: 1rem;
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.delete-button {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.search-symbol {
|
|
28
|
+
position: absolute;
|
|
29
|
+
left: 0.25rem;
|
|
30
|
+
top: 0.25rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|