@design-factory/styles 21.0.2 → 21.0.3
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 +2 -2
- package/scss/components/datepicker/_datepicker.namespace.scss +73 -0
- package/scss/components/dropdown/_dropdown.namespace.scss +68 -0
- package/scss/components/popover/_popover.namespace.scss +257 -0
- package/scss/components/spinner/_spinner.namespace.scss +43 -0
- package/scss/components/tooltip/_tooltip.namespace.scss +137 -0
- package/scss/components/typeahead/_typeahead.namespace.scss +48 -0
- package/scss/namespace.scss +6 -0
package/package.json
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
"name": "@design-factory/styles",
|
|
3
3
|
"description": "Amadeus design system styles",
|
|
4
4
|
"license": "BSD-3-Clause",
|
|
5
|
-
"version": "21.0.
|
|
5
|
+
"version": "21.0.3",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"bootstrap": "5.3.8",
|
|
9
9
|
"@agnos-ui/core-bootstrap": "~0.10.0",
|
|
10
|
-
"@design-factory/tokens": "21.0.
|
|
10
|
+
"@design-factory/tokens": "21.0.3",
|
|
11
11
|
"ag-grid-community": "^35.0.0",
|
|
12
12
|
"@ng-select/ng-select": "^21.0.0"
|
|
13
13
|
},
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// Required to allow container="body" on a datepicker input
|
|
2
|
+
// Users would use this like this: <input ngbDatepicker container="body" datepickerClass="THE_NAMESPACE_CLASS" />
|
|
3
|
+
|
|
4
|
+
@use '../../common.variables' as df;
|
|
5
|
+
|
|
6
|
+
ngb-datepicker#{$df-css-namespace-selector} {
|
|
7
|
+
// From DF datepicker.scss
|
|
8
|
+
border-radius: var(--df-borderRadius-main-medium);
|
|
9
|
+
padding: var(--df-spacing-5);
|
|
10
|
+
box-shadow: df.$df-box-shadow;
|
|
11
|
+
background-color: var(--df-color-inert-neutral-main-background);
|
|
12
|
+
|
|
13
|
+
&.dropdown-menu.show {
|
|
14
|
+
padding: var(--df-spacing-5);
|
|
15
|
+
box-shadow: df.$df-box-shadow;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ngb-dp-header {
|
|
19
|
+
background-color: inherit;
|
|
20
|
+
padding-top: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ngb-dp-month {
|
|
24
|
+
&:first-child .ngb-dp-week {
|
|
25
|
+
padding-inline-start: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:last-child .ngb-dp-week {
|
|
29
|
+
padding-inline-end: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ngb-dp-week:last-child {
|
|
33
|
+
padding-bottom: 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ngb-dp-month-name {
|
|
38
|
+
background-color: inherit;
|
|
39
|
+
font-size: var(--df-typo-sizing-large);
|
|
40
|
+
font-weight: var(--df-typo-weight-medium);
|
|
41
|
+
flex: 1 0 auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.ngb-dp-arrow {
|
|
45
|
+
flex: 0 1 auto;
|
|
46
|
+
width: 2.25rem;
|
|
47
|
+
height: 2.25rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ngb-dp-weekday {
|
|
51
|
+
color: inherit;
|
|
52
|
+
width: 100%;
|
|
53
|
+
font-style: normal;
|
|
54
|
+
font-size: var(--df-typo-sizing-small);
|
|
55
|
+
text-transform: uppercase;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.ngb-dp-week-number {
|
|
59
|
+
min-width: 2.25rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.ngb-dp-day {
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 100%;
|
|
65
|
+
outline: none;
|
|
66
|
+
|
|
67
|
+
&.disabled {
|
|
68
|
+
// override the default look
|
|
69
|
+
cursor: initial;
|
|
70
|
+
pointer-events: initial;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
// Required to allow container="body" on a datepicker or typeahead input
|
|
2
|
+
// Users would use this like this: <input ngbDatepicker container="body" datepickerClass="THE_NAMESPACE_CLASS" />
|
|
3
|
+
// or <input type="text" class="form-control" [ngbTypeahead]="search" container="body" popupClass="THE_NAMESPACE_CLASS" />
|
|
4
|
+
|
|
5
|
+
// Maintaining this requires copy-pasting bootstrap dropdown + DF dropdown.
|
|
6
|
+
|
|
7
|
+
@use '../../common.variables' as df;
|
|
8
|
+
@use 'dropdown.mixins' as dropdown-mixins;
|
|
9
|
+
|
|
10
|
+
#{$df-css-namespace-selector}.dropdown-menu {
|
|
11
|
+
// First part is from bootstrap dropdown.scss
|
|
12
|
+
|
|
13
|
+
// scss-docs-start dropdown-css-vars
|
|
14
|
+
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
|
|
15
|
+
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
|
|
16
|
+
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
|
|
17
|
+
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
|
|
18
|
+
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
|
|
19
|
+
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
|
|
20
|
+
--#{$prefix}dropdown-color: #{$dropdown-color};
|
|
21
|
+
--#{$prefix}dropdown-bg: #{$dropdown-bg};
|
|
22
|
+
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
|
|
23
|
+
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
|
|
24
|
+
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
|
|
25
|
+
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
|
|
26
|
+
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
|
|
27
|
+
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
|
|
28
|
+
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
|
|
29
|
+
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
|
|
30
|
+
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
|
|
31
|
+
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
|
32
|
+
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
|
|
33
|
+
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
|
34
|
+
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
|
|
35
|
+
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
|
|
36
|
+
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
|
|
37
|
+
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
|
|
38
|
+
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
|
|
39
|
+
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
|
|
40
|
+
// scss-docs-end dropdown-css-vars
|
|
41
|
+
|
|
42
|
+
position: absolute;
|
|
43
|
+
z-index: var(--#{$prefix}dropdown-zindex);
|
|
44
|
+
display: none; // none by default, but block on "open" of the menu
|
|
45
|
+
min-width: var(--#{$prefix}dropdown-min-width);
|
|
46
|
+
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
|
|
47
|
+
margin: 0; // Override default margin of ul
|
|
48
|
+
@include font-size(var(--#{$prefix}dropdown-font-size));
|
|
49
|
+
color: var(--#{$prefix}dropdown-color);
|
|
50
|
+
list-style: none;
|
|
51
|
+
background-color: var(--#{$prefix}dropdown-bg);
|
|
52
|
+
background-clip: padding-box;
|
|
53
|
+
border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
|
|
54
|
+
@include border-radius(var(--#{$prefix}dropdown-border-radius));
|
|
55
|
+
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
|
|
56
|
+
|
|
57
|
+
&.show {
|
|
58
|
+
display: block;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// From DF dropdown.scss
|
|
62
|
+
text-align: start;
|
|
63
|
+
box-shadow: var(--df-dropdown-box-shadow);
|
|
64
|
+
|
|
65
|
+
// menu sizing
|
|
66
|
+
@include dropdown-mixins.df-sizes('lg');
|
|
67
|
+
@include dropdown-mixins.df-sizes('sm');
|
|
68
|
+
}
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
// Required to allow container="body" on a popover
|
|
2
|
+
// Users would use this like this: <button ngbPopover="..." container="body" popoverClass="THE_NAMESPACE_CLASS" />
|
|
3
|
+
|
|
4
|
+
// Maintaining this requires copy-pasting bootstrap popover.scss + DF popover.scss.
|
|
5
|
+
|
|
6
|
+
@use 'popover.mixins' as popover-mixins;
|
|
7
|
+
|
|
8
|
+
#{$df-css-namespace-selector}.popover {
|
|
9
|
+
// First part is from bootstrap popover.scss
|
|
10
|
+
|
|
11
|
+
// scss-docs-start popover-css-vars
|
|
12
|
+
--#{$prefix}popover-zindex: #{$zindex-popover};
|
|
13
|
+
--#{$prefix}popover-max-width: #{$popover-max-width};
|
|
14
|
+
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
|
|
15
|
+
--#{$prefix}popover-bg: #{$popover-bg};
|
|
16
|
+
--#{$prefix}popover-border-width: #{$popover-border-width};
|
|
17
|
+
--#{$prefix}popover-border-color: #{$popover-border-color};
|
|
18
|
+
--#{$prefix}popover-border-radius: #{$popover-border-radius};
|
|
19
|
+
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
|
|
20
|
+
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
|
|
21
|
+
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
|
|
22
|
+
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
|
|
23
|
+
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
|
|
24
|
+
--#{$prefix}popover-header-color: #{$popover-header-color};
|
|
25
|
+
--#{$prefix}popover-header-bg: #{$popover-header-bg};
|
|
26
|
+
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
|
|
27
|
+
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
|
|
28
|
+
--#{$prefix}popover-body-color: #{$popover-body-color};
|
|
29
|
+
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
|
|
30
|
+
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
|
|
31
|
+
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
|
|
32
|
+
// scss-docs-end popover-css-vars
|
|
33
|
+
|
|
34
|
+
z-index: var(--#{$prefix}popover-zindex);
|
|
35
|
+
display: block;
|
|
36
|
+
max-width: var(--#{$prefix}popover-max-width);
|
|
37
|
+
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
|
38
|
+
// So reset our font and text properties to avoid inheriting weird values.
|
|
39
|
+
@include reset-text();
|
|
40
|
+
@include font-size(var(--#{$prefix}popover-font-size));
|
|
41
|
+
// Allow breaking very long words so they don't overflow the popover's bounds
|
|
42
|
+
word-wrap: break-word;
|
|
43
|
+
background-color: var(--#{$prefix}popover-bg);
|
|
44
|
+
background-clip: padding-box;
|
|
45
|
+
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
|
|
46
|
+
@include border-radius(var(--#{$prefix}popover-border-radius));
|
|
47
|
+
@include box-shadow(var(--#{$prefix}popover-box-shadow));
|
|
48
|
+
|
|
49
|
+
.popover-arrow {
|
|
50
|
+
display: block;
|
|
51
|
+
width: var(--#{$prefix}popover-arrow-width);
|
|
52
|
+
height: var(--#{$prefix}popover-arrow-height);
|
|
53
|
+
|
|
54
|
+
&::before,
|
|
55
|
+
&::after {
|
|
56
|
+
position: absolute;
|
|
57
|
+
display: block;
|
|
58
|
+
content: '';
|
|
59
|
+
border-color: transparent;
|
|
60
|
+
border-style: solid;
|
|
61
|
+
border-width: 0;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&.bs-popover-top {
|
|
66
|
+
> .popover-arrow {
|
|
67
|
+
bottom: calc(
|
|
68
|
+
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
|
|
69
|
+
); // stylelint-disable-line function-disallowed-list
|
|
70
|
+
|
|
71
|
+
&::before,
|
|
72
|
+
&::after {
|
|
73
|
+
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&::before {
|
|
77
|
+
bottom: 0;
|
|
78
|
+
border-top-color: var(--#{$prefix}popover-arrow-border);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&::after {
|
|
82
|
+
bottom: var(--#{$prefix}popover-border-width);
|
|
83
|
+
border-top-color: var(--#{$prefix}popover-bg);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* rtl:begin:ignore */
|
|
89
|
+
&.bs-popover-end {
|
|
90
|
+
> .popover-arrow {
|
|
91
|
+
left: calc(
|
|
92
|
+
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
|
|
93
|
+
); // stylelint-disable-line function-disallowed-list
|
|
94
|
+
width: var(--#{$prefix}popover-arrow-height);
|
|
95
|
+
height: var(--#{$prefix}popover-arrow-width);
|
|
96
|
+
|
|
97
|
+
&::before,
|
|
98
|
+
&::after {
|
|
99
|
+
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height)
|
|
100
|
+
calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&::before {
|
|
104
|
+
left: 0;
|
|
105
|
+
border-right-color: var(--#{$prefix}popover-arrow-border);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&::after {
|
|
109
|
+
left: var(--#{$prefix}popover-border-width);
|
|
110
|
+
border-right-color: var(--#{$prefix}popover-bg);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* rtl:end:ignore */
|
|
116
|
+
|
|
117
|
+
&.bs-popover-bottom {
|
|
118
|
+
> .popover-arrow {
|
|
119
|
+
top: calc(
|
|
120
|
+
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
|
|
121
|
+
); // stylelint-disable-line function-disallowed-list
|
|
122
|
+
|
|
123
|
+
&::before,
|
|
124
|
+
&::after {
|
|
125
|
+
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&::before {
|
|
129
|
+
top: 0;
|
|
130
|
+
border-bottom-color: var(--#{$prefix}popover-arrow-border);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&::after {
|
|
134
|
+
top: var(--#{$prefix}popover-border-width);
|
|
135
|
+
border-bottom-color: var(--#{$prefix}popover-bg);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// This will remove the popover-header's border just below the arrow
|
|
140
|
+
.popover-header::before {
|
|
141
|
+
position: absolute;
|
|
142
|
+
top: 0;
|
|
143
|
+
left: 50%;
|
|
144
|
+
display: block;
|
|
145
|
+
width: var(--#{$prefix}popover-arrow-width);
|
|
146
|
+
margin-left: calc(-0.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
|
|
147
|
+
content: '';
|
|
148
|
+
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* rtl:begin:ignore */
|
|
153
|
+
&.bs-popover-start {
|
|
154
|
+
> .popover-arrow {
|
|
155
|
+
right: calc(
|
|
156
|
+
-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)
|
|
157
|
+
); // stylelint-disable-line function-disallowed-list
|
|
158
|
+
width: var(--#{$prefix}popover-arrow-height);
|
|
159
|
+
height: var(--#{$prefix}popover-arrow-width);
|
|
160
|
+
|
|
161
|
+
&::before,
|
|
162
|
+
&::after {
|
|
163
|
+
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
|
|
164
|
+
calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&::before {
|
|
168
|
+
right: 0;
|
|
169
|
+
border-left-color: var(--#{$prefix}popover-arrow-border);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&::after {
|
|
173
|
+
right: var(--#{$prefix}popover-border-width);
|
|
174
|
+
border-left-color: var(--#{$prefix}popover-bg);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* rtl:end:ignore */
|
|
180
|
+
|
|
181
|
+
&.bs-popover-auto {
|
|
182
|
+
&[data-popper-placement^='top'] {
|
|
183
|
+
@extend .bs-popover-top;
|
|
184
|
+
}
|
|
185
|
+
&[data-popper-placement^='right'] {
|
|
186
|
+
@extend .bs-popover-end;
|
|
187
|
+
}
|
|
188
|
+
&[data-popper-placement^='bottom'] {
|
|
189
|
+
@extend .bs-popover-bottom;
|
|
190
|
+
}
|
|
191
|
+
&[data-popper-placement^='left'] {
|
|
192
|
+
@extend .bs-popover-start;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// From DF popover.scss
|
|
197
|
+
|
|
198
|
+
// have to set this as $enable-shadows is false
|
|
199
|
+
box-shadow: var(--df-popover-box-shadow);
|
|
200
|
+
|
|
201
|
+
@include media-breakpoint-down(sm) {
|
|
202
|
+
--df-popover-max-width: 270px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@include popover-mixins.popover-sizing(
|
|
206
|
+
var(--df-spacing-5),
|
|
207
|
+
var(--df-spacing-3),
|
|
208
|
+
var(--df-typo-sizing-2xlarge),
|
|
209
|
+
var(--df-typo-sizing-default),
|
|
210
|
+
var(--df-borderRadius-main-medium)
|
|
211
|
+
);
|
|
212
|
+
|
|
213
|
+
.popover-header {
|
|
214
|
+
border-bottom: none;
|
|
215
|
+
line-height: 1.3;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.popover-body {
|
|
219
|
+
line-height: 1.25;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
&.popover-sm {
|
|
223
|
+
@include popover-mixins.popover-sizing(
|
|
224
|
+
var(--df-spacing-5),
|
|
225
|
+
var(--df-spacing-3),
|
|
226
|
+
var(--df-typo-sizing-large),
|
|
227
|
+
var(--df-typo-sizing-small),
|
|
228
|
+
var(--df-borderRadius-main-small)
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
&.popover-lg {
|
|
233
|
+
@include popover-mixins.popover-sizing(
|
|
234
|
+
var(--df-spacing-6),
|
|
235
|
+
var(--df-spacing-4),
|
|
236
|
+
var(--df-typo-sizing-3xlarge),
|
|
237
|
+
var(--df-typo-sizing-large),
|
|
238
|
+
var(--df-borderRadius-main-large)
|
|
239
|
+
);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
&.bs-popover-top > .popover-arrow {
|
|
243
|
+
bottom: -1 * $popover-arrow-height;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
&.bs-popover-end > .popover-arrow {
|
|
247
|
+
left: -1 * $popover-arrow-height;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
&.bs-popover-bottom > .popover-arrow {
|
|
251
|
+
top: -1 * $popover-arrow-height;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
&.bs-popover-start > .popover-arrow {
|
|
255
|
+
right: -1 * $popover-arrow-height;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
// Required to use a global progress indicator
|
|
2
|
+
|
|
3
|
+
// Maintaining this requires writing by hand all css that was put by DfProgressIndicatorService and copy css from _spinner.scss
|
|
4
|
+
|
|
5
|
+
body.df-progressindicator-open {
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
#{$df-css-namespace-selector} {
|
|
10
|
+
&.df-progressindicator-backdrop,
|
|
11
|
+
&.df-progressindicator-container {
|
|
12
|
+
position: fixed;
|
|
13
|
+
inset: 0;
|
|
14
|
+
z-index: 1080;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&.df-progressindicator-backdrop {
|
|
18
|
+
opacity: 0.5;
|
|
19
|
+
|
|
20
|
+
&.df-progressindicator-backdrop-global {
|
|
21
|
+
background-color: var(--df-color-backdrop-background);
|
|
22
|
+
}
|
|
23
|
+
&.df-progressindicator-backdrop-contextual {
|
|
24
|
+
background-color: var(--df-color-neutral-alt-default-background);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&.df-progressindicator-container {
|
|
29
|
+
display: flex;
|
|
30
|
+
background-color: transparent;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
|
|
33
|
+
&.align-items-center {
|
|
34
|
+
align-items: center;
|
|
35
|
+
}
|
|
36
|
+
&.align-items-start {
|
|
37
|
+
align-items: flex-start;
|
|
38
|
+
}
|
|
39
|
+
&.align-items-end {
|
|
40
|
+
align-items: flex-end;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
// Required to allow container="body" on a tooltip
|
|
2
|
+
// Users would use this like this: <button ngbTooltip="..." container="body" tooltipClass="THE_NAMESPACE_CLASS" />
|
|
3
|
+
|
|
4
|
+
// Maintaining this requires copy-pasting bootstrap tooltip.scss + DF tooltip.scss.
|
|
5
|
+
|
|
6
|
+
#{$df-css-namespace-selector}.tooltip {
|
|
7
|
+
// First part is from bootstrap tooltip.scss
|
|
8
|
+
|
|
9
|
+
// scss-docs-start tooltip-css-vars
|
|
10
|
+
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
|
|
11
|
+
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
|
|
12
|
+
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
|
|
13
|
+
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
|
|
14
|
+
--#{$prefix}tooltip-margin: #{$tooltip-margin};
|
|
15
|
+
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
|
|
16
|
+
--#{$prefix}tooltip-color: #{$tooltip-color};
|
|
17
|
+
--#{$prefix}tooltip-bg: #{$tooltip-bg};
|
|
18
|
+
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
|
|
19
|
+
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
|
|
20
|
+
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
|
|
21
|
+
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
|
|
22
|
+
// scss-docs-end tooltip-css-vars
|
|
23
|
+
|
|
24
|
+
z-index: var(--#{$prefix}tooltip-zindex);
|
|
25
|
+
display: block;
|
|
26
|
+
margin: var(--#{$prefix}tooltip-margin);
|
|
27
|
+
@include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
|
|
28
|
+
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
|
29
|
+
// So reset our font and text properties to avoid inheriting weird values.
|
|
30
|
+
@include reset-text();
|
|
31
|
+
@include font-size(var(--#{$prefix}tooltip-font-size));
|
|
32
|
+
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
|
33
|
+
word-wrap: break-word;
|
|
34
|
+
opacity: 0;
|
|
35
|
+
|
|
36
|
+
&.show {
|
|
37
|
+
opacity: var(--#{$prefix}tooltip-opacity);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.tooltip-arrow {
|
|
41
|
+
display: block;
|
|
42
|
+
width: var(--#{$prefix}tooltip-arrow-width);
|
|
43
|
+
height: var(--#{$prefix}tooltip-arrow-height);
|
|
44
|
+
|
|
45
|
+
&::before {
|
|
46
|
+
position: absolute;
|
|
47
|
+
content: '';
|
|
48
|
+
border-color: transparent;
|
|
49
|
+
border-style: solid;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.bs-tooltip-top .tooltip-arrow {
|
|
54
|
+
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
|
55
|
+
|
|
56
|
+
&::before {
|
|
57
|
+
top: -1px;
|
|
58
|
+
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
|
59
|
+
border-top-color: var(--#{$prefix}tooltip-bg);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* rtl:begin:ignore */
|
|
64
|
+
&.bs-tooltip-end .tooltip-arrow {
|
|
65
|
+
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
|
66
|
+
width: var(--#{$prefix}tooltip-arrow-height);
|
|
67
|
+
height: var(--#{$prefix}tooltip-arrow-width);
|
|
68
|
+
|
|
69
|
+
&::before {
|
|
70
|
+
right: -1px;
|
|
71
|
+
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height)
|
|
72
|
+
calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
|
73
|
+
border-right-color: var(--#{$prefix}tooltip-bg);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* rtl:end:ignore */
|
|
78
|
+
|
|
79
|
+
&.bs-tooltip-bottom .tooltip-arrow {
|
|
80
|
+
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
|
81
|
+
|
|
82
|
+
&::before {
|
|
83
|
+
bottom: -1px;
|
|
84
|
+
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
|
85
|
+
border-bottom-color: var(--#{$prefix}tooltip-bg);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* rtl:begin:ignore */
|
|
90
|
+
&.bs-tooltip-start .tooltip-arrow {
|
|
91
|
+
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
|
92
|
+
width: var(--#{$prefix}tooltip-arrow-height);
|
|
93
|
+
height: var(--#{$prefix}tooltip-arrow-width);
|
|
94
|
+
|
|
95
|
+
&::before {
|
|
96
|
+
left: -1px;
|
|
97
|
+
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5)
|
|
98
|
+
var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
|
99
|
+
border-left-color: var(--#{$prefix}tooltip-bg);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* rtl:end:ignore */
|
|
104
|
+
|
|
105
|
+
&.bs-tooltip-auto {
|
|
106
|
+
&[data-popper-placement^='top'] {
|
|
107
|
+
@extend .bs-tooltip-top;
|
|
108
|
+
}
|
|
109
|
+
&[data-popper-placement^='right'] {
|
|
110
|
+
@extend .bs-tooltip-end;
|
|
111
|
+
}
|
|
112
|
+
&[data-popper-placement^='bottom'] {
|
|
113
|
+
@extend .bs-tooltip-bottom;
|
|
114
|
+
}
|
|
115
|
+
&[data-popper-placement^='left'] {
|
|
116
|
+
@extend .bs-tooltip-start;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// From DF tooltip.scss
|
|
121
|
+
|
|
122
|
+
&.tooltip-inner-sm {
|
|
123
|
+
.tooltip-inner {
|
|
124
|
+
border-radius: var(--df-borderRadius-main-small);
|
|
125
|
+
font-size: var(--df-typo-sizing-small);
|
|
126
|
+
padding: var(--df-spacing-2) var(--df-spacing-3);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
&.tooltip-inner-lg {
|
|
130
|
+
.tooltip-inner {
|
|
131
|
+
border-radius: var(--df-borderRadius-main-large);
|
|
132
|
+
font-size: var(--df-typo-sizing-large);
|
|
133
|
+
// TODO vertical padding of tooltip lg is not mapped to a token yet in Figma
|
|
134
|
+
padding: 0.375rem var(--df-spacing-6);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// Required to allow container="body" on a typeahead input
|
|
2
|
+
// Users would use this like this: <input type="text" class="form-control" [ngbTypeahead]="search" container="body" popupClass="THE_NAMESPACE_CLASS" />
|
|
3
|
+
|
|
4
|
+
@use '../../common.variables' as df;
|
|
5
|
+
|
|
6
|
+
ngb-typeahead-window#{$df-css-namespace-selector} {
|
|
7
|
+
// From DF typeahead.scss
|
|
8
|
+
max-width: 40rem;
|
|
9
|
+
width: max-content;
|
|
10
|
+
max-height: 240px;
|
|
11
|
+
overflow: auto;
|
|
12
|
+
|
|
13
|
+
.dropdown-item {
|
|
14
|
+
white-space: normal;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
// Hover of a typeahead item uses active state of the dropdown item
|
|
17
|
+
&:not(:disabled):not(.disabled).active {
|
|
18
|
+
color: var(--df-color-neutral-alt-hovered-foreground);
|
|
19
|
+
background-color: var(--df-color-primary-alt-hovered-background);
|
|
20
|
+
font-weight: var(--df-typo-weight-regular);
|
|
21
|
+
|
|
22
|
+
&:active {
|
|
23
|
+
color: var(--df-color-neutral-alt-pressed-foreground);
|
|
24
|
+
background-color: var(--df-color-primary-alt-pressed-background);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ngb-highlight {
|
|
28
|
+
color: var(--df-color-primary-alt-hovered-foreground);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
.ngb-highlight {
|
|
32
|
+
color: var(--df-color-primary-alt-default-foreground);
|
|
33
|
+
font-weight: var(--df-typo-weight-bold);
|
|
34
|
+
}
|
|
35
|
+
:is(span[class^='icon-'], span[class^='fa-']) {
|
|
36
|
+
position: relative;
|
|
37
|
+
top: 0.1rem;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// for small and extra small device only
|
|
43
|
+
@include media-breakpoint-down(sm) {
|
|
44
|
+
// stylelint-disable-next-line selector-type-no-unknown
|
|
45
|
+
ngb-typeahead-window.dropdown-menu#{$df-css-namespace-selector} {
|
|
46
|
+
max-width: 90vw;
|
|
47
|
+
}
|
|
48
|
+
}
|
package/scss/namespace.scss
CHANGED
|
@@ -175,7 +175,13 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
|
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
@import 'components/carousel/carousel.namespace';
|
|
178
|
+
@import 'components/datepicker/datepicker.namespace';
|
|
179
|
+
@import 'components/dropdown/dropdown.namespace';
|
|
178
180
|
@import 'components/modal/modal.namespace';
|
|
179
181
|
@import 'components/pagination/pagination.namespace';
|
|
182
|
+
@import 'components/popover/popover.namespace';
|
|
180
183
|
@import 'components/select/select.namespace';
|
|
184
|
+
@import 'components/spinner/spinner.namespace';
|
|
185
|
+
@import 'components/tooltip/tooltip.namespace';
|
|
186
|
+
@import 'components/typeahead/typeahead.namespace';
|
|
181
187
|
/* stylelint-enable no-invalid-position-at-import-rule */
|